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/testing/profiling/components/ProfilerWrapper.tsx

@@ -1,5 +1,6 @@
-import { Profiler, type ProfilerOnRenderCallback } from 'react';
-import { useRecoilCallback } from 'recoil';
+import { Profiler, type ProfilerOnRenderCallback, useCallback } from 'react';
+
+import { jotaiStore } from '@/ui/utilities/state/jotai/jotaiStore';
 import { profilingQueueState } from '~/testing/profiling/states/profilingQueueState';
 import { profilingSessionDataPointsState } from '~/testing/profiling/states/profilingSessionDataPointsState';
 import { profilingSessionState } from '~/testing/profiling/states/profilingSessionState';
@@ -20,55 +21,52 @@ export const ProfilerWrapper = ({
   runName: string;
   children: React.ReactNode;
 }) => {
-  const handleRender: ProfilerOnRenderCallback = useRecoilCallback(
-    ({ set, snapshot }) =>
-      (id, phase, actualDurationInMs) => {
-        const dataPointId = getProfilingQueueIdentifier(
-          profilingId,
-          testIndex,
-          runName,
-        );
+  const handleRender: ProfilerOnRenderCallback = useCallback(
+    (id, phase, actualDurationInMs) => {
+      const dataPointId = getProfilingQueueIdentifier(
+        profilingId,
+        testIndex,
+        runName,
+      );
 
-        const newDataPoint: ProfilingDataPoint = {
-          componentName,
-          runName,
-          id: dataPointId,
-          phase,
-          durationInMs: actualDurationInMs,
-        };
+      const newDataPoint: ProfilingDataPoint = {
+        componentName,
+        runName,
+        id: dataPointId,
+        phase,
+        durationInMs: actualDurationInMs,
+      };
 
-        set(
-          profilingSessionDataPointsState,
-          (currentProfilingSessionDataPoints) => [
-            ...currentProfilingSessionDataPoints,
-            newDataPoint,
-          ],
-        );
+      jotaiStore.set(
+        profilingSessionDataPointsState.atom,
+        (currentProfilingSessionDataPoints) => [
+          ...currentProfilingSessionDataPoints,
+          newDataPoint,
+        ],
+      );
 
-        set(profilingSessionState, (currentProfilingSession) => ({
-          ...currentProfilingSession,
-          [id]: [...(currentProfilingSession[id] ?? []), newDataPoint],
-        }));
+      jotaiStore.set(profilingSessionState.atom, (currentProfilingSession) => ({
+        ...currentProfilingSession,
+        [id]: [...(currentProfilingSession[id] ?? []), newDataPoint],
+      }));
 
-        const queueIdentifier = dataPointId;
+      const queueIdentifier = dataPointId;
 
-        const currentProfilingQueue = snapshot
-          .getLoadable(profilingQueueState)
-          .getValue();
+      const currentProfilingQueue = jotaiStore.get(profilingQueueState.atom);
 
-        const currentQueue = currentProfilingQueue[runName];
+      const currentQueue = currentProfilingQueue[runName];
 
-        if (!isDefined(currentQueue)) {
-          return;
-        }
+      if (!isDefined(currentQueue)) {
+        return;
+      }
 
-        const newQueue = currentQueue.filter((id) => id !== queueIdentifier);
+      const newQueue = currentQueue.filter((id) => id !== queueIdentifier);
 
-        set(profilingQueueState, (currentProfilingQueue) => ({
-          ...currentProfilingQueue,
-          [runName]: newQueue,
-        }));
-      },
+      jotaiStore.set(profilingQueueState.atom, (currentProfilingQueue) => ({
+        ...currentProfilingQueue,
+        [runName]: newQueue,
+      }));
+    },
     [profilingId, testIndex, componentName, runName],
   );
 

packages/twenty-front/src/testing/profiling/components/ProfilingQueueEffect.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import { useRecoilState } from 'recoil';
 
+import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
 import { TIME_BETWEEN_TEST_RUNS_IN_MS } from '~/testing/profiling/constants/TimeBetweenTestRunsInMs';
 import { currentProfilingRunIndexState } from '~/testing/profiling/states/currentProfilingRunIndexState';
 import { profilingQueueState } from '~/testing/profiling/states/profilingQueueState';
@@ -21,18 +21,18 @@ export const ProfilingQueueEffect = ({
   warmUpRounds: number;
 }) => {
   const [currentProfilingRunIndex, setCurrentProfilingRunIndex] =
-    useRecoilState(currentProfilingRunIndexState);
+    useRecoilStateV2(currentProfilingRunIndexState);
 
-  const [profilingSessionStatus, setProfilingSessionStatus] = useRecoilState(
+  const [profilingSessionStatus, setProfilingSessionStatus] = useRecoilStateV2(
     profilingSessionStatusState,
   );
 
-  const [profilingSessionRuns, setProfilingSessionRuns] = useRecoilState(
+  const [profilingSessionRuns, setProfilingSessionRuns] = useRecoilStateV2(
     profilingSessionRunsState,
   );
 
   const [profilingQueue, setProfilingQueue] =
-    useRecoilState(profilingQueueState);
+    useRecoilStateV2(profilingQueueState);
 
   useEffect(() => {
     (async () => {

packages/twenty-front/src/testing/profiling/components/ProfilingReporter.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { useMemo } from 'react';
-import { useRecoilState } from 'recoil';
 
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { PROFILING_REPORTER_DIV_ID } from '~/testing/profiling/constants/ProfilingReporterDivId';
 import { currentProfilingRunIndexState } from '~/testing/profiling/states/currentProfilingRunIndexState';
 import { profilingSessionDataPointsState } from '~/testing/profiling/states/profilingSessionDataPointsState';
@@ -22,15 +22,15 @@ const StyledTable = styled.table`
 `;
 
 export const ProfilingReporter = () => {
-  const [profilingSessionDataPoints] = useRecoilState(
+  const profilingSessionDataPoints = useRecoilValueV2(
     profilingSessionDataPointsState,
   );
 
-  const [currentProfilingRunIndex] = useRecoilState(
+  const currentProfilingRunIndex = useRecoilValueV2(
     currentProfilingRunIndexState,
   );
 
-  const [profilingSessionStatus] = useRecoilState(profilingSessionStatusState);
+  const profilingSessionStatus = useRecoilValueV2(profilingSessionStatusState);
 
   const profilingReport = useMemo(
     () => computeProfilingReport(profilingSessionDataPoints),

packages/twenty-front/src/testing/profiling/states/currentProfilingRunIndexState.ts

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

packages/twenty-front/src/testing/profiling/states/currentProfilingRunState.ts

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

packages/twenty-front/src/testing/profiling/states/profilingQueueState.ts

@@ -1,10 +1,10 @@
-import { atom } from 'recoil';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 
 export type ProfilingQueue = {
   [runName: string]: string[];
 };
 
-export const profilingQueueState = atom<ProfilingQueue>({
+export const profilingQueueState = createStateV2<ProfilingQueue>({
   key: 'profilingQueueState',
-  default: {},
+  defaultValue: {},
 });

packages/twenty-front/src/testing/profiling/states/profilingSessionDataPointsState.ts

@@ -1,8 +1,10 @@
-import { atom } from 'recoil';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 
 import { type ProfilingDataPoint } from '~/testing/profiling/types/ProfilingDataPoint';
 
-export const profilingSessionDataPointsState = atom<ProfilingDataPoint[]>({
+export const profilingSessionDataPointsState = createStateV2<
+  ProfilingDataPoint[]
+>({
   key: 'profilingSessionDataPointsState',
-  default: [],
+  defaultValue: [],
 });

packages/twenty-front/src/testing/profiling/states/profilingSessionRunsState.ts

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

packages/twenty-front/src/testing/profiling/states/profilingSessionState.ts

@@ -1,10 +1,10 @@
-import { atom } from 'recoil';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 
 import { type ProfilingDataPoint } from '~/testing/profiling/types/ProfilingDataPoint';
 
-export const profilingSessionState = atom<Record<string, ProfilingDataPoint[]>>(
-  {
-    key: 'profilingSessionState',
-    default: {},
-  },
-);
+export const profilingSessionState = createStateV2<
+  Record<string, ProfilingDataPoint[]>
+>({
+  key: 'profilingSessionState',
+  defaultValue: {},
+});

packages/twenty-front/src/testing/profiling/states/profilingSessionStatusState.ts

@@ -1,8 +1,9 @@
-import { atom } from 'recoil';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 
 export type ProfilingSessionStatus = 'running' | 'finished' | 'not_started';
 
-export const profilingSessionStatusState = atom<ProfilingSessionStatus>({
-  key: 'profilingSessionStatusState',
-  default: 'not_started',
-});
+export const profilingSessionStatusState =
+  createStateV2<ProfilingSessionStatus>({
+    key: 'profilingSessionStatusState',
+    defaultValue: 'not_started',
+  });