shortcuts: add ESC to dismiss search bar, closes #1495 (#1502)

apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx

@@ -96,7 +96,7 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
         handleSaveNote();
       }
     },
-    onCloseNote: () => {
+    onEscape: () => {
       if (notebookNewAnnotation) {
         setNotebookNewAnnotation(null);
       }

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

@@ -21,6 +21,7 @@ interface SearchBarProps {
   bookKey: string;
   searchTerm: string;
   onSearchResultChange: (results: BookSearchResult[]) => void;
+  onHideSearchBar: () => void;
 }
 
 const SearchBar: React.FC<SearchBarProps> = ({
@@ -28,6 +29,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
   bookKey,
   searchTerm: term,
   onSearchResultChange,
+  onHideSearchBar,
 }) => {
   const _ = useTranslation();
   const { envConfig } = useEnv();
@@ -37,6 +39,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
   const { getView, getProgress } = useReaderStore();
   const [searchTerm, setSearchTerm] = useState(term);
   const inputRef = useRef<HTMLInputElement>(null);
+  const inputFocusedRef = useRef(false);
 
   const view = getView(bookKey)!;
   const config = getConfig(bookKey)!;
@@ -65,14 +68,27 @@ const SearchBar: React.FC<SearchBarProps> = ({
 
   useEffect(() => {
     if (isVisible && inputRef.current) {
+      inputRef.current.onblur = () => {
+        inputFocusedRef.current = false;
+      };
+      inputRef.current.onfocus = () => {
+        inputFocusedRef.current = true;
+      };
       inputRef.current.focus();
     }
+    if (isVisible && searchTerm) {
+      handleSearchTermChange(searchTerm);
+    }
   }, [isVisible]);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && inputRef.current) {
-        inputRef.current.blur();
+      if (e.key === 'Escape') {
+        if (inputRef.current && inputFocusedRef.current) {
+          inputRef.current.blur();
+        } else {
+          onHideSearchBar();
+        }
       }
     };
     window.addEventListener('keydown', handleKeyDown);

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

@@ -146,15 +146,22 @@ const SideBar: React.FC<{
   };
 
   const handleToggleSearchBar = () => {
-    setIsSearchBarVisible((prev) => !prev);
-    if (isSearchBarVisible) {
-      setSearchResults(null);
-      setSearchTerm('');
-      getView(sideBarBookKey)?.clearSearch();
-    }
+    setIsSearchBarVisible((prev) => {
+      if (prev) handleHideSearchBar();
+      return !prev;
+    });
   };
 
-  useShortcuts({ onToggleSearchBar: handleToggleSearchBar }, [sideBarBookKey]);
+  const handleHideSearchBar = () => {
+    setIsSearchBarVisible(false);
+    setSearchResults(null);
+    setSearchTerm('');
+    getView(sideBarBookKey)?.clearSearch();
+  };
+
+  useShortcuts({ onToggleSearchBar: handleToggleSearchBar, onEscape: handleHideSearchBar }, [
+    sideBarBookKey,
+  ]);
 
   const handleSearchResultClick = (cfi: string) => {
     onNavigateEvent();
@@ -233,6 +240,7 @@ const SideBar: React.FC<{
               bookKey={sideBarBookKey!}
               searchTerm={searchTerm}
               onSearchResultChange={setSearchResults}
+              onHideSearchBar={handleHideSearchBar}
             />
           </div>
           <div className='border-base-300/50 border-b px-3'>

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

@@ -22,7 +22,7 @@ const DEFAULT_SHORTCUTS = {
   onZoomOut: ['ctrl+-', 'cmd+-', 'shift+-'],
   onResetZoom: ['ctrl+0', 'cmd+0'],
   onSaveNote: ['ctrl+Enter'],
-  onCloseNote: ['Escape'],
+  onEscape: ['Escape'],
 };
 
 export type ShortcutConfig = {