Refactor recoil scope states (#3097)

* Refactor recoil scope states

* Complete refactoring

* Fix

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

@@ -1,3 +1,5 @@
+import { useRecoilValue } from 'recoil';
+
 import { IconArrowUpRight } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
@@ -30,7 +32,8 @@ export const CommandMenuItem = ({
     Icon = IconArrowUpRight;
   }
 
-  const { isSelectedItemId } = useSelectableList({ itemId: id });
+  const { isSelectedItemIdFamilyState } = useSelectableList();
+  const isSelectedItemId = useRecoilValue(isSelectedItemIdFamilyState(id));
 
   return (
     <MenuItemCommand

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -15,9 +15,7 @@ export const useCommandMenu = () => {
   const navigate = useNavigate();
   const setIsCommandMenuOpened = useSetRecoilState(isCommandMenuOpenedState);
   const setCommands = useSetRecoilState(commandMenuCommandsState);
-  const { resetSelectedItem } = useSelectableList({
+  const { resetSelectedItem } = useSelectableList('command-menu-list');
-    selectableListId: 'command-menu-list',
-  });
   const {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,

packages/twenty-front/src/modules/object-record/record-board/utils/getRecordBoardScopedStates.ts

@@ -14,69 +14,69 @@ import { hiddenRecordBoardCardFieldsScopedSelector } from '@/object-record/recor
 import { recordBoardCardFieldsByKeyScopedSelector } from '@/object-record/record-board/states/selectors/recordBoardCardFieldsByKeyScopedSelector';
 import { selectedRecordBoardCardIdsScopedSelector } from '@/object-record/record-board/states/selectors/selectedRecordBoardCardIdsScopedSelector';
 import { visibleRecordBoardCardFieldsScopedSelector } from '@/object-record/record-board/states/selectors/visibleRecordBoardCardFieldsScopedSelector';
-import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
+import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
 
 export const getRecordBoardScopedStates = ({
   recordBoardScopeId,
 }: {
   recordBoardScopeId: string;
 }) => {
-  const activeCardIdsState = getScopedState(
+  const activeCardIdsState = getScopedStateDeprecated(
     activeRecordBoardCardIdsScopedState,
     recordBoardScopeId,
   );
 
-  const availableBoardCardFieldsState = getScopedState(
+  const availableBoardCardFieldsState = getScopedStateDeprecated(
     availableRecordBoardCardFieldsScopedState,
     recordBoardScopeId,
   );
 
-  const boardColumnsState = getScopedState(
+  const boardColumnsState = getScopedStateDeprecated(
     recordBoardColumnsScopedState,
     recordBoardScopeId,
   );
 
-  const isBoardLoadedState = getScopedState(
+  const isBoardLoadedState = getScopedStateDeprecated(
     isRecordBoardLoadedScopedState,
     recordBoardScopeId,
   );
 
-  const isCompactViewEnabledState = getScopedState(
+  const isCompactViewEnabledState = getScopedStateDeprecated(
     isCompactViewEnabledScopedState,
     recordBoardScopeId,
   );
 
-  const savedBoardColumnsState = getScopedState(
+  const savedBoardColumnsState = getScopedStateDeprecated(
     savedRecordBoardColumnsScopedState,
     recordBoardScopeId,
   );
 
-  const boardFiltersState = getScopedState(
+  const boardFiltersState = getScopedStateDeprecated(
     recordBoardFiltersScopedState,
     recordBoardScopeId,
   );
 
-  const boardSortsState = getScopedState(
+  const boardSortsState = getScopedStateDeprecated(
     recordBoardSortsScopedState,
     recordBoardScopeId,
   );
 
-  const savedCompaniesState = getScopedState(
+  const savedCompaniesState = getScopedStateDeprecated(
     savedRecordsScopedState,
     recordBoardScopeId,
   );
 
-  const savedOpportunitiesState = getScopedState(
+  const savedOpportunitiesState = getScopedStateDeprecated(
     savedOpportunitiesScopedState,
     recordBoardScopeId,
   );
 
-  const savedPipelineStepsState = getScopedState(
+  const savedPipelineStepsState = getScopedStateDeprecated(
     savedPipelineStepsScopedState,
     recordBoardScopeId,
   );
 
-  const onFieldsChangeState = getScopedState(
+  const onFieldsChangeState = getScopedStateDeprecated(
     onFieldsChangeScopedState,
     recordBoardScopeId,
   );

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

@@ -6,7 +6,7 @@ import { onColumnsChangeScopedState } from '@/object-record/record-table/states/
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
+import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { FieldMetadata } from '../../field/types/FieldMetadata';
@@ -63,7 +63,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
   const onColumnsChange = useRecoilCallback(
     ({ snapshot }) =>
       (columns: ColumnDefinition<FieldMetadata>[]) => {
-        const onColumnsChangeState = getScopedState(
+        const onColumnsChangeState = getScopedStateDeprecated(
           onColumnsChangeScopedState,
           scopeId,
         );
@@ -80,7 +80,7 @@ export const useRecordTable = (props?: useRecordTableProps) => {
   const onEntityCountChange = useRecoilCallback(
     ({ snapshot }) =>
       (count: number) => {
-        const onEntityCountChangeState = getScopedState(
+        const onEntityCountChangeState = getScopedStateDeprecated(
           onEntityCountChangeScopedState,
           scopeId,
         );

packages/twenty-front/src/modules/object-record/record-table/utils/getRecordTableScopedStates.ts

@@ -1,6 +1,6 @@
 import { objectMetadataConfigScopedState } from '@/object-record/record-table/states/objectMetadataConfigScopedState';
 import { tableLastRowVisibleScopedState } from '@/object-record/record-table/states/tableLastRowVisibleScopedState';
-import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
+import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
 
 import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
 import { onColumnsChangeScopedState } from '../states/onColumnsChangeScopedState';
@@ -17,27 +17,27 @@ export const getRecordTableScopedStates = ({
 }: {
   recordTableScopeId: string;
 }) => {
-  const availableTableColumnsState = getScopedState(
+  const availableTableColumnsState = getScopedStateDeprecated(
     availableTableColumnsScopedState,
     recordTableScopeId,
   );
 
-  const tableFiltersState = getScopedState(
+  const tableFiltersState = getScopedStateDeprecated(
     tableFiltersScopedState,
     recordTableScopeId,
   );
 
-  const tableSortsState = getScopedState(
+  const tableSortsState = getScopedStateDeprecated(
     tableSortsScopedState,
     recordTableScopeId,
   );
 
-  const tableColumnsState = getScopedState(
+  const tableColumnsState = getScopedStateDeprecated(
     tableColumnsScopedState,
     recordTableScopeId,
   );
 
-  const objectMetadataConfigState = getScopedState(
+  const objectMetadataConfigState = getScopedStateDeprecated(
     objectMetadataConfigScopedState,
     recordTableScopeId,
   );
@@ -51,17 +51,17 @@ export const getRecordTableScopedStates = ({
   const visibleTableColumnsSelector =
     visibleTableColumnsScopedSelector(recordTableScopeId);
 
-  const onColumnsChangeState = getScopedState(
+  const onColumnsChangeState = getScopedStateDeprecated(
     onColumnsChangeScopedState,
     recordTableScopeId,
   );
 
-  const onEntityCountChangeState = getScopedState(
+  const onEntityCountChangeState = getScopedStateDeprecated(
     onEntityCountChangeScopedState,
     recordTableScopeId,
   );
 
-  const tableLastRowVisibleState = getScopedState(
+  const tableLastRowVisibleState = getScopedStateDeprecated(
     tableLastRowVisibleScopedState,
     recordTableScopeId,
   );

packages/twenty-front/src/modules/object-record/relation-picker/components/SelectableMenuItemSelect.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
 
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
@@ -21,10 +22,13 @@ export const SelectableMenuItemSelect = ({
   onEntitySelected,
   selectedEntity,
 }: SelectableMenuItemSelectProps) => {
-  const { isSelectedItemId } = useSelectableList({
+  const { isSelectedItemIdFamilyState } = useSelectableList(
-    selectableListId: 'single-entity-select-base-list',
+    'single-entity-select-base-list',
-    itemId: entity.id,
+  );
-  });
+
+  const isSelectedItemId = useRecoilValue(
+    isSelectedItemIdFamilyState(entity.id),
+  );
 
   return (
     <StyledSelectableItem itemId={entity.id} key={entity.id}>

packages/twenty-front/src/modules/object-record/relation-picker/utils/getRelationPickerScopedStates.ts

@@ -2,29 +2,29 @@ import { identifiersMapperScopedState } from '@/object-record/relation-picker/st
 import { relationPickerPreselectedIdScopedState } from '@/object-record/relation-picker/states/relationPickerPreselectedIdScopedState';
 import { relationPickerSearchFilterScopedState } from '@/object-record/relation-picker/states/relationPickerSearchFilterScopedState';
 import { searchQueryScopedState } from '@/object-record/relation-picker/states/searchQueryScopedState';
-import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
+import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
 
 export const getRelationPickerScopedStates = ({
   relationPickerScopeId,
 }: {
   relationPickerScopeId: string;
 }) => {
-  const identifiersMapperState = getScopedState(
+  const identifiersMapperState = getScopedStateDeprecated(
     identifiersMapperScopedState,
     relationPickerScopeId,
   );
 
-  const searchQueryState = getScopedState(
+  const searchQueryState = getScopedStateDeprecated(
     searchQueryScopedState,
     relationPickerScopeId,
   );
 
-  const relationPickerPreselectedIdState = getScopedState(
+  const relationPickerPreselectedIdState = getScopedStateDeprecated(
     relationPickerPreselectedIdScopedState,
     relationPickerScopeId,
   );
 
-  const relationPickerSearchFilterState = getScopedState(
+  const relationPickerSearchFilterState = getScopedStateDeprecated(
     relationPickerSearchFilterScopedState,
     relationPickerScopeId,
   );

packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState } from 'react';
 import styled from '@emotion/styled';
+import { useRecoilValue } from 'recoil';
 
 import { IconApps } from '@/ui/display/icon';
 import { useIcons } from '@/ui/display/icon/hooks/useIcons';
@@ -60,7 +61,9 @@ const IconPickerIcon = ({
   selectedIconKey,
   Icon,
 }: IconPickerIconProps) => {
-  const { isSelectedItemId } = useSelectableList({ itemId: iconKey });
+  const { isSelectedItemIdFamilyState } = useSelectableList();
+
+  const isSelectedItemId = useRecoilValue(isSelectedItemIdFamilyState(iconKey));
 
   return (
     <StyledLightIconButton

packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableItem.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, useEffect, useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import { useSelectableListScopedStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 
 export type SelectableItemProps = {
   itemId: string;
@@ -14,11 +14,9 @@ export const SelectableItem = ({
   children,
   className,
 }: SelectableItemProps) => {
-  const { isSelectedItemIdSelector } = useSelectableListScopedStates({
+  const { isSelectedItemIdFamilyState } = useSelectableList();
-    itemId: itemId,
-  });
 
-  const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector);
+  const isSelectedItemId = useRecoilValue(isSelectedItemIdFamilyState(itemId));
 
   const scrollRef = useRef<HTMLDivElement>(null);
 

packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableList.tsx

@@ -25,9 +25,8 @@ export const SelectableList = ({
 }: SelectableListProps) => {
   useSelectableListHotKeys(selectableListId, hotkeyScope);
 
-  const { setSelectableItemIds, setSelectableListOnEnter } = useSelectableList({
+  const { setSelectableItemIds, setSelectableListOnEnter } =
-    selectableListId,
+    useSelectableList(selectableListId);
-  });
 
   useEffect(() => {
     setSelectableListOnEnter(() => onEnter);

packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.tsx

@@ -1,9 +1,9 @@
 import { useRecoilCallback } from 'recoil';
 import { Key } from 'ts-key-enum';
 
-import { getSelectableListScopedStates } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates';
+import { useSelectableListScopedState } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState';
+import { getSelectableListScopeInjectors } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopeInjectors';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 type Direction = 'up' | 'down' | 'left' | 'right';
 
@@ -27,17 +27,28 @@ export const useSelectableListHotKeys = (
     }
   };
 
+  const { getSelectableListScopedSnapshotValue } = useSelectableListScopedState(
+    {
+      selectableListScopeId: scopeId,
+    },
+  );
+
   const handleSelect = useRecoilCallback(
     ({ snapshot, set }) =>
       (direction: Direction) => {
-        const { selectedItemIdState, selectableItemIdsState } =
+        const {
-          getSelectableListScopedStates({
+          selectedItemIdScopeInjector,
-            selectableListScopeId: scopeId,
+          selectableItemIdsScopeInjector,
-          });
+          isSelectedItemIdFamilyScopeInjector,
-        const selectedItemId = getSnapshotValue(snapshot, selectedItemIdState);
+        } = getSelectableListScopeInjectors();
-        const selectableItemIds = getSnapshotValue(
+
+        const selectedItemId = getSelectableListScopedSnapshotValue(
           snapshot,
-          selectableItemIdsState,
+          selectedItemIdScopeInjector,
+        );
+        const selectableItemIds = getSelectableListScopedSnapshotValue(
+          snapshot,
+          selectableItemIdsScopeInjector,
         );
 
         const currentPosition = findPosition(selectableItemIds, selectedItemId);
@@ -97,24 +108,19 @@ export const useSelectableListHotKeys = (
 
         if (selectedItemId !== nextId) {
           if (nextId) {
-            const { isSelectedItemIdSelector } = getSelectableListScopedStates({
+            set(isSelectedItemIdFamilyScopeInjector(scopeId, nextId), true);
-              selectableListScopeId: scopeId,
+            set(selectedItemIdScopeInjector(scopeId), nextId);
-              itemId: nextId,
-            });
-            set(isSelectedItemIdSelector, true);
-            set(selectedItemIdState, nextId);
           }
 
           if (selectedItemId) {
-            const { isSelectedItemIdSelector } = getSelectableListScopedStates({
+            set(
-              selectableListScopeId: scopeId,
+              isSelectedItemIdFamilyScopeInjector(scopeId, selectedItemId),
-              itemId: selectedItemId,
+              false,
-            });
+            );
-            set(isSelectedItemIdSelector, false);
           }
         }
       },
-    [scopeId],
+    [getSelectableListScopedSnapshotValue, scopeId],
   );
 
   useScopedHotkeys(Key.ArrowUp, () => handleSelect('up'), hotkeyScope, []);
@@ -135,25 +141,25 @@ export const useSelectableListHotKeys = (
     useRecoilCallback(
       ({ snapshot }) =>
         () => {
-          const { selectedItemIdState, selectableListOnEnterState } =
+          const {
-            getSelectableListScopedStates({
+            selectedItemIdScopeInjector,
-              selectableListScopeId: scopeId,
+            selectableListOnEnterScopeInjector,
-            });
+          } = getSelectableListScopeInjectors();
-          const selectedItemId = getSnapshotValue(
+          const selectedItemId = getSelectableListScopedSnapshotValue(
             snapshot,
-            selectedItemIdState,
+            selectedItemIdScopeInjector,
           );
 
-          const onEnter = getSnapshotValue(
+          const onEnter = getSelectableListScopedSnapshotValue(
             snapshot,
-            selectableListOnEnterState,
+            selectableListOnEnterScopeInjector,
           );
 
           if (selectedItemId) {
             onEnter?.(selectedItemId);
           }
         },
-      [scopeId],
+      [getSelectableListScopedSnapshotValue],
     ),
     hotkeyScope,
     [],

packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState.ts

@@ -0,0 +1,31 @@
+import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+import { useScopedState } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState';
+
+type UseSelectableListScopedStatesProps = {
+  selectableListScopeId?: string;
+};
+
+export const useSelectableListScopedState = ({
+  selectableListScopeId,
+}: UseSelectableListScopedStatesProps) => {
+  const scopeId = useAvailableScopeIdOrThrow(
+    SelectableListScopeInternalContext,
+    selectableListScopeId,
+  );
+
+  const {
+    getScopedState,
+    getScopedFamilyState,
+    getScopedSnapshotValue,
+    getScopedFamilySnapshotValue,
+  } = useScopedState(scopeId);
+
+  return {
+    scopeId,
+    getSelectableListScopedState: getScopedState,
+    getSelectableListScopedFamilyState: getScopedFamilyState,
+    getSelectableListScopedSnapshotValue: getScopedSnapshotValue,
+    getSelectableListScopedFamilySnapshotValue: getScopedFamilySnapshotValue,
+  };
+};

packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates.ts

@@ -1,36 +0,0 @@
-import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
-import { getSelectableListScopedStates } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates';
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-
-type UseSelectableListScopedStatesProps = {
-  selectableListScopeId?: string;
-  itemId?: string;
-};
-
-export const useSelectableListScopedStates = (
-  args?: UseSelectableListScopedStatesProps,
-) => {
-  const { selectableListScopeId, itemId } = args ?? {};
-  const scopeId = useAvailableScopeIdOrThrow(
-    SelectableListScopeInternalContext,
-    selectableListScopeId,
-  );
-
-  const {
-    selectedItemIdState,
-    selectableItemIdsState,
-    isSelectedItemIdSelector,
-    selectableListOnEnterState,
-  } = getSelectableListScopedStates({
-    selectableListScopeId: scopeId,
-    itemId: itemId,
-  });
-
-  return {
-    scopeId,
-    isSelectedItemIdSelector,
-    selectableItemIdsState,
-    selectedItemIdState,
-    selectableListOnEnterState,
-  };
-};

packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts

@@ -1,52 +1,48 @@
-import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil';
+import { useResetRecoilState, useSetRecoilState } from 'recoil';
 
-import { useSelectableListScopedStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates';
+import { useSelectableListScopedState } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState';
-import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
+import { getSelectableListScopeInjectors } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopeInjectors';
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-
-type UseSelectableListProps = {
-  selectableListId?: string;
-  itemId?: string;
-};
-
-export const useSelectableList = (props?: UseSelectableListProps) => {
-  const scopeId = useAvailableScopeIdOrThrow(
-    SelectableListScopeInternalContext,
-    props?.selectableListId,
-  );
 
+export const useSelectableList = (selectableListScopeId?: string) => {
   const {
-    selectableItemIdsState,
+    getSelectableListScopedState,
-    isSelectedItemIdSelector,
+    getSelectableListScopedFamilyState,
-    selectableListOnEnterState,
+    scopeId,
-    selectedItemIdState,
+  } = useSelectableListScopedState({
-  } = useSelectableListScopedStates({
+    selectableListScopeId,
-    selectableListScopeId: scopeId,
-    itemId: props?.itemId,
   });
 
-  const setSelectableItemIds = useSetRecoilState(selectableItemIdsState);
+  const {
-  const setSelectableListOnEnter = useSetRecoilState(
+    selectedItemIdScopeInjector,
-    selectableListOnEnterState,
+    selectableItemIdsScopeInjector,
-  );
+    selectableListOnEnterScopeInjector,
-  const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector);
+    isSelectedItemIdFamilyScopeInjector,
+  } = getSelectableListScopeInjectors();
 
-  const resetSelectedItemIdState = useResetRecoilState(selectedItemIdState);
+  const setSelectableItemIds = useSetRecoilState(
-  const resetIsSelectedItemIdSelector = useResetRecoilState(
+    getSelectableListScopedState(selectableItemIdsScopeInjector),
-    isSelectedItemIdSelector,
+  );
+  const setSelectableListOnEnter = useSetRecoilState(
+    getSelectableListScopedState(selectableListOnEnterScopeInjector),
+  );
+  const isSelectedItemIdFamilyState = getSelectableListScopedFamilyState(
+    isSelectedItemIdFamilyScopeInjector,
+  );
+
+  const resetSelectedItemIdState = useResetRecoilState(
+    getSelectableListScopedState(selectedItemIdScopeInjector),
   );
 
   const resetSelectedItem = () => {
     resetSelectedItemIdState();
-    resetIsSelectedItemIdSelector();
   };
 
   return {
-    setSelectableItemIds,
-    isSelectedItemId,
-    setSelectableListOnEnter,
     selectableListId: scopeId,
-    isSelectedItemIdSelector,
+
+    setSelectableItemIds,
+    isSelectedItemIdFamilyState,
+    setSelectableListOnEnter,
     resetSelectedItem,
   };
 };

packages/twenty-front/src/modules/ui/layout/selectable-list/states/selectors/isSelectedItemIdScopedFamilySelector.ts

@@ -1,25 +1,27 @@
-import { selectorFamily } from 'recoil';
-
 import { isSelectedItemIdMapScopedFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdMapScopedFamilyState';
+import { createScopedFamilySelector } from '@/ui/utilities/recoil-scope/utils/createScopedFamilySelector';
 
-export const isSelectedItemIdScopedFamilySelector = selectorFamily({
+export const isSelectedItemIdScopedFamilySelector = createScopedFamilySelector<
+  boolean,
+  string
+>({
   key: 'isSelectedItemIdScopedFamilySelector',
   get:
-    ({ scopeId, itemId }: { scopeId: string; itemId: string }) =>
+    ({ scopeId, familyKey }: { scopeId: string; familyKey: string }) =>
     ({ get }) =>
       get(
         isSelectedItemIdMapScopedFamilyState({
           scopeId: scopeId,
-          familyKey: itemId,
+          familyKey: familyKey,
         }),
       ),
   set:
-    ({ scopeId, itemId }: { scopeId: string; itemId: string }) =>
+    ({ scopeId, familyKey }: { scopeId: string; familyKey: string }) =>
     ({ set }, newValue) =>
       set(
         isSelectedItemIdMapScopedFamilyState({
           scopeId: scopeId,
-          familyKey: itemId,
+          familyKey: familyKey,
         }),
         newValue,
       ),

packages/twenty-front/src/modules/ui/layout/selectable-list/utils/internal/getSelectableListScopeInjectors.ts

@@ -0,0 +1,28 @@
+import { selectableItemIdsScopedState } from '@/ui/layout/selectable-list/states/selectableItemIdsScopedState';
+import { selectableListOnEnterScopedState } from '@/ui/layout/selectable-list/states/selectableListOnEnterScopedState';
+import { selectedItemIdScopedState } from '@/ui/layout/selectable-list/states/selectedItemIdScopedState';
+import { isSelectedItemIdScopedFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdScopedFamilySelector';
+import { getFamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector';
+import { getScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
+
+export const getSelectableListScopeInjectors = () => {
+  const selectedItemIdScopeInjector = getScopeInjector(
+    selectedItemIdScopedState,
+  );
+  const selectableItemIdsScopeInjector = getScopeInjector(
+    selectableItemIdsScopedState,
+  );
+  const selectableListOnEnterScopeInjector = getScopeInjector(
+    selectableListOnEnterScopedState,
+  );
+  const isSelectedItemIdFamilyScopeInjector = getFamilyScopeInjector(
+    isSelectedItemIdScopedFamilySelector,
+  );
+
+  return {
+    selectedItemIdScopeInjector,
+    selectableItemIdsScopeInjector,
+    selectableListOnEnterScopeInjector,
+    isSelectedItemIdFamilyScopeInjector,
+  };
+};

packages/twenty-front/src/modules/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates.ts

@@ -1,42 +0,0 @@
-import { selectableItemIdsScopedState } from '@/ui/layout/selectable-list/states/selectableItemIdsScopedState';
-import { selectableListOnEnterScopedState } from '@/ui/layout/selectable-list/states/selectableListOnEnterScopedState';
-import { selectedItemIdScopedState } from '@/ui/layout/selectable-list/states/selectedItemIdScopedState';
-import { isSelectedItemIdScopedFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdScopedFamilySelector';
-import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
-
-const UNDEFINED_SELECTABLE_ITEM_ID = 'UNDEFINED_SELECTABLE_ITEM_ID';
-
-export const getSelectableListScopedStates = ({
-  selectableListScopeId,
-  itemId,
-}: {
-  selectableListScopeId: string;
-  itemId?: string;
-}) => {
-  const isSelectedItemIdSelector = isSelectedItemIdScopedFamilySelector({
-    scopeId: selectableListScopeId,
-    itemId: itemId ?? UNDEFINED_SELECTABLE_ITEM_ID,
-  });
-
-  const selectedItemIdState = getScopedState(
-    selectedItemIdScopedState,
-    selectableListScopeId,
-  );
-
-  const selectableItemIdsState = getScopedState(
-    selectableItemIdsScopedState,
-    selectableListScopeId,
-  );
-
-  const selectableListOnEnterState = getScopedState(
-    selectableListOnEnterScopedState,
-    selectableListScopeId,
-  );
-
-  return {
-    isSelectedItemIdSelector,
-    selectableItemIdsState,
-    selectedItemIdState,
-    selectableListOnEnterState,
-  };
-};

packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/useScopedState.ts

@@ -0,0 +1,38 @@
+import { SerializableParam, Snapshot } from 'recoil';
+
+import { FamilyScopeInjector } from '@/ui/utilities/recoil-scope/utils/getFamilyScopeInjector';
+import { ScopeInjector } from '@/ui/utilities/recoil-scope/utils/getScopeInjector';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+
+export const useScopedState = (scopeId: string) => {
+  const getScopedState = <StateType>(scopeInjector: ScopeInjector<StateType>) =>
+    scopeInjector(scopeId);
+
+  const getScopedFamilyState =
+    <StateType, FamilyKey extends SerializableParam>(
+      familyScopeInjector: FamilyScopeInjector<StateType, FamilyKey>,
+    ) =>
+    (familyKey: FamilyKey) =>
+      familyScopeInjector(scopeId, familyKey);
+
+  const getScopedSnapshotValue = <StateType>(
+    snashot: Snapshot,
+    scopeInjector: ScopeInjector<StateType>,
+  ) => getSnapshotValue(snashot, scopeInjector(scopeId));
+
+  const getScopedFamilySnapshotValue =
+    <StateType, FamilyKey extends SerializableParam>(
+      snashot: Snapshot,
+      familyScopeInjector: FamilyScopeInjector<StateType, FamilyKey>,
+    ) =>
+    (familyKey: FamilyKey) =>
+      getSnapshotValue(snashot, familyScopeInjector(scopeId, familyKey));
+
+  return {
+    scopeId,
+    getScopedState,
+    getScopedFamilyState,
+    getScopedSnapshotValue,
+    getScopedFamilySnapshotValue,
+  };
+};

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/createScopedFamilySelector.ts

@@ -0,0 +1,47 @@
+import {
+  DefaultValue,
+  GetCallback,
+  GetRecoilValue,
+  Loadable,
+  RecoilValue,
+  ResetRecoilState,
+  selectorFamily,
+  SerializableParam,
+  SetRecoilState,
+  WrappedValue,
+} from 'recoil';
+
+import { ScopedFamilyStateKey } from '../scopes-internal/types/ScopedFamilyStateKey';
+
+type SelectorGetter<T, P> = (
+  param: P,
+) => (opts: {
+  get: GetRecoilValue;
+  getCallback: GetCallback;
+}) => Promise<T> | RecoilValue<T> | Loadable<T> | WrappedValue<T> | T;
+
+type SelectorSetter<T, P> = (
+  param: P,
+) => (
+  opts: { set: SetRecoilState; get: GetRecoilValue; reset: ResetRecoilState },
+  newValue: T | DefaultValue,
+) => void;
+
+export const createScopedFamilySelector = <
+  ValueType,
+  FamilyKey extends SerializableParam,
+>({
+  key,
+  get,
+  set,
+}: {
+  key: string;
+  get: SelectorGetter<ValueType, ScopedFamilyStateKey<FamilyKey>>;
+  set: SelectorSetter<ValueType, ScopedFamilyStateKey<FamilyKey>>;
+}) => {
+  return selectorFamily<ValueType, ScopedFamilyStateKey<FamilyKey>>({
+    key,
+    get,
+    set,
+  });
+};

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getFamilyScopeInjector.ts

@@ -0,0 +1,23 @@
+import { RecoilState, SerializableParam } from 'recoil';
+
+import { ScopedFamilyStateKey } from '../scopes-internal/types/ScopedFamilyStateKey';
+
+export type FamilyScopeInjector<
+  StateType,
+  FamilyKey extends SerializableParam,
+> = (scopeId: string, familyKey: FamilyKey) => RecoilState<StateType>;
+
+export const getFamilyScopeInjector = <
+  StateType,
+  FamilyKey extends SerializableParam,
+>(
+  scopedFamilyState: (
+    scopedFamilyKey: ScopedFamilyStateKey<FamilyKey>,
+  ) => RecoilState<StateType>,
+) => {
+  return (scopeId: string, familyKey: FamilyKey) =>
+    scopedFamilyState({
+      scopeId,
+      familyKey: familyKey || ('' as FamilyKey),
+    });
+};

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeInjector.ts

@@ -0,0 +1,16 @@
+import { RecoilState } from 'recoil';
+
+import { RecoilScopedState } from '../types/RecoilScopedState';
+
+export type ScopeInjector<StateType> = (
+  scopeId: string,
+) => RecoilState<StateType>;
+
+export const getScopeInjector = <StateType>(
+  scopedState: RecoilScopedState<StateType>,
+) => {
+  return (scopeId: string) =>
+    scopedState({
+      scopeId,
+    });
+};

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedFamilyStateDeprecated.ts

@@ -2,7 +2,7 @@ import { RecoilState, SerializableParam } from 'recoil';
 
 import { ScopedFamilyStateKey } from '../scopes-internal/types/ScopedFamilyStateKey';
 
-export const getScopedFamilyState = <
+export const getScopedFamilyStateDeprecated = <
   StateType,
   FamilyKey extends SerializableParam,
 >(

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedSelectorDeprecated.ts

@@ -1,6 +1,6 @@
 import { RecoilScopedSelector } from '../types/RecoilScopedSelector';
 
-export const getScopedSelector = <StateType>(
+export const getScopedSelectorDeprecated = <StateType>(
   recoilScopedState: RecoilScopedSelector<StateType>,
   scopeId: string,
 ) => {

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopedStateDeprecated.ts

@@ -1,6 +1,6 @@
 import { RecoilScopedState } from '../types/RecoilScopedState';
 
-export const getScopedState = <StateType>(
+export const getScopedStateDeprecated = <StateType>(
   recoilScopedState: RecoilScopedState<StateType>,
   scopeId: string,
 ) => {

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotScopedSelector.ts

@@ -1,15 +0,0 @@
-import { Snapshot } from 'recoil';
-
-import { RecoilScopedSelector } from '../types/RecoilScopedSelector';
-
-import { getScopedSelector } from './getScopedSelector';
-
-export const getSnapshotScopedSelector = <StateType>(
-  snapshot: Snapshot,
-  scopedState: RecoilScopedSelector<StateType>,
-  scopeId: string,
-) => {
-  return snapshot
-    .getLoadable(getScopedSelector(scopedState, scopeId))
-    .getValue();
-};

packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getSnapshotScopedValue.ts

@@ -1,13 +0,0 @@
-import { Snapshot } from 'recoil';
-
-import { RecoilScopedState } from '../types/RecoilScopedState';
-
-import { getScopedState } from './getScopedState';
-
-export const getSnapshotScopedValue = <StateType>(
-  snapshot: Snapshot,
-  scopedState: RecoilScopedState<StateType>,
-  scopeId: string,
-) => {
-  return snapshot.getLoadable(getScopedState(scopedState, scopeId)).getValue();
-};

packages/twenty-front/src/modules/views/hooks/internal/useViewScopedStates.ts

@@ -1,7 +1,7 @@
 import { useRecoilState } from 'recoil';
 
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
+import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
 
 import { UNDEFINED_FAMILY_ITEM_ID } from '../../constants';
 import { ViewScopeInternalContext } from '../../scopes/scope-internal-context/ViewScopeInternalContext';
@@ -18,7 +18,7 @@ export const useViewScopedStates = (args?: { viewScopeId?: string }) => {
 
   // View
   const [currentViewId] = useRecoilState(
-    getScopedState(currentViewIdScopedState, scopeId),
+    getScopedStateDeprecated(currentViewIdScopedState, scopeId),
   );
 
   const viewId = currentViewId ?? UNDEFINED_FAMILY_ITEM_ID;

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

@@ -1,6 +1,6 @@
 import { Snapshot } from 'recoil';
 
-import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
+import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { UNDEFINED_FAMILY_ITEM_ID } from '../constants';
@@ -19,7 +19,7 @@ export const getViewScopedStateValuesFromSnapshot = ({
 }) => {
   const currentViewId = getSnapshotValue(
     snapshot,
-    getScopedState(currentViewIdScopedState, viewScopeId),
+    getScopedStateDeprecated(currentViewIdScopedState, viewScopeId),
   );
 
   const familyItemId = viewId ?? currentViewId ?? UNDEFINED_FAMILY_ITEM_ID;

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

@@ -1,6 +1,6 @@
 import { Snapshot } from 'recoil';
 
-import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
+import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
 import { UNDEFINED_FAMILY_ITEM_ID } from '../constants';
@@ -19,7 +19,7 @@ export const getViewScopedStatesFromSnapshot = ({
 }) => {
   const currentViewId = getSnapshotValue(
     snapshot,
-    getScopedState(currentViewIdScopedState, viewScopeId),
+    getScopedStateDeprecated(currentViewIdScopedState, viewScopeId),
   );
 
   const usedViewId = viewId ?? currentViewId ?? UNDEFINED_FAMILY_ITEM_ID;

packages/twenty-front/src/modules/views/utils/internal/getViewScopedStates.ts

@@ -1,6 +1,6 @@
-import { getScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/getScopedFamilyState';
+import { getScopedFamilyStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedFamilyStateDeprecated';
-import { getScopedSelector } from '@/ui/utilities/recoil-scope/utils/getScopedSelector';
+import { getScopedSelectorDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedSelectorDeprecated';
-import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
+import { getScopedStateDeprecated } from '@/ui/utilities/recoil-scope/utils/getScopedStateDeprecated';
 import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
 import { isPersistingViewScopedState } from '@/views/states/isPersistingViewScopedState';
 import { currentViewScopedSelector } from '@/views/states/selectors/currentViewScopedSelector';
@@ -36,43 +36,46 @@ export const getViewScopedStates = ({
   viewScopeId: string;
   viewId: string;
 }) => {
-  const viewEditModeState = getScopedState(
+  const viewEditModeState = getScopedStateDeprecated(
     viewEditModeScopedState,
     viewScopeId,
   );
 
-  const viewsState = getScopedState(viewsScopedState, viewScopeId);
+  const viewsState = getScopedStateDeprecated(viewsScopedState, viewScopeId);
 
-  const viewObjectMetadataIdState = getScopedState(
+  const viewObjectMetadataIdState = getScopedStateDeprecated(
     viewObjectMetadataIdScopeState,
     viewScopeId,
   );
 
-  const viewTypeState = getScopedState(viewTypeScopedState, viewScopeId);
+  const viewTypeState = getScopedStateDeprecated(
+    viewTypeScopedState,
+    viewScopeId,
+  );
 
-  const entityCountInCurrentViewState = getScopedState(
+  const entityCountInCurrentViewState = getScopedStateDeprecated(
     entityCountInCurrentViewScopedState,
     viewScopeId,
   );
 
-  const isViewBarExpandedState = getScopedState(
+  const isViewBarExpandedState = getScopedStateDeprecated(
     isViewBarExpandedScopedState,
     viewScopeId,
   );
 
-  const isPersistingViewState = getScopedState(
+  const isPersistingViewState = getScopedStateDeprecated(
     isPersistingViewScopedState,
     viewScopeId,
   );
 
   // ViewSorts
-  const currentViewSortsState = getScopedFamilyState(
+  const currentViewSortsState = getScopedFamilyStateDeprecated(
     currentViewSortsScopedFamilyState,
     viewScopeId,
     viewId,
   );
 
-  const savedViewSortsState = getScopedFamilyState(
+  const savedViewSortsState = getScopedFamilyStateDeprecated(
     savedViewSortsScopedFamilyState,
     viewScopeId,
     viewId,
@@ -83,7 +86,7 @@ export const getViewScopedStates = ({
     viewId: viewId,
   });
 
-  const availableSortDefinitionsState = getScopedState(
+  const availableSortDefinitionsState = getScopedStateDeprecated(
     availableSortDefinitionsScopedState,
     viewScopeId,
   );
@@ -94,13 +97,13 @@ export const getViewScopedStates = ({
   });
 
   // ViewFilters
-  const currentViewFiltersState = getScopedFamilyState(
+  const currentViewFiltersState = getScopedFamilyStateDeprecated(
     currentViewFiltersScopedFamilyState,
     viewScopeId,
     viewId,
   );
 
-  const savedViewFiltersState = getScopedFamilyState(
+  const savedViewFiltersState = getScopedFamilyStateDeprecated(
     savedViewFiltersScopedFamilyState,
     viewScopeId,
     viewId,
@@ -112,7 +115,7 @@ export const getViewScopedStates = ({
       viewId: viewId,
     });
 
-  const availableFilterDefinitionsState = getScopedState(
+  const availableFilterDefinitionsState = getScopedStateDeprecated(
     availableFilterDefinitionsScopedState,
     viewScopeId,
   );
@@ -123,18 +126,18 @@ export const getViewScopedStates = ({
   });
 
   // ViewFields
-  const availableFieldDefinitionsState = getScopedState(
+  const availableFieldDefinitionsState = getScopedStateDeprecated(
     availableFieldDefinitionsScopedState,
     viewScopeId,
   );
 
-  const currentViewFieldsState = getScopedFamilyState(
+  const currentViewFieldsState = getScopedFamilyStateDeprecated(
     currentViewFieldsScopedFamilyState,
     viewScopeId,
     viewId,
   );
 
-  const savedViewFieldsState = getScopedFamilyState(
+  const savedViewFieldsState = getScopedFamilyStateDeprecated(
     savedViewFieldsScopedFamilyState,
     viewScopeId,
     viewId,
@@ -146,27 +149,27 @@ export const getViewScopedStates = ({
   });
 
   // ViewChangeHandlers
-  const onViewSortsChangeState = getScopedState(
+  const onViewSortsChangeState = getScopedStateDeprecated(
     onViewSortsChangeScopedState,
     viewScopeId,
   );
 
-  const onViewFiltersChangeState = getScopedState(
+  const onViewFiltersChangeState = getScopedStateDeprecated(
     onViewFiltersChangeScopedState,
     viewScopeId,
   );
 
-  const onViewFieldsChangeState = getScopedState(
+  const onViewFieldsChangeState = getScopedStateDeprecated(
     onViewFieldsChangeScopedState,
     viewScopeId,
   );
 
-  const currentViewIdState = getScopedState(
+  const currentViewIdState = getScopedStateDeprecated(
     currentViewIdScopedState,
     viewScopeId,
   );
 
-  const currentViewSelector = getScopedSelector(
+  const currentViewSelector = getScopedSelectorDeprecated(
     currentViewScopedSelector,
     viewScopeId,
   );