Add search records actions to the command menu (#9892)

Closes https://github.com/twentyhq/core-team-issues/issues/253 and https://github.com/twentyhq/core-team-issues/issues/256. - Created `CommandMenuList`, a component used at the root level of the command menu and inside the search page of the command menu - Refactored record agnostic actions - Added shortcuts to the action menu entries (`/` key for the search) and updated the design of the shortcuts - Reordered actions at the root level of the command menu https://github.com/user-attachments/assets/e1339cc4-ef5d-45c5-a159-6817a54b92e9
2025-01-29 18:23:40 +01:00
parent 03f3ccd060
commit ce296fae4f
52 changed files with 1539 additions and 1361 deletions
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
@ -1,92 +1,37 @@
 import { CommandGroup } from '@/command-menu/components/CommandGroup';
-import { CommandMenuDefaultSelectionEffect } from '@/command-menu/components/CommandMenuDefaultSelectionEffect';
-import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
+import { CommandMenuList } from '@/command-menu/components/CommandMenuList';
 import { ResetContextToSelectionCommandButton } from '@/command-menu/components/ResetContextToSelectionCommandButton';
-import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
-import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
-import { useCommandMenuOnItemClick } from '@/command-menu/hooks/useCommandMenuOnItemClick';
+import { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContextToSelection';
 import { useMatchingCommandMenuCommands } from '@/command-menu/hooks/useMatchingCommandMenuCommands';
-import { useResetPreviousCommandMenuContext } from '@/command-menu/hooks/useResetPreviousCommandMenuContext';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
 import { Command } from '@/command-menu/types/Command';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 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 { 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 styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-ui';

-const MOBILE_NAVIGATION_BAR_HEIGHT = 64;
-
-type CommandGroupConfig = {
+export type CommandGroupConfig = {
  heading: string;
  items?: Command[];
 };

-const StyledList = styled.div`
-  background: ${({ theme }) => theme.background.secondary};
-  overscroll-behavior: contain;
-  transition: 100ms ease;
-  transition-property: height;
-`;
-
-const StyledInnerList = styled.div<{ isMobile: boolean }>`
-  max-height: ${({ isMobile }) =>
-    isMobile
-      ? `calc(100dvh - ${COMMAND_MENU_SEARCH_BAR_HEIGHT}px - ${
-          COMMAND_MENU_SEARCH_BAR_PADDING * 2
-        }px - ${MOBILE_NAVIGATION_BAR_HEIGHT}px)`
-      : `calc(100dvh - ${COMMAND_MENU_SEARCH_BAR_HEIGHT}px - ${
-          COMMAND_MENU_SEARCH_BAR_PADDING * 2
-        }px)`};
-  padding-left: ${({ theme }) => theme.spacing(2)};
-  padding-right: ${({ theme }) => theme.spacing(2)};
-  padding-top: ${({ theme }) => theme.spacing(1)};
-  width: calc(100% - ${({ theme }) => theme.spacing(4)});
-`;
-
-const StyledEmpty = styled.div`
-  align-items: center;
-  color: ${({ theme }) => theme.font.color.light};
-  display: flex;
-  font-size: ${({ theme }) => theme.font.size.md};
-  height: 64px;
-  justify-content: center;
-  white-space: pre-wrap;
-`;
-
 export const CommandMenu = () => {
  const { t } = useLingui();

-  const { onItemClick } = useCommandMenuOnItemClick();
-  const { resetPreviousCommandMenuContext } =
-    useResetPreviousCommandMenuContext();
-
  const commandMenuSearch = useRecoilValue(commandMenuSearchState);

-  const isMobile = useIsMobile();
-
  const {
-    isNoResults,
-    isLoading,
+    noResults,
    copilotCommands,
    matchingStandardActionRecordSelectionCommands,
+    matchingStandardActionObjectCommands,
    matchingWorkflowRunRecordSelectionCommands,
    matchingStandardActionGlobalCommands,
    matchingWorkflowRunGlobalCommands,
-    matchingNavigateCommand,
-    peopleCommands,
-    companyCommands,
-    opportunityCommands,
-    noteCommands,
-    tasksCommands,
-    customObjectCommands,
+    matchingNavigateCommands,
  } = useMatchingCommandMenuCommands({
    commandMenuSearch,
  });
@ -94,16 +39,11 @@ export const CommandMenu = () => {
  const selectableItems: Command[] = copilotCommands
    .concat(
      matchingStandardActionRecordSelectionCommands,
+      matchingStandardActionObjectCommands,
      matchingWorkflowRunRecordSelectionCommands,
      matchingStandardActionGlobalCommands,
      matchingWorkflowRunGlobalCommands,
-      matchingNavigateCommand,
-      peopleCommands,
-      companyCommands,
-      opportunityCommands,
-      noteCommands,
-      tasksCommands,
-      customObjectCommands,
+      matchingNavigateCommands,
    )
    .filter(isDefined);

@ -115,7 +55,7 @@ export const CommandMenu = () => {
  const selectableItemIds = selectableItems.map((item) => item.id);

  if (isNonEmptyString(previousContextStoreCurrentObjectMetadataId)) {
-    selectableItemIds.unshift('reset-context-to-selection');
+    selectableItemIds.unshift(RESET_CONTEXT_TO_SELECTION);
  }

  const commandGroups: CommandGroupConfig[] = [
@ -125,130 +65,35 @@ export const CommandMenu = () => {
    },
    {
      heading: t`Record Selection`,
-      items: matchingStandardActionRecordSelectionCommands,
+      items: matchingStandardActionRecordSelectionCommands.concat(
+        matchingWorkflowRunRecordSelectionCommands,
+      ),
    },
    {
-      heading: t`Workflow Record Selection`,
-      items: matchingWorkflowRunRecordSelectionCommands,
+      heading: t`Object`,
+      items: matchingStandardActionObjectCommands,
    },
    {
-      heading: t`View`,
-      items: matchingStandardActionGlobalCommands,
-    },
-    {
-      heading: t`Workflows`,
-      items: matchingWorkflowRunGlobalCommands,
-    },
-    {
-      heading: t`Navigate`,
-      items: matchingNavigateCommand,
-    },
-    {
-      heading: t`People`,
-      items: peopleCommands,
-    },
-    {
-      heading: t`Companies`,
-      items: companyCommands,
-    },
-    {
-      heading: t`Opportunities`,
-      items: opportunityCommands,
-    },
-    {
-      heading: t`Notes`,
-      items: noteCommands,
-    },
-    {
-      heading: t`Tasks`,
-      items: tasksCommands,
-    },
-    {
-      heading: t`Custom Objects`,
-      items: customObjectCommands,
+      heading: t`Global`,
+      items: matchingStandardActionGlobalCommands
+        .concat(matchingNavigateCommands)
+        .concat(matchingWorkflowRunGlobalCommands),
    },
  ];

  return (
-    <>
-      <CommandMenuDefaultSelectionEffect
-        selectableItemIds={selectableItemIds}
-      />
-
-      <StyledList>
-        <ScrollWrapper
-          contextProviderName="commandMenu"
-          componentInstanceId={`scroll-wrapper-command-menu`}
-        >
-          <StyledInnerList isMobile={isMobile}>
-            <SelectableList
-              selectableListId="command-menu-list"
-              selectableItemIdArray={selectableItemIds}
-              hotkeyScope={AppHotkeyScope.CommandMenu}
-              onEnter={(itemId) => {
-                if (itemId === 'reset-context-to-selection') {
-                  resetPreviousCommandMenuContext();
-                  return;
-                }
-
-                const command = selectableItems.find(
-                  (item) => item.id === itemId,
-                );
-
-                if (isDefined(command)) {
-                  const { to, onCommandClick, shouldCloseCommandMenuOnClick } =
-                    command;
-
-                  onItemClick({
-                    shouldCloseCommandMenuOnClick,
-                    onClick: onCommandClick,
-                    to,
-                  });
-                }
-              }}
-            >
-              {isNonEmptyString(
-                previousContextStoreCurrentObjectMetadataId,
-              ) && (
-                <CommandGroup heading={t`Context`} key={t`Context`}>
-                  <SelectableItem itemId="reset-context-to-selection">
-                    <ResetContextToSelectionCommandButton />
-                  </SelectableItem>
-                </CommandGroup>
-              )}
-
-              {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>
-    </>
+    <CommandMenuList
+      commandGroups={commandGroups}
+      selectableItemIds={selectableItemIds}
+      noResults={noResults}
+    >
+      {isNonEmptyString(previousContextStoreCurrentObjectMetadataId) && (
+        <CommandGroup heading={t`Context`}>
+          <SelectableItem itemId={RESET_CONTEXT_TO_SELECTION}>
+            <ResetContextToSelectionCommandButton />
+          </SelectableItem>
+        </CommandGroup>
+      )}
+    </CommandMenuList>
  );
 };
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuContainer.tsx
@ -1,5 +1,7 @@
 import { RecordActionMenuEntriesSetter } from '@/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter';
-import { RecordAgnosticActionsSetterEffect } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionsSetterEffect';
+import { RecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RecordAgnosticActionMenuEntriesSetter';
+import { RunWorkflowRecordAgnosticActionMenuEntriesSetter } from '@/action-menu/actions/record-agnostic-actions/components/RunWorkflowRecordAgnosticActionMenuEntriesSetter';
+import { RecordAgnosticActionsKey } from '@/action-menu/actions/record-agnostic-actions/types/RecordAgnosticActionsKey';
 import { ActionMenuConfirmationModals } from '@/action-menu/components/ActionMenuConfirmationModals';
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
@ -20,7 +22,7 @@ import { motion } from 'framer-motion';
 import { useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import { useIsMobile } from 'twenty-ui';
-import { FeatureFlagKey } from '~/generated/graphql';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';

 const StyledCommandMenu = styled(motion.div)`
  background: ${({ theme }) => theme.background.secondary};
@ -45,9 +47,6 @@ export const CommandMenuContainer = ({
 }) => {
  const { toggleCommandMenu, closeCommandMenu } = useCommandMenu();

-  const isWorkflowEnabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsWorkflowEnabled,
-  );
  const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);

  const commandMenuRef = useRef<HTMLDivElement>(null);
@ -74,6 +73,10 @@ export const CommandMenuContainer = ({

  const theme = useTheme();

+  const isWorkflowEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IsWorkflowEnabled,
+  );
+
  return (
    <RecordFiltersComponentInstanceContext.Provider
      value={{ instanceId: 'command-menu' }}
@ -87,11 +90,18 @@ export const CommandMenuContainer = ({
          <ActionMenuContext.Provider
            value={{
              isInRightDrawer: false,
-              onActionExecutedCallback: toggleCommandMenu,
+              onActionExecutedCallback: ({ key }) => {
+                if (key !== RecordAgnosticActionsKey.SEARCH_RECORDS) {
+                  toggleCommandMenu();
+                }
+              },
            }}
          >
            <RecordActionMenuEntriesSetter />
-            {isWorkflowEnabled && <RecordAgnosticActionsSetterEffect />}
+            <RecordAgnosticActionMenuEntriesSetter />
+            {isWorkflowEnabled && (
+              <RunWorkflowRecordAgnosticActionMenuEntriesSetter />
+            )}
            <ActionMenuConfirmationModals />
            {isCommandMenuOpened && (
              <StyledCommandMenu
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx
@ -12,8 +12,7 @@ export type CommandMenuItemProps = {
  id: string;
  onClick?: () => void;
  Icon?: IconComponent;
-  firstHotKey?: string;
-  secondHotKey?: string;
+  hotKeys?: string[];
  shouldCloseCommandMenuOnClick?: boolean;
  RightComponent?: ReactNode;
 };
@ -24,8 +23,7 @@ export const CommandMenuItem = ({
  id,
  onClick,
  Icon,
-  firstHotKey,
-  secondHotKey,
+  hotKeys,
  shouldCloseCommandMenuOnClick,
  RightComponent,
 }: CommandMenuItemProps) => {
@ -42,8 +40,7 @@ export const CommandMenuItem = ({
    <MenuItemCommand
      LeftIcon={Icon}
      text={label}
-      firstHotKey={firstHotKey}
-      secondHotKey={secondHotKey}
+      hotKeys={hotKeys}
      onClick={() =>
        onItemClick({
          shouldCloseCommandMenuOnClick,
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx
@ -0,0 +1,146 @@
+import { CommandGroup } from '@/command-menu/components/CommandGroup';
+import { CommandGroupConfig } from '@/command-menu/components/CommandMenu';
+import { CommandMenuDefaultSelectionEffect } from '@/command-menu/components/CommandMenuDefaultSelectionEffect';
+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 { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContextToSelection';
+import { useCommandMenuOnItemClick } from '@/command-menu/hooks/useCommandMenuOnItemClick';
+import { useResetPreviousCommandMenuContext } from '@/command-menu/hooks/useResetPreviousCommandMenuContext';
+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 { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
+import styled from '@emotion/styled';
+import { MOBILE_VIEWPORT, isDefined } from 'twenty-ui';
+
+const MOBILE_NAVIGATION_BAR_HEIGHT = 64;
+
+export type CommandMenuListProps = {
+  commandGroups: CommandGroupConfig[];
+  selectableItemIds: string[];
+  children?: React.ReactNode;
+  loading?: boolean;
+  noResults?: boolean;
+};
+
+const StyledList = styled.div`
+  background: ${({ theme }) => theme.background.secondary};
+  overscroll-behavior: contain;
+  transition: 100ms ease;
+  transition-property: height;
+`;
+
+const StyledInnerList = styled.div`
+  max-height: calc(
+    100dvh - ${COMMAND_MENU_SEARCH_BAR_HEIGHT}px -
+      ${COMMAND_MENU_SEARCH_BAR_PADDING * 2}px -
+      ${MOBILE_NAVIGATION_BAR_HEIGHT}px
+  );
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+  padding-top: ${({ theme }) => theme.spacing(1)};
+  width: calc(100% - ${({ theme }) => theme.spacing(4)});
+
+  @media (min-width: ${MOBILE_VIEWPORT}px) {
+    max-height: calc(
+      100dvh - ${COMMAND_MENU_SEARCH_BAR_HEIGHT}px -
+        ${COMMAND_MENU_SEARCH_BAR_PADDING * 2}px
+    );
+  }
+`;
+
+const StyledEmpty = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.md};
+  height: 64px;
+  justify-content: center;
+  white-space: pre-wrap;
+`;
+
+export const CommandMenuList = ({
+  commandGroups,
+  selectableItemIds,
+  children,
+  loading = false,
+  noResults = false,
+}: CommandMenuListProps) => {
+  const { onItemClick } = useCommandMenuOnItemClick();
+
+  const commands = commandGroups.flatMap((group) => group.items ?? []);
+
+  const { resetPreviousCommandMenuContext } =
+    useResetPreviousCommandMenuContext();
+
+  return (
+    <>
+      <CommandMenuDefaultSelectionEffect
+        selectableItemIds={selectableItemIds}
+      />
+      <StyledList>
+        <ScrollWrapper
+          contextProviderName="commandMenu"
+          componentInstanceId={`scroll-wrapper-command-menu`}
+        >
+          <StyledInnerList>
+            <SelectableList
+              selectableListId="command-menu-list"
+              hotkeyScope={AppHotkeyScope.CommandMenuOpen}
+              selectableItemIdArray={selectableItemIds}
+              onEnter={(itemId) => {
+                if (itemId === RESET_CONTEXT_TO_SELECTION) {
+                  resetPreviousCommandMenuContext();
+                  return;
+                }
+
+                const command = commands.find((item) => item.id === itemId);
+
+                if (isDefined(command)) {
+                  const { to, onCommandClick, shouldCloseCommandMenuOnClick } =
+                    command;
+
+                  onItemClick({
+                    shouldCloseCommandMenuOnClick,
+                    onClick: onCommandClick,
+                    to,
+                  });
+                }
+              }}
+            >
+              {children}
+              {noResults && !loading && (
+                <StyledEmpty>No result 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}
+                            hotKeys={item.hotKeys}
+                            shouldCloseCommandMenuOnClick={
+                              item.shouldCloseCommandMenuOnClick
+                            }
+                          />
+                        </SelectableItem>
+                      );
+                    })}
+                  </CommandGroup>
+                ) : null,
+              )}
+            </SelectableList>
+          </StyledInnerList>
+        </ScrollWrapper>
+      </StyledList>
+    </>
+  );
+};
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuPages.ts
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuPages.ts
@ -1,11 +0,0 @@
-export enum CommandMenuPages {
-  Root = 'root',
-  ViewRecord = 'view-record',
-  ViewEmailThread = 'view-email-thread',
-  ViewCalendarEvent = 'view-calendar-event',
-  Copilot = 'copilot',
-  WorkflowStepSelectTriggerType = 'workflow-step-select-trigger-type',
-  WorkflowStepSelectAction = 'workflow-step-select-action',
-  WorkflowStepView = 'workflow-step-view',
-  WorkflowStepEdit = 'workflow-step-edit',
-}
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx
@ -1,12 +1,12 @@
 import { CommandMenuContextChip } from '@/command-menu/components/CommandMenuContextChip';
 import { CommandMenuContextRecordChip } from '@/command-menu/components/CommandMenuContextRecordChip';
-import { CommandMenuPages } from '@/command-menu/components/CommandMenuPages';
 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 { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageTitle';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
+import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useTheme } from '@emotion/react';
@ -95,11 +95,12 @@ export const CommandMenuTopBar = () => {
  return (
    <StyledInputContainer>
      <StyledContentContainer>
-        {isDefined(contextStoreCurrentObjectMetadataId) && (
-          <CommandMenuContextRecordChip
-            objectMetadataItemId={contextStoreCurrentObjectMetadataId}
-          />
-        )}
+        {commandMenuPage !== CommandMenuPages.SearchRecords &&
+          isDefined(contextStoreCurrentObjectMetadataId) && (
+            <CommandMenuContextRecordChip
+              objectMetadataItemId={contextStoreCurrentObjectMetadataId}
+            />
+          )}
        {isDefined(Icon) && (
          <CommandMenuContextChip
            Icons={[<Icon size={theme.icon.size.sm} />]}
@ -107,7 +108,8 @@ export const CommandMenuTopBar = () => {
          />
        )}

-        {commandMenuPage === CommandMenuPages.Root && (
+        {(commandMenuPage === CommandMenuPages.Root ||
+          commandMenuPage === CommandMenuPages.SearchRecords) && (
          <StyledInput
            autoFocus
            value={commandMenuSearch}
--- a/packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/ResetContextToSelectionCommandButton.tsx
@ -1,5 +1,6 @@
 import { CommandMenuContextRecordChip } from '@/command-menu/components/CommandMenuContextRecordChip';
 import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
+import { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContextToSelection';
 import { useResetPreviousCommandMenuContext } from '@/command-menu/hooks/useResetPreviousCommandMenuContext';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
@ -40,7 +41,7 @@ export const ResetContextToSelectionCommandButton = () => {

  return (
    <CommandMenuItem
-      id="reset-context-to-selection"
+      id={RESET_CONTEXT_TO_SELECTION}
      Icon={IconArrowBackUp}
      label={t`Reset to`}
      RightComponent={
--- 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
@ -85,42 +85,43 @@ export const DefaultWithoutSearch: Story = {
  play: async () => {
    const canvas = within(document.body);

-    expect(await canvas.findByText('Go to People')).toBeInTheDocument();
-    expect(await canvas.findByText('Go to Companies')).toBeInTheDocument();
-    expect(await canvas.findByText('Go to Opportunities')).toBeInTheDocument();
-    expect(await canvas.findByText('Go to Settings')).toBeInTheDocument();
-    expect(await canvas.findByText('Go to Tasks')).toBeInTheDocument();
+    expect(await canvas.findByText('Go to People')).toBeVisible();
+    expect(await canvas.findByText('Go to Companies')).toBeVisible();
+    expect(await canvas.findByText('Go to Opportunities')).toBeVisible();
+    expect(await canvas.findByText('Go to Settings')).toBeVisible();
+    expect(await canvas.findByText('Go to Tasks')).toBeVisible();
  },
 };

-export const MatchingPersonCompanyActivityCreateNavigate: Story = {
-  play: async () => {
-    const canvas = within(document.body);
-    const searchInput = await canvas.findByPlaceholderText('Type anything');
-    await sleep(openTimeout);
-    await userEvent.type(searchInput, 'n');
-    expect(await canvas.findByText('Linkedin')).toBeInTheDocument();
-    expect(await canvas.findByText(companiesMock[0].name)).toBeInTheDocument();
-    expect(await canvas.findByText('Go to Companies')).toBeInTheDocument();
-  },
-};
-
-export const OnlyMatchingCreateAndNavigate: Story = {
+export const MatchingNavigate: Story = {
  play: async () => {
    const canvas = within(document.body);
    const searchInput = await canvas.findByPlaceholderText('Type anything');
    await sleep(openTimeout);
    await userEvent.type(searchInput, 'ta');
-    expect(await canvas.findByText('Go to Tasks')).toBeInTheDocument();
+    expect(await canvas.findByText('Go to Tasks')).toBeVisible();
  },
 };

-export const AtleastMatchingOnePerson: Story = {
+export const MatchingNavigateShortcuts: Story = {
  play: async () => {
    const canvas = within(document.body);
    const searchInput = await canvas.findByPlaceholderText('Type anything');
    await sleep(openTimeout);
-    await userEvent.type(searchInput, 'alex');
-    expect(await canvas.findByText('Sylvie Palmer')).toBeInTheDocument();
+    await userEvent.type(searchInput, 'gp');
+    expect(await canvas.findByText('Go to People')).toBeVisible();
+  },
+};
+
+export const SearchRecordsAction: Story = {
+  play: async () => {
+    const canvas = within(document.body);
+    const searchRecordsButton = await canvas.findByText('Search records');
+    await userEvent.click(searchRecordsButton);
+    const searchInput = await canvas.findByPlaceholderText('Type anything');
+    await sleep(openTimeout);
+    await userEvent.type(searchInput, 'n');
+    expect(await canvas.findByText('Linkedin')).toBeVisible();
+    expect(await canvas.findByText(companiesMock[0].name)).toBeVisible();
  },
 };