2294 feat(frontend): styling shortcut keys (#2336)

* 2294 feat(frontend): styling shortcut keys

* 2294 fix(front): pr requested changes

* Fix component interface

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/command-menu/components/CommandMenu.tsx

@@ -88,13 +88,9 @@ export const CommandMenu = () => {
   const activities = activityData?.searchResults ?? [];
 
   const checkInShortcuts = (cmd: Command, search: string) => {
-    if (cmd.shortcuts && cmd.shortcuts.length > 0) {
-      return cmd.shortcuts
-        .join('')
-        .toLowerCase()
-        .includes(search.toLowerCase());
-    }
-    return false;
+    return (cmd.firstHotKey + (cmd.secondHotKey ?? ''))
+      .toLowerCase()
+      .includes(search.toLowerCase());
   };
 
   const checkInLabels = (cmd: Command, search: string) => {
@@ -144,7 +140,8 @@ export const CommandMenu = () => {
               Icon={cmd.Icon}
               label={cmd.label}
               onClick={cmd.onCommandClick}
-              shortcuts={cmd.shortcuts || []}
+              firstHotKey={cmd.firstHotKey}
+              secondHotKey={cmd.secondHotKey}
             />
           ))}
         </CommandGroup>
@@ -156,7 +153,8 @@ export const CommandMenu = () => {
               label={cmd.label}
               Icon={cmd.Icon}
               onClick={cmd.onCommandClick}
-              shortcuts={cmd.shortcuts || []}
+              firstHotKey={cmd.firstHotKey}
+              secondHotKey={cmd.secondHotKey}
             />
           ))}
         </CommandGroup>

front/src/modules/command-menu/components/CommandMenuItem.tsx

@@ -12,7 +12,8 @@ export type CommandMenuItemProps = {
   key: string;
   onClick?: () => void;
   Icon?: IconComponent;
-  shortcuts?: Array<string>;
+  firstHotKey?: string;
+  secondHotKey?: string;
 };
 
 export const CommandMenuItem = ({
@@ -20,7 +21,8 @@ export const CommandMenuItem = ({
   to,
   onClick,
   Icon,
-  shortcuts,
+  firstHotKey,
+  secondHotKey,
 }: CommandMenuItemProps) => {
   const navigate = useNavigate();
   const { closeCommandMenu } = useCommandMenu();
@@ -46,7 +48,8 @@ export const CommandMenuItem = ({
     <MenuItemCommand
       LeftIcon={Icon}
       text={label}
-      command={shortcuts ? shortcuts.join(' then ') : ''}
+      firstHotKey={firstHotKey}
+      secondHotKey={secondHotKey}
       onClick={onItemClick}
     />
   );

front/src/modules/command-menu/constants/commandMenuCommands.ts

@@ -13,35 +13,40 @@ export const commandMenuCommands: Command[] = [
     to: '/people',
     label: 'Go to People',
     type: CommandType.Navigate,
-    shortcuts: ['G', 'P'],
+    firstHotKey: 'G',
+    secondHotKey: 'P',
     Icon: IconUser,
   },
   {
     to: '/companies',
     label: 'Go to Companies',
     type: CommandType.Navigate,
-    shortcuts: ['G', 'C'],
+    firstHotKey: 'G',
+    secondHotKey: 'C',
     Icon: IconBuildingSkyscraper,
   },
   {
     to: '/opportunities',
     label: 'Go to Opportunities',
     type: CommandType.Navigate,
-    shortcuts: ['G', 'O'],
+    firstHotKey: 'G',
+    secondHotKey: 'O',
     Icon: IconTargetArrow,
   },
   {
     to: '/settings/profile',
     label: 'Go to Settings',
     type: CommandType.Navigate,
-    shortcuts: ['G', 'S'],
+    firstHotKey: 'G',
+    secondHotKey: 'S',
     Icon: IconSettings,
   },
   {
     to: '/tasks',
     label: 'Go to Tasks',
     type: CommandType.Navigate,
-    shortcuts: ['G', 'T'],
+    firstHotKey: 'G',
+    secondHotKey: 'T',
     Icon: IconCheckbox,
   },
 ];

front/src/modules/command-menu/types/Command.ts

@@ -10,6 +10,7 @@ export type Command = {
   label: string;
   type: CommandType.Navigate | CommandType.Create;
   Icon?: IconComponent;
-  shortcuts?: string[];
+  firstHotKey?: string;
+  secondHotKey?: string;
   onCommandClick?: () => void;
 };