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/navigation/components/MobileNavigationBar.tsx

@@ -9,7 +9,7 @@ import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilte
 import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
 import { useRecoilStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilStateV2';
 import { useRecoilValueV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilValueV2';
-import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/jotai/hooks/useRecoilComponentStateV2';
 import { useNavigate } from 'react-router-dom';
 import {
   type IconComponent,
@@ -39,7 +39,7 @@ export const MobileNavigationBar = () => {
     useFilteredObjectMetadataItems();
 
   const [, setContextStoreCurrentObjectMetadataItemId] =
-    useRecoilComponentState(
+    useRecoilComponentStateV2(
       contextStoreCurrentObjectMetadataItemIdComponentState,
       MAIN_CONTEXT_STORE_INSTANCE_ID,
     );

packages/twenty-front/src/modules/navigation/components/PageDragDropProvider.tsx

@@ -5,8 +5,7 @@ import {
   type OnDragUpdateResponder,
   type ResponderProvided,
 } from '@hello-pangea/dnd';
-import { type ReactNode, useState } from 'react';
-import { useRecoilCallback } from 'recoil';
+import { type ReactNode, useCallback, useState } from 'react';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 import { FavoritesDragContext } from '@/favorites/contexts/FavoritesDragContext';
@@ -80,39 +79,38 @@ export const PageDragDropProvider = ({
     }
   };
 
-  const handleDragUpdate = useRecoilCallback(
-    () =>
-      ((update: Parameters<OnDragUpdateResponder>[0]) => {
-        const { source, destination } = update;
-        if (source.droppableId !== ADD_TO_NAV_SOURCE_DROPPABLE_ID) {
-          return;
-        }
-        if (
-          destination !== null &&
-          isWorkspaceDroppableId(destination.droppableId)
-        ) {
-          setAddToNavigationFallbackDestination(destination);
-          const dropTargetId = getDropTargetIdFromDestination(destination);
-          setActiveDropTargetId(dropTargetId);
+  const handleDragUpdate = useCallback(
+    ((update: Parameters<OnDragUpdateResponder>[0]) => {
+      const { source, destination } = update;
+      if (source.droppableId !== ADD_TO_NAV_SOURCE_DROPPABLE_ID) {
+        return;
+      }
+      if (
+        destination !== null &&
+        isWorkspaceDroppableId(destination.droppableId)
+      ) {
+        setAddToNavigationFallbackDestination(destination);
+        const dropTargetId = getDropTargetIdFromDestination(destination);
+        setActiveDropTargetId(dropTargetId);
 
-          const payload =
-            store
-              .get(addToNavPayloadRegistryStateV2.atom)
-              .get(update.draggableId) ?? null;
-          const folderId = validateAndExtractWorkspaceFolderId(
-            destination.droppableId,
-          );
-          const isFolderOverFolder =
-            payload?.type === 'folder' && folderId !== null;
-          setForbiddenDropTargetId(isFolderOverFolder ? dropTargetId : null);
-        } else {
-          setForbiddenDropTargetId(null);
-          const fallback = addToNavigationFallbackDestination;
-          setActiveDropTargetId(
-            fallback ? getDropTargetIdFromDestination(fallback) : null,
-          );
-        }
-      }) as OnDragUpdateResponder,
+        const payload =
+          store
+            .get(addToNavPayloadRegistryStateV2.atom)
+            .get(update.draggableId) ?? null;
+        const folderId = validateAndExtractWorkspaceFolderId(
+          destination.droppableId,
+        );
+        const isFolderOverFolder =
+          payload?.type === 'folder' && folderId !== null;
+        setForbiddenDropTargetId(isFolderOverFolder ? dropTargetId : null);
+      } else {
+        setForbiddenDropTargetId(null);
+        const fallback = addToNavigationFallbackDestination;
+        setActiveDropTargetId(
+          fallback ? getDropTargetIdFromDestination(fallback) : null,
+        );
+      }
+    }) as OnDragUpdateResponder,
     [addToNavigationFallbackDestination, store],
   );