From 61950e1b4acf928f1be2686a1b066685de721208 Mon Sep 17 00:00:00 2001
From: chrox <chrox.huang@gmail.com>
Date: Wed, 27 Nov 2024 15:04:25 +0100
Subject: [PATCH] Fix searchbar options not visible and autofocus input

---
 .../src/app/reader/components/sidebar/SearchBar.tsx   | 10 ++++++++++
 .../src/app/reader/components/sidebar/SideBar.tsx     |  1 +
 apps/readest-app/src/styles/globals.css               | 11 ++++++-----
 3 files changed, 17 insertions(+), 5 deletions(-)

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 711866eb..e58babdb 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/SearchBar.tsx
@@ -12,12 +12,14 @@ import SearchOptions from './SearchOptions';
 const MINIMUM_SEARCH_TERM_LENGTH = 2;
 
 interface SearchBarProps {
+  isVisible: boolean;
   bookKey: string;
   searchTerm: string;
   onSearchResultChange: (results: BookSearchResult[]) => void;
 }
 
 const SearchBar: React.FC<SearchBarProps> = ({
+  isVisible,
   bookKey,
   searchTerm: term,
   onSearchResultChange,
@@ -27,6 +29,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
   const { getConfig, saveConfig } = useBookDataStore();
   const { getView, getProgress } = useReaderStore();
   const [searchTerm, setSearchTerm] = useState(term);
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const view = getView(bookKey)!;
   const config = getConfig(bookKey)!;
@@ -48,6 +51,12 @@ const SearchBar: React.FC<SearchBarProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [term]);
 
+  useEffect(() => {
+    if (isVisible && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isVisible]);
+
   useEffect(() => {
     return () => {
       if (searchTimeout.current) {
@@ -128,6 +137,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
         </div>
 
         <input
+          ref={inputRef}
           type='text'
           value={searchTerm}
           spellCheck={false}
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 08d07e66..0ce9fc84 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
@@ -124,6 +124,7 @@ const SideBar: React.FC<{
             })}
           >
             <SearchBar
+              isVisible={isSearchBarVisible}
               bookKey={sideBarBookKey!}
               searchTerm={searchTerm}
               onSearchResultChange={setSearchResults}
diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css
index 9ca18950..f283927a 100644
--- a/apps/readest-app/src/styles/globals.css
+++ b/apps/readest-app/src/styles/globals.css
@@ -15,22 +15,23 @@
   }
 }
 
-html[data-page="default"] {
+html[data-page='default'] {
   background: #ffffff;
 }
 
-html[data-page="library"] {
+html[data-page='library'] {
   background: theme('colors.base-200');
 }
 
-html[data-page="reader"] {
+html[data-page='reader'] {
   background: theme('colors.base-100');
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
   border-radius: 10px;
   background-color: transparent;
 }
@@ -175,7 +176,7 @@ foliate-view {
 .search-bar {
   max-height: 0;
   visibility: hidden;
-  overflow: hidden;
+  overflow: visible;
   transition: max-height 0.3s ease-out;
 }