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/app/hooks/useExecuteTasksOnAnyLocationChange.ts

@@ -1,8 +1,7 @@
-import { useRecoilCallback } from 'recoil';
-
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState';
 import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { hasInitializedFieldsWidgetGroupsDraftComponentState } from '@/page-layout/states/hasInitializedFieldsWidgetGroupsDraftComponentState';
 import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
@@ -11,84 +10,76 @@ import { pageLayoutIsInitializedComponentState } from '@/page-layout/states/page
 import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
 import { convertPageLayoutToTabLayouts } from '@/page-layout/utils/convertPageLayoutToTabLayouts';
 import { useCloseAnyOpenDropdown } from '@/ui/layout/dropdown/hooks/useCloseAnyOpenDropdown';
+import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 
 export const useExecuteTasksOnAnyLocationChange = () => {
   const { closeAnyOpenDropdown } = useCloseAnyOpenDropdown();
 
-  const resetPageLayoutEditMode = useRecoilCallback(
-    ({ set, snapshot }) =>
-      () => {
-        const pageLayoutId = snapshot
-          .getLoadable(currentPageLayoutIdState)
-          .getValue();
+  const resetPageLayoutEditMode = useCallback(() => {
+    const pageLayoutId = jotaiStore.get(currentPageLayoutIdState.atom);
 
-        if (isDefined(pageLayoutId)) {
-          const pageLayoutPersisted = snapshot
-            .getLoadable(
-              pageLayoutPersistedComponentState.atomFamily({
-                instanceId: pageLayoutId,
-              }),
-            )
-            .getValue();
+    if (isDefined(pageLayoutId)) {
+      const pageLayoutPersisted = jotaiStore.get(
+        pageLayoutPersistedComponentState.atomFamily({
+          instanceId: pageLayoutId,
+        }),
+      );
 
-          if (isDefined(pageLayoutPersisted)) {
-            set(
-              pageLayoutDraftComponentState.atomFamily({
-                instanceId: pageLayoutId,
-              }),
-              {
-                id: pageLayoutPersisted.id,
-                name: pageLayoutPersisted.name,
-                type: pageLayoutPersisted.type,
-                objectMetadataId: pageLayoutPersisted.objectMetadataId,
-                tabs: pageLayoutPersisted.tabs,
-              },
-            );
-
-            const tabLayouts =
-              convertPageLayoutToTabLayouts(pageLayoutPersisted);
-            set(
-              pageLayoutCurrentLayoutsComponentState.atomFamily({
-                instanceId: pageLayoutId,
-              }),
-              tabLayouts,
-            );
-          }
-
-          set(
-            isPageLayoutInEditModeComponentState.atomFamily({
-              instanceId: pageLayoutId,
-            }),
-            false,
-          );
-
-          set(
-            pageLayoutIsInitializedComponentState.atomFamily({
-              instanceId: pageLayoutId,
-            }),
-            false,
-          );
-
-          set(
-            hasInitializedFieldsWidgetGroupsDraftComponentState.atomFamily({
-              instanceId: pageLayoutId,
-            }),
-            {},
-          );
-
-          set(currentPageLayoutIdState, null);
-        }
-
-        set(
-          contextStoreIsPageInEditModeComponentState.atomFamily({
-            instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
+      if (isDefined(pageLayoutPersisted)) {
+        jotaiStore.set(
+          pageLayoutDraftComponentState.atomFamily({
+            instanceId: pageLayoutId,
           }),
-          false,
+          {
+            id: pageLayoutPersisted.id,
+            name: pageLayoutPersisted.name,
+            type: pageLayoutPersisted.type,
+            objectMetadataId: pageLayoutPersisted.objectMetadataId,
+            tabs: pageLayoutPersisted.tabs,
+          },
         );
-      },
-    [],
-  );
+
+        const tabLayouts = convertPageLayoutToTabLayouts(pageLayoutPersisted);
+        jotaiStore.set(
+          pageLayoutCurrentLayoutsComponentState.atomFamily({
+            instanceId: pageLayoutId,
+          }),
+          tabLayouts,
+        );
+      }
+
+      jotaiStore.set(
+        isPageLayoutInEditModeComponentState.atomFamily({
+          instanceId: pageLayoutId,
+        }),
+        false,
+      );
+
+      jotaiStore.set(
+        pageLayoutIsInitializedComponentState.atomFamily({
+          instanceId: pageLayoutId,
+        }),
+        false,
+      );
+
+      jotaiStore.set(
+        hasInitializedFieldsWidgetGroupsDraftComponentState.atomFamily({
+          instanceId: pageLayoutId,
+        }),
+        {},
+      );
+
+      jotaiStore.set(currentPageLayoutIdState.atom, null);
+    }
+
+    jotaiStore.set(
+      contextStoreIsPageInEditModeComponentState.atomFamily({
+        instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
+      }),
+      false,
+    );
+  }, []);
 
   /**
    * Be careful to put idempotent tasks here.