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/front-components/components/HeadlessFrontComponentMountRoot.tsx

@@ -1,8 +1,7 @@
 import { Suspense, lazy } from 'react';
 
-import { useRecoilValue } from 'recoil';
-
 import { mountedHeadlessFrontComponentIdsState } from '@/front-components/states/mountedHeadlessFrontComponentIdsState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 
 const FrontComponentRenderer = lazy(() =>
   import('@/front-components/components/FrontComponentRenderer').then(
@@ -11,7 +10,7 @@ const FrontComponentRenderer = lazy(() =>
 );
 
 export const HeadlessFrontComponentMountRoot = () => {
-  const mountedHeadlessFrontComponentIds = useRecoilValue(
+  const mountedHeadlessFrontComponentIds = useRecoilValueV2(
     mountedHeadlessFrontComponentIdsState,
   );
 

packages/twenty-front/src/modules/front-components/hooks/useFrontComponentExecutionContext.ts

@@ -1,4 +1,4 @@
-import { useSetRecoilState } from 'recoil';
+import { useSetRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useSetRecoilStateV2';
 import {
   type FrontComponentExecutionContext,
   type FrontComponentHostCommunicationApi,
@@ -27,7 +27,7 @@ export const useFrontComponentExecutionContext = ({
   const currentUser = useRecoilValueV2(currentUserState);
   const navigateApp = useNavigateApp();
   const { navigateCommandMenu } = useNavigateCommandMenu();
-  const setCommandMenuSearchState = useSetRecoilState(commandMenuSearchState);
+  const setCommandMenuSearchState = useSetRecoilStateV2(commandMenuSearchState);
   const { getIcon } = useIcons();
   const unmountHeadlessFrontComponent = useUnmountHeadlessFrontComponent();
   const {

packages/twenty-front/src/modules/front-components/hooks/useMountHeadlessFrontComponent.ts

@@ -1,15 +1,16 @@
-import { useRecoilCallback } from 'recoil';
+import { useCallback } from 'react';
 
 import { mountedHeadlessFrontComponentIdsState } from '@/front-components/states/mountedHeadlessFrontComponentIdsState';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 
 export const useMountHeadlessFrontComponent = () => {
-  const mountHeadlessFrontComponent = useRecoilCallback(
-    ({ set }) =>
-      (frontComponentId: string) => {
-        set(mountedHeadlessFrontComponentIdsState, (previousIds) =>
-          new Set(previousIds).add(frontComponentId),
-        );
-      },
+  const mountHeadlessFrontComponent = useCallback(
+    (frontComponentId: string) => {
+      jotaiStore.set(
+        mountedHeadlessFrontComponentIdsState.atom,
+        (previousIds) => new Set(previousIds).add(frontComponentId),
+      );
+    },
     [],
   );
 

packages/twenty-front/src/modules/front-components/hooks/useUnmountHeadlessFrontComponent.ts

@@ -1,17 +1,20 @@
-import { useRecoilCallback } from 'recoil';
+import { useCallback } from 'react';
 
 import { mountedHeadlessFrontComponentIdsState } from '@/front-components/states/mountedHeadlessFrontComponentIdsState';
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 
 export const useUnmountHeadlessFrontComponent = () => {
-  const unmountHeadlessFrontComponent = useRecoilCallback(
-    ({ set }) =>
-      (frontComponentId: string) => {
-        set(mountedHeadlessFrontComponentIdsState, (previousIds) => {
+  const unmountHeadlessFrontComponent = useCallback(
+    (frontComponentId: string) => {
+      jotaiStore.set(
+        mountedHeadlessFrontComponentIdsState.atom,
+        (previousIds) => {
           const next = new Set(previousIds);
           next.delete(frontComponentId);
           return next;
-        });
-      },
+        },
+      );
+    },
     [],
   );
 

packages/twenty-front/src/modules/front-components/selectors/isHeadlessFrontComponentMountedFamilySelector.ts

@@ -1,17 +1,14 @@
-import { selectorFamily } from 'recoil';
-
 import { mountedHeadlessFrontComponentIdsState } from '@/front-components/states/mountedHeadlessFrontComponentIdsState';
+import { createFamilySelectorV2 } from '@/ui/utilities/state/jotai/utils/createFamilySelectorV2';
 
-export const isHeadlessFrontComponentMountedFamilySelector = selectorFamily<
-  boolean,
-  string
->({
-  key: 'isHeadlessFrontComponentMountedFamilySelector',
-  get:
-    (frontComponentId: string) =>
-    ({ get }) => {
-      const mountedIds = get(mountedHeadlessFrontComponentIdsState);
+export const isHeadlessFrontComponentMountedFamilySelector =
+  createFamilySelectorV2<boolean, string>({
+    key: 'isHeadlessFrontComponentMountedFamilySelector',
+    get:
+      (frontComponentId: string) =>
+      ({ get }) => {
+        const mountedIds = get(mountedHeadlessFrontComponentIdsState);
 
-      return mountedIds.has(frontComponentId);
-    },
-});
+        return mountedIds.has(frontComponentId);
+      },
+  });

packages/twenty-front/src/modules/front-components/states/mountedHeadlessFrontComponentIdsState.ts

@@ -1,6 +1,8 @@
-import { atom } from 'recoil';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 
-export const mountedHeadlessFrontComponentIdsState = atom<Set<string>>({
-  key: 'mountedHeadlessFrontComponentIdsState',
-  default: new Set(),
-});
+export const mountedHeadlessFrontComponentIdsState = createStateV2<Set<string>>(
+  {
+    key: 'mountedHeadlessFrontComponentIdsState',
+    defaultValue: new Set(),
+  },
+);