Refactor actions (#8761)

Closes #8737 - Refactored actions by creating hooks to add the possibility to register actions programatically. - Small fixes from #8610 review - Fixed shortcuts display inside the command menu - Removed `actionMenuEntriesComponentState` and introduced `actionMenuEntriesComponentSelector`
2024-11-27 15:08:27 +01:00
parent 0d6a6ec678
commit a9cb1e9b0d
40 changed files with 682 additions and 479 deletions
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
@ -9,7 +9,7 @@ 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 { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
+import { commandMenuCommandsComponentSelector } from '@/command-menu/states/commandMenuCommandsSelector';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import {
@ -35,6 +35,7 @@ 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 { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import styled from '@emotion/styled';
@ -67,6 +68,8 @@ type CommandGroupConfig = {
    to?: string;
    onClick?: () => void;
    key?: string;
+    firstHotKey?: string;
+    secondHotKey?: string;
  };
 };

@ -128,7 +131,6 @@ export const CommandMenu = () => {
    commandMenuSearchState,
  );
  const [deferredCommandMenuSearch] = useDebounce(commandMenuSearch, 300); // 200ms - 500ms
-  const commandMenuCommands = useRecoilValue(commandMenuCommandsState);
  const { closeKeyboardShortcutMenu } = useKeyboardShortcutMenu();

  const setContextStoreTargetedRecordsRule = useSetRecoilComponentStateV2(
@ -141,6 +143,10 @@ export const CommandMenu = () => {

  const isMobile = useIsMobile();

+  const commandMenuCommands = useRecoilComponentValueV2(
+    commandMenuCommandsComponentSelector,
+  );
+
  useScopedHotkeys(
    'ctrl+k,meta+k',
    () => {
@ -478,6 +484,8 @@ export const CommandMenu = () => {
        label: command.label,
        to: command.to,
        onClick: command.onCommandClick,
+        firstHotKey: command.firstHotKey,
+        secondHotKey: command.secondHotKey,
      }),
    },
    {
@ -489,6 +497,8 @@ export const CommandMenu = () => {
        label: command.label,
        to: command.to,
        onClick: command.onCommandClick,
+        firstHotKey: command.firstHotKey,
+        secondHotKey: command.secondHotKey,
      }),
    },
    {
@ -506,6 +516,8 @@ export const CommandMenu = () => {
            placeholder={`${person.name.firstName} ${person.name.lastName}`}
          />
        ),
+        firstHotKey: person.firstHotKey,
+        secondHotKey: person.secondHotKey,
      }),
    },
    {
@ -524,6 +536,8 @@ export const CommandMenu = () => {
            )}
          />
        ),
+        firstHotKey: company.firstHotKey,
+        secondHotKey: company.secondHotKey,
      }),
    },
    {
@ -628,6 +642,8 @@ export const CommandMenu = () => {
                              : ''
                          }`}
                          onClick={copilotCommand.onCommandClick}
+                          firstHotKey={copilotCommand.firstHotKey}
+                          secondHotKey={copilotCommand.secondHotKey}
                        />
                      </SelectableItem>
                    </CommandGroup>
@ -646,6 +662,12 @@ export const CommandMenu = () => {
                            onClick={
                              standardActionrecordSelectionCommand.onCommandClick
                            }
+                            firstHotKey={
+                              standardActionrecordSelectionCommand.firstHotKey
+                            }
+                            secondHotKey={
+                              standardActionrecordSelectionCommand.secondHotKey
+                            }
                          />
                        </SelectableItem>
                      ),
@ -663,6 +685,12 @@ export const CommandMenu = () => {
                            onClick={
                              workflowRunRecordSelectionCommand.onCommandClick
                            }
+                            firstHotKey={
+                              workflowRunRecordSelectionCommand.firstHotKey
+                            }
+                            secondHotKey={
+                              workflowRunRecordSelectionCommand.secondHotKey
+                            }
                          />
                        </SelectableItem>
                      ),
@ -683,6 +711,12 @@ export const CommandMenu = () => {
                              onClick={
                                standardActionGlobalCommand.onCommandClick
                              }
+                              firstHotKey={
+                                standardActionGlobalCommand.firstHotKey
+                              }
+                              secondHotKey={
+                                standardActionGlobalCommand.secondHotKey
+                              }
                            />
                          </SelectableItem>
                        ),
@ -702,6 +736,10 @@ export const CommandMenu = () => {
                              label={workflowRunGlobalCommand.label}
                              Icon={workflowRunGlobalCommand.Icon}
                              onClick={workflowRunGlobalCommand.onCommandClick}
+                              firstHotKey={workflowRunGlobalCommand.firstHotKey}
+                              secondHotKey={
+                                workflowRunGlobalCommand.secondHotKey
+                              }
                            />
                          </SelectableItem>
                        ),
@ -713,8 +751,16 @@ export const CommandMenu = () => {
                    items?.length ? (
                      <CommandGroup heading={heading} key={heading}>
                        {items.map((item) => {
-                          const { id, Icon, label, to, onClick, key } =
-                            renderItem(item);
+                          const {
+                            id,
+                            Icon,
+                            label,
+                            to,
+                            onClick,
+                            key,
+                            firstHotKey,
+                            secondHotKey,
+                          } = renderItem(item);
                          return (
                            <SelectableItem itemId={id} key={id}>
                              <CommandMenuItem
@ -724,6 +770,8 @@ export const CommandMenu = () => {
                                label={label}
                                to={to}
                                onClick={onClick}
+                                firstHotKey={firstHotKey}
+                                secondHotKey={secondHotKey}
                              />
                            </SelectableItem>
                          );
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuCommandsEffect.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuCommandsEffect.tsx
@ -1,20 +0,0 @@
-import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
-import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
-import { computeCommandMenuCommands } from '@/command-menu/utils/computeCommandMenuCommands';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
-
-export const CommandMenuCommandsEffect = () => {
-  const actionMenuEntries = useRecoilComponentValueV2(
-    actionMenuEntriesComponentSelector,
-  );
-
-  const setCommands = useSetRecoilState(commandMenuCommandsState);
-
-  useEffect(() => {
-    setCommands(computeCommandMenuCommands(actionMenuEntries));
-  }, [actionMenuEntries, setCommands]);
-
-  return null;
-};
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChip.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChip.tsx
@ -1,15 +1,8 @@
-import { useContextStoreSelectedRecords } from '@/context-store/hooks/useContextStoreSelectedRecords';
-import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
-import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
+import { CommandMenuContextRecordChipAvatars } from '@/command-menu/components/CommandMenuContextRecordChipAvatars';
+import { useFindManyRecordsSelectedInContextStore } from '@/context-store/hooks/useFindManyRecordsSelectedInContextStore';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
-import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
-import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Avatar } from 'twenty-ui';
 import { capitalize } from '~/utils/string/capitalize';

 const StyledChip = styled.div`
@ -28,70 +21,23 @@ const StyledChip = styled.div`
  color: ${({ theme }) => theme.font.color.primary};
 `;

-const StyledAvatarWrapper = styled.div`
-  background-color: ${({ theme }) => theme.background.primary};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  padding: ${({ theme }) => theme.spacing(0.5)};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  &:not(:first-of-type) {
-    margin-left: -${({ theme }) => theme.spacing(1)};
-  }
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
 const StyledAvatarContainer = styled.div`
  display: flex;
 `;

-const CommandMenuContextRecordChipAvatars = ({
-  objectMetadataItem,
-  record,
+export const CommandMenuContextRecordChip = ({
+  objectMetadataItemId,
 }: {
-  objectMetadataItem: ObjectMetadataItem;
-  record: ObjectRecord;
+  objectMetadataItemId: string;
 }) => {
-  const { recordChipData } = useRecordChipData({
-    objectNameSingular: objectMetadataItem.nameSingular,
-    record,
-  });
-
-  const { Icon, IconColor } = useGetStandardObjectIcon(
-    objectMetadataItem.nameSingular,
-  );
-
-  const theme = useTheme();
-
-  return (
-    <StyledAvatarWrapper>
-      {Icon ? (
-        <Icon color={IconColor} size={theme.icon.size.sm} />
-      ) : (
-        <Avatar
-          avatarUrl={recordChipData.avatarUrl}
-          placeholderColorSeed={recordChipData.recordId}
-          placeholder={recordChipData.name}
-          type={recordChipData.avatarType}
-          size="sm"
-        />
-      )}
-    </StyledAvatarWrapper>
-  );
-};
-
-export const CommandMenuContextRecordChip = () => {
-  const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
-    contextStoreCurrentObjectMetadataIdComponentState,
-  );
-
  const { objectMetadataItem } = useObjectMetadataItemById({
-    objectId: contextStoreCurrentObjectMetadataId ?? '',
+    objectId: objectMetadataItemId,
  });

-  const { records, loading, totalCount } = useContextStoreSelectedRecords({
-    limit: 3,
-  });
+  const { records, loading, totalCount } =
+    useFindManyRecordsSelectedInContextStore({
+      limit: 3,
+    });

  if (loading || !totalCount) {
    return null;
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContextRecordChipAvatars.tsx
@ -0,0 +1,55 @@
+import { useGetStandardObjectIcon } from '@/object-metadata/hooks/useGetStandardObjectIcon';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useRecordChipData } from '@/object-record/hooks/useRecordChipData';
+import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Avatar } from 'twenty-ui';
+
+const StyledAvatarWrapper = styled.div`
+  background-color: ${({ theme }) => theme.background.primary};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  padding: ${({ theme }) => theme.spacing(0.5)};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  &:not(:first-of-type) {
+    margin-left: -${({ theme }) => theme.spacing(1)};
+  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const CommandMenuContextRecordChipAvatars = ({
+  objectMetadataItem,
+  record,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+  record: ObjectRecord;
+}) => {
+  const { recordChipData } = useRecordChipData({
+    objectNameSingular: objectMetadataItem.nameSingular,
+    record,
+  });
+
+  const { Icon, IconColor } = useGetStandardObjectIcon(
+    objectMetadataItem.nameSingular,
+  );
+
+  const theme = useTheme();
+
+  return (
+    <StyledAvatarWrapper>
+      {Icon ? (
+        <Icon color={IconColor} size={theme.icon.size.sm} />
+      ) : (
+        <Avatar
+          avatarUrl={recordChipData.avatarUrl}
+          placeholderColorSeed={recordChipData.recordId}
+          placeholder={recordChipData.name}
+          type={recordChipData.avatarType}
+          size="sm"
+        />
+      )}
+    </StyledAvatarWrapper>
+  );
+};
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
@ -2,8 +2,10 @@ 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 { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import styled from '@emotion/styled';
-import { IconX, LightIconButton, useIsMobile } from 'twenty-ui';
+import { IconX, LightIconButton, isDefined, useIsMobile } from 'twenty-ui';

 const StyledInputContainer = styled.div`
  align-items: center;
@ -65,9 +67,17 @@ export const CommandMenuTopBar = ({

  const { closeCommandMenu } = useCommandMenu();

+  const contextStoreCurrentObjectMetadataId = useRecoilComponentValueV2(
+    contextStoreCurrentObjectMetadataIdComponentState,
+  );
+
  return (
    <StyledInputContainer>
-      <CommandMenuContextRecordChip />
+      {isDefined(contextStoreCurrentObjectMetadataId) && (
+        <CommandMenuContextRecordChip
+          objectMetadataItemId={contextStoreCurrentObjectMetadataId}
+        />
+      )}
      <StyledInput
        autoFocus
        value={commandMenuSearch}
--- 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
@ -1,14 +1,9 @@
-import { action } from '@storybook/addon-actions';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
-import { useEffect } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { IconCheckbox, IconNotes } from 'twenty-ui';
+import { useSetRecoilState } from 'recoil';

 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { CommandType } from '@/command-menu/types/Command';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@ -21,8 +16,8 @@ import {
 import { sleep } from '~/utils/sleep';

 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
-import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { JestContextStoreSetter } from '~/testing/jest/JestContextStoreSetter';
 import { CommandMenu } from '../CommandMenu';

@ -55,46 +50,13 @@ const meta: Meta<typeof CommandMenu> = {
      const setCurrentWorkspaceMember = useSetRecoilState(
        currentWorkspaceMemberState,
      );
-      const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
-
-      const { addToCommandMenu, setObjectsInCommandMenu, openCommandMenu } =
-        useCommandMenu();
+      const setIsCommandMenuOpened = useSetRecoilState(
+        isCommandMenuOpenedState,
+      );

      setCurrentWorkspace(mockDefaultWorkspace);
      setCurrentWorkspaceMember(mockedWorkspaceMemberData);
-
-      useEffect(() => {
-        const nonSystemActiveObjects = objectMetadataItems.filter(
-          (object) => !object.isSystem && object.isActive,
-        );
-
-        setObjectsInCommandMenu(nonSystemActiveObjects);
-
-        addToCommandMenu([
-          {
-            id: 'create-task',
-            to: '',
-            label: 'Create Task',
-            type: CommandType.Create,
-            Icon: IconCheckbox,
-            onCommandClick: action('create task click'),
-          },
-          {
-            id: 'create-note',
-            to: '',
-            label: 'Create Note',
-            type: CommandType.Create,
-            Icon: IconNotes,
-            onCommandClick: action('create note click'),
-          },
-        ]);
-        openCommandMenu();
-      }, [
-        addToCommandMenu,
-        setObjectsInCommandMenu,
-        openCommandMenu,
-        objectMetadataItems,
-      ]);
+      setIsCommandMenuOpened(true);

      return <Story />;
    },
@ -115,9 +77,6 @@ export const DefaultWithoutSearch: Story = {
  play: async () => {
    const canvas = within(document.body);

-    expect(
-      await canvas.findByText('Create Task', undefined, { timeout: 10000 }),
-    ).toBeInTheDocument();
    expect(await canvas.findByText('Go to People')).toBeInTheDocument();
    expect(await canvas.findByText('Go to Companies')).toBeInTheDocument();
    expect(await canvas.findByText('Go to Opportunities')).toBeInTheDocument();
@ -134,7 +93,6 @@ export const MatchingPersonCompanyActivityCreateNavigate: Story = {
    await userEvent.type(searchInput, 'n');
    expect(await canvas.findByText('Linkedin')).toBeInTheDocument();
    expect(await canvas.findByText(companiesMock[0].name)).toBeInTheDocument();
-    expect(await canvas.findByText('Create Note')).toBeInTheDocument();
    expect(await canvas.findByText('Go to Companies')).toBeInTheDocument();
  },
 };
@ -145,7 +103,6 @@ export const OnlyMatchingCreateAndNavigate: Story = {
    const searchInput = await canvas.findByPlaceholderText('Type anything');
    await sleep(openTimeout);
    await userEvent.type(searchInput, 'ta');
-    expect(await canvas.findByText('Create Task')).toBeInTheDocument();
    expect(await canvas.findByText('Go to Tasks')).toBeInTheDocument();
  },
 };
--- a/packages/twenty-front/src/modules/command-menu/constants/CommandMenuNavigateCommands.ts
+++ b/packages/twenty-front/src/modules/command-menu/constants/CommandMenuNavigateCommands.ts
@ -8,7 +8,7 @@ import {

 import { Command, CommandType } from '../types/Command';

-export const COMMAND_MENU_COMMANDS: { [key: string]: Command } = {
+export const COMMAND_MENU_NAVIGATE_COMMANDS: { [key: string]: Command } = {
  people: {
    id: 'go-to-people',
    to: '/objects/people',
--- 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,12 +1,12 @@
 import { renderHook } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router-dom';
-import { RecoilRoot, useRecoilState, useRecoilValue } from 'recoil';
+import { RecoilRoot, useRecoilValue } from 'recoil';

 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { commandMenuCommandsState } from '@/command-menu/states/commandMenuCommandsState';
+import { commandMenuCommandsComponentSelector } from '@/command-menu/states/commandMenuCommandsSelector';
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
-import { CommandType } from '@/command-menu/types/Command';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';

 const Wrapper = ({ children }: { children: React.ReactNode }) => (
  <RecoilRoot>
@ -24,15 +24,15 @@ const renderHooks = () => {
    () => {
      const commandMenu = useCommandMenu();
      const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
-      const [commandMenuCommands, setCommandMenuCommands] = useRecoilState(
-        commandMenuCommandsState,
+      const commandMenuCommands = useRecoilComponentValueV2(
+        commandMenuCommandsComponentSelector,
+        'command-menu',
      );

      return {
        commandMenu,
        isCommandMenuOpened,
        commandMenuCommands,
-        setCommandMenuCommands,
      };
    },
    {
@ -77,24 +77,6 @@ describe('useCommandMenu', () => {
    expect(result.current.isCommandMenuOpened).toBe(false);
  });

-  it('should add commands to the menu', () => {
-    const { result } = renderHooks();
-
-    expect(
-      result.current.commandMenuCommands.find((cmd) => cmd.label === 'Test'),
-    ).toBeUndefined();
-
-    act(() => {
-      result.current.commandMenu.addToCommandMenu([
-        { label: 'Test', id: 'test', to: '/test', type: CommandType.Navigate },
-      ]);
-    });
-
-    expect(
-      result.current.commandMenuCommands.find((cmd) => cmd.label === 'Test'),
-    ).toBeDefined();
-  });
-
  it('onItemClick', () => {
    const { result } = renderHooks();
    const onClickMock = jest.fn();
@ -106,43 +88,4 @@ describe('useCommandMenu', () => {
    expect(result.current.isCommandMenuOpened).toBe(true);
    expect(onClickMock).toHaveBeenCalledTimes(1);
  });
-
-  it('should setObjectsInCommandMenu command menu', () => {
-    const { result } = renderHooks();
-
-    act(() => {
-      result.current.commandMenu.setObjectsInCommandMenu([]);
-    });
-
-    expect(result.current.commandMenuCommands.length).toBe(1);
-
-    act(() => {
-      result.current.commandMenu.setObjectsInCommandMenu([
-        {
-          id: 'b88745ce-9021-4316-a018-8884e02d05ca',
-          nameSingular: 'task',
-          namePlural: 'tasks',
-          labelSingular: 'Task',
-          labelPlural: 'Tasks',
-          isLabelSyncedWithName: true,
-          shortcut: 'T',
-          description: 'A task',
-          icon: 'IconCheckbox',
-          isCustom: false,
-          isRemote: false,
-          isActive: true,
-          isSystem: false,
-          createdAt: '2024-09-12T20:23:46.041Z',
-          updatedAt: '2024-09-13T08:36:53.426Z',
-          labelIdentifierFieldMetadataId:
-            'ab7901eb-43e1-4dc7-8f3b-cdee2857eb9a',
-          imageIdentifierFieldMetadataId: null,
-          fields: [],
-          indexMetadatas: [],
-        },
-      ]);
-    });
-
-    expect(result.current.commandMenuCommands.length).toBe(2);
-  });
 });
--- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
+++ b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts
@ -9,24 +9,17 @@ import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousH
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { isDefined } from '~/utils/isDefined';

-import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuCommands';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
 import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { mainContextStoreComponentInstanceIdState } from '@/context-store/states/mainContextStoreComponentInstanceId';
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { ALL_ICONS } from '@ui/display/icon/providers/internal/AllIcons';
-import { sortByProperty } from '~/utils/array/sortByProperty';
-import { commandMenuCommandsState } from '../states/commandMenuCommandsState';
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
-import { Command, CommandType } from '../types/Command';

 export const useCommandMenu = () => {
  const navigate = useNavigate();
  const setIsCommandMenuOpened = useSetRecoilState(isCommandMenuOpenedState);
-  const setCommands = useSetRecoilState(commandMenuCommandsState);
  const { resetSelectedItem } = useSelectableList('command-menu-list');
  const {
    setHotkeyScopeAndMemorizePreviousScope,
@ -161,36 +154,6 @@ export const useCommandMenu = () => {
    [closeCommandMenu, openCommandMenu],
  );

-  const addToCommandMenu = useCallback(
-    (addCommand: Command[]) => {
-      setCommands((prev) => [...prev, ...addCommand]);
-    },
-    [setCommands],
-  );
-
-  const setObjectsInCommandMenu = (menuItems: ObjectMetadataItem[]) => {
-    const formattedItems = [
-      ...[
-        ...menuItems.map(
-          (item) =>
-            ({
-              id: item.id,
-              to: `/objects/${item.namePlural}`,
-              label: `Go to ${item.labelPlural}`,
-              type: CommandType.Navigate,
-              firstHotKey: item.shortcut ? 'G' : undefined,
-              secondHotKey: item.shortcut,
-              Icon: ALL_ICONS[
-                (item?.icon as keyof typeof ALL_ICONS) ?? 'IconArrowUpRight'
-              ],
-            }) as Command,
-        ),
-      ].sort(sortByProperty('label', 'asc')),
-      COMMAND_MENU_COMMANDS.settings,
-    ];
-    setCommands(formattedItems);
-  };
-
  const onItemClick = useCallback(
    (onClick?: () => void, to?: string) => {
      toggleCommandMenu();
@ -211,8 +174,6 @@ export const useCommandMenu = () => {
    openCommandMenu,
    closeCommandMenu,
    toggleCommandMenu,
-    addToCommandMenu,
    onItemClick,
-    setObjectsInCommandMenu,
  };
 };
--- a/packages/twenty-front/src/modules/command-menu/states/commandMenuCommandsSelector.ts
+++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuCommandsSelector.ts
@ -0,0 +1,23 @@
+import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
+import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { Command } from '@/command-menu/types/Command';
+import { computeCommandMenuCommands } from '@/command-menu/utils/computeCommandMenuCommands';
+import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
+
+export const commandMenuCommandsComponentSelector = createComponentSelectorV2<
+  Command[]
+>({
+  key: 'commandMenuCommandsComponentSelector',
+  componentInstanceContext: ActionMenuComponentInstanceContext,
+  get:
+    ({ instanceId }) =>
+    ({ get }) => {
+      const actionMenuEntries = get(
+        actionMenuEntriesComponentSelector.selectorFamily({
+          instanceId,
+        }),
+      );
+
+      return computeCommandMenuCommands(actionMenuEntries);
+    },
+});
--- a/packages/twenty-front/src/modules/command-menu/states/commandMenuCommandsState.ts
+++ b/packages/twenty-front/src/modules/command-menu/states/commandMenuCommandsState.ts
@ -1,15 +0,0 @@
-import { createState } from 'twenty-ui';
-
-import { Command, CommandType } from '../types/Command';
-
-export const commandMenuCommandsState = createState<Command[]>({
-  key: 'command-menu/commandMenuCommandsState',
-  defaultValue: [
-    {
-      id: '',
-      to: '',
-      label: '',
-      type: CommandType.Navigate,
-    },
-  ],
-});
--- a/packages/twenty-front/src/modules/command-menu/utils/computeCommandMenuCommands.ts
+++ b/packages/twenty-front/src/modules/command-menu/utils/computeCommandMenuCommands.ts
@ -3,7 +3,7 @@ import {
  ActionMenuEntryScope,
  ActionMenuEntryType,
 } from '@/action-menu/types/ActionMenuEntry';
-import { COMMAND_MENU_COMMANDS } from '@/command-menu/constants/CommandMenuCommands';
+import { COMMAND_MENU_NAVIGATE_COMMANDS } from '@/command-menu/constants/CommandMenuNavigateCommands';
 import {
  Command,
  CommandScope,
@ -13,7 +13,7 @@ import {
 export const computeCommandMenuCommands = (
  actionMenuEntries: ActionMenuEntry[],
 ): Command[] => {
-  const commands = Object.values(COMMAND_MENU_COMMANDS);
+  const navigateCommands = Object.values(COMMAND_MENU_NAVIGATE_COMMANDS);

  const actionCommands: Command[] = actionMenuEntries
    ?.filter(
@ -49,5 +49,5 @@ export const computeCommandMenuCommands = (
          : CommandScope.Global,
    }));

-  return [...commands, ...actionCommands, ...workflowRunCommands];
+  return [...navigateCommands, ...actionCommands, ...workflowRunCommands];
 };