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/usePageLayoutHandleLayoutChange.ts

@@ -2,10 +2,10 @@ import { PageLayoutComponentInstanceContext } from '@/page-layout/states/context
 import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId';
 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 { useRecoilComponentStateCallbackStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateCallbackStateV2';
 import { useStore } from 'jotai';
 import { type Layout, type Layouts } from 'react-grid-layout';
-import { useRecoilCallback } from 'recoil';
+import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
@@ -22,69 +22,64 @@ export const usePageLayoutHandleLayoutChange = (
   const store = useStore();
   const tabListInstanceId = getTabListInstanceIdFromPageLayoutId(pageLayoutId);
 
-  const pageLayoutCurrentLayoutsState = useRecoilComponentCallbackState(
+  const pageLayoutCurrentLayoutsState = useRecoilComponentStateCallbackStateV2(
     pageLayoutCurrentLayoutsComponentState,
     pageLayoutId,
   );
 
-  const pageLayoutDraftState = useRecoilComponentCallbackState(
+  const pageLayoutDraftState = useRecoilComponentStateCallbackStateV2(
     pageLayoutDraftComponentState,
     pageLayoutId,
   );
 
-  const handleLayoutChange = useRecoilCallback(
-    ({ snapshot, set }) =>
-      (_: Layout[], allLayouts: Layouts) => {
-        const activeTabId = store.get(
-          activeTabIdComponentState.atomFamily({
-            instanceId: tabListInstanceId,
+  const handleLayoutChange = useCallback(
+    (_: Layout[], allLayouts: Layouts) => {
+      const activeTabId = store.get(
+        activeTabIdComponentState.atomFamily({
+          instanceId: tabListInstanceId,
+        }),
+      );
+
+      if (!isDefined(activeTabId)) return;
+
+      const currentTabLayouts = store.get(pageLayoutCurrentLayoutsState);
+
+      store.set(pageLayoutCurrentLayoutsState, {
+        ...currentTabLayouts,
+        [activeTabId]: structuredClone(allLayouts),
+      });
+
+      const pageLayoutDraft = store.get(pageLayoutDraftState);
+
+      const currentTab = pageLayoutDraft.tabs.find(
+        (tab) => tab.id === activeTabId,
+      );
+
+      if (!currentTab) return;
+
+      const updatedWidgets = convertLayoutsToWidgets(
+        currentTab.widgets,
+        allLayouts,
+      );
+
+      if (isDefined(activeTabId)) {
+        store.set(pageLayoutDraftState, (prev) => ({
+          ...prev,
+          tabs: prev.tabs.map((tab) => {
+            if (tab.id === activeTabId) {
+              const tabWidgets = updatedWidgets.filter(
+                (w) => w.pageLayoutTabId === activeTabId,
+              );
+              return {
+                ...tab,
+                widgets: tabWidgets,
+              };
+            }
+            return tab;
           }),
-        );
-
-        if (!isDefined(activeTabId)) return;
-
-        const currentTabLayouts = snapshot
-          .getLoadable(pageLayoutCurrentLayoutsState)
-          .getValue();
-
-        set(pageLayoutCurrentLayoutsState, {
-          ...currentTabLayouts,
-          [activeTabId]: structuredClone(allLayouts),
-        });
-
-        const pageLayoutDraft = snapshot
-          .getLoadable(pageLayoutDraftState)
-          .getValue();
-
-        const currentTab = pageLayoutDraft.tabs.find(
-          (tab) => tab.id === activeTabId,
-        );
-
-        if (!currentTab) return;
-
-        const updatedWidgets = convertLayoutsToWidgets(
-          currentTab.widgets,
-          allLayouts,
-        );
-
-        if (isDefined(activeTabId)) {
-          set(pageLayoutDraftState, (prev) => ({
-            ...prev,
-            tabs: prev.tabs.map((tab) => {
-              if (tab.id === activeTabId) {
-                const tabWidgets = updatedWidgets.filter(
-                  (w) => w.pageLayoutTabId === activeTabId,
-                );
-                return {
-                  ...tab,
-                  widgets: tabWidgets,
-                };
-              }
-              return tab;
-            }),
-          }));
-        }
-      },
+        }));
+      }
+    },
     [
       tabListInstanceId,
       pageLayoutCurrentLayoutsState,