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/spreadsheet-import/steps/components/ImportDataStep.tsx

@@ -1,9 +1,8 @@
-import { useRecoilValue } from 'recoil';
-
 import { useNumberFormat } from '@/localization/hooks/useNumberFormat';
 import { StepNavigationButton } from '@/spreadsheet-import/components/StepNavigationButton';
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { spreadsheetImportCreatedRecordsProgressState } from '@/spreadsheet-import/states/spreadsheetImportCreatedRecordsProgressState';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
@@ -38,7 +37,7 @@ export const ImportDataStep = ({
   recordsToImportCount,
 }: ImportDataStepProps) => {
   const { onClose } = useSpreadsheetImportInternal();
-  const spreadsheetImportCreatedRecordsProgress = useRecoilValue(
+  const spreadsheetImportCreatedRecordsProgress = useRecoilValueV2(
     spreadsheetImportCreatedRecordsProgressState,
   );
   const { formatNumber } = useNumberFormat();

packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx

@@ -28,9 +28,9 @@ import { type SpreadsheetColumn } from '@/spreadsheet-import/types/SpreadsheetCo
 import { SpreadsheetColumnType } from '@/spreadsheet-import/types/SpreadsheetColumnType';
 import { type SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetColumns';
 import { type SpreadsheetImportField } from '@/spreadsheet-import/types/SpreadsheetImportField';
+import { useFamilySelectorStateV2 } from '@/ui/utilities/state/jotai/hooks/useFamilySelectorStateV2';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { Trans, useLingui } from '@lingui/react/macro';
-import { useRecoilState } from 'recoil';
 
 const StyledContent = styled(Modal.Content)`
   align-items: center;
@@ -81,8 +81,9 @@ export const MatchColumnsStep = ({
   const dataExample = data.slice(0, 2);
   const { spreadsheetImportFields: fields } = useSpreadsheetImportInternal();
   const [isLoading, setIsLoading] = useState(false);
-  const [columns, setColumns] = useRecoilState(
-    initialComputedColumnsSelector(headerValues),
+  const [columns, setColumns] = useFamilySelectorStateV2(
+    initialComputedColumnsSelector,
+    headerValues,
   );
 
   const { matchColumnsStepHook } = useSpreadsheetImportInternal();

packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx

@@ -7,8 +7,8 @@ import { suggestedFieldsByColumnHeaderState } from '@/spreadsheet-import/steps/c
 import { SpreadsheetColumnType } from '@/spreadsheet-import/types/SpreadsheetColumnType';
 import { type SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetColumns';
 import { spreadsheetImportBuildFieldOptions } from '@/spreadsheet-import/utils/spreadsheetImportBuildFieldOptions';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { useLingui } from '@lingui/react/macro';
-import { useRecoilValue } from 'recoil';
 import { IconForbid } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
@@ -37,7 +37,7 @@ export const TemplateColumn = ({
   onChange,
 }: TemplateColumnProps) => {
   const { spreadsheetImportFields: fields } = useSpreadsheetImportInternal();
-  const suggestedFieldsByColumnHeader = useRecoilValue(
+  const suggestedFieldsByColumnHeader = useRecoilValueV2(
     suggestedFieldsByColumnHeaderState,
   );
 

packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/states/initialComputedColumnsState.ts

@@ -1,14 +1,15 @@
 import { type ImportedRow } from '@/spreadsheet-import/types';
 import { type SpreadsheetColumns } from '@/spreadsheet-import/types/SpreadsheetColumns';
 import { SpreadsheetColumnType } from '@/spreadsheet-import/types/SpreadsheetColumnType';
-import { atom, selectorFamily } from 'recoil';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
+import { createWritableFamilySelectorV2 } from '@/ui/utilities/state/jotai/utils/createWritableFamilySelectorV2';
 
-export const matchColumnsState = atom({
+export const matchColumnsState = createStateV2<SpreadsheetColumns>({
   key: 'MatchColumnsState',
-  default: [] as SpreadsheetColumns,
+  defaultValue: [] as SpreadsheetColumns,
 });
 
-export const initialComputedColumnsSelector = selectorFamily<
+export const initialComputedColumnsSelector = createWritableFamilySelectorV2<
   SpreadsheetColumns,
   ImportedRow
 >({

packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/states/suggestedFieldsByColumnHeaderState.ts

@@ -1,7 +1,7 @@
 import { type SpreadsheetImportField } from '@/spreadsheet-import/types';
-import { createState } from '@/ui/utilities/state/utils/createState';
+import { createStateV2 } from '@/ui/utilities/state/jotai/utils/createStateV2';
 
-export const suggestedFieldsByColumnHeaderState = createState({
+export const suggestedFieldsByColumnHeaderState = createStateV2({
   key: 'suggestedFieldsByColumnHeaderState',
   defaultValue: {} as Record<string, SpreadsheetImportField[]>,
 });

packages/twenty-front/src/modules/spreadsheet-import/steps/components/SpreadsheetImportStepperContainer.tsx

@@ -8,8 +8,8 @@ import { useStepBar } from '@/ui/navigation/step-bar/hooks/useStepBar';
 
 import { spreadsheetImportDialogState } from '@/spreadsheet-import/states/spreadsheetImportDialogState';
 import { Modal } from '@/ui/layout/modal/components/Modal';
+import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
 import { useLingui } from '@lingui/react/macro';
-import { useRecoilValue } from 'recoil';
 import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 import { SpreadsheetImportStepper } from './SpreadsheetImportStepper';
 
@@ -28,7 +28,9 @@ const StyledHeader = styled(Modal.Header)`
 export const SpreadsheetImportStepperContainer = () => {
   const { t } = useLingui();
 
-  const spreadsheetImportDialog = useRecoilValue(spreadsheetImportDialogState);
+  const spreadsheetImportDialog = useRecoilValueV2(
+    spreadsheetImportDialogState,
+  );
 
   const stepTitles = {
     uploadStep: t`Upload File`,