feat: context aware search key binding

Ctrl+k is a default algolia search shortcut. On the index page we
intecept it to work with the main search instead.

Author: Piotr1215

docs/index.mdx

@@ -25,12 +25,38 @@ export const InlineSearch = () => {
   const debounceTimerRef = useRef(null);
   const dropdownSelections = useRef({});
 
+  // Detect Mac for keyboard shortcut hint
+  const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+
   useEffect(() => {
     if (isExpanded && inputRef.current) {
       inputRef.current.focus();
     }
   }, [isExpanded]);
 
+  // Keyboard shortcuts: Ctrl/Cmd+K to open, Esc to close
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      // Ctrl+K or Cmd+K to open search
+      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsExpanded(true);
+      }
+      // Esc to close search
+      if (e.key === 'Escape' && isExpanded) {
+        e.preventDefault();
+        setIsExpanded(false);
+        setSearchQuery('');
+        setIsIframeReady(false);
+        dropdownSelections.current = {};
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown, true);
+    return () => window.removeEventListener('keydown', handleKeyDown, true);
+  }, [isExpanded]);
+
   // Debounce search query to avoid iframe reloading on every keystroke
   useEffect(() => {
     if (debounceTimerRef.current) {
@@ -302,6 +328,24 @@ export const InlineSearch = () => {
               color: 'var(--ifm-font-color-base)'
             }}
           />
+          {!isExpanded && (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.25rem',
+                fontSize: '0.85rem',
+                color: 'var(--ifm-color-emphasis-500)',
+                opacity: 0.6,
+                fontFamily: 'monospace',
+                padding: '0.25rem 0.5rem',
+                border: '1px solid var(--ifm-color-emphasis-300)',
+                borderRadius: '4px'
+              }}
+            >
+              {isMac ? '⌘K' : 'Ctrl+K'}
+            </div>
+          )}
           {isExpanded && (
             <button
               onClick={() => {