Refacto scroll + Aggregate queries for view groups (#9089)

Closes https://github.com/twentyhq/private-issues/issues/217.

Refactoring scroll not to cause table-wide re-render when opening a
dropdown (triggering a scroll lock) in the table.

packages/twenty-front/src/hooks/useScrollRestoration.ts

@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
-import { useLocation, useNavigation } from 'react-router-dom';
+import { useNavigation } from 'react-router-dom';
-import { useRecoilState, useRecoilValue } from 'recoil';
 
-import { overlayScrollbarsState } from '@/ui/utilities/scroll/states/overlayScrollbarsState';
+import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/states/scrollWrapperInstanceComponentState';
-import { scrollPositionState } from '@/ui/utilities/scroll/states/scrollPositionState';
+import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { isDefined } from '~/utils/isDefined';
 
 /**
@@ -13,23 +14,24 @@ import { isDefined } from '~/utils/isDefined';
  * not share the same scroll position.
  */
 export const useScrollRestoration = (viewportHeight?: number) => {
-  const key = `scroll-position-${useLocation().key}`;
   const { state } = useNavigation();
 
-  const [scrollPosition, setScrollPosition] = useRecoilState(
+  const [scrollTop, setScrollTop] = useRecoilComponentStateV2(
-    scrollPositionState(key),
+    scrollWrapperScrollTopComponentState,
   );
 
-  const overlayScrollbars = useRecoilValue(overlayScrollbarsState);
+  const overlayScrollbars = useRecoilComponentValueV2(
+    scrollWrapperInstanceComponentState,
+  );
 
   const scrollWrapper = overlayScrollbars?.elements().viewport;
-  const skip = isDefined(viewportHeight) && scrollPosition > viewportHeight;
+  const skip = isDefined(viewportHeight) && scrollTop > viewportHeight;
 
   useEffect(() => {
     if (state === 'loading') {
-      setScrollPosition(scrollWrapper?.scrollTop ?? 0);
+      setScrollTop(scrollWrapper?.scrollTop ?? 0);
     } else if (state === 'idle' && isDefined(scrollWrapper) && !skip) {
-      scrollWrapper.scrollTo({ top: scrollPosition });
+      scrollWrapper.scrollTo({ top: scrollTop });
     }
-  }, [key, state, scrollWrapper, skip, scrollPosition, setScrollPosition]);
+  }, [state, scrollWrapper, skip, scrollTop, setScrollTop]);
 };

packages/twenty-front/src/hooks/useScrollToPosition.ts

@@ -1,19 +1,24 @@
-import { overlayScrollbarsState } from '@/ui/utilities/scroll/states/overlayScrollbarsState';
+import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/states/scrollWrapperInstanceComponentState';
+import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { useRecoilCallback } from 'recoil';
 
 export const useScrollToPosition = () => {
+  const scrollWrapperInstanceState = useRecoilComponentCallbackStateV2(
+    scrollWrapperInstanceComponentState,
+  );
+
   const scrollToPosition = useRecoilCallback(
     ({ snapshot }) =>
       (scrollPositionInPx: number) => {
         const overlayScrollbars = snapshot
-          .getLoadable(overlayScrollbarsState)
+          .getLoadable(scrollWrapperInstanceState)
           .getValue();
 
         const scrollWrapper = overlayScrollbars?.elements().viewport;
 
         scrollWrapper?.scrollTo({ top: scrollPositionInPx });
       },
-    [],
+    [scrollWrapperInstanceState],
   );
 
   return { scrollToPosition };

packages/twenty-front/src/modules/activities/timeline-activities/components/EventList.tsx

@@ -44,7 +44,10 @@ export const EventList = ({ events, targetableObject }: EventListProps) => {
   const groupedEvents = groupEventsByMonth(filteredEvents);
 
   return (
-    <ScrollWrapper contextProviderName="eventList">
+    <ScrollWrapper
+      contextProviderName="eventList"
+      componentInstanceId={`scroll-wrapper-event-list-${targetableObject.id}`}
+    >
       <StyledTimelineContainer>
         {groupedEvents.map((group, index) => (
           <EventsGroup

packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx

@@ -610,7 +610,10 @@ export const CommandMenu = () => {
             setCommandMenuSearch={setCommandMenuSearch}
           />
           <StyledList>
-            <ScrollWrapper contextProviderName="commandMenu">
+            <ScrollWrapper
+              contextProviderName="commandMenu"
+              componentInstanceId={`scroll-wrapper-command-menu`}
+            >
               <StyledInnerList isMobile={isMobile}>
                 <SelectableList
                   selectableListId="command-menu-list"

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx

@@ -58,7 +58,8 @@ export const MainNavigationDrawerItems = () => {
       )}
       <ScrollWrapper
         contextProviderName="navigationDrawer"
-        enableXScroll={false}
+        componentInstanceId={`scroll-wrapper-navigation-drawer`}
+        defaultEnableXScroll={false}
         scrollHide={true}
       >
         <NavigationDrawerOpenedSection />

packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx

@@ -194,7 +194,10 @@ export const RecordBoard = () => {
       <RecordBoardComponentInstanceContext.Provider
         value={{ instanceId: recordBoardId }}
       >
-        <ScrollWrapper contextProviderName="recordBoard">
+        <ScrollWrapper
+          contextProviderName="recordBoard"
+          componentInstanceId={`scroll-wrapper-record-board-${recordBoardId}`}
+        >
           <RecordBoardStickyHeaderEffect />
           <StyledContainerContainer>
             <RecordBoardHeader />

packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardStickyHeaderEffect.tsx

@@ -1,9 +1,11 @@
+import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useEffect } from 'react';
 
-import { useScrollTopValue } from '@/ui/utilities/scroll/hooks/useScrollTopValue';
-
 export const RecordBoardStickyHeaderEffect = () => {
-  const scrollTop = useScrollTopValue('recordBoard');
+  const scrollTop = useRecoilComponentValueV2(
+    scrollWrapperScrollTopComponentState,
+  );
 
   // TODO: move this outside because it might cause way too many re-renders for other hooks
   useEffect(() => {

packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupFilter.ts

@@ -0,0 +1,37 @@
+import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
+import { useCurrentRecordGroupDefinition } from '@/object-record/record-group/hooks/useCurrentRecordGroupDefinition';
+import { useMemo } from 'react';
+import { isDefined } from 'twenty-ui';
+
+export const useRecordGroupFilter = (fields: FieldMetadataItem[]) => {
+  const currentRecordGroupDefinition = useCurrentRecordGroupDefinition();
+
+  const recordGroupFilter = useMemo(() => {
+    if (isDefined(currentRecordGroupDefinition)) {
+      const fieldMetadataItem = fields.find(
+        (fieldMetadataItem) =>
+          fieldMetadataItem.id === currentRecordGroupDefinition.fieldMetadataId,
+      );
+
+      if (!fieldMetadataItem) {
+        throw new Error(
+          `Field metadata item with id ${currentRecordGroupDefinition.fieldMetadataId} not found`,
+        );
+      }
+
+      if (!isDefined(currentRecordGroupDefinition.value)) {
+        return { [fieldMetadataItem.name]: { is: 'NULL' } };
+      }
+
+      return {
+        [fieldMetadataItem.name]: {
+          eq: currentRecordGroupDefinition.value,
+        },
+      };
+    }
+
+    return {};
+  }, [currentRecordGroupDefinition, fields]);
+
+  return { recordGroupFilter };
+};

packages/twenty-front/src/modules/object-record/record-index/hooks/useFindManyRecordIndexTableParams.ts

@@ -2,12 +2,11 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
 import { turnSortsIntoOrderBy } from '@/object-record/object-sort-dropdown/utils/turnSortsIntoOrderBy';
 import { computeViewRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter';
 import { useCurrentRecordGroupDefinition } from '@/object-record/record-group/hooks/useCurrentRecordGroupDefinition';
+import { useRecordGroupFilter } from '@/object-record/record-group/hooks/useRecordGroupFilter';
 import { tableFiltersComponentState } from '@/object-record/record-table/states/tableFiltersComponentState';
 import { tableSortsComponentState } from '@/object-record/record-table/states/tableSortsComponentState';
 import { tableViewFilterGroupsComponentState } from '@/object-record/record-table/states/tableViewFilterGroupsComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useMemo } from 'react';
-import { isDefined } from 'twenty-ui';
 
 export const useFindManyRecordIndexTableParams = (
   objectNameSingular: string,
@@ -17,6 +16,10 @@ export const useFindManyRecordIndexTableParams = (
     objectNameSingular,
   });
 
+  const { recordGroupFilter } = useRecordGroupFilter(
+    objectMetadataItem?.fields,
+  );
+
   const currentRecordGroupDefinition = useCurrentRecordGroupDefinition();
 
   const tableViewFilterGroups = useRecoilComponentValueV2(
@@ -38,33 +41,6 @@ export const useFindManyRecordIndexTableParams = (
     tableViewFilterGroups,
   );
 
-  const recordGroupFilter = useMemo(() => {
-    if (isDefined(currentRecordGroupDefinition)) {
-      const fieldMetadataItem = objectMetadataItem?.fields.find(
-        (fieldMetadataItem) =>
-          fieldMetadataItem.id === currentRecordGroupDefinition.fieldMetadataId,
-      );
-
-      if (!fieldMetadataItem) {
-        throw new Error(
-          `Field metadata item with id ${currentRecordGroupDefinition.fieldMetadataId} not found`,
-        );
-      }
-
-      if (!isDefined(currentRecordGroupDefinition.value)) {
-        return { [fieldMetadataItem.name]: { is: 'NULL' } };
-      }
-
-      return {
-        [fieldMetadataItem.name]: {
-          eq: currentRecordGroupDefinition.value,
-        },
-      };
-    }
-
-    return {};
-  }, [objectMetadataItem.fields, currentRecordGroupDefinition]);
-
   const orderBy = turnSortsIntoOrderBy(objectMetadataItem, tableSorts);
 
   return {

packages/twenty-front/src/modules/object-record/record-table/components/RecordTable.tsx

@@ -96,7 +96,9 @@ export const RecordTable = () => {
               <RecordTableRecordGroupsBody />
             )}
             <RecordTableStickyEffect />
-            {isAggregateQueryEnabled && <RecordTableFooter />}
+            {isAggregateQueryEnabled && !hasRecordGroups && (
+              <RecordTableFooter />
+            )}
           </StyledTable>
           <DragSelect
             dragSelectable={tableBodyRef}

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableRecordGroupRows.tsx

@@ -1,6 +1,7 @@
 import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
 import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
 import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
+import { RecordTableFooter } from '@/object-record/record-table/record-table-footer/components/RecordTableFooter';
 import { RecordTablePendingRecordGroupRow } from '@/object-record/record-table/record-table-row/components/RecordTablePendingRecordGroupRow';
 import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
 import { RecordTableRecordGroupSectionAddNew } from '@/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew';
@@ -8,10 +9,14 @@ import { RecordTableRecordGroupSectionLoadMore } from '@/object-record/record-ta
 import { isRecordGroupTableSectionToggledComponentState } from '@/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState';
 import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useMemo } from 'react';
 import { isDefined } from '~/utils/isDefined';
 
 export const RecordTableRecordGroupRows = () => {
+  const isAggregateQueryEnabled = useIsFeatureEnabled(
+    'IS_AGGREGATE_QUERY_ENABLED',
+  );
   const currentRecordGroupId = useCurrentRecordGroupId();
 
   const allRecordIds = useRecoilComponentValueV2(
@@ -57,8 +62,14 @@ export const RecordTableRecordGroupRows = () => {
         );
       })}
       <RecordTablePendingRecordGroupRow />
-      <RecordTableRecordGroupSectionLoadMore />
       <RecordTableRecordGroupSectionAddNew />
+      {isAggregateQueryEnabled && (
+        <RecordTableFooter
+          key={currentRecordGroupId}
+          currentRecordGroupId={currentRecordGroupId}
+        />
+      )}
+      <RecordTableRecordGroupSectionLoadMore />
     </>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStickyEffect.tsx

@@ -1,12 +1,15 @@
 import { useEffect } from 'react';
 
 import { isRecordTableScrolledLeftComponentState } from '@/object-record/record-table/states/isRecordTableScrolledLeftComponentState';
-import { useScrollLeftValue } from '@/ui/utilities/scroll/hooks/useScrollLeftValue';
+import { scrollWrapperScrollLeftComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollLeftComponentState';
-import { useScrollTopValue } from '@/ui/utilities/scroll/hooks/useScrollTopValue';
+import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 
 export const RecordTableStickyEffect = () => {
-  const scrollTop = useScrollTopValue('recordTableWithWrappers');
+  const scrollTop = useRecoilComponentValueV2(
+    scrollWrapperScrollTopComponentState,
+  );
 
   useEffect(() => {
     if (scrollTop > 0) {
@@ -20,7 +23,9 @@ export const RecordTableStickyEffect = () => {
     }
   }, [scrollTop]);
 
-  const scrollLeft = useScrollLeftValue('recordTableWithWrappers');
+  const scrollLeft = useRecoilComponentValueV2(
+    scrollWrapperScrollLeftComponentState,
+  );
 
   const setIsRecordTableScrolledLeft = useSetRecoilComponentStateV2(
     isRecordTableScrolledLeftComponentState,

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx

@@ -10,8 +10,6 @@ import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useSaveCurrentViewFields } from '@/views/hooks/useSaveCurrentViewFields';
 import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinitionToViewField';
 
-import { isScrollEnabledForRecordTableState } from '@/object-record/record-table/states/isScrollEnabledForRecordTableState';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { RecordUpdateContext } from '../contexts/EntityUpdateMutationHookContext';
 import { useRecordTable } from '../hooks/useRecordTable';
 
@@ -50,11 +48,6 @@ export const RecordTableWithWrappers = ({
   recordTableId,
   viewBarId,
 }: RecordTableWithWrappersProps) => {
-  const isScrollEnabledForRecordTable = useRecoilComponentValueV2(
-    isScrollEnabledForRecordTableState,
-    recordTableId,
-  );
-
   const { resetTableRowSelection, selectAllRows, setHasUserSelectedAllRows } =
     useRecordTable({
       recordTableId,
@@ -109,9 +102,8 @@ export const RecordTableWithWrappers = ({
       >
         <EntityDeleteContext.Provider value={deleteOneRecord}>
           <ScrollWrapper
-            enableXScroll={isScrollEnabledForRecordTable.enableXScroll}
-            enableYScroll={isScrollEnabledForRecordTable.enableYScroll}
             contextProviderName="recordTableWithWrappers"
+            componentInstanceId={`record-table-scroll-${recordTableId}`}
           >
             <RecordUpdateContext.Provider value={updateRecordMutation}>
               <StyledTableWithHeader>

packages/twenty-front/src/modules/object-record/record-table/hooks/useRecordTable.ts

@@ -53,6 +53,11 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     recordTableId,
   );
 
+  const tableColumnsState = useRecoilComponentCallbackStateV2(
+    tableColumnsComponentState,
+    recordTableId,
+  );
+
   const setAvailableTableColumns = useRecoilCallback(
     ({ snapshot, set }) =>
       (columns: ColumnDefinition<FieldMetadata>[]) => {
@@ -69,6 +74,19 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     [availableTableColumnsState],
   );
 
+  const setTableColumns = useRecoilCallback(
+    ({ snapshot, set }) =>
+      (columns: ColumnDefinition<FieldMetadata>[]) => {
+        const tableColumns = getSnapshotValue(snapshot, tableColumnsState);
+
+        if (isDeeplyEqual(tableColumns, columns)) {
+          return;
+        }
+        set(tableColumnsState, columns);
+      },
+    [tableColumnsState],
+  );
+
   const setOnEntityCountChange = useSetRecoilComponentStateV2(
     onEntityCountChangeComponentState,
     recordTableId,
@@ -89,11 +107,6 @@ export const useRecordTable = (props?: useRecordTableProps) => {
     recordTableId,
   );
 
-  const setTableColumns = useSetRecoilComponentStateV2(
-    tableColumnsComponentState,
-    recordTableId,
-  );
-
   const setOnColumnsChange = useSetRecoilComponentStateV2(
     onColumnsChangeComponentState,
     recordTableId,

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx

@@ -6,13 +6,15 @@ import { RecordTableTd } from '@/object-record/record-table/record-table-cell/co
 import { useSetCurrentRowSelected } from '@/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected';
 import { Checkbox } from 'twenty-ui';
 
+export const TABLE_CELL_CHECKBOX_MIN_WIDTH = '24px';
+
 const StyledContainer = styled.div`
   align-items: center;
   cursor: pointer;
   display: flex;
   height: 32px;
   justify-content: center;
-  min-width: 24px;
+  min-width: ${TABLE_CELL_CHECKBOX_MIN_WIDTH};
 `;
 
 export const RecordTableCellCheckbox = () => {

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx

@@ -6,12 +6,14 @@ import { RecordTableTd } from '@/object-record/record-table/record-table-cell/co
 import { css } from '@emotion/react';
 import { IconListViewGrip } from 'twenty-ui';
 
+export const TABLE_CELL_GRIP_WIDTH = '16px';
+
 const StyledContainer = styled.div<{ isPendingRow?: boolean }>`
+  height: 32px;
+  width: ${TABLE_CELL_GRIP_WIDTH};
   border-color: transparent;
   cursor: grab;
   display: flex;
-  height: 32px;
-  width: 16px;
   ${({ isPendingRow }) =>
     !isPendingRow
       ? css`

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnFooterAggregateValue.tsx

@@ -50,8 +50,10 @@ export const RecordTableColumnFooterAggregateValue = ({
   dropdownId,
   aggregateValue,
   aggregateLabel,
+  isFirstCell,
 }: {
   dropdownId: string;
+  isFirstCell: boolean;
   aggregateValue?: string | number | null;
   aggregateLabel?: string;
 }) => {
@@ -66,13 +68,13 @@ export const RecordTableColumnFooterAggregateValue = ({
       onMouseLeave={() => setIsHovered(false)}
     >
       <StyledCell>
-        {isHovered || isDefined(aggregateValue) ? (
+        {isHovered || isDefined(aggregateValue) || isFirstCell ? (
           <>
             <StyledText id={sanitizedId}>
               {aggregateValue ?? 'Calculate'}
             </StyledText>
             <StyledIcon fontWeight={'light'} size={theme.icon.size.sm} />
-            {aggregateValue && isDefined(aggregateLabel) && (
+            {isDefined(aggregateValue) && isDefined(aggregateLabel) && (
               <AppTooltip
                 anchorSelect={`#${sanitizedId}`}
                 content={aggregateLabel}

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnFooterDropdown.tsx

@@ -16,10 +16,12 @@ import { MenuItem } from 'twenty-ui';
 
 export const RecordTableColumnFooterDropdown = ({
   column,
+  dropdownId,
 }: {
   column: ColumnDefinition<FieldMetadata>;
+  dropdownId: string;
 }) => {
-  const { closeDropdown } = useDropdown(column.fieldMetadataId + '-footer');
+  const { closeDropdown } = useDropdown(dropdownId);
   const { objectMetadataItem } = useRecordTableContextOrThrow();
   const { currentViewWithSavedFiltersAndSorts } = useGetCurrentView();
 
@@ -67,6 +69,7 @@ export const RecordTableColumnFooterDropdown = ({
             key={aggregation}
             onClick={() => {
               handleAggregationChange(aggregation);
+              closeDropdown();
             }}
             text={getAggregateOperationLabel(aggregation)}
           />

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnFooterWithDropdown.tsx

@@ -2,53 +2,44 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'
 import { RecordTableColumnFooterAggregateValue } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnFooterAggregateValue';
 import { RecordTableColumnFooterDropdown } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnFooterDropdown';
 import { useAggregateRecordsForRecordTableColumnFooter } from '@/object-record/record-table/record-table-footer/hooks/useAggregateRecordsForRecordTableColumnFooter';
-import { isScrollEnabledForRecordTableState } from '@/object-record/record-table/states/isScrollEnabledForRecordTableState';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useToggleScrollWrapper } from '@/ui/utilities/scroll/hooks/useToggleScrollWrapper';
-import styled from '@emotion/styled';
 import { useCallback } from 'react';
 
 type RecordTableColumnFooterWithDropdownProps = {
   column: ColumnDefinition<FieldMetadata>;
+  isFirstCell: boolean;
+  currentRecordGroupId?: string;
 };
 
-const StyledDropdown = styled(Dropdown)`
-  display: flex;
-  flex: 1;
-  z-index: ${({ theme }) => theme.lastLayerZIndex};
-
-  transition: opacity 150ms ease-in-out;
-`;
-
 export const RecordTableColumnFooterWithDropdown = ({
   column,
+  currentRecordGroupId,
+  isFirstCell,
 }: RecordTableColumnFooterWithDropdownProps) => {
-  const setIsScrollEnabledForRecordTable = useSetRecoilComponentStateV2(
+  const { toggleScrollXWrapper, toggleScrollYWrapper } =
-    isScrollEnabledForRecordTableState,
+    useToggleScrollWrapper();
-  );
 
   const handleDropdownOpen = useCallback(() => {
-    setIsScrollEnabledForRecordTable({
+    toggleScrollXWrapper(false);
-      enableXScroll: false,
+    toggleScrollYWrapper(false);
-      enableYScroll: false,
+  }, [toggleScrollXWrapper, toggleScrollYWrapper]);
-    });
-  }, [setIsScrollEnabledForRecordTable]);
 
   const handleDropdownClose = useCallback(() => {
-    setIsScrollEnabledForRecordTable({
+    toggleScrollXWrapper(true);
-      enableXScroll: true,
+    toggleScrollYWrapper(true);
-      enableYScroll: true,
+  }, [toggleScrollXWrapper, toggleScrollYWrapper]);
-    });
-  }, [setIsScrollEnabledForRecordTable]);
 
   const { aggregateValue, aggregateLabel } =
     useAggregateRecordsForRecordTableColumnFooter(column.fieldMetadataId);
 
-  const dropdownId = column.fieldMetadataId + '-footer';
+  const dropdownId = currentRecordGroupId
+    ? `${column.fieldMetadataId}-footer-${currentRecordGroupId}`
+    : `${column.fieldMetadataId}-footer`;
 
   return (
-    <StyledDropdown
+    <Dropdown
       onOpen={handleDropdownOpen}
       onClose={handleDropdownClose}
       dropdownId={dropdownId}
@@ -57,9 +48,15 @@ export const RecordTableColumnFooterWithDropdown = ({
           aggregateLabel={aggregateLabel}
           aggregateValue={aggregateValue}
           dropdownId={dropdownId}
+          isFirstCell={isFirstCell}
+        />
+      }
+      dropdownComponents={
+        <RecordTableColumnFooterDropdown
+          column={column}
+          dropdownId={dropdownId}
         />
       }
-      dropdownComponents={<RecordTableColumnFooterDropdown column={column} />}
       dropdownOffset={{ x: -1 }}
       dropdownPlacement="bottom-start"
       dropdownHotkeyScope={{ scope: dropdownId }}

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableFooter.tsx

@@ -1,6 +1,8 @@
 import styled from '@emotion/styled';
 import { MOBILE_VIEWPORT } from 'twenty-ui';
 
+import { TABLE_CELL_CHECKBOX_MIN_WIDTH } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox';
+import { TABLE_CELL_GRIP_WIDTH } from '@/object-record/record-table/record-table-cell/components/RecordTableCellGrip';
 import { RecordTableFooterCell } from '@/object-record/record-table/record-table-footer/components/RecordTableFooterCell';
 import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -75,21 +77,33 @@ const StyledTableFoot = styled.thead`
 `;
 
 const StyledDiv = styled.div`
-  width: 30px;
+  width: calc(${TABLE_CELL_GRIP_WIDTH} + ${TABLE_CELL_CHECKBOX_MIN_WIDTH});
 `;
 
-export const RecordTableFooter = () => {
+export const RecordTableFooter = ({
+  currentRecordGroupId,
+}: {
+  currentRecordGroupId?: string;
+}) => {
   const visibleTableColumns = useRecoilComponentValueV2(
     visibleTableColumnsComponentSelector,
   );
 
   return (
-    <StyledTableFoot id="record-table-footer" data-select-disable>
+    <StyledTableFoot
+      id={`record-table-footer${currentRecordGroupId ? '-' + currentRecordGroupId : ''}`}
+      data-select-disable
+    >
       <tr>
         <th />
         <StyledDiv />
-        {visibleTableColumns.map((column) => (
+        {visibleTableColumns.map((column, index) => (
-          <RecordTableFooterCell key={column.fieldMetadataId} column={column} />
+          <RecordTableFooterCell
+            key={`${column.fieldMetadataId}${currentRecordGroupId ? '-' + currentRecordGroupId : ''}`}
+            column={column}
+            currentRecordGroupId={currentRecordGroupId}
+            isFirstCell={index === 0}
+          />
         ))}
       </tr>
     </StyledTableFoot>

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableFooterCell.tsx

@@ -63,8 +63,12 @@ const StyledColumnFootContainer = styled.div`
 
 export const RecordTableFooterCell = ({
   column,
+  isFirstCell = false,
+  currentRecordGroupId,
 }: {
   column: ColumnDefinition<FieldMetadata>;
+  isFirstCell?: boolean;
+  currentRecordGroupId?: string;
 }) => {
   const tableColumns = useRecoilComponentValueV2(tableColumnsComponentState);
   const tableColumnsByKey = useMemo(
@@ -82,7 +86,11 @@ export const RecordTableFooterCell = ({
       )}
     >
       <StyledColumnFootContainer>
-        <RecordTableColumnFooterWithDropdown column={column} />
+        <RecordTableColumnFooterWithDropdown
+          column={column}
+          currentRecordGroupId={currentRecordGroupId}
+          isFirstCell={isFirstCell}
+        />
       </StyledColumnFootContainer>
     </StyledColumnFooterCell>
   );

packages/twenty-front/src/modules/object-record/record-table/record-table-footer/hooks/useAggregateRecordsForRecordTableColumnFooter.tsx

@@ -1,6 +1,7 @@
 import { useAggregateRecords } from '@/object-record/hooks/useAggregateRecords';
 import { computeAggregateValueAndLabel } from '@/object-record/record-board/record-board-column/utils/computeAggregateValueAndLabel';
 import { computeViewRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter';
+import { useRecordGroupFilter } from '@/object-record/record-group/hooks/useRecordGroupFilter';
 import { recordIndexFiltersState } from '@/object-record/record-index/states/recordIndexFiltersState';
 import { recordIndexViewFilterGroupsState } from '@/object-record/record-index/states/recordIndexViewFilterGroupsState';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
@@ -16,8 +17,9 @@ export const useAggregateRecordsForRecordTableColumnFooter = (
   const isAggregateQueryEnabled = useIsFeatureEnabled(
     'IS_AGGREGATE_QUERY_ENABLED',
   );
-
   const { objectMetadataItem } = useRecordTableContextOrThrow();
+  const { recordGroupFilter } = useRecordGroupFilter(objectMetadataItem.fields);
+
   const { currentViewWithSavedFiltersAndSorts } = useGetCurrentView();
   const recordIndexViewFilterGroups = useRecoilValue(
     recordIndexViewFilterGroupsState,
@@ -56,7 +58,7 @@ export const useAggregateRecordsForRecordTableColumnFooter = (
   const { data } = useAggregateRecords({
     objectNameSingular: objectMetadataItem.nameSingular,
     recordGqlFieldsAggregate,
-    filter: { ...requestFilters },
+    filter: { ...requestFilters, ...recordGroupFilter },
     skip:
       !isAggregateQueryEnabled || !isDefined(aggregateOperationForViewField),
   });

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown.tsx

@@ -1,8 +1,7 @@
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { isScrollEnabledForRecordTableState } from '@/object-record/record-table/states/isScrollEnabledForRecordTableState';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { useToggleScrollWrapper } from '@/ui/utilities/scroll/hooks/useToggleScrollWrapper';
 import styled from '@emotion/styled';
 import { useCallback } from 'react';
 import { RecordTableColumnHead } from './RecordTableColumnHead';
@@ -21,23 +20,18 @@ const StyledDropdown = styled(Dropdown)`
 export const RecordTableColumnHeadWithDropdown = ({
   column,
 }: RecordTableColumnHeadWithDropdownProps) => {
-  const setIsScrollEnabledForRecordTable = useSetRecoilComponentStateV2(
+  const { toggleScrollXWrapper, toggleScrollYWrapper } =
-    isScrollEnabledForRecordTableState,
+    useToggleScrollWrapper();
-  );
 
   const handleDropdownOpen = useCallback(() => {
-    setIsScrollEnabledForRecordTable({
+    toggleScrollXWrapper(false);
-      enableXScroll: false,
+    toggleScrollYWrapper(false);
-      enableYScroll: false,
+  }, [toggleScrollXWrapper, toggleScrollYWrapper]);
-    });
-  }, [setIsScrollEnabledForRecordTable]);
 
   const handleDropdownClose = useCallback(() => {
-    setIsScrollEnabledForRecordTable({
+    toggleScrollXWrapper(true);
-      enableXScroll: true,
+    toggleScrollYWrapper(true);
-      enableYScroll: true,
+  }, [toggleScrollXWrapper, toggleScrollYWrapper]);
-    });
-  }, [setIsScrollEnabledForRecordTable]);
 
   return (
     <StyledDropdown

packages/twenty-front/src/modules/object-record/record-table/states/isScrollEnabledForRecordTableState.ts

@@ -1,17 +0,0 @@
-import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
-import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
-
-export type ScrollEnabled = {
-  enableXScroll: boolean;
-  enableYScroll: boolean;
-};
-
-export const isScrollEnabledForRecordTableState =
-  createComponentStateV2<ScrollEnabled>({
-    key: 'isScrollEnabledForRecordTableState',
-    defaultValue: {
-      enableXScroll: true,
-      enableYScroll: true,
-    },
-    componentInstanceContext: RecordTableComponentInstanceContext,
-  });

packages/twenty-front/src/modules/object-record/record-table/types/ColumnDefinition.ts

@@ -1,6 +1,5 @@
 import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
 
 export type ColumnDefinition<T extends FieldMetadata> = FieldDefinition<T> & {
   size: number;
@@ -10,5 +9,4 @@ export type ColumnDefinition<T extends FieldMetadata> = FieldDefinition<T> & {
   viewFieldId?: string;
   isFilterable?: boolean;
   isSortable?: boolean;
-  aggregateOperation?: AGGREGATE_OPERATIONS | null;
 };

packages/twenty-front/src/modules/settings/components/SettingsPageContainer.tsx

@@ -30,7 +30,10 @@ export const SettingsPageContainer = ({
 }: {
   children: ReactNode;
 }) => (
-  <ScrollWrapper contextProviderName="settingsPageContainer">
+  <ScrollWrapper
+    contextProviderName="settingsPageContainer"
+    componentInstanceId={'scroll-wrapper-settings-page-container'}
+  >
     <StyledSettingsPageContainer>{children}</StyledSettingsPageContainer>
   </ScrollWrapper>
 );

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx

@@ -1,5 +1,6 @@
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
+import { useId } from 'react';
 
 const StyledDropdownMenuItemsExternalContainer = styled.div<{
   hasMaxHeight?: boolean;
@@ -44,13 +45,18 @@ export const DropdownMenuItemsContainer = ({
   className?: string;
   withoutScrollWrapper?: boolean;
 }) => {
+  const id = useId();
+
   return withoutScrollWrapper === true ? (
     <StyledDropdownMenuItemsExternalContainer
       hasMaxHeight={hasMaxHeight}
       className={className}
     >
       {hasMaxHeight ? (
-        <StyledScrollWrapper contextProviderName="dropdownMenuItemsContainer">
+        <StyledScrollWrapper
+          contextProviderName="dropdownMenuItemsContainer"
+          componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}
+        >
           <StyledDropdownMenuItemsInternalContainer>
             {children}
           </StyledDropdownMenuItemsInternalContainer>
@@ -62,7 +68,10 @@ export const DropdownMenuItemsContainer = ({
       )}
     </StyledDropdownMenuItemsExternalContainer>
   ) : (
-    <ScrollWrapper contextProviderName="dropdownMenuItemsContainer">
+    <ScrollWrapper
+      contextProviderName="dropdownMenuItemsContainer"
+      componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}
+    >
       <StyledDropdownMenuItemsExternalContainer
         hasMaxHeight={hasMaxHeight}
         className={className}

packages/twenty-front/src/modules/ui/layout/page/components/ShowPageContainer.tsx

@@ -31,7 +31,10 @@ export const ShowPageContainer = ({ children }: ShowPageContainerProps) => {
   const isMobile = useIsMobile();
   return isMobile ? (
     <StyledOuterContainer>
-      <StyledScrollWrapper contextProviderName="showPageContainer">
+      <StyledScrollWrapper
+        contextProviderName="showPageContainer"
+        componentInstanceId={'scroll-wrapper-show-page-container'}
+      >
         <StyledInnerContainer>{children}</StyledInnerContainer>
       </StyledScrollWrapper>
     </StyledOuterContainer>

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageActivityContainer.tsx

@@ -23,7 +23,10 @@ export const ShowPageActivityContainer = ({
   );
 
   return !isNewViewableRecordLoading ? (
-    <ScrollWrapper contextProviderName="showPageActivityContainer">
+    <ScrollWrapper
+      contextProviderName="showPageActivityContainer"
+      componentInstanceId={`scroll-wrapper-tab-list-${targetableObject.id}`}
+    >
       <StyledShowPageActivityContainer>
         <RichTextEditor
           activityId={targetableObject.id}

packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -46,7 +46,10 @@ export const ShowPageLeftContainer = ({
           {children}
         </StyledInnerContainer>
       ) : (
-        <ScrollWrapper contextProviderName="showPageLeftContainer">
+        <ScrollWrapper
+          contextProviderName="showPageLeftContainer"
+          componentInstanceId={`scroll-wrapper-show-page-left-container`}
+        >
           <StyledIntermediateContainer>
             <StyledInnerContainer isMobile={isMobile}>
               {children}

packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx

@@ -7,8 +7,9 @@ import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope';
 
 import { TabListFromUrlOptionalEffect } from '@/ui/layout/tab/components/TabListFromUrlOptionalEffect';
 import { LayoutCard } from '@/ui/layout/tab/types/LayoutCard';
-import { Tab } from './Tab';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { useEffect } from 'react';
+import { Tab } from './Tab';
 
 export type SingleTabProps = {
   title: string;
@@ -70,26 +71,32 @@ export const TabList = ({
           componentInstanceId={tabListInstanceId}
           tabListIds={tabs.map((tab) => tab.id)}
         />
-        <StyledTabsContainer>
+        <ScrollWrapper
-          {visibleTabs.map((tab) => (
+          defaultEnableYScroll={false}
-            <Tab
+          contextProviderName="tabList"
-              id={tab.id}
+          componentInstanceId={`scroll-wrapper-tab-list-${tabListInstanceId}`}
-              key={tab.id}
+        >
-              title={tab.title}
+          <StyledTabsContainer>
-              Icon={tab.Icon}
+            {visibleTabs.map((tab) => (
-              logo={tab.logo}
+              <Tab
-              active={tab.id === activeTabId}
+                id={tab.id}
-              disabled={tab.disabled ?? loading}
+                key={tab.id}
-              pill={tab.pill}
+                title={tab.title}
-              to={behaveAsLinks ? `#${tab.id}` : undefined}
+                Icon={tab.Icon}
-              onClick={() => {
+                logo={tab.logo}
-                if (!behaveAsLinks) {
+                active={tab.id === activeTabId}
-                  setActiveTabId(tab.id);
+                disabled={tab.disabled ?? loading}
-                }
+                pill={tab.pill}
-              }}
+                to={behaveAsLinks ? `#${tab.id}` : undefined}
-            />
+                onClick={() => {
-          ))}
+                  if (!behaveAsLinks) {
-        </StyledTabsContainer>
+                    setActiveTabId(tab.id);
+                  }
+                }}
+              />
+            ))}
+          </StyledTabsContainer>
+        </ScrollWrapper>
       </TabListScope>
     </StyledContainer>
   );

packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx

@@ -2,15 +2,17 @@ import styled from '@emotion/styled';
 import { OverlayScrollbars } from 'overlayscrollbars';
 import { useOverlayScrollbars } from 'overlayscrollbars-react';
 import { useEffect, useRef } from 'react';
-import { useSetRecoilState } from 'recoil';
 
 import {
   ContextProviderName,
   getContextByProviderName,
 } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
-import { useScrollStates } from '@/ui/utilities/scroll/hooks/internal/useScrollStates';
-import { overlayScrollbarsState } from '@/ui/utilities/scroll/states/overlayScrollbarsState';
 
+import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
+import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/states/scrollWrapperInstanceComponentState';
+import { scrollWrapperScrollLeftComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollLeftComponentState';
+import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import 'overlayscrollbars/overlayscrollbars.css';
 
 const StyledScrollWrapper = styled.div<{ scrollHide?: boolean }>`
@@ -31,41 +33,52 @@ const StyledInnerContainer = styled.div`
 export type ScrollWrapperProps = {
   children: React.ReactNode;
   className?: string;
-  enableXScroll?: boolean;
+  defaultEnableXScroll?: boolean;
-  enableYScroll?: boolean;
+  defaultEnableYScroll?: boolean;
   contextProviderName: ContextProviderName;
   scrollHide?: boolean;
+  componentInstanceId: string;
 };
 
 export const ScrollWrapper = ({
+  componentInstanceId,
   children,
   className,
-  enableXScroll = true,
+  defaultEnableXScroll = true,
-  enableYScroll = true,
+  defaultEnableYScroll = true,
   contextProviderName,
   scrollHide = false,
 }: ScrollWrapperProps) => {
   const scrollableRef = useRef<HTMLDivElement>(null);
   const Context = getContextByProviderName(contextProviderName);
 
-  const { scrollTopComponentState, scrollLeftComponentState } =
+  const setScrollTop = useSetRecoilComponentStateV2(
-    useScrollStates(contextProviderName);
+    scrollWrapperScrollTopComponentState,
-  const setScrollTop = useSetRecoilState(scrollTopComponentState);
+    componentInstanceId,
-  const setScrollLeft = useSetRecoilState(scrollLeftComponentState);
+  );
+
+  const setScrollLeft = useSetRecoilComponentStateV2(
+    scrollWrapperScrollLeftComponentState,
+    componentInstanceId,
+  );
+
   const handleScroll = (overlayScroll: OverlayScrollbars) => {
     const target = overlayScroll.elements().scrollOffsetElement;
     setScrollTop(target.scrollTop);
     setScrollLeft(target.scrollLeft);
   };
 
-  const setOverlayScrollbars = useSetRecoilState(overlayScrollbarsState);
+  const setOverlayScrollbars = useSetRecoilComponentStateV2(
+    scrollWrapperInstanceComponentState,
+    componentInstanceId,
+  );
 
   const [initialize, instance] = useOverlayScrollbars({
     options: {
       scrollbars: { autoHide: 'scroll' },
       overflow: {
-        x: enableXScroll ? undefined : 'hidden',
+        x: defaultEnableXScroll ? undefined : 'hidden',
-        y: enableYScroll ? undefined : 'hidden',
+        y: defaultEnableYScroll ? undefined : 'hidden',
       },
     },
     events: {
@@ -84,19 +97,23 @@ export const ScrollWrapper = ({
   }, [instance, setOverlayScrollbars]);
 
   return (
-    <Context.Provider
+    <ScrollWrapperComponentInstanceContext.Provider
-      value={{
+      value={{ instanceId: componentInstanceId }}
-        ref: scrollableRef,
-        id: contextProviderName,
-      }}
     >
-      <StyledScrollWrapper
+      <Context.Provider
-        ref={scrollableRef}
+        value={{
-        className={className}
+          ref: scrollableRef,
-        scrollHide={scrollHide}
+          id: contextProviderName,
+        }}
       >
-        <StyledInnerContainer>{children}</StyledInnerContainer>
+        <StyledScrollWrapper
-      </StyledScrollWrapper>
+          ref={scrollableRef}
-    </Context.Provider>
+          className={className}
+          scrollHide={scrollHide}
+        >
+          <StyledInnerContainer>{children}</StyledInnerContainer>
+        </StyledScrollWrapper>
+      </Context.Provider>
+    </ScrollWrapperComponentInstanceContext.Provider>
   );
 };

packages/twenty-front/src/modules/ui/utilities/scroll/hooks/internal/useScrollStates.ts

@@ -1,32 +0,0 @@
-import {
-  ContextProviderName,
-  getContextByProviderName,
-} from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
-import { scrollLeftComponentState } from '@/ui/utilities/scroll/states/scrollLeftComponentState';
-import { scrollTopComponentState } from '@/ui/utilities/scroll/states/scrollTopComponentState';
-
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
-
-import { useContext } from 'react';
-
-export const useScrollStates = (contextProviderName: ContextProviderName) => {
-  const Context = getContextByProviderName(contextProviderName);
-  const context = useContext(Context);
-
-  if (!context) {
-    throw new Error('Context not found');
-  }
-
-  const { id: scopeId } = context;
-
-  return {
-    scrollLeftComponentState: extractComponentState(
-      scrollLeftComponentState,
-      scopeId,
-    ),
-    scrollTopComponentState: extractComponentState(
-      scrollTopComponentState,
-      scopeId,
-    ),
-  };
-};

packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollLeftValue.ts

@@ -1,10 +0,0 @@
-import { ContextProviderName } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
-import { useScrollStates } from '@/ui/utilities/scroll/hooks/internal/useScrollStates';
-import { useRecoilValue } from 'recoil';
-
-export const useScrollLeftValue = (
-  contextProviderName: ContextProviderName,
-) => {
-  const { scrollLeftComponentState } = useScrollStates(contextProviderName);
-  return useRecoilValue(scrollLeftComponentState);
-};

packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useScrollTopValue.ts

@@ -1,8 +0,0 @@
-import { ContextProviderName } from '@/ui/utilities/scroll/contexts/ScrollWrapperContexts';
-import { useScrollStates } from '@/ui/utilities/scroll/hooks/internal/useScrollStates';
-import { useRecoilValue } from 'recoil';
-
-export const useScrollTopValue = (contextProviderName: ContextProviderName) => {
-  const { scrollTopComponentState } = useScrollStates(contextProviderName);
-  return useRecoilValue(scrollTopComponentState);
-};

packages/twenty-front/src/modules/ui/utilities/scroll/hooks/useToggleScrollWrapper.ts

@@ -0,0 +1,34 @@
+import { scrollWrapperInstanceComponentState } from '@/ui/utilities/scroll/states/scrollWrapperInstanceComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+
+export const useToggleScrollWrapper = () => {
+  const instanceOverlay = useRecoilComponentValueV2(
+    scrollWrapperInstanceComponentState,
+  );
+
+  const toggleScrollXWrapper = (isEnabled: boolean) => {
+    if (!instanceOverlay) {
+      return;
+    }
+
+    instanceOverlay.options({
+      overflow: {
+        x: isEnabled ? 'scroll' : 'hidden',
+      },
+    });
+  };
+
+  const toggleScrollYWrapper = (isEnabled: boolean) => {
+    if (!instanceOverlay) {
+      return;
+    }
+
+    instanceOverlay.options({
+      overflow: {
+        y: isEnabled ? 'scroll' : 'hidden',
+      },
+    });
+  };
+
+  return { toggleScrollXWrapper, toggleScrollYWrapper };
+};

packages/twenty-front/src/modules/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext.ts

@@ -0,0 +1,4 @@
+import { createComponentInstanceContext } from '@/ui/utilities/state/component-state/utils/createComponentInstanceContext';
+
+export const ScrollWrapperComponentInstanceContext =
+  createComponentInstanceContext();

packages/twenty-front/src/modules/ui/utilities/scroll/states/overlayScrollbarsState.ts

@@ -1,7 +0,0 @@
-import { OverlayScrollbars } from 'overlayscrollbars';
-import { createState } from 'twenty-ui';
-
-export const overlayScrollbarsState = createState<OverlayScrollbars | null>({
-  key: 'scroll/overlayScrollbarsState',
-  defaultValue: null,
-});

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollLeftComponentState.ts

@@ -1,6 +0,0 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
-
-export const scrollLeftComponentState = createComponentState<number>({
-  key: 'scroll/scrollLeftComponentState',
-  defaultValue: 0,
-});

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollPositionState.ts

@@ -1,6 +0,0 @@
-import { createFamilyState } from '@/ui/utilities/state/utils/createFamilyState';
-
-export const scrollPositionState = createFamilyState({
-  key: 'scroll/scrollPositionState',
-  defaultValue: 0,
-});

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollTopComponentState.ts

@@ -1,6 +0,0 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
-
-export const scrollTopComponentState = createComponentState<number>({
-  key: 'scroll/scrollTopComponentState',
-  defaultValue: 0,
-});

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollWrapperInstanceComponentState.ts

@@ -0,0 +1,10 @@
+import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+import { OverlayScrollbars } from 'overlayscrollbars';
+
+export const scrollWrapperInstanceComponentState =
+  createComponentStateV2<OverlayScrollbars | null>({
+    key: 'scrollWrapperInstanceComponentState',
+    defaultValue: null,
+    componentInstanceContext: ScrollWrapperComponentInstanceContext,
+  });

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollWrapperScrollLeftComponentState.ts

@@ -0,0 +1,9 @@
+import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+export const scrollWrapperScrollLeftComponentState =
+  createComponentStateV2<number>({
+    key: 'scrollWrapperScrollLeftComponentState',
+    defaultValue: 0,
+    componentInstanceContext: ScrollWrapperComponentInstanceContext,
+  });

packages/twenty-front/src/modules/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState.ts

@@ -0,0 +1,9 @@
+import { ScrollWrapperComponentInstanceContext } from '@/ui/utilities/scroll/states/contexts/ScrollWrapperComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+export const scrollWrapperScrollTopComponentState =
+  createComponentStateV2<number>({
+    key: 'scrollWrapperScrollTopComponentState',
+    defaultValue: 0,
+    componentInstanceContext: ScrollWrapperComponentInstanceContext,
+  });

packages/twenty-front/src/modules/views/utils/mapColumnDefinitionToViewField.ts

@@ -14,6 +14,5 @@ export const mapColumnDefinitionsToViewFields = (
     size: columnDefinition.size,
     isVisible: columnDefinition.isVisible ?? true,
     definition: columnDefinition,
-    aggregateOperation: columnDefinition.aggregateOperation,
   }));
 };

packages/twenty-front/src/modules/views/utils/mapViewFieldsToColumnDefinitions.ts

@@ -47,7 +47,6 @@ export const mapViewFieldsToColumnDefinitions = ({
         isLabelIdentifier,
         isVisible: isLabelIdentifier || viewField.isVisible,
         viewFieldId: viewField.id,
-        aggregateOperation: viewField.aggregateOperation,
         isSortable: correspondingColumnDefinition.isSortable,
         isFilterable: correspondingColumnDefinition.isFilterable,
         defaultValue: correspondingColumnDefinition.defaultValue,

packages/twenty-front/src/pages/settings/Releases.tsx

@@ -118,7 +118,10 @@ export const Releases = () => {
       ]}
     >
       <SettingsPageContainer>
-        <ScrollWrapper contextProviderName="releases">
+        <ScrollWrapper
+          contextProviderName="releases"
+          componentInstanceId="scroll-wrapper-releases"
+        >
           <StyledReleaseContainer>
             {releases.map((release) => (
               <React.Fragment key={release.slug}>