feat(ui): add command palette for quick navigation and actions

Author: serhalp

app/app.vue

@@ -144,6 +144,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?.()
@@ -52,10 +53,17 @@ const closeModal = () => modalRef.value?.close?.()
               :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') }}
+              </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

@@ -6,6 +6,8 @@ import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 
 const keyboardShortcuts = useKeyboardShortcuts()
 const discord = useDiscordLink()
+const { open: openCommandPalette } = useCommandPalette()
+const { commandPaletteShortcutLabel } = usePlatformModifierKey()
 
 withDefaults(
   defineProps<{
@@ -258,6 +260,20 @@ onKeyStroke(
       <!-- 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')"
+        @click="openCommandPalette"
+      >
+        <span>{{ $t('command_palette.quick_actions') }}</span>
+        <span class="inline-flex items-center gap-1 text-xs text-fg-subtle">
+          <kbd class="header-kbd">{{ commandPaletteShortcutLabel }}</kbd>
+        </span>
+      </ButtonBase>
+
       <!-- Center: Search bar + nav items -->
       <div
         class="flex-1 flex items-center md:gap-6"
@@ -293,7 +309,7 @@ onKeyStroke(
       </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"
@@ -335,3 +351,9 @@ onKeyStroke(
     <HeaderMobileMenu :links="mobileLinks" v-model:open="showMobileMenu" />
   </header>
 </template>
+
+<style scoped>
+.header-kbd {
+  @apply 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;
+}
+</style>