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/page-layout/hooks/useDuplicatePageLayoutTab.ts

@@ -12,10 +12,10 @@ import { sortTabsByPosition } from '@/page-layout/utils/sortTabsByPosition';
 import { calculateNewPosition } from '@/ui/layout/draggable-list/utils/calculateNewPosition';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
-import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
-import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
+import { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilComponentStateV2';
-import { useRecoilCallback } from 'recoil';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
 import { appendCopySuffix, isDefined } from 'twenty-shared/utils';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -25,23 +25,25 @@ export const useDuplicatePageLayoutTab = (pageLayoutIdFromProps?: string) => {
     pageLayoutIdFromProps,
   );
 
-  const pageLayoutDraftState = useRecoilComponentCallbackState(
+  const pageLayoutDraftAtom = useRecoilComponentStateCallbackStateV2(
     pageLayoutDraftComponentState,
     pageLayoutId,
   );
 
-  const pageLayoutCurrentLayoutsState = useRecoilComponentCallbackState(
+  const pageLayoutCurrentLayoutsAtom = useRecoilComponentStateCallbackStateV2(
     pageLayoutCurrentLayoutsComponentState,
     pageLayoutId,
   );
 
+  const store = useStore();
+
   const tabListInstanceId = getTabListInstanceIdFromPageLayoutId(pageLayoutId);
   const setActiveTabId = useSetRecoilComponentStateV2(
     activeTabIdComponentState,
     tabListInstanceId,
   );
 
-  const setTabSettingsOpenTabId = useSetRecoilComponentState(
+  const setTabSettingsOpenTabId = useSetRecoilComponentStateV2(
     pageLayoutTabSettingsOpenTabIdComponentState,
     pageLayoutId,
   );
@@ -50,103 +52,100 @@ export const useDuplicatePageLayoutTab = (pageLayoutIdFromProps?: string) => {
 
   const { closeCommandMenu } = useCommandMenu();
 
-  const duplicateTab = useRecoilCallback(
-    ({ snapshot, set }) =>
-      (tabId: string): string => {
-        const pageLayoutDraft = snapshot
-          .getLoadable(pageLayoutDraftState)
-          .getValue();
+  const duplicateTab = useCallback(
+    (tabId: string): string => {
+      const pageLayoutDraft = store.get(pageLayoutDraftAtom);
 
-        const allTabLayouts = snapshot
-          .getLoadable(pageLayoutCurrentLayoutsState)
-          .getValue();
+      const allTabLayouts = store.get(pageLayoutCurrentLayoutsAtom);
 
-        const sourceTab = pageLayoutDraft.tabs.find((t) => t.id === tabId);
+      const sourceTab = pageLayoutDraft.tabs.find((t) => t.id === tabId);
 
-        if (!isDefined(sourceTab)) {
-          throw new Error(`Tab with id ${tabId} not found`);
-        }
+      if (!isDefined(sourceTab)) {
+        throw new Error(`Tab with id ${tabId} not found`);
+      }
 
-        const newTabId = uuidv4();
-        const widgetOldIdNewIdMap = new Map<string, string>();
+      const newTabId = uuidv4();
+      const widgetOldIdNewIdMap = new Map<string, string>();
 
-        const clonedWidgets = sourceTab.widgets.map((widget) => {
-          const newWidgetId = uuidv4();
-          widgetOldIdNewIdMap.set(widget.id, newWidgetId);
+      const clonedWidgets = sourceTab.widgets.map((widget) => {
+        const newWidgetId = uuidv4();
+        widgetOldIdNewIdMap.set(widget.id, newWidgetId);
 
-          return {
-            ...widget,
-            id: newWidgetId,
-            pageLayoutTabId: newTabId,
-            ...generateDuplicatedTimestamps(),
-          };
-        });
-
-        const sortedTabs = sortTabsByPosition(pageLayoutDraft.tabs);
-        const sourceIndex = sortedTabs.findIndex((t) => t.id === tabId);
-
-        const newTabPosition = calculateNewPosition({
-          items: sortedTabs,
-          destinationIndex: sourceIndex + 1,
-          sourceIndex,
-        });
-
-        const newTab: PageLayoutTab = {
-          ...sourceTab,
-          id: newTabId,
-          title: appendCopySuffix(sourceTab.title),
-          position: newTabPosition,
-          widgets: clonedWidgets,
+        return {
+          ...widget,
+          id: newWidgetId,
+          pageLayoutTabId: newTabId,
           ...generateDuplicatedTimestamps(),
         };
+      });
 
-        const sourceLayouts = allTabLayouts[tabId] ?? {
-          desktop: [],
-          mobile: [],
-        };
+      const sortedTabs = sortTabsByPosition(pageLayoutDraft.tabs);
+      const sourceIndex = sortedTabs.findIndex((t) => t.id === tabId);
 
-        const newLayouts = {
-          desktop: sourceLayouts.desktop.map((layout) => ({
-            ...layout,
-            i: widgetOldIdNewIdMap.get(layout.i) || layout.i,
-          })),
-          mobile: sourceLayouts.mobile.map((layout) => ({
-            ...layout,
-            i: widgetOldIdNewIdMap.get(layout.i) || layout.i,
-          })),
-        };
+      const newTabPosition = calculateNewPosition({
+        items: sortedTabs,
+        destinationIndex: sourceIndex + 1,
+        sourceIndex,
+      });
 
-        set(pageLayoutCurrentLayoutsState, {
-          ...allTabLayouts,
-          [newTabId]: newLayouts,
-        });
+      const newTab: PageLayoutTab = {
+        ...sourceTab,
+        id: newTabId,
+        title: appendCopySuffix(sourceTab.title),
+        position: newTabPosition,
+        widgets: clonedWidgets,
+        ...generateDuplicatedTimestamps(),
+      };
 
-        set(pageLayoutDraftState, (prev) => ({
-          ...prev,
-          tabs: [...prev.tabs, newTab],
-        }));
+      const sourceLayouts = allTabLayouts[tabId] ?? {
+        desktop: [],
+        mobile: [],
+      };
 
-        closeCommandMenu();
+      const newLayouts = {
+        desktop: sourceLayouts.desktop.map((layout) => ({
+          ...layout,
+          i: widgetOldIdNewIdMap.get(layout.i) || layout.i,
+        })),
+        mobile: sourceLayouts.mobile.map((layout) => ({
+          ...layout,
+          i: widgetOldIdNewIdMap.get(layout.i) || layout.i,
+        })),
+      };
 
-        setActiveTabId(newTabId);
+      store.set(pageLayoutCurrentLayoutsAtom, {
+        ...allTabLayouts,
+        [newTabId]: newLayouts,
+      });
 
-        setTabSettingsOpenTabId(newTabId);
+      const prev = store.get(pageLayoutDraftAtom);
+      store.set(pageLayoutDraftAtom, {
+        ...prev,
+        tabs: [...prev.tabs, newTab],
+      });
 
-        navigatePageLayoutCommandMenu({
-          commandMenuPage: CommandMenuPages.PageLayoutTabSettings,
-          pageTitle: newTab.title,
-          focusTitleInput: true,
-        });
+      closeCommandMenu();
 
-        return newTabId;
-      },
+      setActiveTabId(newTabId);
+
+      setTabSettingsOpenTabId(newTabId);
+
+      navigatePageLayoutCommandMenu({
+        commandMenuPage: CommandMenuPages.PageLayoutTabSettings,
+        pageTitle: newTab.title,
+        focusTitleInput: true,
+      });
+
+      return newTabId;
+    },
     [
       closeCommandMenu,
       navigatePageLayoutCommandMenu,
-      pageLayoutCurrentLayoutsState,
-      pageLayoutDraftState,
+      pageLayoutCurrentLayoutsAtom,
+      pageLayoutDraftAtom,
       setActiveTabId,
       setTabSettingsOpenTabId,
+      store,
     ],
   );