Refactor recoil v4 (#3266)

* Refactor recoil v4

* Fix ci

packages/twenty-front/package.json

@@ -9,8 +9,8 @@
     "start:clean": "yarn start --force",
     "build": "tsc && vite build && yarn build:inject-runtime-env",
     "build:inject-runtime-env": "sh ./scripts/inject-runtime-env.sh",
-    "tsc": "tsc --watch",
+    "tsc": "tsc --project tsconfig.app.json --watch",
-    "tsc:ci": "tsc",
+    "tsc:ci": "tsc --project tsconfig.app.json",
     "preview": "vite preview",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0 --config .eslintrc.cjs",
     "lint:ci": "yarn lint --config .eslintrc-ci.cjs",

packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx

@@ -42,7 +42,7 @@ export const getSlashMenu = (imagesActivated: boolean) => {
   ];
 
   if (!imagesActivated) {
-    items = items.filter((x) => x.name != 'Image');
+    items = items.filter((x) => x.name !== 'Image');
   }
 
   return items;

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

@@ -32,8 +32,8 @@ export const CommandMenuItem = ({
     Icon = IconArrowUpRight;
   }
 
-  const { isSelectedItemIdFamilyState } = useSelectableList();
+  const { isSelectedItemIdSelector } = useSelectableList();
-  const isSelectedItemId = useRecoilValue(isSelectedItemIdFamilyState(id));
+  const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector(id));
 
   return (
     <MenuItemCommand

packages/twenty-front/src/modules/object-record/object-filter-dropdown/scopes/scope-internal-context/ObjectFilterDropdownScopeInternalContext.ts

@@ -1,7 +1,7 @@
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
 
-type ObjectFilterDropdownScopeInternalContextProps = ScopedStateKey;
+type ObjectFilterDropdownScopeInternalContextProps = StateScopeMapKey;
 
 export const ObjectFilterDropdownScopeInternalContext =
   createScopeInternalContext<ObjectFilterDropdownScopeInternalContextProps>();

packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/availableFilterDefinitionsScopedState.ts

@@ -1,7 +1,7 @@
 import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const availableFilterDefinitionsScopedState = createScopedState<
+export const availableFilterDefinitionsScopedState = createStateScopeMap<
   FilterDefinition[]
 >({
   key: 'availableFilterDefinitionsScopedState',

packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/filterDefinitionUsedInDropdownScopedState.ts

@@ -1,9 +1,9 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { FilterDefinition } from '../types/FilterDefinition';
 
 export const filterDefinitionUsedInDropdownScopedState =
-  createScopedState<FilterDefinition | null>({
+  createStateScopeMap<FilterDefinition | null>({
     key: 'filterDefinitionUsedInDropdownScopedState',
     defaultValue: null,
   });

packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/isObjectFilterDropdownOperandSelectUnfoldedScopedState.ts

@@ -1,7 +1,7 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 export const isObjectFilterDropdownOperandSelectUnfoldedScopedState =
-  createScopedState<boolean>({
+  createStateScopeMap<boolean>({
     key: 'isObjectFilterDropdownOperandSelectUnfoldedScopedState',
     defaultValue: false,
   });

packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/isObjectFilterDropdownUnfoldedScopedState.ts

@@ -1,7 +1,7 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 export const isObjectFilterDropdownUnfoldedScopedState =
-  createScopedState<boolean>({
+  createStateScopeMap<boolean>({
     key: 'isObjectFilterDropdownUnfoldedScopedState',
     defaultValue: false,
   });

packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputScopedState.ts

@@ -1,7 +1,7 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 export const objectFilterDropdownSearchInputScopedState =
-  createScopedState<string>({
+  createStateScopeMap<string>({
     key: 'objectFilterDropdownSearchInputScopedState',
     defaultValue: '',
   });

packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedEntityIdScopedState.ts

@@ -1,7 +1,7 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 export const objectFilterDropdownSelectedEntityIdScopedState =
-  createScopedState<string | null>({
+  createStateScopeMap<string | null>({
     key: 'objectFilterDropdownSelectedEntityIdScopedState',
     defaultValue: null,
   });

packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsScopedState.ts

@@ -1,7 +1,7 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 export const objectFilterDropdownSelectedRecordIdsScopedState =
-  createScopedState<string[]>({
+  createStateScopeMap<string[]>({
     key: 'objectFilterDropdownSelectedRecordIdsScopedState',
     defaultValue: [],
   });

packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/onFilterSelectScopedState.ts

@@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { Filter } from '../types/Filter';
 
-export const onFilterSelectScopedState = createScopedState<
+export const onFilterSelectScopedState = createStateScopeMap<
   ((filter: Filter) => void) | undefined
 >({
   key: 'onFilterSelectScopedState',

packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedFilterScopedState.ts

@@ -1,8 +1,10 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { Filter } from '../types/Filter';
 
-export const selectedFilterScopedState = createScopedState<Filter | undefined>({
+export const selectedFilterScopedState = createStateScopeMap<
+  Filter | undefined
+>({
   key: 'selectedFilterScopedState',
   defaultValue: undefined,
 });

packages/twenty-front/src/modules/object-record/object-filter-dropdown/states/selectedOperandInDropdownScopedState.ts

@@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 
 export const selectedOperandInDropdownScopedState =
-  createScopedState<ViewFilterOperand | null>({
+  createStateScopeMap<ViewFilterOperand | null>({
     key: 'selectedOperandInDropdownScopedState',
     defaultValue: null,
   });

packages/twenty-front/src/modules/object-record/object-sort-dropdown/scopes/scope-internal-context/ObjectSortDropdownScopeInternalContext.ts

@@ -1,9 +1,9 @@
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
 
 import { Sort } from '../../types/Sort';
 
-type ObjectSortDropdownScopeInternalContextProps = ScopedStateKey & {
+type ObjectSortDropdownScopeInternalContextProps = StateScopeMapKey & {
   onSortSelect?: (sort: Sort) => void;
 };
 

packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/availableSortDefinitionsScopedState.ts

@@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { SortDefinition } from '../types/SortDefinition';
 
-export const availableSortDefinitionsScopedState = createScopedState<
+export const availableSortDefinitionsScopedState = createStateScopeMap<
   SortDefinition[]
 >({
   key: 'availableSortDefinitionsScopedState',

packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/isSortSelectedScopedState.ts

@@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const isSortSelectedScopedState = createScopedState<boolean>({
+export const isSortSelectedScopedState = createStateScopeMap<boolean>({
   key: 'isSortSelectedScopedState',
   defaultValue: false,
 });

packages/twenty-front/src/modules/object-record/object-sort-dropdown/states/onSortSelectScopedState.ts

@@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { Sort } from '../types/Sort';
 
-export const onSortSelectScopedState = createScopedState<
+export const onSortSelectScopedState = createStateScopeMap<
   ((sort: Sort) => void) | undefined
 >({
   key: 'onSortSelectScopedState',

packages/twenty-front/src/modules/object-record/record-board/scopes/scope-internal-context/RecordBoardScopeInternalContext.ts

@@ -1,7 +1,7 @@
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
 
-type RecordBoardScopeInternalContextProps = ScopedStateKey;
+type RecordBoardScopeInternalContextProps = StateScopeMapKey;
 
 export const RecordBoardScopeInternalContext =
   createScopeInternalContext<RecordBoardScopeInternalContextProps>();

packages/twenty-front/src/modules/object-record/record-board/states/activeRecordBoardCardIdsScopedState.ts

@@ -1,6 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const activeRecordBoardCardIdsScopedState = createScopedState<string[]>({
+export const activeRecordBoardCardIdsScopedState = createStateScopeMap<
+  string[]
+>({
   key: 'activeRecordBoardCardIdsScopedState',
   defaultValue: [],
 });

packages/twenty-front/src/modules/object-record/record-board/states/availableRecordBoardCardFieldsScopedState.ts

@@ -1,9 +1,9 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { BoardFieldDefinition } from '../types/BoardFieldDefinition';
 
-export const availableRecordBoardCardFieldsScopedState = createScopedState<
+export const availableRecordBoardCardFieldsScopedState = createStateScopeMap<
   BoardFieldDefinition<FieldMetadata>[]
 >({
   key: 'availableRecordBoardCardFieldsScopedState',

packages/twenty-front/src/modules/object-record/record-board/states/isCompactViewEnabledScopedState.ts

@@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const isCompactViewEnabledScopedState = createScopedState<boolean>({
+export const isCompactViewEnabledScopedState = createStateScopeMap<boolean>({
   key: 'isCompactViewEnabledScopedState',
   defaultValue: false,
 });

packages/twenty-front/src/modules/object-record/record-board/states/isRecordBoardLoadedScopedState.ts

@@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const isRecordBoardLoadedScopedState = createScopedState<boolean>({
+export const isRecordBoardLoadedScopedState = createStateScopeMap<boolean>({
   key: 'isRecordBoardLoadedScopedState',
   defaultValue: false,
 });

packages/twenty-front/src/modules/object-record/record-board/states/onFieldsChangeScopedState.ts

@@ -1,8 +1,8 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
 import { BoardFieldDefinition } from '@/object-record/record-board/types/BoardFieldDefinition';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const onFieldsChangeScopedState = createScopedState<
+export const onFieldsChangeScopedState = createStateScopeMap<
   (fields: BoardFieldDefinition<FieldMetadata>[]) => void
 >({
   key: 'onFieldsChangeScopedState',

packages/twenty-front/src/modules/object-record/record-board/states/recordBoardCardFieldsScopedState.ts

@@ -1,9 +1,9 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { BoardFieldDefinition } from '../types/BoardFieldDefinition';
 
-export const recordBoardCardFieldsScopedState = createScopedState<
+export const recordBoardCardFieldsScopedState = createStateScopeMap<
   BoardFieldDefinition<FieldMetadata>[]
 >({
   key: 'recordBoardCardFieldsScopedState',

packages/twenty-front/src/modules/object-record/record-board/states/recordBoardColumnsScopedState.ts

@@ -1,7 +1,7 @@
 import { BoardColumnDefinition } from '@/object-record/record-board/types/BoardColumnDefinition';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const recordBoardColumnsScopedState = createScopedState<
+export const recordBoardColumnsScopedState = createStateScopeMap<
   BoardColumnDefinition[]
 >({
   key: 'recordBoardColumnsScopedState',

packages/twenty-front/src/modules/object-record/record-board/states/recordBoardFiltersScopedState.ts

@@ -1,7 +1,7 @@
 import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const recordBoardFiltersScopedState = createScopedState<Filter[]>({
+export const recordBoardFiltersScopedState = createStateScopeMap<Filter[]>({
   key: 'recordBoardFiltersScopedState',
   defaultValue: [],
 });

packages/twenty-front/src/modules/object-record/record-board/states/recordBoardSortsScopedState.ts

@@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { Sort } from '../../object-sort-dropdown/types/Sort';
 
-export const recordBoardSortsScopedState = createScopedState<Sort[]>({
+export const recordBoardSortsScopedState = createStateScopeMap<Sort[]>({
   key: 'recordBoardSortsScopedState',
   defaultValue: [],
 });

packages/twenty-front/src/modules/object-record/record-board/states/savedOpportunitiesScopedState.ts

@@ -1,7 +1,9 @@
 import { Opportunity } from '@/pipeline/types/Opportunity';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const savedOpportunitiesScopedState = createScopedState<Opportunity[]>({
+export const savedOpportunitiesScopedState = createStateScopeMap<Opportunity[]>(
-  key: 'savedOpportunitiesScopedState',
+  {
-  defaultValue: [],
+    key: 'savedOpportunitiesScopedState',
-});
+    defaultValue: [],
+  },
+);

packages/twenty-front/src/modules/object-record/record-board/states/savedPipelineStepsScopedState.ts

@@ -1,7 +1,9 @@
 import { PipelineStep } from '@/pipeline/types/PipelineStep';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const savedPipelineStepsScopedState = createScopedState<PipelineStep[]>({
+export const savedPipelineStepsScopedState = createStateScopeMap<
+  PipelineStep[]
+>({
   key: 'savedPipelineStepsScopedState',
   defaultValue: [],
 });

packages/twenty-front/src/modules/object-record/record-board/states/savedRecordBoardCardFieldsScopedState.ts

@@ -1,9 +1,9 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { BoardFieldDefinition } from '../types/BoardFieldDefinition';
 
-export const savedRecordBoardCardFieldsScopedState = createScopedState<
+export const savedRecordBoardCardFieldsScopedState = createStateScopeMap<
   BoardFieldDefinition<FieldMetadata>[]
 >({
   key: 'savedRecordBoardCardFieldsScopedState',

packages/twenty-front/src/modules/object-record/record-board/states/savedRecordBoardColumnsScopedState.ts

@@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
 
-export const savedRecordBoardColumnsScopedState = createScopedState<
+export const savedRecordBoardColumnsScopedState = createStateScopeMap<
   BoardColumnDefinition[]
 >({
   key: 'savedRecordBoardColumnsScopedState',

packages/twenty-front/src/modules/object-record/record-board/states/savedRecordsScopedState.ts

@@ -1,7 +1,7 @@
 import { Company } from '@/companies/types/Company';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const savedRecordsScopedState = createScopedState<Company[]>({
+export const savedRecordsScopedState = createStateScopeMap<Company[]>({
   key: 'savedRecordsScopedState',
   defaultValue: [],
 });

packages/twenty-front/src/modules/object-record/record-board/states/selectors/hiddenRecordBoardCardFieldsScopedSelector.ts

@@ -1,22 +1,24 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
 
 import { availableRecordBoardCardFieldsScopedState } from '../availableRecordBoardCardFieldsScopedState';
 import { recordBoardCardFieldsScopedState } from '../recordBoardCardFieldsScopedState';
 
-export const hiddenRecordBoardCardFieldsScopedSelector = createScopedSelector({
+export const hiddenRecordBoardCardFieldsScopedSelector = createSelectorScopeMap(
-  key: 'hiddenRecordBoardCardFieldsScopedSelector',
+  {
-  get:
+    key: 'hiddenRecordBoardCardFieldsScopedSelector',
-    ({ scopeId }) =>
+    get:
-    ({ get }) => {
+      ({ scopeId }) =>
-      const fields = get(recordBoardCardFieldsScopedState({ scopeId }));
+      ({ get }) => {
-      const fieldKeys = fields.map(({ fieldMetadataId }) => fieldMetadataId);
+        const fields = get(recordBoardCardFieldsScopedState({ scopeId }));
-      const otherAvailableKeys = get(
+        const fieldKeys = fields.map(({ fieldMetadataId }) => fieldMetadataId);
-        availableRecordBoardCardFieldsScopedState({ scopeId }),
+        const otherAvailableKeys = get(
-      ).filter(({ fieldMetadataId }) => !fieldKeys.includes(fieldMetadataId));
+          availableRecordBoardCardFieldsScopedState({ scopeId }),
+        ).filter(({ fieldMetadataId }) => !fieldKeys.includes(fieldMetadataId));
 
-      return [
+        return [
-        ...fields.filter((field) => !field.isVisible),
+          ...fields.filter((field) => !field.isVisible),
-        ...otherAvailableKeys,
+          ...otherAvailableKeys,
-      ];
+        ];
-    },
+      },
-});
+  },
+);

packages/twenty-front/src/modules/object-record/record-board/states/selectors/selectedRecordBoardCardIdsScopedSelector.ts

@@ -1,10 +1,10 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
 
 import { isRecordBoardCardSelectedFamilyState } from '../isRecordBoardCardSelectedFamilyState';
 import { recordBoardCardIdsByColumnIdFamilyState } from '../recordBoardCardIdsByColumnIdFamilyState';
 import { recordBoardColumnsScopedState } from '../recordBoardColumnsScopedState';
 
-export const selectedRecordBoardCardIdsScopedSelector = createScopedSelector<
+export const selectedRecordBoardCardIdsScopedSelector = createSelectorScopeMap<
   string[]
 >({
   key: 'selectedRecordBoardCardIdsScopedSelector',

packages/twenty-front/src/modules/object-record/record-board/states/selectors/visibleRecordBoardCardFieldsScopedSelector.ts

@@ -1,13 +1,14 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
 
 import { recordBoardCardFieldsScopedState } from '../recordBoardCardFieldsScopedState';
 
-export const visibleRecordBoardCardFieldsScopedSelector = createScopedSelector({
+export const visibleRecordBoardCardFieldsScopedSelector =
-  key: 'visibleRecordBoardCardFieldsScopedSelector',
+  createSelectorScopeMap({
-  get:
+    key: 'visibleRecordBoardCardFieldsScopedSelector',
-    ({ scopeId }) =>
+    get:
-    ({ get }) =>
+      ({ scopeId }) =>
-      get(recordBoardCardFieldsScopedState({ scopeId }))
+      ({ get }) =>
-        .filter((field) => field.isVisible)
+        get(recordBoardCardFieldsScopedState({ scopeId }))
-        .sort((a, b) => a.position - b.position),
+          .filter((field) => field.isVisible)
-});
+          .sort((a, b) => a.position - b.position),
+  });

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

@@ -1,6 +1,6 @@
-import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
+import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
 
-export const isRowSelectedScopedFamilyState = createScopedFamilyState<
+export const isRowSelectedScopedFamilyState = createFamilyStateScopeMap<
   boolean,
   string
 >({

packages/twenty-front/src/modules/object-record/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext.ts

@@ -1,10 +1,10 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
 
 import { ColumnDefinition } from '../../types/ColumnDefinition';
 
-type RecordTableScopeInternalContextProps = ScopedStateKey & {
+type RecordTableScopeInternalContextProps = StateScopeMapKey & {
   onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
 };
 

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

@@ -1,9 +1,9 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
-export const availableTableColumnsScopedState = createScopedState<
+export const availableTableColumnsScopedState = createStateScopeMap<
   ColumnDefinition<FieldMetadata>[]
 >({
   key: 'availableTableColumnsScopedState',

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

@@ -1,9 +1,9 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { TableCellPosition } from '../types/TableCellPosition';
 
 export const currentTableCellInEditModePositionScopedState =
-  createScopedState<TableCellPosition>({
+  createStateScopeMap<TableCellPosition>({
     key: 'currentTableCellInEditModePositionScopedState',
     defaultValue: {
       row: 0,

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

@@ -1,7 +1,7 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 export const isRecordTableInitialLoadingScopedState =
-  createScopedState<boolean>({
+  createStateScopeMap<boolean>({
     key: 'isRecordTableInitialLoadingScopedState',
     defaultValue: true,
   });

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

@@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const isSoftFocusActiveScopedState = createScopedState<boolean>({
+export const isSoftFocusActiveScopedState = createStateScopeMap<boolean>({
   key: 'isSoftFocusActiveScopedState',
   defaultValue: false,
 });

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

@@ -1,11 +1,9 @@
-import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
+import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
 
 import { TableCellPosition } from '../types/TableCellPosition';
 
-export const isSoftFocusOnTableCellScopedFamilyState = createScopedFamilyState<
+export const isSoftFocusOnTableCellScopedFamilyState =
-  boolean,
+  createFamilyStateScopeMap<boolean, TableCellPosition>({
-  TableCellPosition
+    key: 'isSoftFocusOnTableCellScopedFamilyState',
->({
+    defaultValue: false,
-  key: 'isSoftFocusOnTableCellScopedFamilyState',
+  });
-  defaultValue: false,
-});

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

@@ -1,8 +1,8 @@
-import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
+import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
 
 import { TableCellPosition } from '../types/TableCellPosition';
 
-export const isTableCellInEditModeScopedFamilyState = createScopedFamilyState<
+export const isTableCellInEditModeScopedFamilyState = createFamilyStateScopeMap<
   boolean,
   TableCellPosition
 >({

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

@@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const numberOfTableRowsScopedState = createScopedState<number>({
+export const numberOfTableRowsScopedState = createStateScopeMap<number>({
   key: 'numberOfTableRowsScopedState',
   defaultValue: 0,
 });

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

@@ -1,8 +1,8 @@
 import { ObjectMetadataConfig } from '@/object-record/record-table/types/ObjectMetadataConfig';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 export const objectMetadataConfigScopedState =
-  createScopedState<ObjectMetadataConfig | null>({
+  createStateScopeMap<ObjectMetadataConfig | null>({
     key: 'objectMetadataConfigScopedState',
     defaultValue: null,
   });

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

@@ -1,9 +1,9 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { FieldMetadata } from '../../field/types/FieldMetadata';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
-export const onColumnsChangeScopedState = createScopedState<
+export const onColumnsChangeScopedState = createStateScopeMap<
   ((columns: ColumnDefinition<FieldMetadata>[]) => void) | undefined
 >({
   key: 'onColumnsChangeScopedState',

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

@@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const onEntityCountChangeScopedState = createScopedState<
+export const onEntityCountChangeScopedState = createStateScopeMap<
   ((entityCount: number) => void) | undefined
 >({
   key: 'onEntityCountChangeScopedState',

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

@@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const resizeFieldOffsetScopedState = createScopedState<number>({
+export const resizeFieldOffsetScopedState = createStateScopeMap<number>({
   key: 'resizeFieldOffsetScopedState',
   defaultValue: 0,
 });

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

@@ -1,4 +1,4 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
 
 import { AllRowsSelectedStatus } from '../../types/AllRowSelectedStatus';
 import { numberOfTableRowsScopedState } from '../numberOfTableRowsScopedState';
@@ -6,7 +6,7 @@ import { numberOfTableRowsScopedState } from '../numberOfTableRowsScopedState';
 import { selectedRowIdsScopedSelector } from './selectedRowIdsScopedSelector';
 
 export const allRowsSelectedStatusScopedSelector =
-  createScopedSelector<AllRowsSelectedStatus>({
+  createSelectorScopeMap<AllRowsSelectedStatus>({
     key: 'allRowsSelectedStatusScopedSelector',
     get:
       ({ scopeId }) =>

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

@@ -1,9 +1,9 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
 
 import { availableTableColumnsScopedState } from '../availableTableColumnsScopedState';
 import { tableColumnsScopedState } from '../tableColumnsScopedState';
 
-export const hiddenTableColumnsScopedSelector = createScopedSelector({
+export const hiddenTableColumnsScopedSelector = createSelectorScopeMap({
   key: 'hiddenTableColumnsScopedSelector',
   get:
     ({ scopeId }) =>

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

@@ -1,8 +1,8 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
 
 import { tableColumnsScopedState } from '../tableColumnsScopedState';
 
-export const numberOfTableColumnsScopedSelector = createScopedSelector({
+export const numberOfTableColumnsScopedSelector = createSelectorScopeMap({
   key: 'numberOfTableColumnsScopedSelector',
   get:
     ({ scopeId }) =>

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

@@ -1,9 +1,9 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
 
 import { isRowSelectedScopedFamilyState } from '../../record-table-row/states/isRowSelectedScopedFamilyState';
 import { tableRowIdsScopedState } from '../tableRowIdsScopedState';
 
-export const selectedRowIdsScopedSelector = createScopedSelector<string[]>({
+export const selectedRowIdsScopedSelector = createSelectorScopeMap<string[]>({
   key: 'selectedRowIdsScopedSelector',
   get:
     ({ scopeId }) =>

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

@@ -1,10 +1,10 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
 
 import { ColumnDefinition } from '../../types/ColumnDefinition';
 import { tableColumnsScopedState } from '../tableColumnsScopedState';
 
-export const tableColumnsByKeyScopedSelector = createScopedSelector({
+export const tableColumnsByKeyScopedSelector = createSelectorScopeMap({
   key: 'tableColumnsByKeyScopedSelector',
   get:
     ({ scopeId }) =>

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

@@ -1,9 +1,9 @@
-import { createScopedSelector } from '@/ui/utilities/recoil-scope/utils/createScopedSelector';
+import { createSelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createSelectorScopeMap';
 
 import { availableTableColumnsScopedState } from '../availableTableColumnsScopedState';
 import { tableColumnsScopedState } from '../tableColumnsScopedState';
 
-export const visibleTableColumnsScopedSelector = createScopedSelector({
+export const visibleTableColumnsScopedSelector = createSelectorScopeMap({
   key: 'visibleTableColumnsScopedSelector',
   get:
     ({ scopeId }) =>

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

@@ -1,9 +1,9 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { TableCellPosition } from '../types/TableCellPosition';
 
 export const softFocusPositionScopedState =
-  createScopedState<TableCellPosition>({
+  createStateScopeMap<TableCellPosition>({
     key: 'softFocusPositionScopedState',
     defaultValue: {
       row: 0,

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

@@ -1,9 +1,9 @@
 import { FieldMetadata } from '@/object-record/field/types/FieldMetadata';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
-export const tableColumnsScopedState = createScopedState<
+export const tableColumnsScopedState = createStateScopeMap<
   ColumnDefinition<FieldMetadata>[]
 >({
   key: 'tableColumnsScopedState',

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

@@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { Filter } from '../../object-filter-dropdown/types/Filter';
 
-export const tableFiltersScopedState = createScopedState<Filter[]>({
+export const tableFiltersScopedState = createStateScopeMap<Filter[]>({
   key: 'tableFiltersScopedState',
   defaultValue: [],
 });

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

@@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const tableLastRowVisibleScopedState = createScopedState<boolean>({
+export const tableLastRowVisibleScopedState = createStateScopeMap<boolean>({
   key: 'tableLastRowVisibleScopedState',
   defaultValue: false,
 });

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

@@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const tableRowIdsScopedState = createScopedState<string[]>({
+export const tableRowIdsScopedState = createStateScopeMap<string[]>({
   key: 'tableRowIdsScopedState',
   defaultValue: [],
 });

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

@@ -1,8 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { Sort } from '../../object-sort-dropdown/types/Sort';
 
-export const tableSortsScopedState = createScopedState<Sort[]>({
+export const tableSortsScopedState = createStateScopeMap<Sort[]>({
   key: 'tableSortsScopedState',
   defaultValue: [],
 });

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

@@ -22,13 +22,11 @@ export const SelectableMenuItemSelect = ({
   onEntitySelected,
   selectedEntity,
 }: SelectableMenuItemSelectProps) => {
-  const { isSelectedItemIdFamilyState } = useSelectableList(
+  const { isSelectedItemIdSelector } = useSelectableList(
     'single-entity-select-base-list',
   );
 
-  const isSelectedItemId = useRecoilValue(
+  const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector(entity.id));
-    isSelectedItemIdFamilyState(entity.id),
-  );
 
   return (
     <StyledSelectableItem itemId={entity.id} key={entity.id}>

packages/twenty-front/src/modules/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext.ts

@@ -1,7 +1,7 @@
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
 
-type RelationPickerScopeInternalContextProps = ScopedStateKey;
+type RelationPickerScopeInternalContextProps = StateScopeMapKey;
 
 export const RelationPickerScopeInternalContext =
   createScopeInternalContext<RelationPickerScopeInternalContextProps>();

packages/twenty-front/src/modules/object-record/relation-picker/states/identifiersMapperScopedState.ts

@@ -1,8 +1,8 @@
 import { IdentifiersMapper } from '@/object-record/relation-picker/types/IdentifiersMapper';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 export const identifiersMapperScopedState =
-  createScopedState<IdentifiersMapper | null>({
+  createStateScopeMap<IdentifiersMapper | null>({
     key: 'identifiersMapperScopedState',
     defaultValue: null,
   });

packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerPreselectedIdScopedState.ts

@@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const relationPickerPreselectedIdScopedState = createScopedState<
+export const relationPickerPreselectedIdScopedState = createStateScopeMap<
   string | undefined
 >({
   key: 'relationPickerPreselectedIdScopedState',

packages/twenty-front/src/modules/object-record/relation-picker/states/relationPickerSearchFilterScopedState.ts

@@ -1,6 +1,7 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const relationPickerSearchFilterScopedState = createScopedState<string>({
+export const relationPickerSearchFilterScopedState =
-  key: 'relationPickerSearchFilterScopedState',
+  createStateScopeMap<string>({
-  defaultValue: '',
+    key: 'relationPickerSearchFilterScopedState',
-});
+    defaultValue: '',
+  });

packages/twenty-front/src/modules/object-record/relation-picker/states/searchQueryScopedState.ts

@@ -1,7 +1,7 @@
 import { SearchQuery } from '@/object-record/relation-picker/types/SearchQuery';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const searchQueryScopedState = createScopedState<SearchQuery | null>({
+export const searchQueryScopedState = createStateScopeMap<SearchQuery | null>({
   key: 'searchQueryScopedState',
   defaultValue: null,
 });

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEmailsCard.tsx

@@ -30,7 +30,7 @@ export const SettingsAccountsEmailsCard = ({
     <Card>
       {accounts.map((account, index) => (
         <SettingsAccountRow
-          key={account.uuid}
+          key={account.id}
           LeftIcon={IconGmail}
           account={account}
           rightComponent={
@@ -43,7 +43,7 @@ export const SettingsAccountsEmailsCard = ({
               <LightIconButton Icon={IconChevronRight} accent="tertiary" />
             </StyledRightContainer>
           }
-          onClick={() => navigate(`/settings/accounts/emails/${account.uuid}`)}
+          onClick={() => navigate(`/settings/accounts/emails/${account.id}`)}
           divider={index < accounts.length - 1}
         />
       ))}

packages/twenty-front/src/modules/ui/feedback/dialog-manager/scopes/scope-internal-context/DialogManagerScopeInternalContext.ts

@@ -1,7 +1,7 @@
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
 
-type DialogManagerScopeInternalContextProps = ScopedStateKey;
+type DialogManagerScopeInternalContextProps = StateScopeMapKey;
 
 export const DialogManagerScopeInternalContext =
   createScopeInternalContext<DialogManagerScopeInternalContextProps>();

packages/twenty-front/src/modules/ui/feedback/dialog-manager/states/dialogInternalScopedState.ts

@@ -1,4 +1,4 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { DialogOptions } from '../types/DialogOptions';
 
@@ -7,7 +7,7 @@ type DialogState = {
   queue: DialogOptions[];
 };
 
-export const dialogInternalScopedState = createScopedState<DialogState>({
+export const dialogInternalScopedState = createStateScopeMap<DialogState>({
   key: 'dialog/internal-state',
   defaultValue: {
     maxQueue: 2,

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/scopes/scope-internal-context/SnackBarManagerScopeInternalContext.ts

@@ -1,7 +1,7 @@
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
 
-type SnackBarManagerScopeInternalContextProps = ScopedStateKey;
+type SnackBarManagerScopeInternalContextProps = StateScopeMapKey;
 
 export const SnackBarManagerScopeInternalContext =
   createScopeInternalContext<SnackBarManagerScopeInternalContextProps>();

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/states/snackBarInternalScopedState.ts

@@ -1,4 +1,4 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
 import { SnackBarProps } from '../components/SnackBar';
 
@@ -11,7 +11,7 @@ type SnackBarState = {
   queue: SnackBarOptions[];
 };
 
-export const snackBarInternalScopedState = createScopedState<SnackBarState>({
+export const snackBarInternalScopedState = createStateScopeMap<SnackBarState>({
   key: 'snackBarState',
   defaultValue: {
     maxQueue: 3,

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

@@ -61,9 +61,9 @@ const IconPickerIcon = ({
   selectedIconKey,
   Icon,
 }: IconPickerIconProps) => {
-  const { isSelectedItemIdFamilyState } = useSelectableList();
+  const { isSelectedItemIdSelector } = useSelectableList();
 
-  const isSelectedItemId = useRecoilValue(isSelectedItemIdFamilyState(iconKey));
+  const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector(iconKey));
 
   return (
     <StyledLightIconButton

packages/twenty-front/src/modules/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext.ts

@@ -1,7 +1,7 @@
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
 
-type DropdownScopeInternalContextProps = ScopedStateKey;
+type DropdownScopeInternalContextProps = StateScopeMapKey;
 
 export const DropdownScopeInternalContext =
   createScopeInternalContext<DropdownScopeInternalContextProps>();

packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownHotkeyScopeScopedState.ts

@@ -1,7 +1,7 @@
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const dropdownHotkeyScopeScopedState = createScopedState<
+export const dropdownHotkeyScopeScopedState = createStateScopeMap<
   HotkeyScope | null | undefined
 >({
   key: 'dropdownHotkeyScopeScopedState',

packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthScopedState.ts

@@ -1,6 +1,8 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const dropdownWidthScopedState = createScopedState<number | undefined>({
+export const dropdownWidthScopedState = createStateScopeMap<number | undefined>(
-  key: 'dropdownWidthScopedState',
+  {
-  defaultValue: 160,
+    key: 'dropdownWidthScopedState',
-});
+    defaultValue: 160,
+  },
+);

packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenScopedState.ts

@@ -1,6 +1,6 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
 
-export const isDropdownOpenScopedState = createScopedState<boolean>({
+export const isDropdownOpenScopedState = createStateScopeMap<boolean>({
   key: 'isDropdownOpenScopedState',
   defaultValue: false,
 });

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

@@ -14,9 +14,9 @@ export const SelectableItem = ({
   children,
   className,
 }: SelectableItemProps) => {
-  const { isSelectedItemIdFamilyState } = useSelectableList();
+  const { isSelectedItemIdSelector } = useSelectableList();
 
-  const isSelectedItemId = useRecoilValue(isSelectedItemIdFamilyState(itemId));
+  const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector(itemId));
 
   const scrollRef = useRef<HTMLDivElement>(null);
 

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 { useSelectableListScopedState } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState';
+import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates';
-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,27 +27,22 @@ export const useSelectableListHotKeys = (
     }
   };
 
-  const { injectSnapshotValueWithSelectableListScopeId } =
+  const {
-    useSelectableListScopedState({
+    selectedItemIdState,
-      selectableListScopeId: scopeId,
+    selectableItemIdsState,
-    });
+    isSelectedItemIdSelector,
+    selectableListOnEnterState,
+  } = useSelectableListStates({
+    selectableListScopeId: scopeId,
+  });
 
   const handleSelect = useRecoilCallback(
     ({ snapshot, set }) =>
       (direction: Direction) => {
-        const {
+        const selectedItemId = getSnapshotValue(snapshot, selectedItemIdState);
-          selectedItemIdScopeInjector,
+        const selectableItemIds = getSnapshotValue(
-          selectableItemIdsScopeInjector,
-          isSelectedItemIdFamilyScopeInjector,
-        } = getSelectableListScopeInjectors();
-
-        const selectedItemId = injectSnapshotValueWithSelectableListScopeId(
           snapshot,
-          selectedItemIdScopeInjector,
+          selectableItemIdsState,
-        );
-        const selectableItemIds = injectSnapshotValueWithSelectableListScopeId(
-          snapshot,
-          selectableItemIdsScopeInjector,
         );
 
         const currentPosition = findPosition(selectableItemIds, selectedItemId);
@@ -107,19 +102,16 @@ export const useSelectableListHotKeys = (
 
         if (selectedItemId !== nextId) {
           if (nextId) {
-            set(isSelectedItemIdFamilyScopeInjector(scopeId, nextId), true);
+            set(isSelectedItemIdSelector(nextId), true);
-            set(selectedItemIdScopeInjector(scopeId), nextId);
+            set(selectedItemIdState, nextId);
           }
 
           if (selectedItemId) {
-            set(
+            set(isSelectedItemIdSelector(selectedItemId), false);
-              isSelectedItemIdFamilyScopeInjector(scopeId, selectedItemId),
-              false,
-            );
           }
         }
       },
-    [injectSnapshotValueWithSelectableListScopeId, scopeId],
+    [isSelectedItemIdSelector, selectableItemIdsState, selectedItemIdState],
   );
 
   useScopedHotkeys(Key.ArrowUp, () => handleSelect('up'), hotkeyScope, []);
@@ -140,25 +132,20 @@ export const useSelectableListHotKeys = (
     useRecoilCallback(
       ({ snapshot }) =>
         () => {
-          const {
+          const selectedItemId = getSnapshotValue(
-            selectedItemIdScopeInjector,
-            selectableListOnEnterScopeInjector,
-          } = getSelectableListScopeInjectors();
-          const selectedItemId = injectSnapshotValueWithSelectableListScopeId(
             snapshot,
-            selectedItemIdScopeInjector,
+            selectedItemIdState,
           );
-
+          const onEnter = getSnapshotValue(
-          const onEnter = injectSnapshotValueWithSelectableListScopeId(
             snapshot,
-            selectableListOnEnterScopeInjector,
+            selectableListOnEnterState,
           );
 
           if (selectedItemId) {
             onEnter?.(selectedItemId);
           }
         },
-      [injectSnapshotValueWithSelectableListScopeId],
+      [selectableListOnEnterState, selectedItemIdState],
     ),
     hotkeyScope,
     [],

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

@@ -1,32 +0,0 @@
-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,
-    injectStateWithSelectableListScopeId: getScopedState,
-    injectFamilyStateWithSelectableListScopeId: getScopedFamilyState,
-    injectSnapshotValueWithSelectableListScopeId: getScopedSnapshotValue,
-    injectFamilySnapshotValueWithSelectableListScopeId:
-      getScopedFamilySnapshotValue,
-  };
-};

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

@@ -0,0 +1,35 @@
+import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
+import { selectableItemIdsStateScopeMap } from '@/ui/layout/selectable-list/states/selectableItemIdsStateScopeMap';
+import { selectableListOnEnterStateScopeMap } from '@/ui/layout/selectable-list/states/selectableListOnEnterStateScopeMap';
+import { selectedItemIdStateScopeMap } from '@/ui/layout/selectable-list/states/selectedItemIdStateScopeMap';
+import { isSelectedItemIdFamilySelectorScopeMap } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdFamilySelectorScopeMap';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+import { getFamilyState } from '@/ui/utilities/recoil-scope/utils/getFamilyState';
+import { getState } from '@/ui/utilities/recoil-scope/utils/getState';
+
+type useSelectableListStatesProps = {
+  selectableListScopeId?: string;
+};
+
+export const useSelectableListStates = ({
+  selectableListScopeId,
+}: useSelectableListStatesProps) => {
+  const scopeId = useAvailableScopeIdOrThrow(
+    SelectableListScopeInternalContext,
+    selectableListScopeId,
+  );
+
+  return {
+    scopeId,
+    isSelectedItemIdSelector: getFamilyState(
+      isSelectedItemIdFamilySelectorScopeMap,
+      scopeId,
+    ),
+    selectableItemIdsState: getState(selectableItemIdsStateScopeMap, scopeId),
+    selectableListOnEnterState: getState(
+      selectableListOnEnterStateScopeMap,
+      scopeId,
+    ),
+    selectedItemIdState: getState(selectedItemIdStateScopeMap, scopeId),
+  };
+};

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

@@ -1,38 +1,24 @@
 import { useResetRecoilState, useSetRecoilState } from 'recoil';
 
-import { useSelectableListScopedState } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedState';
+import { useSelectableListStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListStates';
-import { getSelectableListScopeInjectors } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopeInjectors';
 
 export const useSelectableList = (selectableListId?: string) => {
   const {
-    injectStateWithSelectableListScopeId,
-    injectFamilyStateWithSelectableListScopeId,
     scopeId,
-  } = useSelectableListScopedState({
+    selectableItemIdsState,
+    selectableListOnEnterState,
+    isSelectedItemIdSelector,
+    selectedItemIdState,
+  } = useSelectableListStates({
     selectableListScopeId: selectableListId,
   });
 
-  const {
+  const setSelectableItemIds = useSetRecoilState(selectableItemIdsState);
-    selectedItemIdScopeInjector,
-    selectableItemIdsScopeInjector,
-    selectableListOnEnterScopeInjector,
-    isSelectedItemIdFamilyScopeInjector,
-  } = getSelectableListScopeInjectors();
-
-  const setSelectableItemIds = useSetRecoilState(
-    injectStateWithSelectableListScopeId(selectableItemIdsScopeInjector),
-  );
   const setSelectableListOnEnter = useSetRecoilState(
-    injectStateWithSelectableListScopeId(selectableListOnEnterScopeInjector),
+    selectableListOnEnterState,
   );
-  const isSelectedItemIdFamilyState =
-    injectFamilyStateWithSelectableListScopeId(
-      isSelectedItemIdFamilyScopeInjector,
-    );
 
-  const resetSelectedItemIdState = useResetRecoilState(
+  const resetSelectedItemIdState = useResetRecoilState(selectedItemIdState);
-    injectStateWithSelectableListScopeId(selectedItemIdScopeInjector),
-  );
 
   const resetSelectedItem = () => {
     resetSelectedItemIdState();
@@ -42,7 +28,7 @@ export const useSelectableList = (selectableListId?: string) => {
     selectableListId: scopeId,
 
     setSelectableItemIds,
-    isSelectedItemIdFamilyState,
+    isSelectedItemIdSelector,
     setSelectableListOnEnter,
     resetSelectedItem,
   };

packages/twenty-front/src/modules/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext.ts

@@ -1,7 +1,7 @@
-import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/StateScopeMapKey';
 import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
 
-type SelectableListScopeInternalContextProps = ScopedStateKey;
+type SelectableListScopeInternalContextProps = StateScopeMapKey;
 
 export const SelectableListScopeInternalContext =
   createScopeInternalContext<SelectableListScopeInternalContextProps>();

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

@@ -0,0 +1,9 @@
+import { createFamilyStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilyStateScopeMap';
+
+export const isSelectedItemIdFamilyStateScopeMap = createFamilyStateScopeMap<
+  boolean,
+  string
+>({
+  key: 'isSelectedItemIdMapScopedFamilyState',
+  defaultValue: false,
+});

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

@@ -1,9 +0,0 @@
-import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
-
-export const isSelectedItemIdMapScopedFamilyState = createScopedFamilyState<
-  boolean,
-  string
->({
-  key: 'isSelectedItemIdMapScopedFamilyState',
-  defaultValue: false,
-});

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

@@ -1,6 +0,0 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
-
-export const selectableItemIdsScopedState = createScopedState<string[][]>({
-  key: 'selectableItemIdsScopedState',
-  defaultValue: [[]],
-});

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

@@ -0,0 +1,6 @@
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
+
+export const selectableItemIdsStateScopeMap = createStateScopeMap<string[][]>({
+  key: 'selectableItemIdsScopedState',
+  defaultValue: [[]],
+});

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

@@ -1,8 +0,0 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
-
-export const selectableListOnEnterScopedState = createScopedState<
-  ((itemId: string) => void) | undefined
->({
-  key: 'selectableListOnEnterScopedState',
-  defaultValue: undefined,
-});

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

@@ -0,0 +1,8 @@
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
+
+export const selectableListOnEnterStateScopeMap = createStateScopeMap<
+  ((itemId: string) => void) | undefined
+>({
+  key: 'selectableListOnEnterScopedState',
+  defaultValue: undefined,
+});

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

@@ -1,6 +0,0 @@
-import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
-
-export const selectedItemIdScopedState = createScopedState<string | null>({
-  key: 'selectedItemIdScopedState',
-  defaultValue: null,
-});

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

@@ -0,0 +1,6 @@
+import { createStateScopeMap } from '@/ui/utilities/recoil-scope/utils/createStateScopeMap';
+
+export const selectedItemIdStateScopeMap = createStateScopeMap<string | null>({
+  key: 'selectedItemIdScopedState',
+  defaultValue: null,
+});

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

@@ -0,0 +1,26 @@
+import { isSelectedItemIdFamilyStateScopeMap } from '@/ui/layout/selectable-list/states/isSelectedItemIdFamilyStateScopeMap';
+import { createFamilySelectorScopeMap } from '@/ui/utilities/recoil-scope/utils/createFamilySelectorScopeMap';
+
+export const isSelectedItemIdFamilySelectorScopeMap =
+  createFamilySelectorScopeMap<boolean, string>({
+    key: 'isSelectedItemIdScopedFamilySelector',
+    get:
+      ({ scopeId, familyKey }: { scopeId: string; familyKey: string }) =>
+      ({ get }) =>
+        get(
+          isSelectedItemIdFamilyStateScopeMap({
+            scopeId: scopeId,
+            familyKey: familyKey,
+          }),
+        ),
+    set:
+      ({ scopeId, familyKey }: { scopeId: string; familyKey: string }) =>
+      ({ set }, newValue) =>
+        set(
+          isSelectedItemIdFamilyStateScopeMap({
+            scopeId: scopeId,
+            familyKey: familyKey,
+          }),
+          newValue,
+        ),
+  });

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

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

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

@@ -1,28 +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 { 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/utilities/recoil-scope/hooks/useRecoilScopedFamilyState.ts

@@ -1,13 +1,13 @@
 import { RecoilState, SerializableParam, useRecoilState } from 'recoil';
 
-import { ScopedFamilyStateKey } from '../scopes-internal/types/ScopedFamilyStateKey';
+import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey';
 
 export const useRecoilScopedFamilyState = <
   StateType,
   FamilyKey extends SerializableParam,
 >(
   recoilState: (
-    scopedFamilyKey: ScopedFamilyStateKey<FamilyKey>,
+    scopedFamilyKey: FamilyStateScopeMapKey<FamilyKey>,
   ) => RecoilState<StateType>,
   scopeId: string,
   familyKey?: FamilyKey,

packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2.ts

@@ -1,9 +1,9 @@
 import { RecoilState, useRecoilState } from 'recoil';
 
-import { ScopedStateKey } from '../scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey';
 
 export const useRecoilScopedStateV2 = <StateType>(
-  recoilState: (scopedKey: ScopedStateKey) => RecoilState<StateType>,
+  recoilState: (scopedKey: StateScopeMapKey) => RecoilState<StateType>,
   scopeId: string,
 ) => {
   return useRecoilState<StateType>(

packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useRecoilScopedValueV2.ts

@@ -1,9 +1,9 @@
 import { RecoilState, useRecoilValue } from 'recoil';
 
-import { ScopedStateKey } from '../scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey';
 
 export const useRecoilScopedValueV2 = <StateType>(
-  recoilState: (scopedKey: ScopedStateKey) => RecoilState<StateType>,
+  recoilState: (scopedKey: StateScopeMapKey) => RecoilState<StateType>,
   scopeId: string,
 ) => {
   return useRecoilValue<StateType>(

packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useSetRecoilScopedFamilyState.ts

@@ -1,13 +1,13 @@
 import { RecoilState, SerializableParam, useSetRecoilState } from 'recoil';
 
-import { ScopedFamilyStateKey } from '../scopes-internal/types/ScopedFamilyStateKey';
+import { FamilyStateScopeMapKey } from '../scopes-internal/types/FamilyStateScopeMapKey';
 
 export const useSetRecoilScopedFamilyState = <
   StateType,
   FamilyKey extends SerializableParam,
 >(
   recoilState: (
-    scopedFamilyKey: ScopedFamilyStateKey<FamilyKey>,
+    scopedFamilyKey: FamilyStateScopeMapKey<FamilyKey>,
   ) => RecoilState<StateType>,
   scopeId: string,
   familyKey?: FamilyKey,

packages/twenty-front/src/modules/ui/utilities/recoil-scope/hooks/useSetRecoilScopedStateV2.ts

@@ -1,9 +1,9 @@
 import { RecoilState, useSetRecoilState } from 'recoil';
 
-import { ScopedStateKey } from '../scopes-internal/types/ScopedStateKey';
+import { StateScopeMapKey } from '../scopes-internal/types/StateScopeMapKey';
 
 export const useSetRecoilScopedStateV2 = <StateType>(
-  recoilState: (scopedKey: ScopedStateKey) => RecoilState<StateType>,
+  recoilState: (scopedKey: StateScopeMapKey) => RecoilState<StateType>,
   scopeId: string,
 ) => {
   return useSetRecoilState<StateType>(

packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/types/FamilyStateScopeMapKey.ts

@@ -1,6 +1,6 @@
 import { SerializableParam } from 'recoil';
 
-export type ScopedFamilyStateKey<FamilyKey extends SerializableParam> = {
+export type FamilyStateScopeMapKey<FamilyKey extends SerializableParam> = {
   scopeId: string;
   familyKey: FamilyKey;
 };