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/activities/inline-cell/hooks/useOpenActivityTargetCellEditMode.ts

@@ -9,7 +9,7 @@ import { multipleRecordPickerSearchFilterComponentState } from '@/object-record/
 import { multipleRecordPickerSearchableObjectMetadataItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerSearchableObjectMetadataItemsComponentState';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
-import { useRecoilCallback } from 'recoil';
+import { useCallback } from 'react';
 
 type OpenActivityTargetCellEditModeProps = {
   recordPickerInstanceId: string;
@@ -24,81 +24,80 @@ export const useOpenActivityTargetCellEditMode = () => {
 
   const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
 
-  const openActivityTargetCellEditMode = useRecoilCallback(
-    ({ set }) =>
-      ({
-        recordPickerInstanceId,
-        activityTargetObjectRecords,
-      }: OpenActivityTargetCellEditModeProps) => {
-        const objectMetadataItems = jotaiStore
-          .get(objectMetadataItemsState.atom)
-          .filter(
-            (objectMetadataItem) =>
-              objectMetadataItem.isSearchable &&
-              objectMetadataItem.isActive &&
-              objectMetadataItem.nameSingular !== CoreObjectNameSingular.Task &&
-              objectMetadataItem.nameSingular !== CoreObjectNameSingular.Note &&
-              objectMetadataItem.nameSingular !==
-                CoreObjectNameSingular.WorkspaceMember,
-          );
+  const openActivityTargetCellEditMode = useCallback(
+    ({
+      recordPickerInstanceId,
+      activityTargetObjectRecords,
+    }: OpenActivityTargetCellEditModeProps) => {
+      const objectMetadataItems = jotaiStore
+        .get(objectMetadataItemsState.atom)
+        .filter(
+          (objectMetadataItem) =>
+            objectMetadataItem.isSearchable &&
+            objectMetadataItem.isActive &&
+            objectMetadataItem.nameSingular !== CoreObjectNameSingular.Task &&
+            objectMetadataItem.nameSingular !== CoreObjectNameSingular.Note &&
+            objectMetadataItem.nameSingular !==
+              CoreObjectNameSingular.WorkspaceMember,
+        );
 
-        set(
-          multipleRecordPickerPickableMorphItemsComponentState.atomFamily({
+      jotaiStore.set(
+        multipleRecordPickerPickableMorphItemsComponentState.atomFamily({
+          instanceId: recordPickerInstanceId,
+        }),
+        activityTargetObjectRecords.map((activityTargetObjectRecord) => ({
+          recordId: activityTargetObjectRecord.targetObject.id,
+          objectMetadataId:
+            activityTargetObjectRecord.targetObjectMetadataItem.id,
+          isSelected: true,
+          isMatchingSearchFilter: true,
+        })),
+      );
+
+      jotaiStore.set(
+        multipleRecordPickerSearchableObjectMetadataItemsComponentState.atomFamily(
+          {
             instanceId: recordPickerInstanceId,
-          }),
-          activityTargetObjectRecords.map((activityTargetObjectRecord) => ({
+          },
+        ),
+        objectMetadataItems,
+      );
+
+      jotaiStore.set(
+        multipleRecordPickerSearchFilterComponentState.atomFamily({
+          instanceId: recordPickerInstanceId,
+        }),
+        '',
+      );
+
+      openMultipleRecordPicker(recordPickerInstanceId);
+
+      multipleRecordPickerPerformSearch({
+        multipleRecordPickerInstanceId: recordPickerInstanceId,
+        forceSearchFilter: '',
+        forceSearchableObjectMetadataItems: objectMetadataItems,
+        forcePickableMorphItems: activityTargetObjectRecords.map(
+          (activityTargetObjectRecord) => ({
             recordId: activityTargetObjectRecord.targetObject.id,
             objectMetadataId:
               activityTargetObjectRecord.targetObjectMetadataItem.id,
             isSelected: true,
             isMatchingSearchFilter: true,
-          })),
-        );
-
-        set(
-          multipleRecordPickerSearchableObjectMetadataItemsComponentState.atomFamily(
-            {
-              instanceId: recordPickerInstanceId,
-            },
-          ),
-          objectMetadataItems,
-        );
-
-        set(
-          multipleRecordPickerSearchFilterComponentState.atomFamily({
-            instanceId: recordPickerInstanceId,
           }),
-          '',
-        );
+        ),
+      });
 
-        openMultipleRecordPicker(recordPickerInstanceId);
-
-        multipleRecordPickerPerformSearch({
-          multipleRecordPickerInstanceId: recordPickerInstanceId,
-          forceSearchFilter: '',
-          forceSearchableObjectMetadataItems: objectMetadataItems,
-          forcePickableMorphItems: activityTargetObjectRecords.map(
-            (activityTargetObjectRecord) => ({
-              recordId: activityTargetObjectRecord.targetObject.id,
-              objectMetadataId:
-                activityTargetObjectRecord.targetObjectMetadataItem.id,
-              isSelected: true,
-              isMatchingSearchFilter: true,
-            }),
-          ),
-        });
-
-        pushFocusItemToFocusStack({
-          focusId: recordPickerInstanceId,
-          component: {
-            type: FocusComponentType.DROPDOWN,
-            instanceId: recordPickerInstanceId,
-          },
-          globalHotkeysConfig: {
-            enableGlobalHotkeysConflictingWithKeyboard: false,
-          },
-        });
-      },
+      pushFocusItemToFocusStack({
+        focusId: recordPickerInstanceId,
+        component: {
+          type: FocusComponentType.DROPDOWN,
+          instanceId: recordPickerInstanceId,
+        },
+        globalHotkeysConfig: {
+          enableGlobalHotkeysConflictingWithKeyboard: false,
+        },
+      });
+    },
     [
       multipleRecordPickerPerformSearch,
       openMultipleRecordPicker,