583 refactor useCommandMenu hook (#10984)

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

- Split hook into smaller hooks
- Create tests

packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx

@@ -9,6 +9,7 @@ import { ActionMenuComponentInstanceContext } from '@/action-menu/states/context
 import { COMMAND_MENU_ANIMATION_VARIANTS } from '@/command-menu/constants/CommandMenuAnimationVariants';
 import { COMMAND_MENU_COMPONENT_INSTANCE_ID } from '@/command-menu/constants/CommandMenuComponentInstanceId';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { useCommandMenuCloseAnimationCompleteCleanup } from '@/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup';
 import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
@@ -54,11 +55,10 @@ export const CommandMenuContainer = ({
 }: {
   children: React.ReactNode;
 }) => {
-  const {
-    toggleCommandMenu,
-    closeCommandMenu,
-    onCommandMenuCloseAnimationComplete,
-  } = useCommandMenu();
+  const { toggleCommandMenu, closeCommandMenu } = useCommandMenu();
+
+  const { commandMenuCloseAnimationCompleteCleanup } =
+    useCommandMenuCloseAnimationCompleteCleanup();
 
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
 
@@ -154,7 +154,7 @@ export const CommandMenuContainer = ({
                 <ActionMenuConfirmationModals />
                 <AnimatePresence
                   mode="wait"
-                  onExitComplete={onCommandMenuCloseAnimationComplete}
+                  onExitComplete={commandMenuCloseAnimationCompleteCleanup}
                 >
                   {isCommandMenuOpened && (
                     <StyledCommandMenu

packages/twenty-front/src/modules/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection.tsx

@@ -23,7 +23,7 @@ export const CommandMenuContextChipGroupsWithRecordSelection = ({
       limit: 3,
     });
 
-  const { openRootCommandMenu } = useCommandMenu();
+  const { openCommandMenu } = useCommandMenu();
 
   if (loading) {
     return null;
@@ -46,7 +46,7 @@ export const CommandMenuContextChipGroupsWithRecordSelection = ({
             totalCount,
           ),
           Icons: Avatars,
-          onClick: contextChips.length > 0 ? openRootCommandMenu : undefined,
+          onClick: contextChips.length > 0 ? openCommandMenu : undefined,
           withIconBackground: false,
         }
       : undefined;

packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx

@@ -7,6 +7,7 @@ import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/Command
 import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { useCommandMenuContextChips } from '@/command-menu/hooks/useCommandMenuContextChips';
+import { useCommandMenuHistory } from '@/command-menu/hooks/useCommandMenuHistory';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
@@ -91,7 +92,9 @@ export const CommandMenuTopBar = () => {
 
   const isMobile = useIsMobile();
 
-  const { closeCommandMenu, goBackFromCommandMenu } = useCommandMenu();
+  const { closeCommandMenu } = useCommandMenu();
+
+  const { goBackFromCommandMenu } = useCommandMenuHistory();
 
   const contextStoreCurrentObjectMetadataItemId = useRecoilComponentValueV2(
     contextStoreCurrentObjectMetadataItemIdComponentState,