From bb759597e9105f8b68ee888c5d1124c9e25121ec Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Mon, 30 Jun 2025 22:13:43 +0800
Subject: [PATCH] shortcuts: add ESC to dismiss search bar, closes #1495
 (#1502)

---
 .../reader/components/notebook/NoteEditor.tsx |  2 +-
 .../reader/components/sidebar/SearchBar.tsx   | 20 +++++++++++++++--
 .../app/reader/components/sidebar/SideBar.tsx | 22 +++++++++++++------
 apps/readest-app/src/helpers/shortcuts.ts     |  2 +-
 4 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx b/apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx
index 5b85d591..a6579d1c 100644
--- a/apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx
+++ b/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);
       }
diff --git a/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx b/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx
index bf02782d..0bee145d 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx
+++ b/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);
diff --git a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
index 92b88de0..ff7d6092 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
+++ b/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'>
diff --git a/apps/readest-app/src/helpers/shortcuts.ts b/apps/readest-app/src/helpers/shortcuts.ts
index 96e18722..55205645 100644
--- a/apps/readest-app/src/helpers/shortcuts.ts
+++ b/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 = {