feat: ctrl+k to focus search

Author: ls-root

app/app.vue

@@ -47,22 +47,36 @@ if (import.meta.server) {
   setJsonLd(createWebSiteSchema())
 }
 
+function focusSearchOrNavigate() {
+  const searchInput = document.querySelector<HTMLInputElement>(
+    'input[type="search"], input[name="q"]',
+  )
+
+  if (searchInput) {
+    searchInput.focus()
+    return
+  }
+
+  router.push({ name: 'search' })
+}
+
 onKeyDown(
   '/',
   e => {
     if (isEditableElement(e.target)) return
     e.preventDefault()
+    focusSearchOrNavigate()
+  },
+  { dedupe: true },
+)
 
-    const searchInput = document.querySelector<HTMLInputElement>(
-      'input[type="search"], input[name="q"]',
-    )
-
-    if (searchInput) {
-      searchInput.focus()
-      return
-    }
-
-    router.push({ name: 'search' })
+onKeyDown(
+  // Explicitly check Ctrl+K for broader compatibility (especially Firefox)
+  e => e.ctrlKey && e.key === 'k',
+  e => {
+    if (isEditableElement(e.target)) return
+    e.preventDefault()
+    focusSearchOrNavigate()
   },
   { dedupe: true },
 )

app/components/AppFooter.vue

@@ -48,6 +48,10 @@ const showModal = () => modalRef.value?.showModal?.()
                 <kbd class="kbd">/</kbd>
                 <span>{{ $t('shortcuts.focus_search') }}</span>
               </li>
+              <li class="flex gap-2 items-center">
+                <kbd class="kbd">Ctrl</kbd>+<kbd class="kbd">K</kbd>
+                <span>{{ $t('shortcuts.focus_search') }}</span>
+              </li>
               <li class="flex gap-2 items-center">
                 <kbd class="kbd">?</kbd>
                 <span>{{ $t('shortcuts.show_kbd_hints') }}</span>