Jotai 13 (#18178)

## Recoil to Jotai Migration — PR 13: Workflow, Page Layout, AI, Activities, Settings, SSE & Remaining Modules ### Summary This is the 13th PR in the [14-PR migration series](packages/twenty-front/src/modules/ui/utilities/state/jotai/MIGRATION_PLAN.md) to replace Recoil with Jotai as the state management library in `twenty-front`. This PR migrates the remaining consumer code across all modules — updating ~1,076 files with ~10k insertions/deletions. ### What changed **New Jotai infrastructure (13 new files):** - `createComponentSelectorV2` and `createComponentFamilySelectorV2` — instance-scoped derived atoms, replacing Recoil's component selectors - 6 new hooks: `useRecoilComponentSelectorValueV2`, `useRecoilComponentFamilySelectorValueV2`, `useRecoilComponentSelectorCallbackStateV2`, `useRecoilComponentFamilySelectorCallbackStateV2`, `useRecoilComponentStateCallbackStateV2`, `useRecoilComponentFamilyStateCallbackStateV2` - New types: `ComponentSelectorV2`, `ComponentFamilySelectorV2`, `SelectorCallbacksV2` - Extended `buildGetHelper` to support the new selector patterns **State definition migrations:** - `createState()` → `createStateV2()` (Jotai `atom()`) - `createFamilyState()` → `createFamilyStateV2()` (Jotai `atom()` with family cache) - Recoil `selector`/`selectorFamily` → Jotai derived `atom()` via V2 utilities **Hook migrations (~2,400 removed, ~1,545 added V2 equivalents):** - `useRecoilValue` → `useRecoilValueV2` - `useRecoilState` → `useRecoilStateV2` - `useSetRecoilState` → `useSetRecoilStateV2` - `useRecoilCallback` → `useCallback` + `jotaiStore.get/set` - `useRecoilComponentValue` → `useRecoilComponentValueV2` - `useSetRecoilComponentState` → `useSetRecoilComponentStateV2` - `useRecoilComponentFamilyValue` → `useRecoilComponentFamilyValueV2` / `useFamilySelectorValueV2` - ~397 direct `import from 'recoil'` removed **Deleted files (9 files):** - `dateLocaleState.ts` — consolidated - `currentAIChatThreadTitleStateV2.ts` — renamed to replace the original - `isCommandMenuOpenedState.ts` — removed - `filesFieldUploadState.ts` — replaced by V2 - `recordStoreFamilySelector.ts`, `recordStoreFieldValueSelector.ts`, `recordStoreRecordsSelector.ts` — replaced by V2 equivalents - `settingsAllRolesSelector.ts` — replaced by `useSettingsAllRoles` hook - `settingsRoleIdsStateV2.ts` — consolidated **Modules migrated:** - Workflow (diagram, steps, variables, filters) - Page Layout (widgets, fields, graph, tabs) - AI (chat, agents, browsing context) - Activities (rich text editor, targets, timeline) - Action Menu (single/multiple record actions) - Command Menu (navigation, history, pages, workflow) - Context Store - Record Board, Record Table, Record Calendar, Record Index - Record Field, Record Filter, Record Sort, Record Group - Record Drag, Record Picker, Record Store - Views (view bar, view picker, filters, sorts) - Settings (roles, permissions, SSO, security, data model, developers, domains) - SSE (event streams, subscriptions) - Spreadsheet Import - Auth, Favorites, Front Components, Information Banner
2026-02-24 17:37:01 +01:00
parent c6ec764b23
commit 0f2af6a6cb
1326 changed files with 19248 additions and 19389 deletions
@@ -11,9 +11,9 @@ import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
-import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
 import { viewObjectMetadataIdComponentState } from '@/views/states/viewObjectMetadataIdComponentState';
 import { ViewType, viewTypeIconMapping } from '@/views/types/ViewType';
 import { ViewPickerCreateButton } from '@/views/view-picker/components/ViewPickerCreateButton';
@@ -53,40 +53,41 @@ export const ViewPickerContentCreateMode = () => {
  const { viewPickerMode, setViewPickerMode } = useViewPickerMode();
  const [hasManuallySelectedIcon, setHasManuallySelectedIcon] = useState(false);

-  const viewObjectMetadataId = useRecoilComponentValue(
+  const viewObjectMetadataId = useRecoilComponentValueV2(
    viewObjectMetadataIdComponentState,
  );
  const { objectMetadataItem } = useObjectMetadataItemById({
    objectId: viewObjectMetadataId ?? '',
  });

-  const [viewPickerInputName, setViewPickerInputName] = useRecoilComponentState(
-    viewPickerInputNameComponentState,
-  );
+  const [viewPickerInputName, setViewPickerInputName] =
+    useRecoilComponentStateV2(viewPickerInputNameComponentState);

  const [viewPickerSelectedIcon, setViewPickerSelectedIcon] =
-    useRecoilComponentState(viewPickerSelectedIconComponentState);
+    useRecoilComponentStateV2(viewPickerSelectedIconComponentState);

-  const viewPickerIsPersisting = useRecoilComponentValue(
+  const viewPickerIsPersisting = useRecoilComponentValueV2(
    viewPickerIsPersistingComponentState,
  );
-  const setViewPickerIsDirty = useSetRecoilComponentState(
+  const setViewPickerIsDirty = useSetRecoilComponentStateV2(
    viewPickerIsDirtyComponentState,
  );

  const [
    viewPickerMainGroupByFieldMetadataId,
    setViewPickerMainGroupByFieldMetadataId,
-  ] = useRecoilComponentState(
+  ] = useRecoilComponentStateV2(
    viewPickerMainGroupByFieldMetadataIdComponentState,
  );

  const [
    viewPickerCalendarFieldMetadataId,
    setViewPickerCalendarFieldMetadataId,
-  ] = useRecoilComponentState(viewPickerCalendarFieldMetadataIdComponentState);
+  ] = useRecoilComponentStateV2(
+    viewPickerCalendarFieldMetadataIdComponentState,
+  );

-  const [viewPickerType, setViewPickerType] = useRecoilComponentState(
+  const [viewPickerType, setViewPickerType] = useRecoilComponentStateV2(
    viewPickerTypeComponentState,
  );

@@ -8,9 +8,9 @@ import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
-import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
 import { ViewPickerEditButton } from '@/views/view-picker/components/ViewPickerEditButton';
 import { ViewPickerIconAndNameContainer } from '@/views/view-picker/components/ViewPickerIconAndNameContainer';
 import { ViewPickerSaveButtonContainer } from '@/views/view-picker/components/ViewPickerSaveButtonContainer';
@@ -27,16 +27,15 @@ import { IconChevronLeft } from 'twenty-ui/display';
 export const ViewPickerContentEditMode = () => {
  const { setViewPickerMode } = useViewPickerMode();

-  const [viewPickerInputName, setViewPickerInputName] = useRecoilComponentState(
-    viewPickerInputNameComponentState,
-  );
+  const [viewPickerInputName, setViewPickerInputName] =
+    useRecoilComponentStateV2(viewPickerInputNameComponentState);
  const [viewPickerSelectedIcon, setViewPickerSelectedIcon] =
-    useRecoilComponentState(viewPickerSelectedIconComponentState);
+    useRecoilComponentStateV2(viewPickerSelectedIconComponentState);

-  const viewPickerIsPersisting = useRecoilComponentValue(
+  const viewPickerIsPersisting = useRecoilComponentValueV2(
    viewPickerIsPersistingComponentState,
  );
-  const setViewPickerIsDirty = useSetRecoilComponentState(
+  const setViewPickerIsDirty = useSetRecoilComponentStateV2(
    viewPickerIsDirtyComponentState,
  );

@@ -2,9 +2,9 @@ import { useEffect } from 'react';

 import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
 import { useHasPermissionFlag } from '@/settings/roles/hooks/useHasPermissionFlag';
-import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
 import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
 import { coreViewsFromObjectMetadataItemFamilySelector } from '@/views/states/selectors/coreViewsFromObjectMetadataItemFamilySelector';
 import { viewTypeIconMapping } from '@/views/types/ViewType';
@@ -27,13 +27,13 @@ import {
 } from '~/generated-metadata/graphql';

 export const ViewPickerContentEffect = () => {
-  const setViewPickerSelectedIcon = useSetRecoilComponentState(
+  const setViewPickerSelectedIcon = useSetRecoilComponentStateV2(
    viewPickerSelectedIconComponentState,
  );
-  const setViewPickerInputName = useSetRecoilComponentState(
+  const setViewPickerInputName = useSetRecoilComponentStateV2(
    viewPickerInputNameComponentState,
  );
-  const setViewPickerVisibility = useSetRecoilComponentState(
+  const setViewPickerVisibility = useSetRecoilComponentStateV2(
    viewPickerVisibilityComponentState,
  );
  const { viewPickerMode } = useViewPickerMode();
@@ -41,28 +41,30 @@ export const ViewPickerContentEffect = () => {
  const [
    viewPickerMainGroupByFieldMetadataId,
    setViewPickerMainGroupByFieldMetadataId,
-  ] = useRecoilComponentState(
+  ] = useRecoilComponentStateV2(
    viewPickerMainGroupByFieldMetadataIdComponentState,
  );

  const [
    viewPickerCalendarFieldMetadataId,
    setViewPickerCalendarFieldMetadataId,
-  ] = useRecoilComponentState(viewPickerCalendarFieldMetadataIdComponentState);
+  ] = useRecoilComponentStateV2(
+    viewPickerCalendarFieldMetadataIdComponentState,
+  );

-  const [viewPickerType, setViewPickerType] = useRecoilComponentState(
+  const [viewPickerType, setViewPickerType] = useRecoilComponentStateV2(
    viewPickerTypeComponentState,
  );

-  const viewPickerReferenceViewId = useRecoilComponentValue(
+  const viewPickerReferenceViewId = useRecoilComponentValueV2(
    viewPickerReferenceViewIdComponentState,
  );

-  const viewPickerIsDirty = useRecoilComponentValue(
+  const viewPickerIsDirty = useRecoilComponentValueV2(
    viewPickerIsDirtyComponentState,
  );

-  const viewPickerIsPersisting = useRecoilComponentValue(
+  const viewPickerIsPersisting = useRecoilComponentValueV2(
    viewPickerIsPersistingComponentState,
  );

@@ -1,4 +1,4 @@
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
 import { ViewType } from '@/views/types/ViewType';
 import { useCreateViewFromCurrentState } from '@/views/view-picker/hooks/useCreateViewFromCurrentState';
 import { useDestroyViewFromCurrentState } from '@/views/view-picker/hooks/useDestroyViewFromCurrentState';
@@ -20,14 +20,16 @@ export const ViewPickerCreateButton = () => {
    useGetAvailableFieldsForCalendar();

  const { viewPickerMode } = useViewPickerMode();
-  const viewPickerType = useRecoilComponentValue(viewPickerTypeComponentState);
-  const viewPickerIsPersisting = useRecoilComponentValue(
+  const viewPickerType = useRecoilComponentValueV2(
+    viewPickerTypeComponentState,
+  );
+  const viewPickerIsPersisting = useRecoilComponentValueV2(
    viewPickerIsPersistingComponentState,
  );
-  const viewPickerMainGroupByFieldMetadataId = useRecoilComponentValue(
+  const viewPickerMainGroupByFieldMetadataId = useRecoilComponentValueV2(
    viewPickerMainGroupByFieldMetadataIdComponentState,
  );
-  const viewPickerCalendarFieldMetadataId = useRecoilComponentValue(
+  const viewPickerCalendarFieldMetadataId = useRecoilComponentValueV2(
    viewPickerCalendarFieldMetadataIdComponentState,
  );

@@ -1,4 +1,4 @@
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
 import { ViewType } from '@/views/types/ViewType';
 import { useCreateViewFromCurrentState } from '@/views/view-picker/hooks/useCreateViewFromCurrentState';
 import { useDestroyViewFromCurrentState } from '@/views/view-picker/hooks/useDestroyViewFromCurrentState';
@@ -15,11 +15,13 @@ export const ViewPickerEditButton = () => {
    useGetAvailableFieldsToGroupRecordsBy();

  const { viewPickerMode } = useViewPickerMode();
-  const viewPickerType = useRecoilComponentValue(viewPickerTypeComponentState);
-  const viewPickerIsPersisting = useRecoilComponentValue(
+  const viewPickerType = useRecoilComponentValueV2(
+    viewPickerTypeComponentState,
+  );
+  const viewPickerIsPersisting = useRecoilComponentValueV2(
    viewPickerIsPersistingComponentState,
  );
-  const viewPickerMainGroupByFieldMetadataId = useRecoilComponentValue(
+  const viewPickerMainGroupByFieldMetadataId = useRecoilComponentValueV2(
    viewPickerMainGroupByFieldMetadataIdComponentState,
  );

@@ -1,14 +1,14 @@
 import { FavoriteFolderPicker } from '@/favorites/favorite-folder-picker/components/FavoriteFolderPicker';
 import { FavoriteFolderPickerEffect } from '@/favorites/favorite-folder-picker/components/FavoriteFolderPickerEffect';
 import { FavoriteFolderPickerInstanceContext } from '@/favorites/favorite-folder-picker/states/context/FavoriteFolderPickerInstanceContext';
-import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateV2';
 import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
 import { coreViewFromViewIdFamilySelector } from '@/views/states/selectors/coreViewFromViewIdFamilySelector';
 import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerDropdownId';
 import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState';

 export const ViewPickerFavoriteFoldersDropdown = () => {
-  const [viewPickerReferenceViewId] = useRecoilComponentState(
+  const [viewPickerReferenceViewId] = useRecoilComponentStateV2(
    viewPickerReferenceViewIdComponentState,
  );

@@ -10,7 +10,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSectionLabel } from '@/ui/layout/dropdown/components/DropdownMenuSectionLabel';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
-import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
 import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
 import { usePerformViewAPIUpdate } from '@/views/hooks/internal/usePerformViewAPIUpdate';
 import { useChangeView } from '@/views/hooks/useChangeView';
@@ -54,7 +54,7 @@ export const ViewPickerListContent = () => {

  const { currentView } = useGetCurrentViewOnly();

-  const setViewPickerReferenceViewId = useSetRecoilComponentState(
+  const setViewPickerReferenceViewId = useSetRecoilComponentStateV2(
    viewPickerReferenceViewIdComponentState,
  );

@@ -6,7 +6,7 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { MenuItemWithOptionDropdown } from '@/ui/navigation/menu-item/components/MenuItemWithOptionDropdown';
-import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
 import { type View } from '@/views/types/View';
 import { useDestroyViewFromCurrentState } from '@/views/view-picker/hooks/useDestroyViewFromCurrentState';
 import { useViewPickerMode } from '@/views/view-picker/hooks/useViewPickerMode';
@@ -54,7 +54,7 @@ export const ViewPickerOptionDropdown = ({
  const { closeDropdown } = useCloseDropdown();
  const { getIcon } = useIcons();
  const { destroyViewFromCurrentState } = useDestroyViewFromCurrentState();
-  const setViewPickerReferenceViewId = useSetRecoilComponentState(
+  const setViewPickerReferenceViewId = useSetRecoilComponentStateV2(
    viewPickerReferenceViewIdComponentState,
  );
  const { setViewPickerMode } = useViewPickerMode();
@@ -7,7 +7,6 @@ import { renderHook } from '@testing-library/react';
 import { type ReactNode } from 'react';
 import { Provider as JotaiProvider } from 'jotai';
 import { MemoryRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

 const mockObjectMetadataId = 'test-object-id';
@@ -24,26 +23,21 @@ const createMockObjectMetadataItem = (fields: any[]) => ({
 const createWrapper = (objectMetadataItems: any[]) => {
  return ({ children }: { children: ReactNode }) => {
    jotaiStore.set(objectMetadataItemsState.atom, objectMetadataItems);
+    jotaiStore.set(
+      viewObjectMetadataIdComponentState.atomFamily({
+        instanceId: mockViewInstanceId,
+      }),
+      mockObjectMetadataId,
+    );
    return (
      <JotaiProvider store={jotaiStore}>
-        <RecoilRoot
-          initializeState={(snapshot) => {
-            snapshot.set(
-              viewObjectMetadataIdComponentState.atomFamily({
-                instanceId: mockViewInstanceId,
-              }),
-              mockObjectMetadataId,
-            );
-          }}
-        >
-          <MemoryRouter>
-            <ViewComponentInstanceContext.Provider
-              value={{ instanceId: mockViewInstanceId }}
-            >
-              {children}
-            </ViewComponentInstanceContext.Provider>
-          </MemoryRouter>
-        </RecoilRoot>
+        <MemoryRouter>
+          <ViewComponentInstanceContext.Provider
+            value={{ instanceId: mockViewInstanceId }}
+          >
+            {children}
+          </ViewComponentInstanceContext.Provider>
+        </MemoryRouter>
      </JotaiProvider>
    );
  };
@@ -7,7 +7,6 @@ import { renderHook } from '@testing-library/react';
 import { type ReactNode } from 'react';
 import { Provider as JotaiProvider } from 'jotai';
 import { MemoryRouter } from 'react-router-dom';
-import { RecoilRoot } from 'recoil';
 import { FieldMetadataType } from '~/generated-metadata/graphql';

 const mockObjectMetadataId = 'test-object-id';
@@ -24,26 +23,21 @@ const createMockObjectMetadataItem = (fields: any[]) => ({
 const createWrapper = (objectMetadataItems: any[]) => {
  return ({ children }: { children: ReactNode }) => {
    jotaiStore.set(objectMetadataItemsState.atom, objectMetadataItems);
+    jotaiStore.set(
+      viewObjectMetadataIdComponentState.atomFamily({
+        instanceId: mockViewInstanceId,
+      }),
+      mockObjectMetadataId,
+    );
    return (
      <JotaiProvider store={jotaiStore}>
-        <RecoilRoot
-          initializeState={(snapshot) => {
-            snapshot.set(
-              viewObjectMetadataIdComponentState.atomFamily({
-                instanceId: mockViewInstanceId,
-              }),
-              mockObjectMetadataId,
-            );
-          }}
-        >
-          <MemoryRouter>
-            <ViewComponentInstanceContext.Provider
-              value={{ instanceId: mockViewInstanceId }}
-            >
-              {children}
-            </ViewComponentInstanceContext.Provider>
-          </MemoryRouter>
-        </RecoilRoot>
+        <MemoryRouter>
+          <ViewComponentInstanceContext.Provider
+            value={{ instanceId: mockViewInstanceId }}
+          >
+            {children}
+          </ViewComponentInstanceContext.Provider>
+        </MemoryRouter>
      </JotaiProvider>
    );
  };
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';

 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
-import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
 import { VIEW_PICKER_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerDropdownId';
 import { VIEW_PICKER_KANBAN_FIELD_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerKanbanFieldDropdownId';
 import { VIEW_PICKER_VIEW_TYPE_DROPDOWN_ID } from '@/views/view-picker/constants/ViewPickerViewTypeDropdownId';
@@ -9,11 +9,11 @@ import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states
 import { viewPickerModeComponentState } from '@/views/view-picker/states/viewPickerModeComponentState';

 export const useCloseAndResetViewPicker = () => {
-  const setViewPickerMode = useSetRecoilComponentState(
+  const setViewPickerMode = useSetRecoilComponentStateV2(
    viewPickerModeComponentState,
  );

-  const setViewPickerIsPersisting = useSetRecoilComponentState(
+  const setViewPickerIsPersisting = useSetRecoilComponentStateV2(
    viewPickerIsPersistingComponentState,
  );

@@ -1,5 +1,4 @@
-import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
-import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
 import { useChangeView } from '@/views/hooks/useChangeView';
 import { useCreateViewFromCurrentView } from '@/views/hooks/useCreateViewFromCurrentView';
 import { ViewType } from '@/views/types/ViewType';
@@ -13,122 +12,108 @@ import { viewPickerModeComponentState } from '@/views/view-picker/states/viewPic
 import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
 import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';
 import { viewPickerVisibilityComponentState } from '@/views/view-picker/states/viewPickerVisibilityComponentState';
-import { useRecoilCallback } from 'recoil';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';

 export const useCreateViewFromCurrentState = () => {
  const { closeAndResetViewPicker } = useCloseAndResetViewPicker();

-  const viewPickerInputNameCallbackState = useRecoilComponentCallbackState(
-    viewPickerInputNameComponentState,
-  );
+  const viewPickerInputNameCallbackState =
+    useRecoilComponentStateCallbackStateV2(viewPickerInputNameComponentState);

-  const viewPickerSelectedIconCallbackState = useRecoilComponentCallbackState(
-    viewPickerSelectedIconComponentState,
-  );
+  const viewPickerSelectedIconCallbackState =
+    useRecoilComponentStateCallbackStateV2(
+      viewPickerSelectedIconComponentState,
+    );

-  const viewPickerTypeCallbackState = useRecoilComponentCallbackState(
+  const viewPickerTypeCallbackState = useRecoilComponentStateCallbackStateV2(
    viewPickerTypeComponentState,
  );

  const viewPickerMainGroupByFieldMetadataIdCallbackState =
-    useRecoilComponentCallbackState(
+    useRecoilComponentStateCallbackStateV2(
      viewPickerMainGroupByFieldMetadataIdComponentState,
    );

  const viewPickerCalendarFieldMetadataIdCallbackState =
-    useRecoilComponentCallbackState(
+    useRecoilComponentStateCallbackStateV2(
      viewPickerCalendarFieldMetadataIdComponentState,
    );

-  const viewPickerIsPersistingCallbackState = useRecoilComponentCallbackState(
-    viewPickerIsPersistingComponentState,
-  );
+  const viewPickerIsPersistingCallbackState =
+    useRecoilComponentStateCallbackStateV2(
+      viewPickerIsPersistingComponentState,
+    );

-  const viewPickerIsDirtyCallbackState = useRecoilComponentCallbackState(
+  const viewPickerIsDirtyCallbackState = useRecoilComponentStateCallbackStateV2(
    viewPickerIsDirtyComponentState,
  );

-  const viewPickerModeCallbackState = useRecoilComponentCallbackState(
+  const viewPickerModeCallbackState = useRecoilComponentStateCallbackStateV2(
    viewPickerModeComponentState,
  );

-  const viewPickerVisibilityCallbackState = useRecoilComponentCallbackState(
-    viewPickerVisibilityComponentState,
-  );
+  const viewPickerVisibilityCallbackState =
+    useRecoilComponentStateCallbackStateV2(viewPickerVisibilityComponentState);

  const { createViewFromCurrentView } = useCreateViewFromCurrentView();
  const { changeView } = useChangeView();

-  const createViewFromCurrentState = useRecoilCallback(
-    ({ snapshot, set }) =>
-      async () => {
-        const name = getSnapshotValue(
-          snapshot,
-          viewPickerInputNameCallbackState,
-        );
-        const iconKey = getSnapshotValue(
-          snapshot,
-          viewPickerSelectedIconCallbackState,
-        );
-        const type = getSnapshotValue(snapshot, viewPickerTypeCallbackState);
-        const mainGroupByFieldMetadataId = getSnapshotValue(
-          snapshot,
-          viewPickerMainGroupByFieldMetadataIdCallbackState,
-        );
-        const calendarFieldMetadataId = getSnapshotValue(
-          snapshot,
-          viewPickerCalendarFieldMetadataIdCallbackState,
-        );
+  const store = useStore();

-        const viewPickerMode = getSnapshotValue(
-          snapshot,
-          viewPickerModeCallbackState,
-        );
-        const visibility = getSnapshotValue(
-          snapshot,
-          viewPickerVisibilityCallbackState,
-        );
-
-        const shouldCopyFiltersAndSortsAndAggregate =
-          viewPickerMode === 'create-from-current';
-
-        set(viewPickerIsPersistingCallbackState, true);
-        set(viewPickerIsDirtyCallbackState, false);
-
-        const createdViewId = await createViewFromCurrentView(
-          {
-            name,
-            icon: iconKey,
-            type,
-            mainGroupByFieldMetadataId:
-              type === ViewType.Kanban ? mainGroupByFieldMetadataId : null,
-            calendarFieldMetadataId,
-            visibility,
-          },
-          shouldCopyFiltersAndSortsAndAggregate,
-        );
-
-        if (isDefined(createdViewId)) {
-          closeAndResetViewPicker();
-          changeView(createdViewId);
-        }
-      },
-    [
-      closeAndResetViewPicker,
-      createViewFromCurrentView,
-      changeView,
-      viewPickerInputNameCallbackState,
-      viewPickerIsDirtyCallbackState,
-      viewPickerIsPersistingCallbackState,
+  const createViewFromCurrentState = useCallback(async () => {
+    const name = store.get(viewPickerInputNameCallbackState);
+    const iconKey = store.get(viewPickerSelectedIconCallbackState);
+    const type = store.get(viewPickerTypeCallbackState);
+    const mainGroupByFieldMetadataId = store.get(
      viewPickerMainGroupByFieldMetadataIdCallbackState,
+    );
+    const calendarFieldMetadataId = store.get(
      viewPickerCalendarFieldMetadataIdCallbackState,
-      viewPickerSelectedIconCallbackState,
-      viewPickerTypeCallbackState,
-      viewPickerModeCallbackState,
-      viewPickerVisibilityCallbackState,
-    ],
-  );
+    );
+
+    const viewPickerMode = store.get(viewPickerModeCallbackState);
+    const visibility = store.get(viewPickerVisibilityCallbackState);
+
+    const shouldCopyFiltersAndSortsAndAggregate =
+      viewPickerMode === 'create-from-current';
+
+    store.set(viewPickerIsPersistingCallbackState, true);
+    store.set(viewPickerIsDirtyCallbackState, false);
+
+    const createdViewId = await createViewFromCurrentView(
+      {
+        name,
+        icon: iconKey,
+        type,
+        mainGroupByFieldMetadataId:
+          type === ViewType.Kanban ? mainGroupByFieldMetadataId : null,
+        calendarFieldMetadataId,
+        visibility,
+      },
+      shouldCopyFiltersAndSortsAndAggregate,
+    );
+
+    if (isDefined(createdViewId)) {
+      closeAndResetViewPicker();
+      changeView(createdViewId);
+    }
+  }, [
+    store,
+    closeAndResetViewPicker,
+    createViewFromCurrentView,
+    changeView,
+    viewPickerInputNameCallbackState,
+    viewPickerIsDirtyCallbackState,
+    viewPickerIsPersistingCallbackState,
+    viewPickerMainGroupByFieldMetadataIdCallbackState,
+    viewPickerCalendarFieldMetadataIdCallbackState,
+    viewPickerSelectedIconCallbackState,
+    viewPickerTypeCallbackState,
+    viewPickerModeCallbackState,
+    viewPickerVisibilityCallbackState,
+  ]);

  return { createViewFromCurrentState };
 };
@@ -1,15 +1,14 @@
-import { useRecoilCallback } from 'recoil';
+import { useCallback } from 'react';
+import { useStore } from 'jotai';

 import { useContextStoreObjectMetadataItemOrThrow } from '@/context-store/hooks/useContextStoreObjectMetadataItemOrThrow';
-import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
+import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
 import { useFamilySelectorValueV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorValueV2';
-import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 import { usePerformViewAPIPersist } from '@/views/hooks/internal/usePerformViewAPIPersist';
 import { useChangeView } from '@/views/hooks/useChangeView';
 import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
 import { coreViewsByObjectMetadataIdFamilySelector } from '@/views/states/selectors/coreViewsByObjectMetadataIdFamilySelector';
 import { coreViewsFromObjectMetadataItemFamilySelector } from '@/views/states/selectors/coreViewsFromObjectMetadataItemFamilySelector';
-import { useStore } from 'jotai';
 import { useCloseAndResetViewPicker } from '@/views/view-picker/hooks/useCloseAndResetViewPicker';
 import { viewPickerIsDirtyComponentState } from '@/views/view-picker/states/viewPickerIsDirtyComponentState';
 import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states/viewPickerIsPersistingComponentState';
@@ -18,18 +17,19 @@ import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/sta
 export const useDestroyViewFromCurrentState = (viewBarInstanceId?: string) => {
  const { closeAndResetViewPicker } = useCloseAndResetViewPicker();

-  const viewPickerIsPersistingCallbackState = useRecoilComponentCallbackState(
-    viewPickerIsPersistingComponentState,
-    viewBarInstanceId,
-  );
+  const viewPickerIsPersistingCallbackState =
+    useRecoilComponentStateCallbackStateV2(
+      viewPickerIsPersistingComponentState,
+      viewBarInstanceId,
+    );

-  const viewPickerIsDirtyCallbackState = useRecoilComponentCallbackState(
+  const viewPickerIsDirtyCallbackState = useRecoilComponentStateCallbackStateV2(
    viewPickerIsDirtyComponentState,
    viewBarInstanceId,
  );

  const viewPickerReferenceViewIdCallbackState =
-    useRecoilComponentCallbackState(
+    useRecoilComponentStateCallbackStateV2(
      viewPickerReferenceViewIdComponentState,
      viewBarInstanceId,
    );
@@ -49,51 +49,45 @@ export const useDestroyViewFromCurrentState = (viewBarInstanceId?: string) => {

  const store = useStore();

-  const destroyViewFromCurrentState = useRecoilCallback(
-    ({ set, snapshot }) =>
-      async () => {
-        set(viewPickerIsPersistingCallbackState, true);
-        closeAndResetViewPicker();
-        set(viewPickerIsDirtyCallbackState, false);
+  const destroyViewFromCurrentState = useCallback(async () => {
+    store.set(viewPickerIsPersistingCallbackState, true);
+    closeAndResetViewPicker();
+    store.set(viewPickerIsDirtyCallbackState, false);

-        const viewPickerReferenceViewId = getSnapshotValue(
-          snapshot,
-          viewPickerReferenceViewIdCallbackState,
-        );
-
-        const shouldChangeView = viewPickerReferenceViewId === currentView?.id;
-
-        if (shouldChangeView) {
-          changeView(
-            viewsOnCurrentObject.filter(
-              (view) => view.id !== viewPickerReferenceViewId,
-            )[0].id,
-          );
-        }
-
-        store.set(
-          coreViewsByObjectMetadataIdFamilySelector.selectorFamily(
-            objectMetadataItem.id,
-          ),
-          (views) =>
-            views.filter((view) => view.id !== viewPickerReferenceViewId),
-        );
-
-        await performViewAPIDestroy({ id: viewPickerReferenceViewId });
-      },
-    [
-      currentView,
-      closeAndResetViewPicker,
-      objectMetadataItem.id,
-      changeView,
-      performViewAPIDestroy,
-      store,
-      viewPickerIsDirtyCallbackState,
-      viewPickerIsPersistingCallbackState,
+    const viewPickerReferenceViewId = store.get(
      viewPickerReferenceViewIdCallbackState,
-      viewsOnCurrentObject,
-    ],
-  );
+    );
+
+    const shouldChangeView = viewPickerReferenceViewId === currentView?.id;
+
+    if (shouldChangeView) {
+      changeView(
+        viewsOnCurrentObject.filter(
+          (view) => view.id !== viewPickerReferenceViewId,
+        )[0].id,
+      );
+    }
+
+    store.set(
+      coreViewsByObjectMetadataIdFamilySelector.selectorFamily(
+        objectMetadataItem.id,
+      ),
+      (views) => views.filter((view) => view.id !== viewPickerReferenceViewId),
+    );
+
+    await performViewAPIDestroy({ id: viewPickerReferenceViewId });
+  }, [
+    currentView,
+    closeAndResetViewPicker,
+    objectMetadataItem.id,
+    changeView,
+    performViewAPIDestroy,
+    store,
+    viewPickerIsDirtyCallbackState,
+    viewPickerIsPersistingCallbackState,
+    viewPickerReferenceViewIdCallbackState,
+    viewsOnCurrentObject,
+  ]);

  return {
    destroyViewFromCurrentState,
@@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
 import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { viewObjectMetadataIdComponentState } from '@/views/states/viewObjectMetadataIdComponentState';
 import { FieldMetadataType, SettingsPath } from 'twenty-shared/types';
@@ -12,7 +12,7 @@ import { isDefined, isFieldMetadataDateKind } from 'twenty-shared/utils';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';

 export const useGetAvailableFieldsForCalendar = () => {
-  const viewObjectMetadataId = useRecoilComponentValue(
+  const viewObjectMetadataId = useRecoilComponentValueV2(
    viewObjectMetadataIdComponentState,
  );
  const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
@@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
 import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { viewObjectMetadataIdComponentState } from '@/views/states/viewObjectMetadataIdComponentState';
 import { SettingsPath } from 'twenty-shared/types';
@@ -13,7 +13,7 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';

 export const useGetAvailableFieldsToGroupRecordsBy = () => {
-  const viewObjectMetadataId = useRecoilComponentValue(
+  const viewObjectMetadataId = useRecoilComponentValueV2(
    viewObjectMetadataIdComponentState,
  );
  const objectMetadataItems = useRecoilValueV2(objectMetadataItemsState);
@@ -1,5 +1,7 @@
-import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
-import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { useCallback } from 'react';
+import { useStore } from 'jotai';
+
+import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
 import { usePerformViewAPIUpdate } from '@/views/hooks/internal/usePerformViewAPIUpdate';
 import { useCanPersistViewChanges } from '@/views/hooks/useCanPersistViewChanges';
 import { useCloseAndResetViewPicker } from '@/views/view-picker/hooks/useCloseAndResetViewPicker';
@@ -9,87 +11,79 @@ import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states
 import { viewPickerReferenceViewIdComponentState } from '@/views/view-picker/states/viewPickerReferenceViewIdComponentState';
 import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
 import { viewPickerVisibilityComponentState } from '@/views/view-picker/states/viewPickerVisibilityComponentState';
-import { useRecoilCallback } from 'recoil';

 export const useUpdateViewFromCurrentState = () => {
  const { canPersistChanges } = useCanPersistViewChanges();
  const { closeAndResetViewPicker } = useCloseAndResetViewPicker();

-  const viewPickerInputNameCallbackState = useRecoilComponentCallbackState(
-    viewPickerInputNameComponentState,
-  );
+  const viewPickerInputNameCallbackState =
+    useRecoilComponentStateCallbackStateV2(viewPickerInputNameComponentState);

-  const viewPickerSelectedIconCallbackState = useRecoilComponentCallbackState(
-    viewPickerSelectedIconComponentState,
-  );
+  const viewPickerSelectedIconCallbackState =
+    useRecoilComponentStateCallbackStateV2(
+      viewPickerSelectedIconComponentState,
+    );

-  const viewPickerIsPersistingCallbackState = useRecoilComponentCallbackState(
-    viewPickerIsPersistingComponentState,
-  );
+  const viewPickerIsPersistingCallbackState =
+    useRecoilComponentStateCallbackStateV2(
+      viewPickerIsPersistingComponentState,
+    );

-  const viewPickerIsDirtyCallbackState = useRecoilComponentCallbackState(
+  const viewPickerIsDirtyCallbackState = useRecoilComponentStateCallbackStateV2(
    viewPickerIsDirtyComponentState,
  );

  const viewPickerReferenceViewIdCallbackState =
-    useRecoilComponentCallbackState(viewPickerReferenceViewIdComponentState);
+    useRecoilComponentStateCallbackStateV2(
+      viewPickerReferenceViewIdComponentState,
+    );

-  const viewPickerVisibilityCallbackState = useRecoilComponentCallbackState(
-    viewPickerVisibilityComponentState,
-  );
+  const viewPickerVisibilityCallbackState =
+    useRecoilComponentStateCallbackStateV2(viewPickerVisibilityComponentState);

  const { performViewAPIUpdate } = usePerformViewAPIUpdate();

-  const updateViewFromCurrentState = useRecoilCallback(
-    ({ set, snapshot }) =>
-      async () => {
-        if (!canPersistChanges) {
-          closeAndResetViewPicker();
-          return;
-        }
+  const store = useStore();

-        set(viewPickerIsPersistingCallbackState, true);
-        set(viewPickerIsDirtyCallbackState, false);
-        closeAndResetViewPicker();
+  const updateViewFromCurrentState = useCallback(async () => {
+    if (!canPersistChanges) {
+      closeAndResetViewPicker();
+      return;
+    }

-        const viewPickerReferenceViewId = getSnapshotValue(
-          snapshot,
-          viewPickerReferenceViewIdCallbackState,
-        );
-        const viewPickerInputName = getSnapshotValue(
-          snapshot,
-          viewPickerInputNameCallbackState,
-        );
-        const viewPickerSelectedIcon = getSnapshotValue(
-          snapshot,
-          viewPickerSelectedIconCallbackState,
-        );
-        const visibility = getSnapshotValue(
-          snapshot,
-          viewPickerVisibilityCallbackState,
-        );
+    store.set(viewPickerIsPersistingCallbackState, true);
+    store.set(viewPickerIsDirtyCallbackState, false);
+    closeAndResetViewPicker();

-        await performViewAPIUpdate({
-          id: viewPickerReferenceViewId,
-          input: {
-            name: viewPickerInputName,
-            icon: viewPickerSelectedIcon,
-            visibility: visibility,
-          },
-        });
-      },
-    [
-      canPersistChanges,
-      viewPickerIsPersistingCallbackState,
-      viewPickerIsDirtyCallbackState,
-      closeAndResetViewPicker,
+    const viewPickerReferenceViewId = store.get(
      viewPickerReferenceViewIdCallbackState,
-      viewPickerInputNameCallbackState,
+    );
+    const viewPickerInputName = store.get(viewPickerInputNameCallbackState);
+    const viewPickerSelectedIcon = store.get(
      viewPickerSelectedIconCallbackState,
-      viewPickerVisibilityCallbackState,
-      performViewAPIUpdate,
-    ],
-  );
+    );
+    const visibility = store.get(viewPickerVisibilityCallbackState);
+
+    await performViewAPIUpdate({
+      id: viewPickerReferenceViewId,
+      input: {
+        name: viewPickerInputName,
+        icon: viewPickerSelectedIcon,
+        visibility: visibility,
+      },
+    });
+  }, [
+    canPersistChanges,
+    viewPickerIsPersistingCallbackState,
+    viewPickerIsDirtyCallbackState,
+    closeAndResetViewPicker,
+    viewPickerReferenceViewIdCallbackState,
+    viewPickerInputNameCallbackState,
+    viewPickerSelectedIconCallbackState,
+    viewPickerVisibilityCallbackState,
+    performViewAPIUpdate,
+    store,
+  ]);

  return {
    updateViewFromCurrentState,
@@ -1,8 +1,8 @@
-import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateV2';
 import { viewPickerModeComponentState } from '@/views/view-picker/states/viewPickerModeComponentState';

 export const useViewPickerMode = (viewBarComponentId?: string) => {
-  const [viewPickerMode, setViewPickerMode] = useRecoilComponentState(
+  const [viewPickerMode, setViewPickerMode] = useRecoilComponentStateV2(
    viewPickerModeComponentState,
    viewBarComponentId,
  );
@@ -1,8 +1,8 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';

 export const viewPickerCalendarFieldMetadataIdComponentState =
-  createComponentState<string>({
+  createComponentStateV2<string>({
    key: 'viewPickerCalendarFieldMetadataIdComponentState',
    defaultValue: '',
    componentInstanceContext: ViewComponentInstanceContext,
@@ -1,8 +1,10 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';

-export const viewPickerInputNameComponentState = createComponentState<string>({
-  key: 'viewPickerInputNameComponentState',
-  defaultValue: '',
-  componentInstanceContext: ViewComponentInstanceContext,
-});
+export const viewPickerInputNameComponentState = createComponentStateV2<string>(
+  {
+    key: 'viewPickerInputNameComponentState',
+    defaultValue: '',
+    componentInstanceContext: ViewComponentInstanceContext,
+  },
+);
@@ -1,7 +1,7 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';

-export const viewPickerIsDirtyComponentState = createComponentState<boolean>({
+export const viewPickerIsDirtyComponentState = createComponentStateV2<boolean>({
  key: 'viewPickerIsDirtyComponentState',
  defaultValue: false,
  componentInstanceContext: ViewComponentInstanceContext,
@@ -1,8 +1,8 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';

 export const viewPickerIsPersistingComponentState =
-  createComponentState<boolean>({
+  createComponentStateV2<boolean>({
    key: 'viewPickerIsPersistingComponentState',
    defaultValue: false,
    componentInstanceContext: ViewComponentInstanceContext,
@@ -1,8 +1,8 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';

 export const viewPickerMainGroupByFieldMetadataIdComponentState =
-  createComponentState<string>({
+  createComponentStateV2<string>({
    key: 'viewPickerMainGroupByFieldMetadataIdComponentState',
    defaultValue: '',
    componentInstanceContext: ViewComponentInstanceContext,
@@ -1,9 +1,9 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
 import { type ViewPickerMode } from '@/views/view-picker/types/ViewPickerMode';

 export const viewPickerModeComponentState =
-  createComponentState<ViewPickerMode>({
+  createComponentStateV2<ViewPickerMode>({
    key: 'viewPickerModeComponentState',
    defaultValue: 'list',
    componentInstanceContext: ViewComponentInstanceContext,
@@ -1,8 +1,8 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';

 export const viewPickerReferenceViewIdComponentState =
-  createComponentState<string>({
+  createComponentStateV2<string>({
    key: 'viewPickerReferenceViewIdComponentState',
    defaultValue: '',
    componentInstanceContext: ViewComponentInstanceContext,
@@ -1,8 +1,8 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';

 export const viewPickerSelectedIconComponentState =
-  createComponentState<string>({
+  createComponentStateV2<string>({
    key: 'viewPickerSelectedIconComponentState',
    defaultValue: '',
    componentInstanceContext: ViewComponentInstanceContext,
@@ -1,8 +1,8 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
 import { ViewType } from '@/views/types/ViewType';

-export const viewPickerTypeComponentState = createComponentState<ViewType>({
+export const viewPickerTypeComponentState = createComponentStateV2<ViewType>({
  key: 'viewPickerTypeComponentState',
  defaultValue: ViewType.Table,
  componentInstanceContext: ViewComponentInstanceContext,
@@ -1,9 +1,9 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
+import { createComponentStateV2 } from '@/ui/utilities/state/jotai/utils/createComponentStateV2';
 import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
 import { ViewVisibility } from '~/generated-metadata/graphql';

 export const viewPickerVisibilityComponentState =
-  createComponentState<ViewVisibility>({
+  createComponentStateV2<ViewVisibility>({
    key: 'viewPickerVisibilityComponentState',
    defaultValue: ViewVisibility.UNLISTED,
    componentInstanceContext: ViewComponentInstanceContext,