feat: Add desktop search bar with keyboard shortcut support

hannesrudolph · hannesrudolph · commit 53eec9d94be4 · 2025-07-25T19:12:40.000-06:00
- Always show expanded search bar on desktop (≥997px width)
- Add keyboard shortcut hint text in search placeholder
- Implement ⌘K/Ctrl+K keyboard shortcut to focus search
- Create SearchKeyboardShortcut component for global key handling
- Update Layout to include keyboard shortcut functionality
- Maintain mobile search behavior unchanged
diff --git a/src/components/SearchKeyboardShortcut/index.js b/src/components/SearchKeyboardShortcut/index.js
@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+
+export function useSearchKeyboardShortcut() {
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      // Check for Cmd+K on Mac or Ctrl+K on Windows/Linux
+      const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+      const isShortcut = isMac ? event.metaKey && event.key === 'k' : event.ctrlKey && event.key === 'k';
+      
+      if (isShortcut) {
+        event.preventDefault();
+        
+        // Find the search input - it should have the class 'navbar__search-input'
+        const searchInput = document.querySelector('.navbar__search-input');
+        
+        if (searchInput) {
+          searchInput.focus();
+          // If the search modal is not visible, we might need to click the search button first
+          const searchButton = document.querySelector('.navbar__search button');
+          if (searchButton && !searchInput.offsetParent) {
+            searchButton.click();
+            // Wait a bit for the modal to open, then focus the input
+            setTimeout(() => {
+              searchInput.focus();
+            }, 100);
+          }
+        }
+      }
+    };
+
+    // Add event listener
+    document.addEventListener('keydown', handleKeyDown);
+
+    // Cleanup
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+}
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -1186,6 +1186,13 @@ body {
   margin: 0 !important;
 }
 
+/* Search wrapper for input and shortcut hint */
+.navbar__search-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
 /* Base search input styling */
 .navbar__search-input {
   width: 40px !important;
@@ -1211,22 +1218,108 @@ body {
   background-size: 18px 18px !important;
 }
 
+/* Desktop: Always expanded */
+@media (min-width: 997px) {
+  .navbar__search-input {
+    width: 280px !important;
+    padding: 0 80px 0 40px !important; /* Extra right padding for shortcut hint */
+    background-position: 12px center !important;
+    cursor: text !important;
+  }
+}
+
+/* Keyboard shortcut hint */
+.navbar__search-shortcut {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: none;
+  align-items: center;
+  gap: 2px;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground) / 0.6);
+  pointer-events: none;
+  font-family: Inter, sans-serif;
+}
+
+/* Show shortcut hint on desktop */
+@media (min-width: 997px) {
+  .navbar__search-shortcut {
+    display: flex;
+  }
+}
+
+/* Keyboard key styling */
+.navbar__search-key {
+  background: hsl(var(--background) / 0.8);
+  border: 1px solid hsl(var(--border) / 0.4);
+  border-radius: 3px;
+  padding: 2px 6px;
+  font-size: 0.7rem;
+  font-weight: 500;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+/* Dark mode keyboard key */
+[data-theme='dark'] .navbar__search-key {
+  background: hsl(var(--background) / 0.4);
+  border-color: hsl(var(--border) / 0.3);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* Add the shortcut hint HTML via CSS pseudo-element */
+.navbar__search::after {
+  content: '';
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: none;
+  pointer-events: none;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground) / 0.6);
+  font-family: Inter, sans-serif;
+}
+
+/* Show shortcut text on desktop */
+@media (min-width: 997px) {
+  .navbar__search::after {
+    content: '⌘K';
+    display: block;
+    background: hsl(var(--background) / 0.8);
+    border: 1px solid hsl(var(--border) / 0.4);
+    border-radius: 3px;
+    padding: 2px 6px;
+    font-size: 0.7rem;
+    font-weight: 500;
+  }
+  
+  /* Windows/Linux shortcut */
+  body:not(.mac) .navbar__search::after {
+    content: 'Ctrl+K';
+  }
+}
+
 /* Dark mode search icon */
 [data-theme='dark'] .navbar__search-input {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E") !important;
   background-color: hsl(var(--background) / 0.6) !important;
   border-color: hsl(var(--border) / 0.4) !important;
 }
 
-/* Expanded state */
-.navbar__search-input:focus,
-.navbar__search-input:hover {
-  width: 280px !important;
-  padding: 0 1rem 0 40px !important;
-  background-position: 12px center !important;
-  cursor: text !important;
-  background-color: hsl(var(--background) / 0.95) !important;
-  border-color: hsl(var(--border) / 0.8) !important;
+/* Hover state (mobile only now) */
+@media (max-width: 996px) {
+  .navbar__search-input:focus,
+  .navbar__search-input:hover {
+    width: calc(100vw - 140px) !important;
+    max-width: 280px !important;
+    padding: 0 1rem 0 40px !important;
+    background-position: 12px center !important;
+    cursor: text !important;
+    background-color: hsl(var(--background) / 0.95) !important;
+    border-color: hsl(var(--border) / 0.8) !important;
+  }
 }
 
 /* Focus state enhancements */
@@ -1235,17 +1328,27 @@ body {
   box-shadow: 0 0 0 2px hsl(var(--foreground) / 0.15) !important;
 }
 
+/* Desktop focus state */
+@media (min-width: 997px) {
+  .navbar__search-input:focus {
+    background-color: hsl(var(--background) / 0.95) !important;
+    border-color: hsl(var(--border) / 0.8) !important;
+  }
+}
+
 /* Hide placeholder text */
 .navbar__search-input::placeholder {
   color: transparent !important;
   opacity: 0 !important;
 }
 
-/* Show placeholder when expanded */
-.navbar__search-input:focus::placeholder,
-.navbar__search-input:hover::placeholder {
-  color: hsl(var(--muted-foreground)) !important;
-  opacity: 0.6 !important;
+/* Show placeholder when expanded on mobile */
+@media (max-width: 996px) {
+  .navbar__search-input:focus::placeholder,
+  .navbar__search-input:hover::placeholder {
+    color: hsl(var(--muted-foreground)) !important;
+    opacity: 0.6 !important;
+  }
 }
 
 /* Dark mode adjustments */
@@ -1261,6 +1364,13 @@ body {
               0 2px 12px hsl(0 0% 0% / 0.2) !important;
 }
 
+/* Dark mode shortcut hint */
+[data-theme='dark'] .navbar__search::after {
+  background: hsl(var(--background) / 0.4);
+  border-color: hsl(var(--border) / 0.3);
+  color: hsl(var(--muted-foreground) / 0.5);
+}
+
 /* Remove any conflicting button styles */
 .navbar__search-button {
   display: none !important;
@@ -1301,13 +1411,25 @@ body {
   min-width: 40px !important;
 }
 
-/* Expanded DocSearch button */
-.DocSearch-Button:hover,
-.DocSearch-Button:focus {
-  width: auto !important;
-  padding: 0 1rem !important;
-  background: hsl(var(--background) / 0.95) !important;
-  border-color: hsl(var(--border) / 0.8) !important;
+/* Desktop: Always expanded DocSearch */
+@media (min-width: 997px) {
+  .DocSearch-Button {
+    width: auto !important;
+    padding: 0 1rem !important;
+    background: hsl(var(--background) / 0.95) !important;
+    border-color: hsl(var(--border) / 0.8) !important;
+  }
+}
+
+/* Mobile: Hover to expand */
+@media (max-width: 996px) {
+  .DocSearch-Button:hover,
+  .DocSearch-Button:focus {
+    width: auto !important;
+    padding: 0 1rem !important;
+    background: hsl(var(--background) / 0.95) !important;
+    border-color: hsl(var(--border) / 0.8) !important;
+  }
 }
 
 /* Search icon styling */
@@ -1318,28 +1440,69 @@ body {
   margin: 0 !important;
 }
 
-/* Show placeholder on hover/focus */
+/* Placeholder text */
 .DocSearch-Button-Placeholder {
   display: none !important;
   font-size: 0.875rem !important;
   color: hsl(var(--muted-foreground)) !important;
   margin-left: 0.5rem !important;
 }
 
-.DocSearch-Button:hover .DocSearch-Button-Placeholder,
-.DocSearch-Button:focus .DocSearch-Button-Placeholder {
-  display: inline !important;
+/* Desktop: Always show placeholder */
+@media (min-width: 997px) {
+  .DocSearch-Button-Placeholder {
+    display: inline !important;
+  }
 }
 
-/* Hide keys on small button */
+/* Mobile: Show on hover/focus */
+@media (max-width: 996px) {
+  .DocSearch-Button:hover .DocSearch-Button-Placeholder,
+  .DocSearch-Button:focus .DocSearch-Button-Placeholder {
+    display: inline !important;
+  }
+}
+
+/* Keyboard shortcut keys */
 .DocSearch-Button-Keys {
   display: none !important;
 }
 
-.DocSearch-Button:hover .DocSearch-Button-Keys,
-.DocSearch-Button:focus .DocSearch-Button-Keys {
-  display: flex !important;
-  margin-left: auto !important;
+/* Desktop: Always show keys */
+@media (min-width: 997px) {
+  .DocSearch-Button-Keys {
+    display: flex !important;
+    margin-left: auto !important;
+    gap: 2px !important;
+  }
+  
+  /* Style the key elements */
+  .DocSearch-Button-Key {
+    background: hsl(var(--background) / 0.8) !important;
+    border: 1px solid hsl(var(--border) / 0.4) !important;
+    border-radius: 3px !important;
+    padding: 2px 6px !important;
+    font-size: 0.7rem !important;
+    font-weight: 500 !important;
+    color: hsl(var(--muted-foreground) / 0.6) !important;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
+  }
+  
+  /* Dark mode keys */
+  [data-theme='dark'] .DocSearch-Button-Key {
+    background: hsl(var(--background) / 0.4) !important;
+    border-color: hsl(var(--border) / 0.3) !important;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
+  }
+}
+
+/* Mobile: Show on hover/focus */
+@media (max-width: 996px) {
+  .DocSearch-Button:hover .DocSearch-Button-Keys,
+  .DocSearch-Button:focus .DocSearch-Button-Keys {
+    display: flex !important;
+    margin-left: auto !important;
+  }
 }
 
 /* Dark mode adjustments */
diff --git a/src/theme/Layout/index.js b/src/theme/Layout/index.js
@@ -1,8 +1,11 @@
 import React from 'react';
 import OriginalLayout from '@theme-original/Layout';
 import { AnimatedBackground } from '../../components/AnimatedBackground';
+import { useSearchKeyboardShortcut } from '../../components/SearchKeyboardShortcut';
 
 export default function Layout(props) {
+  useSearchKeyboardShortcut();
+  
   return (
     <>
       <AnimatedBackground />
