584 Refactor Tabs (#11008)

Closes https://github.com/twentyhq/core-team-issues/issues/584

This PR:
- Migrates the component state `activeTabIdComponentState` from the
deprecated V1 version to V2.
- Allows the active tab state to be preserved during navigation inside
the side panel and reset when the side panel is closed.
- Allows the active tab state to be preserved when we open a record in
full page from the side panel


https://github.com/user-attachments/assets/f2329d7a-ea15-4bd8-81dc-e98ce11edbd0


https://github.com/user-attachments/assets/474bffd5-29e0-40ba-97f4-fa5e9be34dc2

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup.ts

@@ -16,7 +16,13 @@ import { viewableRecordIdState } from '@/object-record/record-right-drawer/state
 import { useDropdownV2 } from '@/ui/layout/dropdown/hooks/useDropdownV2';
 import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
+import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getShowPageTabListComponentId';
+import { activeTabIdComponentState } from '@/ui/layout/tab/states/activeTabIdComponentState';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/constants/WorkflowRunStepSidePanelTabListComponentId';
+import { WorkflowRunTabId } from '@/workflow/workflow-steps/types/WorkflowRunTabId';
+import { WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/workflow-actions/constants/WorkflowServerlessFunctionTabListComponentId';
+import { WorkflowServerlessFunctionTabId } from '@/workflow/workflow-steps/workflow-actions/types/WorkflowServerlessFunctionTabId';
 import { useRecoilCallback } from 'recoil';
 
 export const useCommandMenuCloseAnimationCompleteCleanup = () => {
@@ -29,7 +35,7 @@ export const useCommandMenuCloseAnimationCompleteCleanup = () => {
   const { closeDropdown } = useDropdownV2();
 
   const commandMenuCloseAnimationCompleteCleanup = useRecoilCallback(
-    ({ set }) =>
+    ({ snapshot, set }) =>
       () => {
         closeDropdown(COMMAND_MENU_CONTEXT_CHIP_GROUPS_DROPDOWN_ID);
 
@@ -54,6 +60,32 @@ export const useCommandMenuCloseAnimationCompleteCleanup = () => {
 
         emitRightDrawerCloseEvent();
         set(isCommandMenuClosingState, false);
+        set(
+          activeTabIdComponentState.atomFamily({
+            instanceId: WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID,
+          }),
+          WorkflowRunTabId.NODE,
+        );
+        set(
+          activeTabIdComponentState.atomFamily({
+            instanceId: WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID,
+          }),
+          WorkflowServerlessFunctionTabId.CODE,
+        );
+
+        for (const [pageId, morphItem] of snapshot
+          .getLoadable(commandMenuNavigationMorphItemByPageState)
+          .getValue()) {
+          set(
+            activeTabIdComponentState.atomFamily({
+              instanceId: getShowPageTabListComponentId({
+                pageId,
+                targetObjectId: morphItem.recordId,
+              }),
+            }),
+            null,
+          );
+        }
       },
     [
       closeDropdown,

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuHistory.ts

@@ -6,6 +6,8 @@ import { commandMenuNavigationStackState } from '@/command-menu/states/commandMe
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageInfoState';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
+import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getShowPageTabListComponentId';
+import { activeTabIdComponentState } from '@/ui/layout/tab/states/activeTabIdComponentState';
 import { isDefined } from 'twenty-shared';
 
 export const useCommandMenuHistory = () => {
@@ -47,6 +49,19 @@ export const useCommandMenuHistory = () => {
             const newMorphItems = new Map(currentMorphItems);
             newMorphItems.delete(removedItem.pageId);
             set(commandMenuNavigationMorphItemByPageState, newMorphItems);
+
+            const morphItem = currentMorphItems.get(removedItem.pageId);
+            if (isDefined(morphItem)) {
+              set(
+                activeTabIdComponentState.atomFamily({
+                  instanceId: getShowPageTabListComponentId({
+                    pageId: removedItem.pageId,
+                    targetObjectId: morphItem.recordId,
+                  }),
+                }),
+                null,
+              );
+            }
           }
         }
 
@@ -84,6 +99,20 @@ export const useCommandMenuHistory = () => {
         .getLoadable(commandMenuNavigationMorphItemByPageState)
         .getValue();
 
+      for (const [pageId, morphItem] of currentMorphItems.entries()) {
+        if (!newNavigationStack.some((item) => item.pageId === pageId)) {
+          set(
+            activeTabIdComponentState.atomFamily({
+              instanceId: getShowPageTabListComponentId({
+                pageId,
+                targetObjectId: morphItem.recordId,
+              }),
+            }),
+            null,
+          );
+        }
+      }
+
       const newMorphItems = new Map(
         Array.from(currentMorphItems.entries()).filter(([pageId]) =>
           newNavigationStack.some((item) => item.pageId === pageId),