feat(ui): add Ctrl+N/P navigation in command palette

app/components/CommandPalette.client.vue

@@ -173,7 +173,11 @@ function handleGlobalKeydown(event: KeyboardEvent) {
 
   if (!isOpen.value) return
 
-  if (event.key === 'ArrowDown') {
+  const isCtrlOnly = event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey
+  const isNextShortcut = isCtrlOnly && event.key.toLowerCase() === 'n'
+  const isPrevShortcut = isCtrlOnly && event.key.toLowerCase() === 'p'
+
+  if (event.key === 'ArrowDown' || isNextShortcut) {
     event.preventDefault()
     const currentIndex = getCommandElements().findIndex(el => el === document.activeElement)
     const nextIndex =
@@ -182,7 +186,7 @@ function handleGlobalKeydown(event: KeyboardEvent) {
     return
   }
 
-  if (event.key === 'ArrowUp') {
+  if (event.key === 'ArrowUp' || isPrevShortcut) {
     event.preventDefault()
     const currentIndex = getCommandElements().findIndex(el => el === document.activeElement)
     if (currentIndex <= 0) {

i18n/locales/en.json

@@ -85,7 +85,7 @@
     "quick_actions": "jump to...",
     "subtitle": "navigate across npmx and switch settings quickly",
     "subtitle_languages": "choose a language or help improve translations",
-    "instructions": "Type to filter commands. Use the arrow keys to move through results and Enter to run a command.",
+    "instructions": "Type to filter commands. Use the arrow keys or Ctrl+N/P to move through results and Enter to run a command.",
     "input_label": "Command palette search",
     "results_label": "Command results",
     "placeholder": "type a command...",

test/nuxt/components/CommandPalette.spec.ts

@@ -236,6 +236,52 @@ describe('CommandPalette', () => {
     expect(document.activeElement).toBe(input)
   })
 
+  it('moves focus through commands with Ctrl+N and Ctrl+P', async () => {
+    await mountPalette()
+
+    const input = document.getElementById('command-palette-modal-input')
+    const commands = Array.from(
+      document.querySelectorAll<HTMLElement>('[data-command-item="true"]'),
+    )
+
+    expect(document.activeElement).toBe(input)
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ctrlKey: true, key: 'n' }))
+    await nextTick()
+    expect(document.activeElement).toBe(commands[0])
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ctrlKey: true, key: 'n' }))
+    await nextTick()
+    expect(document.activeElement).toBe(commands[1])
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ctrlKey: true, key: 'p' }))
+    await nextTick()
+    expect(document.activeElement).toBe(commands[0])
+
+    document.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, ctrlKey: true, key: 'p' }))
+    await nextTick()
+    expect(document.activeElement).toBe(input)
+  })
+
+  it('does not navigate with Ctrl+N/P when additional modifiers are held', async () => {
+    await mountPalette()
+
+    const input = document.getElementById('command-palette-modal-input')
+    expect(document.activeElement).toBe(input)
+
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { bubbles: true, ctrlKey: true, altKey: true, key: 'n' }),
+    )
+    await nextTick()
+    expect(document.activeElement).toBe(input)
+
+    document.dispatchEvent(
+      new KeyboardEvent('keydown', { bubbles: true, ctrlKey: true, shiftKey: true, key: 'p' }),
+    )
+    await nextTick()
+    expect(document.activeElement).toBe(input)
+  })
+
   it('does not change the active command when another item is hovered', async () => {
     await mountPalette()