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

packages/twenty-front/src/modules/views/hooks/useCreateViewFromCurrentView.ts

@@ -4,9 +4,8 @@ import { anyFieldFilterValueComponentState } from '@/object-record/record-filter
 import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
-import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
-import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
-import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
+import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentValueV2';
 import { usePerformViewAPIPersist } from '@/views/hooks/internal/usePerformViewAPIPersist';
 import { usePerformViewFieldAPIPersist } from '@/views/hooks/internal/usePerformViewFieldAPIPersist';
 import { usePerformViewFilterAPIPersist } from '@/views/hooks/internal/usePerformViewFilterAPIPersist';
@@ -23,7 +22,7 @@ import { mapRecordFilterGroupToViewFilterGroup } from '@/views/utils/mapRecordFi
 import { mapRecordFilterToViewFilter } from '@/views/utils/mapRecordFilterToViewFilter';
 import { mapRecordSortToViewSort } from '@/views/utils/mapRecordSortToViewSort';
 import { useStore } from 'jotai';
-import { useRecoilCallback } from 'recoil';
+import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { v4 } from 'uuid';
 import { ViewCalendarLayout } from '~/generated-metadata/graphql';
@@ -32,13 +31,16 @@ import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
   const { performViewAPICreate } = usePerformViewAPIPersist();
 
-  const currentViewIdCallbackState = useRecoilComponentCallbackState(
+  const { objectMetadataItem, recordIndexId } = useRecordIndexContextOrThrow();
+
+  const currentViewIdAtom = useRecoilComponentStateCallbackStateV2(
     contextStoreCurrentViewIdComponentState,
     viewBarComponentId,
   );
 
-  const anyFieldFilterValue = useRecoilComponentValue(
+  const anyFieldFilterValue = useRecoilComponentValueV2(
     anyFieldFilterValueComponentState,
+    recordIndexId,
   );
 
   const { performViewFieldAPICreate } = usePerformViewFieldAPIPersist();
@@ -50,196 +52,193 @@ export const useCreateViewFromCurrentView = (viewBarComponentId?: string) => {
   const { performViewFilterGroupAPICreate } =
     usePerformViewFilterGroupAPIPersist();
 
-  const { objectMetadataItem } = useRecordIndexContextOrThrow();
-
   const store = useStore();
 
   const { refreshCoreViewsByObjectMetadataId } =
     useRefreshCoreViewsByObjectMetadataId();
 
-  const currentRecordFilterGroups = useRecoilComponentValue(
+  const currentRecordFilterGroups = useRecoilComponentValueV2(
     currentRecordFilterGroupsComponentState,
+    recordIndexId,
   );
 
-  const currentRecordSorts = useRecoilComponentValue(
+  const currentRecordSorts = useRecoilComponentValueV2(
     currentRecordSortsComponentState,
+    recordIndexId,
   );
 
-  const currentRecordFilters = useRecoilComponentValue(
+  const currentRecordFilters = useRecoilComponentValueV2(
     currentRecordFiltersComponentState,
+    recordIndexId,
   );
 
-  const createViewFromCurrentView = useRecoilCallback(
-    ({ snapshot }) =>
-      async (
+  const createViewFromCurrentView = useCallback(
+    async (
+      {
+        id,
+        name,
+        icon,
+        mainGroupByFieldMetadataId,
+        calendarFieldMetadataId,
+        type,
+        visibility,
+      }: Partial<
+        Pick<
+          GraphQLView,
+          | 'id'
+          | 'name'
+          | 'icon'
+          | 'mainGroupByFieldMetadataId'
+          | 'calendarFieldMetadataId'
+          | 'type'
+          | 'visibility'
+        >
+      >,
+      shouldCopyFiltersAndSortsAndAggregate?: boolean,
+    ): Promise<string | undefined> => {
+      const currentViewId = store.get(currentViewIdAtom);
+
+      if (!isDefined(currentViewId)) {
+        return undefined;
+      }
+
+      const sourceView = store.get(
+        coreViewFromViewIdFamilySelector.selectorFamily({
+          viewId: currentViewId,
+        }),
+      );
+
+      if (!isDefined(sourceView)) {
+        return undefined;
+      }
+
+      const viewType = type ?? sourceView.type;
+
+      const result = await performViewAPICreate(
         {
-          id,
-          name,
-          icon,
-          mainGroupByFieldMetadataId,
-          calendarFieldMetadataId,
-          type,
-          visibility,
-        }: Partial<
-          Pick<
-            GraphQLView,
-            | 'id'
-            | 'name'
-            | 'icon'
-            | 'mainGroupByFieldMetadataId'
-            | 'calendarFieldMetadataId'
-            | 'type'
-            | 'visibility'
-          >
-        >,
-        shouldCopyFiltersAndSortsAndAggregate?: boolean,
-      ): Promise<string | undefined> => {
-        const currentViewId = getSnapshotValue(
-          snapshot,
-          currentViewIdCallbackState,
+          input: {
+            id: id ?? v4(),
+            name: name ?? sourceView.name,
+            icon: icon ?? sourceView.icon,
+            key: null,
+            kanbanAggregateOperation: shouldCopyFiltersAndSortsAndAggregate
+              ? sourceView.kanbanAggregateOperation
+              : undefined,
+            kanbanAggregateOperationFieldMetadataId:
+              shouldCopyFiltersAndSortsAndAggregate
+                ? sourceView.kanbanAggregateOperationFieldMetadataId
+                : undefined,
+            mainGroupByFieldMetadataId: shouldCopyFiltersAndSortsAndAggregate
+              ? sourceView.mainGroupByFieldMetadataId
+              : mainGroupByFieldMetadataId,
+            type: convertViewTypeToCore(viewType),
+            objectMetadataId: sourceView.objectMetadataId,
+            openRecordIn: convertViewOpenRecordInToCore(
+              sourceView.openRecordIn,
+            ),
+            anyFieldFilterValue: anyFieldFilterValue,
+            calendarLayout:
+              viewType === ViewType.Calendar
+                ? ViewCalendarLayout.MONTH
+                : undefined,
+            calendarFieldMetadataId:
+              viewType === ViewType.Calendar
+                ? calendarFieldMetadataId
+                : undefined,
+            visibility,
+          },
+        },
+        objectMetadataItem.id,
+      );
+
+      if (result.status === 'failed') {
+        return undefined;
+      }
+
+      const newViewId = result.response.data?.createCoreView.id;
+
+      if (isUndefinedOrNull(newViewId)) {
+        throw new Error('Failed to create view');
+      }
+
+      const fieldResult = await performViewFieldAPICreate({
+        inputs: sourceView.viewFields.map(
+          ({ __typename, id: _id, ...viewField }) => ({
+            ...viewField,
+            id: v4(),
+            viewId: newViewId,
+          }),
+        ),
+      });
+
+      if (fieldResult.status === 'failed') {
+        return undefined;
+      }
+
+      if (shouldCopyFiltersAndSortsAndAggregate === true) {
+        const viewFilterGroupsToCopy = currentRecordFilterGroups.map(
+          (recordFilterGroup) =>
+            mapRecordFilterGroupToViewFilterGroup({
+              recordFilterGroup,
+              view: { id: newViewId },
+            }),
         );
 
-        if (!isDefined(currentViewId)) {
-          return undefined;
-        }
+        const viewFiltersToCopy = currentRecordFilters.map(
+          mapRecordFilterToViewFilter,
+        );
 
-        const sourceView = store.get(
-          coreViewFromViewIdFamilySelector.selectorFamily({
-            viewId: currentViewId,
+        const {
+          duplicatedViewFilterGroups: viewFilterGroupsToCreate,
+          duplicatedViewFilters: viewFiltersToCreate,
+        } = duplicateViewFiltersAndViewFilterGroups({
+          viewFilterGroupsToDuplicate: viewFilterGroupsToCopy,
+          viewFiltersToDuplicate: viewFiltersToCopy,
+        });
+
+        const viewSortsToCreate = currentRecordSorts
+          .map((recordSort) => mapRecordSortToViewSort(recordSort, newViewId))
+          .map((viewSort) => ({
+            ...viewSort,
+            id: v4(),
+          }));
+
+        await performViewFilterGroupAPICreate(viewFilterGroupsToCreate, {
+          id: newViewId,
+        });
+
+        const createViewFilterInputs = viewFiltersToCreate.map(
+          (viewFilter) => ({
+            input: {
+              id: viewFilter.id,
+              fieldMetadataId: viewFilter.fieldMetadataId,
+              viewId: newViewId,
+              value: viewFilter.value,
+              operand: viewFilter.operand,
+              viewFilterGroupId: viewFilter.viewFilterGroupId,
+              positionInViewFilterGroup: viewFilter.positionInViewFilterGroup,
+              subFieldName: viewFilter.subFieldName ?? null,
+            },
           }),
         );
 
-        if (!isDefined(sourceView)) {
-          return undefined;
-        }
-
-        const viewType = type ?? sourceView.type;
-
-        const result = await performViewAPICreate(
-          {
-            input: {
-              id: id ?? v4(),
-              name: name ?? sourceView.name,
-              icon: icon ?? sourceView.icon,
-              key: null,
-              kanbanAggregateOperation: shouldCopyFiltersAndSortsAndAggregate
-                ? sourceView.kanbanAggregateOperation
-                : undefined,
-              kanbanAggregateOperationFieldMetadataId:
-                shouldCopyFiltersAndSortsAndAggregate
-                  ? sourceView.kanbanAggregateOperationFieldMetadataId
-                  : undefined,
-              mainGroupByFieldMetadataId: shouldCopyFiltersAndSortsAndAggregate
-                ? sourceView.mainGroupByFieldMetadataId
-                : mainGroupByFieldMetadataId,
-              type: convertViewTypeToCore(viewType),
-              objectMetadataId: sourceView.objectMetadataId,
-              openRecordIn: convertViewOpenRecordInToCore(
-                sourceView.openRecordIn,
-              ),
-              anyFieldFilterValue: anyFieldFilterValue,
-              calendarLayout:
-                viewType === ViewType.Calendar
-                  ? ViewCalendarLayout.MONTH
-                  : undefined,
-              calendarFieldMetadataId:
-                viewType === ViewType.Calendar
-                  ? calendarFieldMetadataId
-                  : undefined,
-              visibility,
-            },
-          },
-          objectMetadataItem.id,
+        const filterResult = await performViewFilterAPICreate(
+          createViewFilterInputs,
         );
 
-        if (result.status === 'failed') {
+        if (filterResult.status === 'failed') {
           return undefined;
         }
 
-        const newViewId = result.response.data?.createCoreView.id;
+        await performViewSortAPICreate(viewSortsToCreate, { id: newViewId });
+      }
 
-        if (isUndefinedOrNull(newViewId)) {
-          throw new Error('Failed to create view');
-        }
+      await refreshCoreViewsByObjectMetadataId(objectMetadataItem.id);
 
-        const fieldResult = await performViewFieldAPICreate({
-          inputs: sourceView.viewFields.map(
-            ({ __typename, id: _id, ...viewField }) => ({
-              ...viewField,
-              id: v4(),
-              viewId: newViewId,
-            }),
-          ),
-        });
-
-        if (fieldResult.status === 'failed') {
-          return undefined;
-        }
-
-        if (shouldCopyFiltersAndSortsAndAggregate === true) {
-          const viewFilterGroupsToCopy = currentRecordFilterGroups.map(
-            (recordFilterGroup) =>
-              mapRecordFilterGroupToViewFilterGroup({
-                recordFilterGroup,
-                view: { id: newViewId },
-              }),
-          );
-
-          const viewFiltersToCopy = currentRecordFilters.map(
-            mapRecordFilterToViewFilter,
-          );
-
-          const {
-            duplicatedViewFilterGroups: viewFilterGroupsToCreate,
-            duplicatedViewFilters: viewFiltersToCreate,
-          } = duplicateViewFiltersAndViewFilterGroups({
-            viewFilterGroupsToDuplicate: viewFilterGroupsToCopy,
-            viewFiltersToDuplicate: viewFiltersToCopy,
-          });
-
-          const viewSortsToCreate = currentRecordSorts
-            .map((recordSort) => mapRecordSortToViewSort(recordSort, newViewId))
-            .map((viewSort) => ({
-              ...viewSort,
-              id: v4(),
-            }));
-
-          await performViewFilterGroupAPICreate(viewFilterGroupsToCreate, {
-            id: newViewId,
-          });
-
-          const createViewFilterInputs = viewFiltersToCreate.map(
-            (viewFilter) => ({
-              input: {
-                id: viewFilter.id,
-                fieldMetadataId: viewFilter.fieldMetadataId,
-                viewId: newViewId,
-                value: viewFilter.value,
-                operand: viewFilter.operand,
-                viewFilterGroupId: viewFilter.viewFilterGroupId,
-                positionInViewFilterGroup: viewFilter.positionInViewFilterGroup,
-                subFieldName: viewFilter.subFieldName ?? null,
-              },
-            }),
-          );
-
-          const filterResult = await performViewFilterAPICreate(
-            createViewFilterInputs,
-          );
-
-          if (filterResult.status === 'failed') {
-            return undefined;
-          }
-
-          await performViewSortAPICreate(viewSortsToCreate, { id: newViewId });
-        }
-
-        await refreshCoreViewsByObjectMetadataId(objectMetadataItem.id);
-
-        return newViewId;
-      },
+      return newViewId;
+    },
     [
-      currentViewIdCallbackState,
+      currentViewIdAtom,
       performViewAPICreate,
       anyFieldFilterValue,
       objectMetadataItem,