From 1be711b8d749b188f8d5d93863aa0bfa479c971f Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Thu, 2 Jan 2025 17:44:29 +0100
Subject: [PATCH 01/22] create command menu router

---
 .../command-menu/components/CommandMenu.tsx   | 163 +++++++-----------
 .../components/CommandMenuContainer.tsx       |  57 ++++--
 .../components/CommandMenuPages.ts            |   4 +
 .../components/CommandMenuRouter.tsx          |  23 +++
 .../components/CommandMenuShowPage.tsx        |  10 ++
 .../components/CommandMenuTopBar.tsx          |  14 +-
 .../constants/CommandMenuPagesConfig.tsx      |  11 ++
 .../command-menu/hooks/useCommandMenu.ts      |   2 +
 .../hooks/useCommandMenuHotKeys.ts            |  15 +-
 .../states/commandMenuPageState.ts            |   7 +
 .../commandMenuViewableRecordIdState.ts       |   6 +
 .../layout/page/components/DefaultLayout.tsx  |   4 +-
 12 files changed, 188 insertions(+), 128 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/command-menu/components/CommandMenuPages.ts
 create mode 100644 packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx
 create mode 100644 packages/twenty-front/src/modules/command-menu/components/CommandMenuShowPage.tsx
 create mode 100644 packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx
 create mode 100644 packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts
 create mode 100644 packages/twenty-front/src/modules/command-menu/states/commandMenuViewableRecordIdState.ts

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
index 66b152f4665b..8d4ba17d467a 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
@@ -1,23 +1,19 @@
 import { CommandGroup } from '@/command-menu/components/CommandGroup';
 import { CommandMenuDefaultSelectionEffect } from '@/command-menu/components/CommandMenuDefaultSelectionEffect';
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
-import { CommandMenuTopBar } from '@/command-menu/components/CommandMenuTopBar';
 import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
 import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys';
 import { useMatchingCommandMenuCommands } from '@/command-menu/hooks/useMatchingCommandMenuCommands';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { Command } from '@/command-menu/types/Command';
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
-import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
-import { useRef } from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';
 
 const MOBILE_NAVIGATION_BAR_HEIGHT = 64;
@@ -27,21 +23,6 @@ type CommandGroupConfig = {
   items?: Command[];
 };
 
-const StyledCommandMenu = styled.div`
-  background: ${({ theme }) => theme.background.secondary};
-  border-left: 1px solid ${({ theme }) => theme.border.color.medium};
-  box-shadow: ${({ theme }) => theme.boxShadow.strong};
-  font-family: ${({ theme }) => theme.font.family};
-  height: 100%;
-  overflow: hidden;
-  padding: 0;
-  position: fixed;
-  right: 0%;
-  top: 0%;
-  width: ${() => (useIsMobile() ? '100%' : '500px')};
-  z-index: 1000;
-`;
-
 const StyledList = styled.div`
   background: ${({ theme }) => theme.background.secondary};
   overscroll-behavior: contain;
@@ -75,24 +56,12 @@ const StyledEmpty = styled.div`
 `;
 
 export const CommandMenu = () => {
-  const { onItemClick, closeCommandMenu } = useCommandMenu();
-  const commandMenuRef = useRef<HTMLDivElement>(null);
+  const { onItemClick } = useCommandMenu();
 
-  const [commandMenuSearch, setCommandMenuSearch] = useRecoilState(
-    commandMenuSearchState,
-  );
+  const commandMenuSearch = useRecoilValue(commandMenuSearchState);
 
   const isMobile = useIsMobile();
 
-  useCommandMenuHotKeys();
-
-  useListenClickOutside({
-    refs: [commandMenuRef],
-    callback: closeCommandMenu,
-    listenerId: 'COMMAND_MENU_LISTENER_ID',
-    hotkeyScope: AppHotkeyScope.CommandMenuOpen,
-  });
-
   const {
     isNoResults,
     isLoading,
@@ -184,74 +153,66 @@ export const CommandMenu = () => {
       <CommandMenuDefaultSelectionEffect
         selectableItemIds={selectableItemIds}
       />
-      <StyledCommandMenu ref={commandMenuRef} className="command-menu">
-        <CommandMenuTopBar
-          commandMenuSearch={commandMenuSearch}
-          setCommandMenuSearch={setCommandMenuSearch}
-        />
-        <StyledList>
-          <ScrollWrapper
-            contextProviderName="commandMenu"
-            componentInstanceId={`scroll-wrapper-command-menu`}
-          >
-            <StyledInnerList isMobile={isMobile}>
-              <SelectableList
-                selectableListId="command-menu-list"
-                selectableItemIdArray={selectableItemIds}
-                hotkeyScope={AppHotkeyScope.CommandMenu}
-                onEnter={(itemId) => {
-                  const command = selectableItems.find(
-                    (item) => item.id === itemId,
-                  );
-
-                  if (isDefined(command)) {
-                    const {
-                      to,
-                      onCommandClick,
-                      shouldCloseCommandMenuOnClick,
-                    } = command;
 
-                    onItemClick({
-                      shouldCloseCommandMenuOnClick,
-                      onClick: onCommandClick,
-                      to,
-                    });
-                  }
-                }}
-              >
-                {isNoResults && !isLoading && (
-                  <StyledEmpty>No results found</StyledEmpty>
-                )}
-                {commandGroups.map(({ heading, items }) =>
-                  items?.length ? (
-                    <CommandGroup heading={heading} key={heading}>
-                      {items.map((item) => {
-                        return (
-                          <SelectableItem itemId={item.id} key={item.id}>
-                            <CommandMenuItem
-                              key={item.id}
-                              id={item.id}
-                              Icon={item.Icon}
-                              label={item.label}
-                              to={item.to}
-                              onClick={item.onCommandClick}
-                              firstHotKey={item.firstHotKey}
-                              secondHotKey={item.secondHotKey}
-                              shouldCloseCommandMenuOnClick={
-                                item.shouldCloseCommandMenuOnClick
-                              }
-                            />
-                          </SelectableItem>
-                        );
-                      })}
-                    </CommandGroup>
-                  ) : null,
-                )}
-              </SelectableList>
-            </StyledInnerList>
-          </ScrollWrapper>
-        </StyledList>
-      </StyledCommandMenu>
+      <StyledList>
+        <ScrollWrapper
+          contextProviderName="commandMenu"
+          componentInstanceId={`scroll-wrapper-command-menu`}
+        >
+          <StyledInnerList isMobile={isMobile}>
+            <SelectableList
+              selectableListId="command-menu-list"
+              selectableItemIdArray={selectableItemIds}
+              hotkeyScope={AppHotkeyScope.CommandMenu}
+              onEnter={(itemId) => {
+                const command = selectableItems.find(
+                  (item) => item.id === itemId,
+                );
+
+                if (isDefined(command)) {
+                  const { to, onCommandClick, shouldCloseCommandMenuOnClick } =
+                    command;
+
+                  onItemClick({
+                    shouldCloseCommandMenuOnClick,
+                    onClick: onCommandClick,
+                    to,
+                  });
+                }
+              }}
+            >
+              {isNoResults && !isLoading && (
+                <StyledEmpty>No results found</StyledEmpty>
+              )}
+              {commandGroups.map(({ heading, items }) =>
+                items?.length ? (
+                  <CommandGroup heading={heading} key={heading}>
+                    {items.map((item) => {
+                      return (
+                        <SelectableItem itemId={item.id} key={item.id}>
+                          <CommandMenuItem
+                            key={item.id}
+                            id={item.id}
+                            Icon={item.Icon}
+                            label={item.label}
+                            to={item.to}
+                            onClick={item.onCommandClick}
+                            firstHotKey={item.firstHotKey}
+                            secondHotKey={item.secondHotKey}
+                            shouldCloseCommandMenuOnClick={
+                              item.shouldCloseCommandMenuOnClick
+                            }
+                          />
+                        </SelectableItem>
+                      );
+                    })}
+                  </CommandGroup>
+                ) : null,
+              )}
+            </SelectableList>
+          </StyledInnerList>
+        </ScrollWrapper>
+      </StyledList>
     </>
   );
 };
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
index fe3802cd00e4..4b07986a1ab5 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
@@ -3,35 +3,56 @@ import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-
 import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
-import { CommandMenu } from '@/command-menu/components/CommandMenu';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
-import { useKeyboardShortcutMenu } from '@/keyboard-shortcut-menu/hooks/useKeyboardShortcutMenu';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import styled from '@emotion/styled';
+import { useRef } from 'react';
 import { useRecoilValue } from 'recoil';
+import { useIsMobile } from 'twenty-ui';
 import { FeatureFlagKey } from '~/generated/graphql';
 
-export const CommandMenuContainer = () => {
-  const { toggleCommandMenu } = useCommandMenu();
-  const { closeKeyboardShortcutMenu } = useKeyboardShortcutMenu();
+const StyledCommandMenu = styled.div`
+  background: ${({ theme }) => theme.background.secondary};
+  border-left: 1px solid ${({ theme }) => theme.border.color.medium};
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
+  font-family: ${({ theme }) => theme.font.family};
+  height: 100%;
+  overflow: hidden;
+  padding: 0;
+  position: fixed;
+  right: 0%;
+  top: 0%;
+  width: ${() => (useIsMobile() ? '100%' : '500px')};
+  z-index: 1000;
+`;
+
+export const CommandMenuContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const { toggleCommandMenu, closeCommandMenu } = useCommandMenu();
 
   const isWorkflowEnabled = useIsFeatureEnabled(
     FeatureFlagKey.IsWorkflowEnabled,
   );
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
 
-  useScopedHotkeys(
-    'ctrl+k,meta+k',
-    () => {
-      closeKeyboardShortcutMenu();
-      toggleCommandMenu();
-    },
-    AppHotkeyScope.CommandMenu,
-    [toggleCommandMenu],
-  );
+  const commandMenuRef = useRef<HTMLDivElement>(null);
+
+  useCommandMenuHotKeys();
+
+  useListenClickOutside({
+    refs: [commandMenuRef],
+    callback: closeCommandMenu,
+    listenerId: 'COMMAND_MENU_LISTENER_ID',
+    hotkeyScope: AppHotkeyScope.CommandMenuOpen,
+  });
 
   return (
     <ContextStoreComponentInstanceContext.Provider
@@ -49,7 +70,11 @@ export const CommandMenuContainer = () => {
           <RecordActionMenuEntriesSetter />
           {isWorkflowEnabled && <RecordAgnosticActionsSetterEffect />}
           <ActionMenuConfirmationModals />
-          {isCommandMenuOpened && <CommandMenu />}
+          {isCommandMenuOpened && (
+            <StyledCommandMenu ref={commandMenuRef} className="command-menu">
+              {children}
+            </StyledCommandMenu>
+          )}
         </ActionMenuContext.Provider>
       </ActionMenuComponentInstanceContext.Provider>
     </ContextStoreComponentInstanceContext.Provider>
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPages.ts b/packages/twenty-front/src/modules/command-menu/components/CommandMenuPages.ts
new file mode 100644
index 000000000000..e783f76dee70
--- /dev/null
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuPages.ts
@@ -0,0 +1,4 @@
+export enum CommandMenuPages {
+  Root = 'root',
+  ViewRecord = 'view-record',
+}
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx
new file mode 100644
index 000000000000..9c90f6e471fc
--- /dev/null
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuRouter.tsx
@@ -0,0 +1,23 @@
+import { CommandMenuContainer } from '@/command-menu/components/CommandMenuContainer';
+import { CommandMenuTopBar } from '@/command-menu/components/CommandMenuTopBar';
+import { COMMAND_MENU_PAGES_CONFIG } from '@/command-menu/constants/CommandMenuPagesConfig';
+import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
+import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-ui';
+
+export const CommandMenuRouter = () => {
+  const commandMenuPage = useRecoilValue(commandMenuPageState);
+
+  const commandMenuPageComponent = isDefined(commandMenuPage) ? (
+    COMMAND_MENU_PAGES_CONFIG.get(commandMenuPage)
+  ) : (
+    <></>
+  );
+
+  return (
+    <CommandMenuContainer>
+      <CommandMenuTopBar />
+      {commandMenuPageComponent}
+    </CommandMenuContainer>
+  );
+};
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuShowPage.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuShowPage.tsx
new file mode 100644
index 000000000000..dfafe3c6f137
--- /dev/null
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuShowPage.tsx
@@ -0,0 +1,10 @@
+import { commandMenuViewableRecordIdState } from '@/command-menu/states/commandMenuViewableRecordIdState';
+import { useRecoilValue } from 'recoil';
+
+export const CommandMenuShowPage = () => {
+  const commandMenuViewableRecordId = useRecoilValue(
+    commandMenuViewableRecordIdState,
+  );
+
+  return <div>{commandMenuViewableRecordId}</div>;
+};
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
index 4bb2bc9040fe..47cd9459a8f2 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
@@ -2,9 +2,11 @@ import { CommandMenuContextRecordChip } from '@/command-menu/components/CommandM
 import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
 import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
+import { useRecoilState } from 'recoil';
 import { IconX, LightIconButton, isDefined, useIsMobile } from 'twenty-ui';
 
 const StyledInputContainer = styled.div`
@@ -50,15 +52,11 @@ const StyledCloseButtonContainer = styled.div`
   justify-content: center;
 `;
 
-type CommandMenuTopBarProps = {
-  commandMenuSearch: string;
-  setCommandMenuSearch: (search: string) => void;
-};
+export const CommandMenuTopBar = () => {
+  const [commandMenuSearch, setCommandMenuSearch] = useRecoilState(
+    commandMenuSearchState,
+  );
 
-export const CommandMenuTopBar = ({
-  commandMenuSearch,
-  setCommandMenuSearch,
-}: CommandMenuTopBarProps) => {
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setCommandMenuSearch(event.target.value);
   };
diff --git a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx
new file mode 100644
index 000000000000..81a753197b4b
--- /dev/null
+++ b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx
@@ -0,0 +1,11 @@
+import { CommandMenu } from '@/command-menu/components/CommandMenu';
+import { CommandMenuPages } from '@/command-menu/components/CommandMenuPages';
+import { CommandMenuShowPage } from '@/command-menu/components/CommandMenuShowPage';
+
+export const COMMAND_MENU_PAGES_CONFIG = new Map<
+  CommandMenuPages,
+  React.ReactNode
+>([
+  [CommandMenuPages.Root, <CommandMenu />],
+  [CommandMenuPages.ViewRecord, <CommandMenuShowPage />],
+]);
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
index 3b32e5a6e1c8..9246e53203a4 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
+++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
@@ -10,6 +10,7 @@ import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { isDefined } from '~/utils/isDefined';
 
 import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
+import { commandMenuViewableRecordIdState } from '@/command-menu/states/commandMenuViewableRecordIdState';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
@@ -212,6 +213,7 @@ export const useCommandMenu = () => {
         );
 
         if (isCommandMenuOpened) {
+          set(commandMenuViewableRecordIdState, null);
           setIsCommandMenuOpened(false);
           resetSelectedItem();
           goBackToPreviousHotkeyScope();
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuHotKeys.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuHotKeys.ts
index f905b29ceec6..d237a4f41f66 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuHotKeys.ts
+++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuHotKeys.ts
@@ -2,6 +2,7 @@ import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { useKeyboardShortcutMenu } from '@/keyboard-shortcut-menu/hooks/useKeyboardShortcutMenu';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
@@ -10,7 +11,7 @@ import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
 
 export const useCommandMenuHotKeys = () => {
-  const { closeCommandMenu } = useCommandMenu();
+  const { closeCommandMenu, toggleCommandMenu } = useCommandMenu();
 
   const commandMenuSearch = useRecoilValue(commandMenuSearchState);
 
@@ -24,6 +25,18 @@ export const useCommandMenuHotKeys = () => {
     'command-menu',
   );
 
+  const { closeKeyboardShortcutMenu } = useKeyboardShortcutMenu();
+
+  useScopedHotkeys(
+    'ctrl+k,meta+k',
+    () => {
+      closeKeyboardShortcutMenu();
+      toggleCommandMenu();
+    },
+    AppHotkeyScope.CommandMenu,
+    [toggleCommandMenu],
+  );
+
   useScopedHotkeys(
     [Key.Escape],
     () => {
diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts
new file mode 100644
index 000000000000..d5a41917d217
--- /dev/null
+++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuPageState.ts
@@ -0,0 +1,7 @@
+import { CommandMenuPages } from '@/command-menu/components/CommandMenuPages';
+import { createState } from '@ui/utilities/state/utils/createState';
+
+export const commandMenuPageState = createState<CommandMenuPages>({
+  key: 'command-menu/commandMenuPageState',
+  defaultValue: CommandMenuPages.Root,
+});
diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuViewableRecordIdState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuViewableRecordIdState.ts
new file mode 100644
index 000000000000..25a45175de22
--- /dev/null
+++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuViewableRecordIdState.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const commandMenuViewableRecordIdState = atom<string | null>({
+  key: 'command-menu/commandMenuViewableRecordIdState',
+  default: null,
+});
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
index d39531099976..00c966ba257c 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/DefaultLayout.tsx
@@ -1,5 +1,5 @@
 import { AuthModal } from '@/auth/components/AuthModal';
-import { CommandMenuContainer } from '@/command-menu/components/CommandMenuContainer';
+import { CommandMenuRouter } from '@/command-menu/components/CommandMenuRouter';
 import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
 import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
 import { AppNavigationDrawer } from '@/navigation/components/AppNavigationDrawer';
@@ -82,7 +82,7 @@ export const DefaultLayout = () => {
       <StyledLayout>
         {!showAuthModal && (
           <>
-            <CommandMenuContainer />
+            <CommandMenuRouter />
             <KeyboardShortcutMenu />
           </>
         )}

From 50c000bb61a4467ed9b012a99a121e217d83a9ea Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 7 Jan 2025 14:57:14 +0100
Subject: [PATCH 02/22] Add openRecordInCommandMenu to useCommandMenu

---
 .../command-menu/hooks/useCommandMenu.ts      | 19 +++++++++++++++++--
 .../commandMenuViewableRecordIdState.ts       |  6 ------
 2 files changed, 17 insertions(+), 8 deletions(-)
 delete mode 100644 packages/twenty-front/src/modules/command-menu/states/commandMenuViewableRecordIdState.ts

diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
index 9246e53203a4..58e595a7de58 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
+++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
@@ -10,7 +10,8 @@ import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { isDefined } from '~/utils/isDefined';
 
 import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
-import { commandMenuViewableRecordIdState } from '@/command-menu/states/commandMenuViewableRecordIdState';
+import { CommandMenuPages } from '@/command-menu/components/CommandMenuPages';
+import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
@@ -18,6 +19,7 @@ import { contextStoreFiltersComponentState } from '@/context-store/states/contex
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
+import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
 
 export const useCommandMenu = () => {
@@ -213,7 +215,8 @@ export const useCommandMenu = () => {
         );
 
         if (isCommandMenuOpened) {
-          set(commandMenuViewableRecordIdState, null);
+          set(viewableRecordIdState, null);
+          set(commandMenuPageState, CommandMenuPages.Root);
           setIsCommandMenuOpened(false);
           resetSelectedItem();
           goBackToPreviousHotkeyScope();
@@ -269,9 +272,21 @@ export const useCommandMenu = () => {
     [navigate, toggleCommandMenu],
   );
 
+  const openRecordInCommandMenu = useRecoilCallback(
+    ({ set }) => {
+      return (recordId: string) => {
+        openCommandMenu();
+        set(commandMenuPageState, CommandMenuPages.ViewRecord);
+        set(viewableRecordIdState, recordId);
+      };
+    },
+    [openCommandMenu],
+  );
+
   return {
     openCommandMenu,
     closeCommandMenu,
+    openRecordInCommandMenu,
     toggleCommandMenu,
     onItemClick,
   };
diff --git a/packages/twenty-front/src/modules/command-menu/states/commandMenuViewableRecordIdState.ts b/packages/twenty-front/src/modules/command-menu/states/commandMenuViewableRecordIdState.ts
deleted file mode 100644
index 25a45175de22..000000000000
--- a/packages/twenty-front/src/modules/command-menu/states/commandMenuViewableRecordIdState.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { atom } from 'recoil';
-
-export const commandMenuViewableRecordIdState = atom<string | null>({
-  key: 'command-menu/commandMenuViewableRecordIdState',
-  default: null,
-});

From 30c10cdd3dd2fa5312af93a06ad1451b53eca345 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 7 Jan 2025 15:31:33 +0100
Subject: [PATCH 03/22] update feature flag

---
 .../src/generated-metadata/graphql.ts             | 15 ++++++++++++++-
 packages/twenty-front/src/generated/graphql.tsx   |  2 +-
 .../components/RecordActionMenuEntriesSetter.tsx  |  6 +++---
 .../action-menu/actions/utils/getActionConfig.ts  |  4 ++--
 .../components/RecordIndexActionMenu.tsx          |  6 +++---
 .../components/RecordShowActionMenu.tsx           |  6 +++---
 .../components/CommandMenuShowPage.tsx            | 10 ----------
 .../constants/CommandMenuPagesConfig.tsx          |  4 ++--
 .../favorites/components/PageFavoriteButton.tsx   |  6 +++---
 .../components/RecordIndexContainer.tsx           |  6 +++---
 .../components/RecordIndexPageHeader.tsx          |  8 ++++----
 .../PageHeaderOpenCommandMenuButton.tsx           |  6 +++---
 .../ui/layout/page/components/PageAddButton.tsx   |  6 +++---
 .../ui/layout/page/components/PageHeader.tsx      |  6 +++---
 .../show-page/components/ShowPageAddButton.tsx    |  6 +++---
 .../src/pages/object-record/RecordShowPage.tsx    | 10 +++++-----
 .../database/typeorm-seeds/core/feature-flags.ts  |  2 +-
 .../feature-flag/enums/feature-flag-key.enum.ts   |  2 +-
 18 files changed, 57 insertions(+), 54 deletions(-)
 delete mode 100644 packages/twenty-front/src/modules/command-menu/components/CommandMenuShowPage.tsx

diff --git a/packages/twenty-front/src/generated-metadata/graphql.ts b/packages/twenty-front/src/generated-metadata/graphql.ts
index 417a5c9696d1..96d10ecb6679 100644
--- a/packages/twenty-front/src/generated-metadata/graphql.ts
+++ b/packages/twenty-front/src/generated-metadata/graphql.ts
@@ -199,6 +199,13 @@ export type CreateAppTokenInput = {
   expiresAt: Scalars['DateTime']['input'];
 };
 
+export type CreateDraftFromWorkflowVersionInput = {
+  /** Workflow ID */
+  workflowId: Scalars['String']['input'];
+  /** Workflow version ID */
+  workflowVersionIdToCopy: Scalars['String']['input'];
+};
+
 export type CreateFieldInput = {
   defaultValue?: InputMaybe<Scalars['JSON']['input']>;
   description?: InputMaybe<Scalars['String']['input']>;
@@ -387,6 +394,7 @@ export enum FeatureFlagKey {
   IsAggregateQueryEnabled = 'IsAggregateQueryEnabled',
   IsAirtableIntegrationEnabled = 'IsAirtableIntegrationEnabled',
   IsAnalyticsV2Enabled = 'IsAnalyticsV2Enabled',
+  IsCommandMenuV2Enabled = 'IsCommandMenuV2Enabled',
   IsCopilotEnabled = 'IsCopilotEnabled',
   IsCrmMigrationEnabled = 'IsCrmMigrationEnabled',
   IsEventObjectEnabled = 'IsEventObjectEnabled',
@@ -395,7 +403,6 @@ export enum FeatureFlagKey {
   IsGmailSendEmailScopeEnabled = 'IsGmailSendEmailScopeEnabled',
   IsJsonFilterEnabled = 'IsJsonFilterEnabled',
   IsMicrosoftSyncEnabled = 'IsMicrosoftSyncEnabled',
-  IsPageHeaderV2Enabled = 'IsPageHeaderV2Enabled',
   IsPostgreSqlIntegrationEnabled = 'IsPostgreSQLIntegrationEnabled',
   IsSsoEnabled = 'IsSSOEnabled',
   IsStripeIntegrationEnabled = 'IsStripeIntegrationEnabled',
@@ -579,6 +586,7 @@ export type Mutation = {
   challenge: LoginToken;
   checkoutSession: SessionEntity;
   computeStepOutputSchema: Scalars['JSON']['output'];
+  createDraftFromWorkflowVersion: Scalars['Boolean']['output'];
   createOIDCIdentityProvider: SetupSsoOutput;
   createOneAppToken: AppToken;
   createOneField: Field;
@@ -685,6 +693,11 @@ export type MutationComputeStepOutputSchemaArgs = {
 };
 
 
+export type MutationCreateDraftFromWorkflowVersionArgs = {
+  input: CreateDraftFromWorkflowVersionInput;
+};
+
+
 export type MutationCreateOidcIdentityProviderArgs = {
   input: SetupOidcSsoInput;
 };
diff --git a/packages/twenty-front/src/generated/graphql.tsx b/packages/twenty-front/src/generated/graphql.tsx
index 1bd6c5271464..ecc79a5e5a35 100644
--- a/packages/twenty-front/src/generated/graphql.tsx
+++ b/packages/twenty-front/src/generated/graphql.tsx
@@ -324,6 +324,7 @@ export enum FeatureFlagKey {
   IsAggregateQueryEnabled = 'IsAggregateQueryEnabled',
   IsAirtableIntegrationEnabled = 'IsAirtableIntegrationEnabled',
   IsAnalyticsV2Enabled = 'IsAnalyticsV2Enabled',
+  IsCommandMenuV2Enabled = 'IsCommandMenuV2Enabled',
   IsCopilotEnabled = 'IsCopilotEnabled',
   IsCrmMigrationEnabled = 'IsCrmMigrationEnabled',
   IsEventObjectEnabled = 'IsEventObjectEnabled',
@@ -332,7 +333,6 @@ export enum FeatureFlagKey {
   IsGmailSendEmailScopeEnabled = 'IsGmailSendEmailScopeEnabled',
   IsJsonFilterEnabled = 'IsJsonFilterEnabled',
   IsMicrosoftSyncEnabled = 'IsMicrosoftSyncEnabled',
-  IsPageHeaderV2Enabled = 'IsPageHeaderV2Enabled',
   IsPostgreSqlIntegrationEnabled = 'IsPostgreSQLIntegrationEnabled',
   IsSsoEnabled = 'IsSSOEnabled',
   IsStripeIntegrationEnabled = 'IsStripeIntegrationEnabled',
diff --git a/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx b/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx
index 5ae6cf1d6bd6..15f8d08502ba 100644
--- a/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx
+++ b/packages/twenty-front/src/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx
@@ -35,8 +35,8 @@ export const RecordActionMenuEntriesSetter = () => {
     FeatureFlagKey.IsWorkflowEnabled,
   );
 
-  const isPageHeaderV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsPageHeaderV2Enabled,
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
   );
 
   if (
@@ -53,7 +53,7 @@ export const RecordActionMenuEntriesSetter = () => {
 
   const actionConfig = getActionConfig(
     objectMetadataItem,
-    isPageHeaderV2Enabled,
+    isCommandMenuV2Enabled,
   );
 
   const actionsToRegister = isDefined(viewType)
diff --git a/packages/twenty-front/src/modules/action-menu/actions/utils/getActionConfig.ts b/packages/twenty-front/src/modules/action-menu/actions/utils/getActionConfig.ts
index 9d2cd4b216cf..c63566edaa6b 100644
--- a/packages/twenty-front/src/modules/action-menu/actions/utils/getActionConfig.ts
+++ b/packages/twenty-front/src/modules/action-menu/actions/utils/getActionConfig.ts
@@ -8,7 +8,7 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 
 export const getActionConfig = (
   objectMetadataItem: ObjectMetadataItem,
-  isPageHeaderV2Enabled: boolean,
+  isCommandMenuV2Enabled: boolean,
 ) => {
   switch (objectMetadataItem.nameSingular) {
     case CoreObjectNameSingular.Workflow:
@@ -18,7 +18,7 @@ export const getActionConfig = (
     case CoreObjectNameSingular.WorkflowRun:
       return WORKFLOW_RUNS_ACTIONS_CONFIG;
     default:
-      return isPageHeaderV2Enabled
+      return isCommandMenuV2Enabled
         ? DEFAULT_ACTIONS_CONFIG_V2
         : DEFAULT_ACTIONS_CONFIG_V1;
   }
diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx
index 835322427d3b..2590dadd2465 100644
--- a/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenu.tsx
@@ -25,8 +25,8 @@ export const RecordIndexActionMenu = ({ indexId }: { indexId: string }) => {
     FeatureFlagKey.IsWorkflowEnabled,
   );
 
-  const isPageHeaderV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsPageHeaderV2Enabled,
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
   );
 
   const isMobile = useIsMobile();
@@ -54,7 +54,7 @@ export const RecordIndexActionMenu = ({ indexId }: { indexId: string }) => {
             },
           }}
         >
-          {isPageHeaderV2Enabled ? (
+          {isCommandMenuV2Enabled ? (
             <>{!isMobile && <RecordIndexActionMenuButtons />}</>
           ) : (
             <RecordIndexActionMenuBar />
diff --git a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx
index a1df8e65518c..3d032945b3ed 100644
--- a/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/RecordShowActionMenu.tsx
@@ -33,8 +33,8 @@ export const RecordShowActionMenu = ({
     FeatureFlagKey.IsWorkflowEnabled,
   );
 
-  const isPageHeaderV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsPageHeaderV2Enabled,
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
   );
 
   // TODO: refactor RecordShowPageBaseHeader to use the context store
@@ -48,7 +48,7 @@ export const RecordShowActionMenu = ({
             onActionExecutedCallback: () => {},
           }}
         >
-          {isPageHeaderV2Enabled ? (
+          {isCommandMenuV2Enabled ? (
             <RecordShowActionMenuButtons />
           ) : (
             <RecordShowPageBaseHeader
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuShowPage.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuShowPage.tsx
deleted file mode 100644
index dfafe3c6f137..000000000000
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuShowPage.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { commandMenuViewableRecordIdState } from '@/command-menu/states/commandMenuViewableRecordIdState';
-import { useRecoilValue } from 'recoil';
-
-export const CommandMenuShowPage = () => {
-  const commandMenuViewableRecordId = useRecoilValue(
-    commandMenuViewableRecordIdState,
-  );
-
-  return <div>{commandMenuViewableRecordId}</div>;
-};
diff --git a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx
index 81a753197b4b..ca1a09097ddc 100644
--- a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx
+++ b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuPagesConfig.tsx
@@ -1,11 +1,11 @@
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
 import { CommandMenuPages } from '@/command-menu/components/CommandMenuPages';
-import { CommandMenuShowPage } from '@/command-menu/components/CommandMenuShowPage';
+import { RightDrawerRecord } from '@/object-record/record-right-drawer/components/RightDrawerRecord';
 
 export const COMMAND_MENU_PAGES_CONFIG = new Map<
   CommandMenuPages,
   React.ReactNode
 >([
   [CommandMenuPages.Root, <CommandMenu />],
-  [CommandMenuPages.ViewRecord, <CommandMenuShowPage />],
+  [CommandMenuPages.ViewRecord, <RightDrawerRecord />],
 ]);
diff --git a/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx b/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
index 3ab95cd67e83..100abe308da9 100644
--- a/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
+++ b/packages/twenty-front/src/modules/favorites/components/PageFavoriteButton.tsx
@@ -13,13 +13,13 @@ export const PageFavoriteButton = ({
 }: PageFavoriteButtonProps) => {
   const title = isFavorite ? 'Remove from favorites' : 'Add to favorites';
 
-  const isPageHeaderV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsPageHeaderV2Enabled,
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
   );
 
   return (
     <>
-      {isPageHeaderV2Enabled ? (
+      {isCommandMenuV2Enabled ? (
         <Button
           Icon={isFavorite ? IconHeartOff : IconHeart}
           dataTestId="favorite-button"
diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
index 20abc2d6fa5f..8e3ed3af1f15 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
@@ -162,8 +162,8 @@ export const RecordIndexContainer = () => {
     contextStoreTargetedRecordsRuleComponentState,
   );
 
-  const isPageHeaderV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsPageHeaderV2Enabled,
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
   );
 
   return (
@@ -256,7 +256,7 @@ export const RecordIndexContainer = () => {
               <RecordIndexBoardDataLoaderEffect recordBoardId={recordIndexId} />
             </StyledContainerWithPadding>
           )}
-          {!isPageHeaderV2Enabled && (
+          {!isCommandMenuV2Enabled && (
             <RecordIndexActionMenu indexId={recordIndexId} />
           )}
         </RecordFieldValueSelectorContextProvider>
diff --git a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
index 1af4c00ba199..7ada3e5979fe 100644
--- a/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
@@ -36,8 +36,8 @@ export const RecordIndexPageHeader = () => {
     contextStoreNumberOfSelectedRecordsComponentState,
   );
 
-  const isPageHeaderV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsPageHeaderV2Enabled,
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
   );
 
   const isObjectMetadataItemReadOnly =
@@ -45,7 +45,7 @@ export const RecordIndexPageHeader = () => {
     isObjectMetadataReadOnly(objectMetadataItem);
 
   const shouldDisplayAddButton =
-    (numberOfSelectedRecords === 0 || !isPageHeaderV2Enabled) &&
+    (numberOfSelectedRecords === 0 || !isCommandMenuV2Enabled) &&
     !isObjectMetadataItemReadOnly;
 
   const isTable = recordIndexViewType === ViewType.Table;
@@ -65,7 +65,7 @@ export const RecordIndexPageHeader = () => {
           <RecordIndexPageKanbanAddButton />
         ))}
 
-      {isPageHeaderV2Enabled && (
+      {isCommandMenuV2Enabled && (
         <>
           <RecordIndexActionMenu indexId={recordIndexId} />
           <PageHeaderOpenCommandMenuButton />
diff --git a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
index e3bf30cf949f..1b3cf4068877 100644
--- a/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton.tsx
@@ -7,15 +7,15 @@ import { FeatureFlagKey } from '~/generated/graphql';
 export const PageHeaderOpenCommandMenuButton = () => {
   const { openCommandMenu } = useCommandMenu();
 
-  const isPageHeaderV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsPageHeaderV2Enabled,
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
   );
 
   const isMobile = useIsMobile();
 
   return (
     <>
-      {isPageHeaderV2Enabled ? (
+      {isCommandMenuV2Enabled ? (
         <Button
           Icon={IconDotsVertical}
           dataTestId="page-header-open-command-menu-button"
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
index efa68b4fe3e7..b9307bd09cce 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageAddButton.tsx
@@ -7,14 +7,14 @@ type PageAddButtonProps = {
 };
 
 export const PageAddButton = ({ onClick }: PageAddButtonProps) => {
-  const isPageHeaderV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsPageHeaderV2Enabled,
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
   );
   const isMobile = useIsMobile();
 
   return (
     <>
-      {isPageHeaderV2Enabled ? (
+      {isCommandMenuV2Enabled ? (
         <Button
           Icon={IconPlus}
           dataTestId="add-button"
diff --git a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
index f057376aa228..5e5da21227f7 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
@@ -111,8 +111,8 @@ export const PageHeader = ({
     isNavigationDrawerExpandedState,
   );
 
-  const isPageHeaderV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsPageHeaderV2Enabled,
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
   );
 
   return (
@@ -133,7 +133,7 @@ export const PageHeader = ({
         )}
 
         <StyledTopBarIconStyledTitleContainer>
-          {!isPageHeaderV2Enabled && hasPaginationButtons && (
+          {!isCommandMenuV2Enabled && hasPaginationButtons && (
             <>
               <IconButton
                 Icon={IconChevronUp}
diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
index 3a14b90b3926..4028f10a8cef 100644
--- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageAddButton.tsx
@@ -53,8 +53,8 @@ export const ShowPageAddButton = ({
     closeDropdown();
   };
 
-  const isPageHeaderV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsPageHeaderV2Enabled,
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
   );
 
   if (
@@ -72,7 +72,7 @@ export const ShowPageAddButton = ({
       <Dropdown
         dropdownId={SHOW_PAGE_ADD_BUTTON_DROPDOWN_ID}
         clickableComponent={
-          isPageHeaderV2Enabled ? (
+          isCommandMenuV2Enabled ? (
             <Button
               Icon={IconPlus}
               dataTestId="add-button"
diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
index 3ff6a6637b94..ce0ee7b9379a 100644
--- a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
@@ -40,8 +40,8 @@ export const RecordShowPage = () => {
     parameters.objectRecordId ?? '',
   );
 
-  const isPageHeaderV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsPageHeaderV2Enabled,
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
   );
 
   return (
@@ -63,18 +63,18 @@ export const RecordShowPage = () => {
               headerIcon={headerIcon}
             >
               <>
-                {!isPageHeaderV2Enabled &&
+                {!isCommandMenuV2Enabled &&
                   objectNameSingular === CoreObjectNameSingular.Workflow && (
                     <RecordShowPageWorkflowHeader workflowId={objectRecordId} />
                   )}
-                {!isPageHeaderV2Enabled &&
+                {!isCommandMenuV2Enabled &&
                   objectNameSingular ===
                     CoreObjectNameSingular.WorkflowVersion && (
                     <RecordShowPageWorkflowVersionHeader
                       workflowVersionId={objectRecordId}
                     />
                   )}
-                {(isPageHeaderV2Enabled ||
+                {(isCommandMenuV2Enabled ||
                   (objectNameSingular !== CoreObjectNameSingular.Workflow &&
                     objectNameSingular !==
                       CoreObjectNameSingular.WorkflowVersion)) && (
diff --git a/packages/twenty-server/src/database/typeorm-seeds/core/feature-flags.ts b/packages/twenty-server/src/database/typeorm-seeds/core/feature-flags.ts
index 4b73c35da4d8..b2c778d499fb 100644
--- a/packages/twenty-server/src/database/typeorm-seeds/core/feature-flags.ts
+++ b/packages/twenty-server/src/database/typeorm-seeds/core/feature-flags.ts
@@ -81,7 +81,7 @@ export const seedFeatureFlags = async (
         value: true,
       },
       {
-        key: FeatureFlagKey.IsPageHeaderV2Enabled,
+        key: FeatureFlagKey.IsCommandMenuV2Enabled,
         workspaceId: workspaceId,
         value: true,
       },
diff --git a/packages/twenty-server/src/engine/core-modules/feature-flag/enums/feature-flag-key.enum.ts b/packages/twenty-server/src/engine/core-modules/feature-flag/enums/feature-flag-key.enum.ts
index 703a4fd6a9dc..2bafc436120d 100644
--- a/packages/twenty-server/src/engine/core-modules/feature-flag/enums/feature-flag-key.enum.ts
+++ b/packages/twenty-server/src/engine/core-modules/feature-flag/enums/feature-flag-key.enum.ts
@@ -15,7 +15,7 @@ export enum FeatureFlagKey {
   IsAdvancedFiltersEnabled = 'IS_ADVANCED_FILTERS_ENABLED',
   IsAggregateQueryEnabled = 'IS_AGGREGATE_QUERY_ENABLED',
   IsViewGroupsEnabled = 'IS_VIEW_GROUPS_ENABLED',
-  IsPageHeaderV2Enabled = 'IS_PAGE_HEADER_V2_ENABLED',
+  IsCommandMenuV2Enabled = 'IS_COMMAND_MENU_V2_ENABLED',
   IsCrmMigrationEnabled = 'IS_CRM_MIGRATION_ENABLED',
   IsJsonFilterEnabled = 'IS_JSON_FILTER_ENABLED',
 }

From d322b85f36612ea36346082e19ad7a5648c96f30 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 7 Jan 2025 17:02:30 +0100
Subject: [PATCH 04/22] open record page in command menu if enabled

---
 .../right-drawer/hooks/useRightDrawer.ts      | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts
index c7a96152805e..57640c7ee823 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/useRightDrawer.ts
@@ -3,10 +3,15 @@ import { useRecoilCallback, useRecoilValue } from 'recoil';
 import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
 import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
 
+import { CommandMenuPages } from '@/command-menu/components/CommandMenuPages';
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
+import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 import { rightDrawerPageState } from '../states/rightDrawerPageState';
 import { RightDrawerPages } from '../types/RightDrawerPages';
-import { emitRightDrawerCloseEvent } from '@/ui/layout/right-drawer/utils/emitRightDrawerCloseEvent';
 
 export const useRightDrawer = () => {
   const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
@@ -14,14 +19,29 @@ export const useRightDrawer = () => {
 
   const rightDrawerPage = useRecoilValue(rightDrawerPageState);
 
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
+  );
+
+  const { openCommandMenu } = useCommandMenu();
+
   const openRightDrawer = useRecoilCallback(
     ({ set }) =>
       (rightDrawerPage: RightDrawerPages) => {
+        if (
+          isCommandMenuV2Enabled &&
+          rightDrawerPage === RightDrawerPages.ViewRecord
+        ) {
+          set(commandMenuPageState, CommandMenuPages.ViewRecord);
+          openCommandMenu();
+          return;
+        }
+
         set(rightDrawerPageState, rightDrawerPage);
         set(isRightDrawerOpenState, true);
         set(isRightDrawerMinimizedState, false);
       },
-    [],
+    [isCommandMenuV2Enabled, openCommandMenu],
   );
 
   const closeRightDrawer = useRecoilCallback(

From 1f2af31da468a322580bbe620b6dd0dd8a61db61 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Tue, 7 Jan 2025 18:35:52 +0100
Subject: [PATCH 05/22] modify command menu z index

---
 .../modules/command-menu/components/CommandMenuContainer.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
index 4b07986a1ab5..3fa14a772cc7 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
@@ -28,7 +28,7 @@ const StyledCommandMenu = styled.div`
   right: 0%;
   top: 0%;
   width: ${() => (useIsMobile() ? '100%' : '500px')};
-  z-index: 1000;
+  z-index: 30;
 `;
 
 export const CommandMenuContainer = ({

From e0302f006be60778d4e1ee67f9ee7a2cf5aa876a Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 15:58:32 +0100
Subject: [PATCH 06/22] fix hotkey scope issue

---
 .../components/RecordDetailRelationSection.tsx               | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
index e3a315a4335e..5da256c54d02 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
@@ -212,7 +212,10 @@ export const RecordDetailRelationSection = ({
                       <>
                         <RelationFromManyFieldInputMultiRecordsEffect />
                         <MultiRecordSelect
-                          onCreate={createNewRecordAndOpenRightDrawer}
+                          onCreate={() => {
+                            closeDropdown();
+                            createNewRecordAndOpenRightDrawer?.();
+                          }}
                           onChange={updateRelation}
                           onSubmit={closeDropdown}
                           dropdownPlacement={dropdownPlacement}

From bdf96ad41c35a528fb60a5223e66b10b207a0719 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 16:09:12 +0100
Subject: [PATCH 07/22] fix StyledRightDrawerRecord height

---
 .../record-right-drawer/components/RightDrawerRecord.tsx    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
index aae719251af0..da25e143054c 100644
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
@@ -10,11 +10,15 @@ import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordSh
 import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
 import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import styled from '@emotion/styled';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 const StyledRightDrawerRecord = styled.div`
   height: ${({ theme }) =>
-    useIsMobile() ? `calc(100% - ${theme.spacing(16)})` : '100%'};
+    useIsFeatureEnabled(FeatureFlagKey.IsCommandMenuV2Enabled) || useIsMobile()
+      ? `calc(100% - ${theme.spacing(16)})`
+      : '100%'};
 `;
 
 export const RightDrawerRecord = () => {

From d31a22c1ca9772c1bc6adaf931af60b62131fddf Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 16:45:40 +0100
Subject: [PATCH 08/22] fix hotkey scopes issues

---
 .../components/ActivityRichTextEditor.tsx          | 11 ++++++++++-
 .../activities/hooks/useOpenActivityRightDrawer.ts | 14 +++++++++++++-
 .../hooks/useOpenCreateActivityDrawer.ts           | 14 +++++++++++++-
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx b/packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx
index f871566fff4b..24b6045905dd 100644
--- a/packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx
+++ b/packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx
@@ -26,9 +26,12 @@ import { Note } from '@/activities/types/Note';
 import { Task } from '@/activities/types/Task';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { BlockEditor } from '@/ui/input/editor/components/BlockEditor';
+import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import '@blocknote/core/fonts/inter.css';
 import '@blocknote/mantine/style.css';
 import '@blocknote/react/style.css';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 type ActivityRichTextEditorProps = {
   activityId: string;
@@ -46,6 +49,10 @@ export const ActivityRichTextEditor = ({
   const cache = useApolloClient().cache;
   const activity = activityInStore as Task | Note | null;
 
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
+  );
+
   const { objectMetadataItem: objectMetadataItemActivity } =
     useObjectMetadataItem({
       objectNameSingular: activityObjectNameSingular,
@@ -245,7 +252,9 @@ export const ActivityRichTextEditor = ({
       editor.setTextCursorPosition(newBlockId, 'end');
       editor.focus();
     },
-    RightDrawerHotkeyScope.RightDrawer,
+    isCommandMenuV2Enabled
+      ? AppHotkeyScope.CommandMenuOpen
+      : RightDrawerHotkeyScope.RightDrawer,
     [],
     {
       preventDefault: false,
diff --git a/packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts b/packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts
index 9abed7130374..26ca1032323b 100644
--- a/packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts
+++ b/packages/twenty-front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts
@@ -7,6 +7,9 @@ import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
 export const useOpenActivityRightDrawer = ({
   objectNameSingular,
@@ -25,6 +28,10 @@ export const useOpenActivityRightDrawer = ({
 
   const setHotkeyScope = useSetHotkeyScope();
 
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
+  );
+
   return (activityId: string) => {
     if (
       isRightDrawerOpen &&
@@ -34,7 +41,12 @@ export const useOpenActivityRightDrawer = ({
       return;
     }
 
-    setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
+    if (isCommandMenuV2Enabled) {
+      setHotkeyScope(AppHotkeyScope.CommandMenuOpen, { goto: false });
+    } else {
+      setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
+    }
+
     setViewableRecordId(activityId);
     setViewableRecordNameSingular(objectNameSingular);
     openRightDrawer(RightDrawerPages.ViewRecord);
diff --git a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts b/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts
index 12fa5ab0f942..48a98407d8c5 100644
--- a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts
+++ b/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts
@@ -17,6 +17,9 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
+import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 import { ActivityTargetableObject } from '../types/ActivityTargetableEntity';
 
 export const useOpenCreateActivityDrawer = ({
@@ -60,6 +63,10 @@ export const useOpenCreateActivityDrawer = ({
     isUpsertingActivityInDBState,
   );
 
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
+  );
+
   const openCreateActivityDrawer = async ({
     targetableObjects,
     customAssignee,
@@ -108,7 +115,12 @@ export const useOpenCreateActivityDrawer = ({
       setActivityTargetableEntityArray([]);
     }
 
-    setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
+    if (isCommandMenuV2Enabled) {
+      setHotkeyScope(AppHotkeyScope.CommandMenuOpen, { goto: false });
+    } else {
+      setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
+    }
+
     setViewableRecordId(activity.id);
 
     setIsUpsertingActivityInDB(false);

From a794cedd2c5402eb8fe043496f45b6680c41e6e5 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 16:53:38 +0100
Subject: [PATCH 09/22] fix right drawer test

---
 .../right-drawer/hooks/__tests__/useRightDrawer.test.tsx   | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx
index 4556ac627fde..47aff2e15078 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx
@@ -1,5 +1,6 @@
 import { renderHook } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
+import { BrowserRouter } from 'react-router-dom';
 import { RecoilRoot, useRecoilValue } from 'recoil';
 
 import { isRightDrawerOpenState } from '../../states/isRightDrawerOpenState';
@@ -24,7 +25,11 @@ describe('useRightDrawer', () => {
     };
 
     const { result } = renderHook(() => useCombinedHooks(), {
-      wrapper: RecoilRoot,
+      wrapper: ({ children }) => (
+        <BrowserRouter>
+          <RecoilRoot>{children}</RecoilRoot>
+        </BrowserRouter>
+      ),
     });
 
     expect(result.current.rightDrawerPage).toBeNull();

From ce51166e3bce51e1d29cb8d01eda4d92f46fdd96 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 17:04:28 +0100
Subject: [PATCH 10/22] fix using hooks directly in styled components

---
 .../components/RightDrawerRecord.tsx             | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
index da25e143054c..54acb138ffe9 100644
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
@@ -14,14 +14,18 @@ import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import styled from '@emotion/styled';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';
 
-const StyledRightDrawerRecord = styled.div`
-  height: ${({ theme }) =>
-    useIsFeatureEnabled(FeatureFlagKey.IsCommandMenuV2Enabled) || useIsMobile()
-      ? `calc(100% - ${theme.spacing(16)})`
-      : '100%'};
+const StyledRightDrawerRecord = styled.div<{ hasTopBar: boolean }>`
+  height: ${({ theme, hasTopBar }) =>
+    hasTopBar ? `calc(100% - ${theme.spacing(16)})` : '100%'};
 `;
 
 export const RightDrawerRecord = () => {
+  const isCommandMenuV2Enabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsCommandMenuV2Enabled,
+  );
+  const isMobile = useIsMobile();
+  const hasTopBar = isCommandMenuV2Enabled || isMobile;
+
   const viewableRecordNameSingular = useRecoilValue(
     viewableRecordNameSingularState,
   );
@@ -52,7 +56,7 @@ export const RightDrawerRecord = () => {
       <ActionMenuComponentInstanceContext.Provider
         value={{ instanceId: `record-show-${objectRecordId}` }}
       >
-        <StyledRightDrawerRecord>
+        <StyledRightDrawerRecord shouldReduceHeight={hasTopBar}>
           <RecordFieldValueSelectorContextProvider>
             {!isNewViewableRecordLoading && (
               <RecordValueSetterEffect recordId={objectRecordId} />

From 8934c0e39f665981e46f468451e9d51d792ebdb4 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 17:06:23 +0100
Subject: [PATCH 11/22] fix useOpenActivityRightDrawer.test

---
 .../hooks/__tests__/useOpenActivityRightDrawer.test.tsx  | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenActivityRightDrawer.test.tsx b/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenActivityRightDrawer.test.tsx
index 81a6b61dad54..dc274589ba7c 100644
--- a/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenActivityRightDrawer.test.tsx
+++ b/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenActivityRightDrawer.test.tsx
@@ -6,11 +6,14 @@ import { RecoilRoot, useRecoilValue } from 'recoil';
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
+import { BrowserRouter } from 'react-router-dom';
 
 const Wrapper = ({ children }: { children: ReactNode }) => (
-  <RecoilRoot>
-    <MockedProvider addTypename={false}>{children}</MockedProvider>
-  </RecoilRoot>
+  <BrowserRouter>
+    <RecoilRoot>
+      <MockedProvider addTypename={false}>{children}</MockedProvider>
+    </RecoilRoot>
+  </BrowserRouter>
 );
 
 describe('useOpenActivityRightDrawer', () => {

From 3cb036eceb051779f1bb810631a050c8cf8cfd4b Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 17:14:20 +0100
Subject: [PATCH 12/22] fix tests

---
 .../__tests__/useOpenCalendarEventRightDrawer.test.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/__tests__/useOpenCalendarEventRightDrawer.test.tsx b/packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/__tests__/useOpenCalendarEventRightDrawer.test.tsx
index 9801608508e1..d5343db81f7b 100644
--- a/packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/__tests__/useOpenCalendarEventRightDrawer.test.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/__tests__/useOpenCalendarEventRightDrawer.test.tsx
@@ -4,6 +4,8 @@ import { RecoilRoot, useRecoilValue } from 'recoil';
 import { useOpenCalendarEventRightDrawer } from '@/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState';
+import { ReactNode } from 'react';
+import { BrowserRouter } from 'react-router-dom';
 
 describe('useOpenCalendarEventRightDrawer', () => {
   it('opens the right drawer with the calendar event', () => {
@@ -17,7 +19,13 @@ describe('useOpenCalendarEventRightDrawer', () => {
           viewableRecordId,
         };
       },
-      { wrapper: RecoilRoot },
+      {
+        wrapper: ({ children }: { children: ReactNode }) => (
+          <BrowserRouter>
+            <RecoilRoot>{children}</RecoilRoot>
+          </BrowserRouter>
+        ),
+      },
     );
 
     expect(result.current.isRightDrawerOpen).toBe(false);

From 5f252f0ab167b324f1967cb1ffac3274f42c1f1c Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 17:26:40 +0100
Subject: [PATCH 13/22] fix tests

---
 ....test.ts => useOpenEmailThreadRightDrawer.test.tsx} | 10 +++++++++-
 .../__tests__/useOpenCreateActivityDrawer.test.tsx     | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)
 rename packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/__tests__/{useOpenEmailThreadRightDrawer.test.ts => useOpenEmailThreadRightDrawer.test.tsx} (83%)

diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/__tests__/useOpenEmailThreadRightDrawer.test.ts b/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/__tests__/useOpenEmailThreadRightDrawer.test.tsx
similarity index 83%
rename from packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/__tests__/useOpenEmailThreadRightDrawer.test.ts
rename to packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/__tests__/useOpenEmailThreadRightDrawer.test.tsx
index 8660d7617de1..74c8e5bec7f8 100644
--- a/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/__tests__/useOpenEmailThreadRightDrawer.test.ts
+++ b/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/__tests__/useOpenEmailThreadRightDrawer.test.tsx
@@ -1,5 +1,7 @@
 import { renderHook } from '@testing-library/react';
+import { ReactNode } from 'react';
 import { act } from 'react-dom/test-utils';
+import { BrowserRouter } from 'react-router-dom';
 
 import { useOpenEmailThreadRightDrawer } from '@/activities/emails/right-drawer/hooks/useOpenEmailThreadRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
@@ -18,8 +20,14 @@ jest.mock('@/ui/utilities/hotkey/hooks/useSetHotkeyScope', () => ({
   useSetHotkeyScope: () => mockSetHotkeyScope,
 }));
 
+const Wrapper = ({ children }: { children: ReactNode }) => (
+  <BrowserRouter>{children}</BrowserRouter>
+);
+
 test('useOpenEmailThreadRightDrawer opens the email thread right drawer', () => {
-  const { result } = renderHook(() => useOpenEmailThreadRightDrawer());
+  const { result } = renderHook(() => useOpenEmailThreadRightDrawer(), {
+    wrapper: Wrapper,
+  });
 
   act(() => {
     result.current();
diff --git a/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawer.test.tsx b/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawer.test.tsx
index 855c0b55bd29..660ad15a5368 100644
--- a/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawer.test.tsx
+++ b/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawer.test.tsx
@@ -8,6 +8,8 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import gql from 'graphql-tag';
 import pick from 'lodash.pick';
+import { ReactNode } from 'react';
+import { BrowserRouter } from 'react-router-dom';
 import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { mockedTasks } from '~/testing/mock-data/tasks';
@@ -61,10 +63,16 @@ const mocks: MockedResponse[] = [
   },
 ];
 
-const Wrapper = getJestMetadataAndApolloMocksWrapper({
+const JestWrapper = getJestMetadataAndApolloMocksWrapper({
   apolloMocks: mocks,
 });
 
+const Wrapper = ({ children }: { children: ReactNode }) => (
+  <BrowserRouter>
+    <JestWrapper>{children}</JestWrapper>
+  </BrowserRouter>
+);
+
 const mockObjectMetadataItems = generatedMockObjectMetadataItems;
 
 describe('useOpenCreateActivityDrawer', () => {

From 396f2b778adb6cff72e8dd76ce5b787c548aaf79 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 17:43:29 +0100
Subject: [PATCH 14/22] move onItemClick outside of useCommandMenu

---
 .../command-menu/components/CommandMenu.tsx   |  4 +-
 .../components/CommandMenuItem.tsx            |  5 +-
 .../hooks/__tests__/useCommandMenu.test.tsx   | 16 ------
 .../useCommandMenuOnItemClick.test.tsx        | 54 +++++++++++++++++++
 .../command-menu/hooks/useCommandMenu.ts      | 32 -----------
 .../hooks/useCommandMenuOnItemClick.ts        | 41 ++++++++++++++
 .../components/RightDrawerRecord.tsx          |  2 +-
 .../getJestMetadataAndApolloMocksWrapper.tsx  | 21 ++++----
 8 files changed, 112 insertions(+), 63 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuOnItemClick.test.tsx
 create mode 100644 packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuOnItemClick.ts

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
index 8d4ba17d467a..c9c2f9609fc8 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
@@ -3,7 +3,7 @@ import { CommandMenuDefaultSelectionEffect } from '@/command-menu/components/Com
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
 import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
 import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { useCommandMenuOnItemClick } from '@/command-menu/hooks/useCommandMenuOnItemClick';
 import { useMatchingCommandMenuCommands } from '@/command-menu/hooks/useMatchingCommandMenuCommands';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { Command } from '@/command-menu/types/Command';
@@ -56,7 +56,7 @@ const StyledEmpty = styled.div`
 `;
 
 export const CommandMenu = () => {
-  const { onItemClick } = useCommandMenu();
+  const { onItemClick } = useCommandMenuOnItemClick();
 
   const commandMenuSearch = useRecoilValue(commandMenuSearchState);
 
diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
index c772da280070..3907ccb47926 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
@@ -2,10 +2,9 @@ import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilValue } from 'recoil';
 import { IconArrowUpRight, IconComponent, MenuItemCommand } from 'twenty-ui';
 
+import { useCommandMenuOnItemClick } from '@/command-menu/hooks/useCommandMenuOnItemClick';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 
-import { useCommandMenu } from '../hooks/useCommandMenu';
-
 export type CommandMenuItemProps = {
   label: string;
   to?: string;
@@ -27,7 +26,7 @@ export const CommandMenuItem = ({
   secondHotKey,
   shouldCloseCommandMenuOnClick,
 }: CommandMenuItemProps) => {
-  const { onItemClick } = useCommandMenu();
+  const { onItemClick } = useCommandMenuOnItemClick();
 
   if (isNonEmptyString(to) && !Icon) {
     Icon = IconArrowUpRight;
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx
index 2ae691d15c49..2f33bc154d1a 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx
+++ b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx
@@ -69,20 +69,4 @@ describe('useCommandMenu', () => {
 
     expect(result.current.isCommandMenuOpened).toBe(false);
   });
-
-  it('onItemClick', () => {
-    const { result } = renderHooks();
-    const onClickMock = jest.fn();
-
-    act(() => {
-      result.current.commandMenu.onItemClick({
-        shouldCloseCommandMenuOnClick: true,
-        onClick: onClickMock,
-        to: '/test',
-      });
-    });
-
-    expect(result.current.isCommandMenuOpened).toBe(true);
-    expect(onClickMock).toHaveBeenCalledTimes(1);
-  });
 });
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuOnItemClick.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuOnItemClick.test.tsx
new file mode 100644
index 000000000000..69d806d3d5ff
--- /dev/null
+++ b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuOnItemClick.test.tsx
@@ -0,0 +1,54 @@
+import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
+import { renderHook } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { MemoryRouter } from 'react-router-dom';
+import { RecoilRoot, useRecoilValue } from 'recoil';
+import { useCommandMenuOnItemClick } from '../useCommandMenuOnItemClick';
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <RecoilRoot>
+    <MemoryRouter
+      initialEntries={['/one', '/two', { pathname: '/three' }]}
+      initialIndex={1}
+    >
+      {children}
+    </MemoryRouter>
+  </RecoilRoot>
+);
+
+const renderHooks = () => {
+  const { result } = renderHook(
+    () => {
+      const { onItemClick } = useCommandMenuOnItemClick();
+
+      const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
+
+      return {
+        onItemClick,
+        isCommandMenuOpened,
+      };
+    },
+    {
+      wrapper: Wrapper,
+    },
+  );
+  return { result };
+};
+
+describe('useCommandMenuOnItemClick', () => {
+  it('onItemClick', () => {
+    const { result } = renderHooks();
+    const onClickMock = jest.fn();
+
+    act(() => {
+      result.current.onItemClick({
+        shouldCloseCommandMenuOnClick: true,
+        onClick: onClickMock,
+        to: '/test',
+      });
+    });
+
+    expect(result.current.isCommandMenuOpened).toBe(true);
+    expect(onClickMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
index 58e595a7de58..2e6fcdb537c1 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
+++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
@@ -1,5 +1,3 @@
-import { isNonEmptyString } from '@sniptt/guards';
-import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
 
@@ -243,35 +241,6 @@ export const useCommandMenu = () => {
     [closeCommandMenu, openCommandMenu],
   );
 
-  const onItemClick = useCallback(
-    ({
-      shouldCloseCommandMenuOnClick,
-      onClick,
-      to,
-    }: {
-      shouldCloseCommandMenuOnClick?: boolean;
-      onClick?: () => void;
-      to?: string;
-    }) => {
-      if (
-        isDefined(shouldCloseCommandMenuOnClick) &&
-        shouldCloseCommandMenuOnClick
-      ) {
-        toggleCommandMenu();
-      }
-
-      if (isDefined(onClick)) {
-        onClick();
-        return;
-      }
-      if (isNonEmptyString(to)) {
-        navigate(to);
-        return;
-      }
-    },
-    [navigate, toggleCommandMenu],
-  );
-
   const openRecordInCommandMenu = useRecoilCallback(
     ({ set }) => {
       return (recordId: string) => {
@@ -288,6 +257,5 @@ export const useCommandMenu = () => {
     closeCommandMenu,
     openRecordInCommandMenu,
     toggleCommandMenu,
-    onItemClick,
   };
 };
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuOnItemClick.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuOnItemClick.ts
new file mode 100644
index 000000000000..c656e82eb113
--- /dev/null
+++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuOnItemClick.ts
@@ -0,0 +1,41 @@
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { isNonEmptyString } from '@sniptt/guards';
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { isDefined } from 'twenty-ui';
+
+export const useCommandMenuOnItemClick = () => {
+  const { toggleCommandMenu } = useCommandMenu();
+  const navigate = useNavigate();
+
+  const onItemClick = useCallback(
+    ({
+      shouldCloseCommandMenuOnClick,
+      onClick,
+      to,
+    }: {
+      shouldCloseCommandMenuOnClick?: boolean;
+      onClick?: () => void;
+      to?: string;
+    }) => {
+      if (
+        isDefined(shouldCloseCommandMenuOnClick) &&
+        shouldCloseCommandMenuOnClick
+      ) {
+        toggleCommandMenu();
+      }
+
+      if (isDefined(onClick)) {
+        onClick();
+        return;
+      }
+      if (isNonEmptyString(to)) {
+        navigate(to);
+        return;
+      }
+    },
+    [navigate, toggleCommandMenu],
+  );
+
+  return { onItemClick };
+};
diff --git a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
index 54acb138ffe9..4ac308ee1400 100644
--- a/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
@@ -56,7 +56,7 @@ export const RightDrawerRecord = () => {
       <ActionMenuComponentInstanceContext.Provider
         value={{ instanceId: `record-show-${objectRecordId}` }}
       >
-        <StyledRightDrawerRecord shouldReduceHeight={hasTopBar}>
+        <StyledRightDrawerRecord hasTopBar={hasTopBar}>
           <RecordFieldValueSelectorContextProvider>
             {!isNewViewableRecordLoading && (
               <RecordValueSetterEffect recordId={objectRecordId} />
diff --git a/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksWrapper.tsx b/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksWrapper.tsx
index ea0e6528f0bc..6958ca58688f 100644
--- a/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksWrapper.tsx
+++ b/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksWrapper.tsx
@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import { MutableSnapshot, RecoilRoot } from 'recoil';
 
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
+import { BrowserRouter } from 'react-router-dom';
 import { JestObjectMetadataItemSetter } from '~/testing/jest/JestObjectMetadataItemSetter';
 
 export const getJestMetadataAndApolloMocksWrapper = ({
@@ -15,14 +16,16 @@ export const getJestMetadataAndApolloMocksWrapper = ({
   onInitializeRecoilSnapshot?: (snapshot: MutableSnapshot) => void;
 }) => {
   return ({ children }: { children: ReactNode }) => (
-    <RecoilRoot initializeState={onInitializeRecoilSnapshot}>
-      <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-        <MockedProvider mocks={apolloMocks} addTypename={false}>
-          <JestObjectMetadataItemSetter>
-            {children}
-          </JestObjectMetadataItemSetter>
-        </MockedProvider>
-      </SnackBarProviderScope>
-    </RecoilRoot>
+    <BrowserRouter>
+      <RecoilRoot initializeState={onInitializeRecoilSnapshot}>
+        <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+          <MockedProvider mocks={apolloMocks} addTypename={false}>
+            <JestObjectMetadataItemSetter>
+              {children}
+            </JestObjectMetadataItemSetter>
+          </MockedProvider>
+        </SnackBarProviderScope>
+      </RecoilRoot>
+    </BrowserRouter>
   );
 };

From c553e793ee58e24953fafcb8f1c948961f6d2616 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 17:44:20 +0100
Subject: [PATCH 15/22] Revert "fix tests"

This reverts commit 5f252f0ab167b324f1967cb1ffac3274f42c1f1c.
---
 ....test.tsx => useOpenEmailThreadRightDrawer.test.ts} | 10 +---------
 .../__tests__/useOpenCreateActivityDrawer.test.tsx     | 10 +---------
 2 files changed, 2 insertions(+), 18 deletions(-)
 rename packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/__tests__/{useOpenEmailThreadRightDrawer.test.tsx => useOpenEmailThreadRightDrawer.test.ts} (83%)

diff --git a/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/__tests__/useOpenEmailThreadRightDrawer.test.tsx b/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/__tests__/useOpenEmailThreadRightDrawer.test.ts
similarity index 83%
rename from packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/__tests__/useOpenEmailThreadRightDrawer.test.tsx
rename to packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/__tests__/useOpenEmailThreadRightDrawer.test.ts
index 74c8e5bec7f8..8660d7617de1 100644
--- a/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/__tests__/useOpenEmailThreadRightDrawer.test.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/right-drawer/hooks/__tests__/useOpenEmailThreadRightDrawer.test.ts
@@ -1,7 +1,5 @@
 import { renderHook } from '@testing-library/react';
-import { ReactNode } from 'react';
 import { act } from 'react-dom/test-utils';
-import { BrowserRouter } from 'react-router-dom';
 
 import { useOpenEmailThreadRightDrawer } from '@/activities/emails/right-drawer/hooks/useOpenEmailThreadRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
@@ -20,14 +18,8 @@ jest.mock('@/ui/utilities/hotkey/hooks/useSetHotkeyScope', () => ({
   useSetHotkeyScope: () => mockSetHotkeyScope,
 }));
 
-const Wrapper = ({ children }: { children: ReactNode }) => (
-  <BrowserRouter>{children}</BrowserRouter>
-);
-
 test('useOpenEmailThreadRightDrawer opens the email thread right drawer', () => {
-  const { result } = renderHook(() => useOpenEmailThreadRightDrawer(), {
-    wrapper: Wrapper,
-  });
+  const { result } = renderHook(() => useOpenEmailThreadRightDrawer());
 
   act(() => {
     result.current();
diff --git a/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawer.test.tsx b/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawer.test.tsx
index 660ad15a5368..855c0b55bd29 100644
--- a/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawer.test.tsx
+++ b/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenCreateActivityDrawer.test.tsx
@@ -8,8 +8,6 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import gql from 'graphql-tag';
 import pick from 'lodash.pick';
-import { ReactNode } from 'react';
-import { BrowserRouter } from 'react-router-dom';
 import { getJestMetadataAndApolloMocksWrapper } from '~/testing/jest/getJestMetadataAndApolloMocksWrapper';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { mockedTasks } from '~/testing/mock-data/tasks';
@@ -63,16 +61,10 @@ const mocks: MockedResponse[] = [
   },
 ];
 
-const JestWrapper = getJestMetadataAndApolloMocksWrapper({
+const Wrapper = getJestMetadataAndApolloMocksWrapper({
   apolloMocks: mocks,
 });
 
-const Wrapper = ({ children }: { children: ReactNode }) => (
-  <BrowserRouter>
-    <JestWrapper>{children}</JestWrapper>
-  </BrowserRouter>
-);
-
 const mockObjectMetadataItems = generatedMockObjectMetadataItems;
 
 describe('useOpenCreateActivityDrawer', () => {

From 9149f0f16987a085a452617ef2ea750b023c6af4 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 17:44:38 +0100
Subject: [PATCH 16/22] Revert "fix tests"

This reverts commit 3cb036eceb051779f1bb810631a050c8cf8cfd4b.
---
 .../__tests__/useOpenCalendarEventRightDrawer.test.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/__tests__/useOpenCalendarEventRightDrawer.test.tsx b/packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/__tests__/useOpenCalendarEventRightDrawer.test.tsx
index d5343db81f7b..9801608508e1 100644
--- a/packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/__tests__/useOpenCalendarEventRightDrawer.test.tsx
+++ b/packages/twenty-front/src/modules/activities/calendar/right-drawer/hooks/__tests__/useOpenCalendarEventRightDrawer.test.tsx
@@ -4,8 +4,6 @@ import { RecoilRoot, useRecoilValue } from 'recoil';
 import { useOpenCalendarEventRightDrawer } from '@/activities/calendar/right-drawer/hooks/useOpenCalendarEventRightDrawer';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState';
-import { ReactNode } from 'react';
-import { BrowserRouter } from 'react-router-dom';
 
 describe('useOpenCalendarEventRightDrawer', () => {
   it('opens the right drawer with the calendar event', () => {
@@ -19,13 +17,7 @@ describe('useOpenCalendarEventRightDrawer', () => {
           viewableRecordId,
         };
       },
-      {
-        wrapper: ({ children }: { children: ReactNode }) => (
-          <BrowserRouter>
-            <RecoilRoot>{children}</RecoilRoot>
-          </BrowserRouter>
-        ),
-      },
+      { wrapper: RecoilRoot },
     );
 
     expect(result.current.isRightDrawerOpen).toBe(false);

From cd36f972abac4238b950a0eb386002815f306a60 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 17:44:55 +0100
Subject: [PATCH 17/22] Revert "fix useOpenActivityRightDrawer.test"

This reverts commit 8934c0e39f665981e46f468451e9d51d792ebdb4.
---
 .../hooks/__tests__/useOpenActivityRightDrawer.test.tsx  | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenActivityRightDrawer.test.tsx b/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenActivityRightDrawer.test.tsx
index dc274589ba7c..81a6b61dad54 100644
--- a/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenActivityRightDrawer.test.tsx
+++ b/packages/twenty-front/src/modules/activities/hooks/__tests__/useOpenActivityRightDrawer.test.tsx
@@ -6,14 +6,11 @@ import { RecoilRoot, useRecoilValue } from 'recoil';
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
-import { BrowserRouter } from 'react-router-dom';
 
 const Wrapper = ({ children }: { children: ReactNode }) => (
-  <BrowserRouter>
-    <RecoilRoot>
-      <MockedProvider addTypename={false}>{children}</MockedProvider>
-    </RecoilRoot>
-  </BrowserRouter>
+  <RecoilRoot>
+    <MockedProvider addTypename={false}>{children}</MockedProvider>
+  </RecoilRoot>
 );
 
 describe('useOpenActivityRightDrawer', () => {

From 2f012bab14904835f0e50b2bcdc3ab0297428adb Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 17:45:08 +0100
Subject: [PATCH 18/22] Revert "fix right drawer test"

This reverts commit a794cedd2c5402eb8fe043496f45b6680c41e6e5.
---
 .../right-drawer/hooks/__tests__/useRightDrawer.test.tsx   | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx
index 47aff2e15078..4556ac627fde 100644
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/hooks/__tests__/useRightDrawer.test.tsx
@@ -1,6 +1,5 @@
 import { renderHook } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
-import { BrowserRouter } from 'react-router-dom';
 import { RecoilRoot, useRecoilValue } from 'recoil';
 
 import { isRightDrawerOpenState } from '../../states/isRightDrawerOpenState';
@@ -25,11 +24,7 @@ describe('useRightDrawer', () => {
     };
 
     const { result } = renderHook(() => useCombinedHooks(), {
-      wrapper: ({ children }) => (
-        <BrowserRouter>
-          <RecoilRoot>{children}</RecoilRoot>
-        </BrowserRouter>
-      ),
+      wrapper: RecoilRoot,
     });
 
     expect(result.current.rightDrawerPage).toBeNull();

From 14d03989368f419e379d4262382b05adc02fde2a Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 17:47:31 +0100
Subject: [PATCH 19/22] fix import in tests

---
 .../command-menu/hooks/__tests__/useCommandMenu.test.tsx        | 2 +-
 .../hooks/__tests__/useCommandMenuOnItemClick.test.tsx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx
index 2f33bc154d1a..a5c88a6cb508 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx
+++ b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenu.test.tsx
@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { RecoilRoot, useRecoilValue } from 'recoil';
 
diff --git a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuOnItemClick.test.tsx b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuOnItemClick.test.tsx
index 69d806d3d5ff..a5a82dca6698 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuOnItemClick.test.tsx
+++ b/packages/twenty-front/src/modules/command-menu/hooks/__tests__/useCommandMenuOnItemClick.test.tsx
@@ -1,6 +1,6 @@
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { renderHook } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { RecoilRoot, useRecoilValue } from 'recoil';
 import { useCommandMenuOnItemClick } from '../useCommandMenuOnItemClick';

From 24229bf32fc590c37140348a32b677687d8839c1 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 17:51:08 +0100
Subject: [PATCH 20/22] fix

---
 .../getJestMetadataAndApolloMocksWrapper.tsx  | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksWrapper.tsx b/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksWrapper.tsx
index 6958ca58688f..ea0e6528f0bc 100644
--- a/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksWrapper.tsx
+++ b/packages/twenty-front/src/testing/jest/getJestMetadataAndApolloMocksWrapper.tsx
@@ -3,7 +3,6 @@ import { ReactNode } from 'react';
 import { MutableSnapshot, RecoilRoot } from 'recoil';
 
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';
-import { BrowserRouter } from 'react-router-dom';
 import { JestObjectMetadataItemSetter } from '~/testing/jest/JestObjectMetadataItemSetter';
 
 export const getJestMetadataAndApolloMocksWrapper = ({
@@ -16,16 +15,14 @@ export const getJestMetadataAndApolloMocksWrapper = ({
   onInitializeRecoilSnapshot?: (snapshot: MutableSnapshot) => void;
 }) => {
   return ({ children }: { children: ReactNode }) => (
-    <BrowserRouter>
-      <RecoilRoot initializeState={onInitializeRecoilSnapshot}>
-        <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
-          <MockedProvider mocks={apolloMocks} addTypename={false}>
-            <JestObjectMetadataItemSetter>
-              {children}
-            </JestObjectMetadataItemSetter>
-          </MockedProvider>
-        </SnackBarProviderScope>
-      </RecoilRoot>
-    </BrowserRouter>
+    <RecoilRoot initializeState={onInitializeRecoilSnapshot}>
+      <SnackBarProviderScope snackBarManagerScopeId="snack-bar-manager">
+        <MockedProvider mocks={apolloMocks} addTypename={false}>
+          <JestObjectMetadataItemSetter>
+            {children}
+          </JestObjectMetadataItemSetter>
+        </MockedProvider>
+      </SnackBarProviderScope>
+    </RecoilRoot>
   );
 };

From d475f57c2e3b2816166a031a68342ff9ed36ef0a Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 18:02:31 +0100
Subject: [PATCH 21/22] remove unused hook

---
 .../src/modules/command-menu/hooks/useCommandMenu.ts            | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
index 2e6fcdb537c1..fc23fbf964d0 100644
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
+++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
@@ -1,4 +1,3 @@
-import { useNavigate } from 'react-router-dom';
 import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
@@ -21,7 +20,6 @@ import { viewableRecordIdState } from '@/object-record/record-right-drawer/state
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
 
 export const useCommandMenu = () => {
-  const navigate = useNavigate();
   const setIsCommandMenuOpened = useSetRecoilState(isCommandMenuOpenedState);
   const { resetSelectedItem } = useSelectableList('command-menu-list');
   const {

From 214f08f74b0dd88041e5225f992d8727d5533ad3 Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Wed, 8 Jan 2025 18:31:00 +0100
Subject: [PATCH 22/22] fix command menu stories

---
 .../components/__stories__/CommandMenu.stories.tsx        | 3 ++-
 packages/twenty-ui/src/layout/index.ts                    | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx
index fb0c8bf1385d..7a277d6f5b2d 100644
--- a/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx
@@ -16,6 +16,7 @@ import {
 import { sleep } from '~/utils/sleep';
 
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { CommandMenuRouter } from '@/command-menu/components/CommandMenuRouter';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { JestContextStoreSetter } from '~/testing/jest/JestContextStoreSetter';
@@ -43,7 +44,7 @@ const ContextStoreDecorator: Decorator = (Story) => {
 
 const meta: Meta<typeof CommandMenu> = {
   title: 'Modules/CommandMenu/CommandMenu',
-  component: CommandMenu,
+  component: CommandMenuRouter,
   decorators: [
     (Story) => {
       const setCurrentWorkspace = useSetRecoilState(currentWorkspaceState);
diff --git a/packages/twenty-ui/src/layout/index.ts b/packages/twenty-ui/src/layout/index.ts
index 1f88712f8c38..8f33feb754a4 100644
--- a/packages/twenty-ui/src/layout/index.ts
+++ b/packages/twenty-ui/src/layout/index.ts
@@ -1,4 +1,12 @@
 export * from './animated-expandable-container/components/AnimatedExpandableContainer';
+export * from './animated-expandable-container/types/AnimationDimension';
+export * from './animated-expandable-container/types/AnimationDurationObject';
+export * from './animated-expandable-container/types/AnimationDurations';
+export * from './animated-expandable-container/types/AnimationMode';
+export * from './animated-expandable-container/types/AnimationSize';
+export * from './animated-expandable-container/utils/getCommonStyles';
+export * from './animated-expandable-container/utils/getExpandableAnimationConfig';
+export * from './animated-expandable-container/utils/getTransitionValues';
 export * from './animated-placeholder/components/AnimatedPlaceholder';
 export * from './animated-placeholder/components/EmptyPlaceholderStyled';
 export * from './animated-placeholder/components/ErrorPlaceholderStyled';