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

packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx

@@ -66,8 +66,7 @@ const StyledMenuItemCommandContainer = styled.div<{ isSelected?: boolean }>`
 export type MenuItemCommandProps = {
   LeftIcon?: IconComponent;
   text: string;
-  firstHotKey?: string;
-  secondHotKey?: string;
+  hotKeys?: string[];
   className?: string;
   isSelected?: boolean;
   onClick?: () => void;
@@ -77,8 +76,7 @@ export type MenuItemCommandProps = {
 export const MenuItemCommand = ({
   LeftIcon,
   text,
-  firstHotKey,
-  secondHotKey,
+  hotKeys,
   className,
   isSelected,
   onClick,
@@ -102,12 +100,7 @@ export const MenuItemCommand = ({
         <StyledMenuItemLabelText>{text}</StyledMenuItemLabelText>
         {RightComponent}
       </StyledMenuItemLeftContent>
-      {!isMobile && (
-        <MenuItemCommandHotKeys
-          firstHotKey={firstHotKey}
-          secondHotKey={secondHotKey}
-        />
-      )}
+      {!isMobile && <MenuItemCommandHotKeys hotKeys={hotKeys} />}
     </StyledMenuItemCommandContainer>
   );
 };

packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommandHotKeys.tsx

@@ -34,27 +34,24 @@ const StyledCommandKey = styled.div`
 `;
 
 export type MenuItemCommandHotKeysProps = {
-  firstHotKey?: string;
+  hotKeys?: string[];
   joinLabel?: string;
-  secondHotKey?: string;
 };
 
 export const MenuItemCommandHotKeys = ({
-  firstHotKey,
-  secondHotKey,
+  hotKeys,
   joinLabel = 'then',
 }: MenuItemCommandHotKeysProps) => {
   return (
     <StyledCommandText>
-      {firstHotKey && (
+      {hotKeys && (
         <StyledCommandTextContainer>
-          <StyledCommandKey>{firstHotKey}</StyledCommandKey>
-          {secondHotKey && (
+          {hotKeys.map((hotKey, index) => (
             <>
-              {joinLabel}
-              <StyledCommandKey>{secondHotKey}</StyledCommandKey>
+              <StyledCommandKey key={index}>{hotKey}</StyledCommandKey>
+              {index < hotKeys.length - 1 && joinLabel}
             </>
-          )}
+          ))}
         </StyledCommandTextContainer>
       )}
     </StyledCommandText>

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx

@@ -20,15 +20,13 @@ type Story = StoryObj<typeof MenuItemCommand>;
 export const Default: Story = {
   args: {
     text: 'First option',
-    firstHotKey: '⌘',
-    secondHotKey: '1',
+    hotKeys: ['⌘', '1'],
   },
   render: (props) => (
     <MenuItemCommand
       LeftIcon={props.LeftIcon}
       text={props.text}
-      firstHotKey={props.firstHotKey}
-      secondHotKey={props.secondHotKey}
+      hotKeys={props.hotKeys}
       className={props.className}
       onClick={props.onClick}
       isSelected={false}
@@ -40,8 +38,7 @@ export const Default: Story = {
 export const Catalog: CatalogStory<Story, typeof MenuItemCommand> = {
   args: {
     text: 'Menu item',
-    firstHotKey: '⌘',
-    secondHotKey: '1',
+    hotKeys: ['⌘', '1'],
   },
   argTypes: {
     className: { control: false },
@@ -85,8 +82,7 @@ export const Catalog: CatalogStory<Story, typeof MenuItemCommand> = {
     <MenuItemCommand
       LeftIcon={props.LeftIcon}
       text={props.text}
-      firstHotKey={props.firstHotKey}
-      secondHotKey={props.secondHotKey}
+      hotKeys={props.hotKeys}
       className={props.className}
       onClick={props.onClick}
       isSelected={false}