feat(ui): add visible keyboard shortcut hints to the command palette

app/components/CommandPalette.client.vue

@@ -303,7 +303,7 @@ useEventListener(document, 'keydown', handleGlobalKeydown)
           {{ statusMessage }}
         </p>
 
-        <div class="border-b border-border/70 bg-bg-subtle/60 px-4 py-4 sm:px-5">
+        <div class="bg-bg-subtle/60 px-4 py-4 sm:px-5">
           <button
             v-if="viewMeta.canGoBack"
             type="button"
@@ -332,6 +332,41 @@ useEventListener(document, 'keydown', handleGlobalKeydown)
           />
         </div>
 
+        <div
+          class="flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border/70 bg-bg-subtle/60 px-4 py-3 text-xs text-fg-subtle sm:px-5"
+          data-command-palette-footer="true"
+        >
+          <span class="inline-flex items-center gap-1.5">
+            <kbd
+              class="inline-flex min-w-6 items-center justify-center rounded border border-border bg-bg px-1.5 py-0.5 font-mono text-[0.7rem] text-fg-muted"
+            >
+              ↑
+            </kbd>
+            <kbd
+              class="inline-flex min-w-6 items-center justify-center rounded border border-border bg-bg px-1.5 py-0.5 font-mono text-[0.7rem] text-fg-muted"
+            >
+              ↓
+            </kbd>
+            <span class="lowercase">{{ $t('command_palette.footer.navigate') }}</span>
+          </span>
+          <span class="inline-flex items-center gap-1.5">
+            <kbd
+              class="inline-flex min-w-6 items-center justify-center rounded border border-border bg-bg px-1.5 py-0.5 font-mono text-[0.7rem] text-fg-muted"
+            >
+              ↵
+            </kbd>
+            <span class="lowercase">{{ $t('command_palette.footer.select') }}</span>
+          </span>
+          <span class="inline-flex items-center gap-1.5">
+            <kbd
+              class="inline-flex min-w-6 items-center justify-center rounded border border-border bg-bg px-1.5 py-0.5 font-mono text-[0.7rem] text-fg-muted"
+            >
+              Esc
+            </kbd>
+            <span class="lowercase">{{ $t('command_palette.footer.close') }}</span>
+          </span>
+        </div>
+
         <div
           :id="RESULTS_ID"
           class="max-h-[60vh] overflow-y-auto bg-bg-muted/30 px-2 py-2 sm:px-3 sm:py-3"

i18n/locales/en.json

@@ -99,6 +99,11 @@
     "current": "current",
     "here": "you are here",
     "connected": "connected",
+    "footer": {
+      "navigate": "to navigate",
+      "select": "to select",
+      "close": "to close"
+    },
     "state": {
       "on": "on",
       "off": "off"

i18n/schema.json

@@ -301,6 +301,21 @@
         "connected": {
           "type": "string"
         },
+        "footer": {
+          "type": "object",
+          "properties": {
+            "navigate": {
+              "type": "string"
+            },
+            "select": {
+              "type": "string"
+            },
+            "close": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
         "state": {
           "type": "object",
           "properties": {

test/nuxt/components/CommandPalette.spec.ts

@@ -98,6 +98,17 @@ describe('CommandPalette', () => {
     expect(input?.getAttribute('aria-controls')).toBe('command-palette-modal-results')
   })
 
+  it('shows keyboard shortcut hints in the palette footer', async () => {
+    await mountPalette()
+
+    const footer = document.querySelector('[data-command-palette-footer="true"]')
+
+    expect(footer).not.toBeNull()
+    expect(footer?.textContent).toContain('to navigate')
+    expect(footer?.textContent).toContain('to select')
+    expect(footer?.textContent).toContain('to close')
+  })
+
   it('updates the live region when the query changes', async () => {
     await mountPalette()