From 360fa0e2a1515a6abfe0e6b2a51dd650bf8ca15d Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 3 Jun 2026 13:01:09 +0000
Subject: [PATCH] feat: add visual keyboard shortcut hint to search bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a visual hint (⌘F on Mac, Ctrl F elsewhere) inside the library
search bar to improve discoverability of the existing hotkey. The hint
disappears when the user types a query.

Co-authored-by: jspann21 <179991454+jspann21@users.noreply.github.com>
---
 .Jules/palette.md                                 |  3 +++
 src/features/library/components/LibraryHeader.tsx | 11 +++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..bebc6a0
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-06-03 - Search Shortcut Accessibility
+**Learning:** Adding dynamic keyboard shortcut hints (`⌘F` on Mac, `Ctrl F` on Windows/Linux) inside the search bar significantly improves discoverability without cluttering the UI. When checking for platform (`navigator.platform`), adding a `typeof navigator !== 'undefined'` safety check is vital to prevent potential SSR crashes, even if the app is currently a SPA.
+**Action:** Next time I add OS-specific visual hints, I will ensure proper SSR-safe navigator checks are included, and ensure padding adjustments are made for interactive elements replacing placeholders.
diff --git a/src/features/library/components/LibraryHeader.tsx b/src/features/library/components/LibraryHeader.tsx
index 53fec2a..6b7e0c6 100644
--- a/src/features/library/components/LibraryHeader.tsx
+++ b/src/features/library/components/LibraryHeader.tsx
@@ -57,6 +57,9 @@ export function LibraryHeader({
 }: LibraryHeaderProps) {
   const searchInputRef = useRef<HTMLInputElement>(null)
 
+  const isMac = typeof navigator !== 'undefined' ? navigator.platform.toLowerCase().includes('mac') : false
+  const shortcutText = isMac ? '⌘F' : 'Ctrl F'
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.defaultPrevented || isEditableElement(event.target)) return
@@ -80,7 +83,7 @@ export function LibraryHeader({
             type="text"
             aria-label="Search your library"
             placeholder="Search your library..."
-            className="w-full rounded-xl border border-slate-200 bg-white py-2 pl-10 pr-10 text-sm text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-accent-500 focus:ring-2 focus:ring-accent-500/20 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
+            className="w-full rounded-xl border border-slate-200 bg-white py-2 pl-10 pr-16 text-sm text-slate-900 outline-none transition-all placeholder:text-slate-400 focus:border-accent-500 focus:ring-2 focus:ring-accent-500/20 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
             value={query}
             onChange={(event) => onSetQuery(event.target.value)}
           />
@@ -94,7 +97,11 @@ export function LibraryHeader({
             >
               <X size={14} />
             </button>
-          ) : null}
+          ) : (
+            <div className="pointer-events-none absolute right-3 top-1/2 flex -translate-y-1/2 items-center rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[10px] font-medium text-slate-400 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-500">
+              {shortcutText}
+            </div>
+          )}
         </div>
       </div>
       <div className="flex items-center gap-2">