From 4ca1dd78724e8471adc7a8d2a43050b423f73fda Mon Sep 17 00:00:00 2001
From: TheGeneralist <180094941+thegeneralist01@users.noreply.github.com>
Date: Mon, 13 Jul 2026 14:28:22 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20focus=20search=20input=20on?=
 =?UTF-8?q?=20=E2=8C=98K/Ctrl+K?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a global keydown handler that focuses (and selects) the search
input when Meta+K or Ctrl+K is pressed. If the current view is not
'archive', switch to it first and focus the input after the next
render frame via a pendingSearchFocus ref + requestAnimationFrame.

The ⌘K hint badge in the toolbar was already present; this wires
the behaviour behind it.
---
 frontend/src/App.jsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 987e29d..4018dae 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -102,6 +102,8 @@ export default function App() {
   // ── Entry detail (shared between PreviewPanel and ContextRail) ──────────
   const [entryDetail, setEntryDetail] = useState(null)
   const detailSeqRef = useRef(0)
+  const searchInputRef = useRef(null)
+  const pendingSearchFocus = useRef(false)
 
   const humanizeTags = currentUser?.humanize_slugs ?? false;
 
@@ -266,6 +268,34 @@ export default function App() {
     setSelectedEntryUid(prev => prev === entryUid ? null : prev)
   }, [])
 
+  // ⌘K / Ctrl+K: focus the search input, switching to archive view first if needed.
+  useEffect(() => {
+    const handler = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault()
+        if (view === 'archive') {
+          searchInputRef.current?.focus()
+          searchInputRef.current?.select()
+        } else {
+          pendingSearchFocus.current = true
+          setView('archive')
+        }
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [view])
+
+  // After switching to archive view via ⌘K, focus the search input once rendered.
+  useEffect(() => {
+    if (view === 'archive' && pendingSearchFocus.current) {
+      pendingSearchFocus.current = false
+      requestAnimationFrame(() => {
+        searchInputRef.current?.focus()
+        searchInputRef.current?.select()
+      })
+    }
+  }, [view])
   const handleCaptureClick = useCallback(() => {
     setCaptureDialogOpen(true)
   }, [])
@@ -349,6 +379,7 @@ export default function App() {
                     </svg>
                   </span>
                   <input
+                    ref={searchInputRef}
                     className="search-input"
                     type="search"
                     aria-label="Search archive"