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

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+import { useStore } from 'jotai';
 import { isNonEmptyArray } from '@sniptt/guards';
 
 import { type ActivityForEditor } from '@/activities/types/ActivityForEditor';
@@ -15,7 +17,6 @@ import { createOneActivityOperationSignatureFactory } from '@/activities/graphql
 import { type NoteTarget } from '@/activities/types/NoteTarget';
 import { type TaskTarget } from '@/activities/types/TaskTarget';
 import { getJoinObjectNameSingular } from '@/activities/utils/getJoinObjectNameSingular';
-import { useRecoilCallback } from 'recoil';
 import { capitalize } from 'twenty-shared/utils';
 
 export const useCreateActivityInDB = ({
@@ -56,53 +57,52 @@ export const useCreateActivityInDB = ({
     });
 
   const cache = useApolloCoreClient().cache;
+  const store = useStore();
 
-  const createActivityInDB = useRecoilCallback(
-    ({ set }) =>
-      async (activityToCreate: ActivityForEditor) => {
-        const createdActivity = await createOneActivity?.({
-          ...activityToCreate,
-          updatedAt: new Date().toISOString(),
+  const createActivityInDB = useCallback(
+    async (activityToCreate: ActivityForEditor) => {
+      const createdActivity = await createOneActivity?.({
+        ...activityToCreate,
+        updatedAt: new Date().toISOString(),
+      });
+
+      const activityTargetsToCreate =
+        activityToCreate.noteTargets ?? activityToCreate.taskTargets ?? [];
+
+      if (isNonEmptyArray(activityTargetsToCreate)) {
+        await createManyActivityTargets({
+          recordsToCreate: activityTargetsToCreate,
         });
+      }
 
-        const activityTargetsToCreate =
-          activityToCreate.noteTargets ?? activityToCreate.taskTargets ?? [];
+      const activityTargetsConnection = getRecordConnectionFromRecords({
+        objectMetadataItems,
+        objectMetadataItem: objectMetadataItemActivityTarget,
+        records: activityTargetsToCreate.map((activityTarget) => ({
+          ...activityTarget,
+          __typename: capitalize(objectMetadataItemActivityTarget.nameSingular),
+        })),
+        withPageInfo: false,
+        computeReferences: true,
+        isRootLevel: false,
+      });
 
-        if (isNonEmptyArray(activityTargetsToCreate)) {
-          await createManyActivityTargets({
-            recordsToCreate: activityTargetsToCreate,
-          });
-        }
+      modifyRecordFromCache({
+        recordId: createdActivity.id,
+        cache,
+        fieldModifiers: {
+          activityTargets: () => activityTargetsConnection,
+        },
+        objectMetadataItem: objectMetadataItemActivity,
+      });
 
-        const activityTargetsConnection = getRecordConnectionFromRecords({
-          objectMetadataItems,
-          objectMetadataItem: objectMetadataItemActivityTarget,
-          records: activityTargetsToCreate.map((activityTarget) => ({
-            ...activityTarget,
-            __typename: capitalize(
-              objectMetadataItemActivityTarget.nameSingular,
-            ),
-          })),
-          withPageInfo: false,
-          computeReferences: true,
-          isRootLevel: false,
-        });
-
-        modifyRecordFromCache({
-          recordId: createdActivity.id,
-          cache,
-          fieldModifiers: {
-            activityTargets: () => activityTargetsConnection,
-          },
-          objectMetadataItem: objectMetadataItemActivity,
-        });
-
-        set(recordStoreFamilyState(createdActivity.id), {
-          ...createdActivity,
-          activityTargets: activityTargetsToCreate,
-        });
-      },
+      store.set(recordStoreFamilyState.atomFamily(createdActivity.id), {
+        ...createdActivity,
+        activityTargets: activityTargetsToCreate,
+      });
+    },
     [
+      store,
       cache,
       createManyActivityTargets,
       createOneActivity,