feat(ui): add ⌘+K command palette for quick nav and actions (#2159)

Co-authored-by: Willow (GHOST) <git@willow.sh>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

CONTRIBUTING.md

@@ -42,6 +42,7 @@ This focus helps guide our project decisions as a community and what we choose t
   - [Naming conventions](#naming-conventions)
   - [Vue components](#vue-components)
   - [Internal linking](#internal-linking)
+  - [Command palette](#command-palette)
   - [Cursor and navigation](#cursor-and-navigation)
 - [RTL Support](#rtl-support)
 - [Localization (i18n)](#localization-i18n)
@@ -400,6 +401,14 @@ For package links, use the auto-imported `packageRoute()` utility from `app/util
 > [!IMPORTANT]
 > Never construct package URLs as strings. The route structure uses separate `org` and `name` params, and `packageRoute()` handles the splitting correctly.
 
+### Command palette
+
+The command palette is a first-class navigation surface. When you add a new user-facing capability to the app, you should also register a corresponding command palette entry for it whenever that action or destination makes sense outside its immediate UI.
+
+- Add global entries in the command palette composables.
+- Add page- or component-scoped entries from the page/component that owns the capability.
+- Prefer palette entries for actions users may reasonably want to trigger from the keyboard or jump to directly.
+
 #### Available route names
 
 | Route name        | URL pattern                       | Parameters                |

app/app.vue

@@ -146,6 +146,8 @@ if (import.meta.client) {
       <NuxtPage />
     </div>
 
+    <CommandPalette />
+
     <AppFooter />
 
     <ScrollToTop />

app/components/AppFooter.vue

@@ -5,6 +5,7 @@ const route = useRoute()
 const isHome = computed(() => route.name === 'index')
 
 const discord = useDiscordLink()
+const { commandPaletteShortcutLabel } = usePlatformModifierKey()
 const modalRef = useTemplateRef('modalRef')
 const showModal = () => modalRef.value?.showModal?.()
 const closeModal = () => modalRef.value?.close?.()
@@ -51,14 +52,24 @@ const closeModal = () => modalRef.value?.close?.()
             </button>
 
             <Modal
+              id="keyboard-shortcuts-modal"
               ref="modalRef"
               :modalTitle="$t('footer.keyboard_shortcuts')"
               class="w-auto max-w-lg"
             >
+              <p class="mb-4 text-sm leading-relaxed text-fg-muted">
+                {{
+                  $t('shortcuts.command_palette_description', { ctrlKey: $t('shortcuts.ctrl_key') })
+                }}
+              </p>
               <p class="mb-2 font-mono text-fg-subtle">
                 {{ $t('shortcuts.section.global') }}
               </p>
               <ul class="mb-6 flex flex-col gap-2">
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">{{ commandPaletteShortcutLabel }}</kbd>
+                  <span>{{ $t('shortcuts.command_palette') }}</span>
+                </li>
                 <li class="flex gap-2 items-center">
                   <kbd class="kbd">/</kbd>
                   <span>{{ $t('shortcuts.focus_search') }}</span>

app/components/AppHeader.vue

@@ -4,6 +4,8 @@ import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
 import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 
 const discord = useDiscordLink()
+const { open: openCommandPalette } = useCommandPalette()
+const { commandPaletteShortcutLabel } = usePlatformModifierKey()
 
 withDefaults(
   defineProps<{
@@ -253,6 +255,24 @@ useShortcuts({
       <!-- Spacer when logo is hidden on desktop -->
       <span v-else class="hidden sm:block w-1" />
 
+      <ButtonBase
+        type="button"
+        variant="secondary"
+        class="hidden lg:inline-flex shrink-0 gap-2 px-2.5 me-3"
+        :aria-label="$t('shortcuts.command_palette')"
+        :title="$t('shortcuts.command_palette_description', { ctrlKey: $t('shortcuts.ctrl_key') })"
+        @click="openCommandPalette"
+      >
+        <span>{{ $t('command_palette.quick_actions') }}</span>
+        <span class="inline-flex items-center gap-1 text-xs text-fg-subtle">
+          <kbd
+            class="inline-flex items-center justify-center rounded border border-border bg-bg-muted px-1.5 py-0.5 font-mono text-[0.7rem] text-fg-muted"
+          >
+            {{ commandPaletteShortcutLabel }}
+          </kbd>
+        </span>
+      </ButtonBase>
+
       <!-- Center: Search bar + nav items -->
       <div
         class="flex-1 flex items-center md:gap-6"
@@ -288,7 +308,7 @@ useShortcuts({
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <div class="hidden sm:flex flex-shrink-0">
+      <div class="hidden sm:flex flex-shrink-0 items-center gap-2">
         <!-- Desktop: Explore link -->
         <LinkBase
           v-for="link in desktopLinks"