Commands with optional shortcuts/hotkeys

[OliverJAsh]

A common UX pattern is the "command palette" (cmd+k). where the listed commands may or may not have associated keyboard shortcuts (see for example Linear, VS Code and Chrome Dev Tools).

It seems TanStack Hotkeys is very close to enabling this except for the fact that the primary unit is hotkeys rather than commands, i.e. it's not clear how you would define a command without a shortcut/hotkey.

I almost wonder whether the hook should be useCommand (with optional hotkey) instead of useHotkey. 🤔

Example from Linear. Observe how some commands don't have shortcuts:

[KevinVandy]

App hotkeys cover the listing part now. They shipped in #175, released in @tanstack/hotkeys 0.12.0 (@tanstack/react-hotkeys 0.14.0). A declaration can have hotkey: null, so a command can exist without a shortcut, and users can bind one later:

export const appHotkeys = defineAppHotkeys({
  'doc.save': { hotkey: 'Mod+S', meta: { name: 'Save' } },
  'issue.assign': { hotkey: null, meta: { name: 'Assign to…' } },
})

useAppHotkeyList() returns every declaration with a status, including 'unbound', so a command palette can list both kinds. Guide: App Hotkeys.

Running a command from the palette still calls your own function, because app hotkeys don't store callbacks. I'm leaving this open while we think about whether app hotkeys should be runnable by ID.