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-front/src/modules/ui/layout/right-drawer/utils/mapRightDrawerPageToCommandMenuPage.ts

@@ -1,4 +1,4 @@
-import { CommandMenuPages } from '@/command-menu/components/CommandMenuPages';
+import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 
 export const mapRightDrawerPageToCommandMenuPage = (

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -14,6 +14,7 @@ import { useRecoilState } from 'recoil';
 import { capitalize } from 'twenty-shared';
 import {
   IconComponent,
+  Label,
   MOBILE_VIEWPORT,
   Pill,
   TablerIconsProps,
@@ -163,13 +164,16 @@ const StyledItemCount = styled.span`
 
 const StyledKeyBoardShortcut = styled.span`
   align-items: center;
-  border-radius: 4px;
-  color: ${({ theme }) => theme.font.color.light};
   display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: ${({ theme }) => theme.spacing(4)};
   justify-content: center;
-  letter-spacing: 1px;
-  margin-left: auto;
-  visibility: hidden;
+  width: ${({ theme }) => theme.spacing(4)};
+
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  border: 1px solid ${({ theme }) => theme.border.color.strong};
+  background: ${({ theme }) => theme.background.transparent.lighter};
 `;
 
 const StyledNavigationDrawerItemContainer = styled.div`
@@ -339,7 +343,7 @@ export const NavigationDrawerItem = ({
           {keyboard && (
             <NavigationDrawerAnimatedCollapseWrapper>
               <StyledKeyBoardShortcut className="keyboard-shortcuts">
-                {keyboard}
+                <Label>{keyboard}</Label>
               </StyledKeyBoardShortcut>
             </NavigationDrawerAnimatedCollapseWrapper>
           )}

packages/twenty-front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts

@@ -32,6 +32,10 @@ export const useScopedHotkeys = (
     ? options.preventDefault === true
     : true;
 
+  const ignoreModifiers = isDefined(options?.ignoreModifiers)
+    ? options.ignoreModifiers === true
+    : false;
+
   return useHotkeys(
     keys,
     (keyboardEvent, hotkeysEvent) => {
@@ -52,6 +56,7 @@ export const useScopedHotkeys = (
     {
       enableOnContentEditable,
       enableOnFormTags,
+      ignoreModifiers,
     },
     dependencies,
   );