feat: extend rundown shortcuts

apps/client/src/common/components/dropdown-menu/DropdownMenu.module.scss

@@ -31,10 +31,11 @@
   outline: 0;
   cursor: default;
   padding-block: 0.5rem;
-  padding-inline: 1rem 2rem;
+  padding-inline: 1rem;
 
   display: flex;
-  gap: 0.5rem;
+  justify-content: space-between;
+  gap: 1rem;
   line-height: 1em;
 
   svg {
@@ -69,6 +70,18 @@
   }
 }
 
+.label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.shortcut {
+  color: $gray-500;
+  font-size: calc(1rem - 4px);
+  letter-spacing: 0.02em;
+}
+
 .separator {
   margin: 0.25rem 0.75rem;
   height: 1px;

apps/client/src/common/components/dropdown-menu/DropdownMenu.tsx

@@ -11,6 +11,7 @@ type DropdownMenuItem = {
   icon?: IconType;
   disabled?: boolean;
   onClick: () => void;
+  shortcut?: string;
 };
 
 export type DropdownMenuOption = DropdownMenuItemDivider | DropdownMenuItem;
@@ -38,8 +39,11 @@ export function DropdownMenu({ items, children, ...triggerProps }: PropsWithChil
                   disabled={item.disabled}
                   data-type={item.type}
                 >
-                  {item.icon && <item.icon />}
-                  {item.label}
+                  <span className={style.label}>
+                    {item.icon && <item.icon />}
+                    {item.label}
+                  </span>
+                  {item.shortcut && <span className={style.shortcut}>{item.shortcut}</span>}
                 </BaseMenu.Item>
               );
             })}
@@ -75,8 +79,11 @@ export function PositionedDropdownMenu({ items, isOpen, position, onClose }: Pos
               }
               return (
                 <BaseMenu.Item key={index} className={style.item} onClick={item.onClick} disabled={item.disabled}>
-                  {item.icon && <item.icon />}
-                  {item.label}
+                  <span className={style.label}>
+                    {item.icon && <item.icon />}
+                    {item.label}
+                  </span>
+                  {item.shortcut && <span className={style.shortcut}>{item.shortcut}</span>}
                 </BaseMenu.Item>
               );
             })}