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/navigation/components/MainNavigationDrawerItems.tsx

@@ -1,6 +1,6 @@
 import { useLocation } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState } from 'recoil';
-import { IconSearch, IconSettings, getOsControlSymbol } from 'twenty-ui';
+import { IconSearch, IconSettings } from 'twenty-ui';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CurrentWorkspaceMemberFavoritesFolders } from '@/favorites/components/CurrentWorkspaceMemberFavoritesFolders';
@@ -28,7 +28,6 @@ const StyledInnerContainer = styled.div`
 
 export const MainNavigationDrawerItems = () => {
   const isMobile = useIsMobile();
-  const { toggleCommandMenu } = useCommandMenu();
   const location = useLocation();
   const setNavigationMemorizedUrl = useSetRecoilState(
     navigationMemorizedUrlState,
@@ -42,6 +41,8 @@ export const MainNavigationDrawerItems = () => {
 
   const { t } = useLingui();
 
+  const { openRecordsSearchPage } = useCommandMenu();
+
   return (
     <>
       {!isMobile && (
@@ -49,8 +50,8 @@ export const MainNavigationDrawerItems = () => {
           <NavigationDrawerItem
             label={t`Search`}
             Icon={IconSearch}
-            onClick={toggleCommandMenu}
-            keyboard={[getOsControlSymbol(), 'K']}
+            onClick={openRecordsSearchPage}
+            keyboard={['/']}
           />
           <NavigationDrawerItem
             label={t`Settings`}

packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx

@@ -17,7 +17,7 @@ type NavigationBarItemName = 'main' | 'search' | 'tasks' | 'settings';
 
 export const MobileNavigationBar = () => {
   const [isCommandMenuOpened] = useRecoilState(isCommandMenuOpenedState);
-  const { closeCommandMenu, openCommandMenu } = useCommandMenu();
+  const { closeCommandMenu, openRecordsSearchPage } = useCommandMenu();
   const isSettingsPage = useIsSettingsPage();
   const [isNavigationDrawerExpanded, setIsNavigationDrawerExpanded] =
     useRecoilState(isNavigationDrawerExpandedState);
@@ -53,12 +53,7 @@ export const MobileNavigationBar = () => {
     {
       name: 'search',
       Icon: IconSearch,
-      onClick: () => {
-        if (!isCommandMenuOpened) {
-          openCommandMenu();
-        }
-        setIsNavigationDrawerExpanded(false);
-      },
+      onClick: openRecordsSearchPage,
     },
     {
       name: 'settings',