Add shortcuts to toggle search bar

apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx

@@ -58,7 +58,14 @@ const SearchBar: React.FC<SearchBarProps> = ({
   }, [isVisible]);
 
   useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && inputRef.current) {
+        inputRef.current.blur();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
     return () => {
+      window.removeEventListener('keydown', handleKeyDown);
       if (searchTimeout.current) {
         clearTimeout(searchTimeout.current);
       }

apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx

@@ -15,6 +15,7 @@ import useSidebar from '../../hooks/useSidebar';
 import useDragBar from '../../hooks/useDragBar';
 import SearchBar from './SearchBar';
 import SearchResults from './SearchResults';
+import useShortcuts from '@/hooks/useShortcuts';
 
 const MIN_SIDEBAR_WIDTH = 0.05;
 const MAX_SIDEBAR_WIDTH = 0.45;
@@ -84,6 +85,8 @@ const SideBar: React.FC<{
     }
   };
 
+  useShortcuts({ onToggleSearchBar: handleToggleSearchBar }, [sideBarBookKey]);
+
   const handleSearchResultClick = (cfi: string) => {
     getView(sideBarBookKey)?.goTo(cfi);
   };

apps/readest-app/src/helpers/shortcuts.ts

@@ -2,6 +2,7 @@ export interface ShortcutConfig {
   onSwitchSideBar: string[];
   onToggleSideBar: string[];
   onToggleNotebook: string[];
+  onToggleSearchBar: string[];
   onReloadPage: string[];
   onGoLeft: string[];
   onGoRight: string[];
@@ -13,6 +14,7 @@ const DEFAULT_SHORTCUTS: ShortcutConfig = {
   onSwitchSideBar: ['ctrl+Tab', 'opt+Tab', 'alt+Tab'],
   onToggleSideBar: ['s'],
   onToggleNotebook: ['n'],
+  onToggleSearchBar: ['ctrl+f', 'cmd+f'],
   onReloadPage: ['shift+r'],
   onGoLeft: ['ArrowLeft', 'PageUp', 'h'],
   onGoRight: ['ArrowRight', 'PageDown', 'l'],

apps/readest-app/src/hooks/useShortcuts.ts

@@ -22,9 +22,9 @@ const useShortcuts = (actions: KeyActionHandlers, dependencies: React.Dependency
     return {
       ctrlKey: keys.includes('ctrl'),
       altKey: keys.includes('alt') || keys.includes('opt'),
-      metaKey: keys.includes('meta'),
+      metaKey: keys.includes('meta') || keys.includes('cmd'),
       shiftKey: keys.includes('shift'),
-      key: keys.find((k) => !['ctrl', 'alt', 'opt', 'meta', 'shift'].includes(k)),
+      key: keys.find((k) => !['ctrl', 'alt', 'opt', 'meta', 'cmd', 'shift'].includes(k)),
     };
   };