cleaned up hook to support command menu

apps/studio/state/shortcuts/useShortcut.tsx

@@ -1,5 +1,6 @@
 import { useHotkeySequence } from '@tanstack/react-hotkeys'
-import { useCallback } from 'react'
+import { Fragment, useCallback } from 'react'
+import { KeyboardShortcut } from 'ui'
 import { useRegisterCommands } from 'ui-patterns/CommandMenu'
 
 import { SHORTCUT_DEFINITIONS, type ShortcutId } from './registry'
@@ -8,7 +9,14 @@ import type { ShortcutOptions } from './types'
 import { COMMAND_MENU_SECTIONS } from '@/components/interfaces/App/CommandMenu/CommandMenu.utils'
 import useLatest from '@/hooks/misc/useLatest'
 
-export function useShortcut(id: ShortcutId, callback: () => void, options?: ShortcutOptions) {
+interface UseShortcutOptions extends ShortcutOptions {
+  registerInCommandMenu?: boolean
+}
+
+const hotkeyToKeys = (hotkey: string): string[] =>
+  hotkey.split('+').map((part) => (part === 'Mod' ? 'Meta' : part))
+
+export function useShortcut(id: ShortcutId, callback: () => void, options?: UseShortcutOptions) {
   const snap = useShortcutStateSnapshot()
   const def = SHORTCUT_DEFINITIONS[id]
 
@@ -28,7 +36,23 @@ export function useShortcut(id: ShortcutId, callback: () => void, options?: Shor
 
   useRegisterCommands(
     COMMAND_MENU_SECTIONS.SHORTCUTS,
-    [{ id, name: def.label, action: stableAction }],
+    [
+      {
+        id,
+        name: def.label,
+        action: stableAction,
+        badge: () => (
+          <div className="flex items-center gap-1">
+            {def.sequence.map((step, i) => (
+              <Fragment key={i}>
+                {i > 0 && <span className="text-foreground-lighter text-[11px]">then</span>}
+                <KeyboardShortcut keys={hotkeyToKeys(step)} />
+              </Fragment>
+            ))}
+          </div>
+        ),
+      },
+    ],
     {
       enabled: enabledInCommandMenu,
       deps: depsInCommandMenu,