Remove eslint react-hooks/exhaustive-deps warnings

apps/readest-app/src/app/library/page.tsx

@@ -28,6 +28,7 @@ const LibraryPage = () => {
       if (loadingTimeout) clearTimeout(loadingTimeout);
       setLoading(false);
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const importBooks = async (files: [string | File]) => {

apps/readest-app/src/app/reader/components/BookmarkToggler.tsx

@@ -72,6 +72,7 @@ const BookmarkToggler: React.FC<BookmarkTogglerProps> = ({ bookKey }) => {
       .some((item) => CFI.compare(start, item.cfi) * CFI.compare(end, item.cfi) <= 0);
     setIsBookmarked(locationBookmarked);
     setBookmarkRibbonVisibility(bookKey, locationBookmarked);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [config, progress]);
 
   return (

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -112,6 +112,7 @@ const FoliateViewer: React.FC<{
       const viewSettings = getViewSettings(bookKey)!;
       viewRef.current.renderer.setStyles?.(getStyles(viewSettings, themeCode));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [themeCode]);
 
   useEffect(() => {
@@ -163,6 +164,7 @@ const FoliateViewer: React.FC<{
     };
 
     openBook();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const initAnnotations = () => {
@@ -179,6 +181,7 @@ const FoliateViewer: React.FC<{
     if (viewInited) {
       initAnnotations();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [viewInited]);
 
   return <div className='foliate-viewer h-[100%] w-[100%]' ref={containerRef} />;

apps/readest-app/src/app/reader/components/ReaderContent.tsx

@@ -48,6 +48,7 @@ const ReaderContent: React.FC<{ settings: SystemSettings }> = ({ settings }) =>
         if (index === 0) setSideBarBookKey(key);
       }
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const saveConfigAndCloseBook = (bookKey: string) => {

apps/readest-app/src/app/reader/components/ViewMenu.tsx

@@ -48,17 +48,20 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
 
   useEffect(() => {
     getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [themeCode]);
 
   useEffect(() => {
     getView(bookKey)?.renderer.setAttribute('flow', isScrolledMode ? 'scrolled' : 'paginated');
     viewSettings!.scrolled = isScrolledMode;
     setViewSettings(bookKey, viewSettings!);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isScrolledMode]);
 
   useEffect(() => {
     document.body.classList.toggle('invert', isInvertedColors);
     getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isInvertedColors]);
 
   useEffect(() => {
@@ -70,6 +73,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
     }
     viewSettings!.zoomLevel = zoomLevel;
     setViewSettings(bookKey, viewSettings!);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [zoomLevel]);
 
   return (

apps/readest-app/src/app/reader/components/annotator/Annotator.tsx

@@ -135,6 +135,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     return () => {
       eventDispatcher.offSync('iframe-single-click', handleSingleClick);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {

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

@@ -27,6 +27,7 @@ const Notebook: React.FC = ({}) => {
     setNotebookWidth(settings.globalReadSettings.notebookWidth);
     setNotebookPin(settings.globalReadSettings.isNotebookPinned);
     setNotebookVisible(settings.globalReadSettings.isNotebookPinned);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleNotebookResize = (newWidth: string) => {

apps/readest-app/src/app/reader/components/settings/ColorPanel.tsx

@@ -17,6 +17,7 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   useEffect(() => {
     view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [themeCode]);
 
   return (

apps/readest-app/src/app/reader/components/settings/FontPanel.tsx

@@ -59,6 +59,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setSettings(settings);
     }
     view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultFont]);
 
   useEffect(() => {
@@ -69,6 +70,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setSettings(settings);
     }
     view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultFontSize]);
 
   useEffect(() => {
@@ -79,6 +81,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setSettings(settings);
     }
     view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [minFontSize]);
 
   useEffect(() => {
@@ -89,6 +92,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setSettings(settings);
     }
     view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [serifFont]);
 
   useEffect(() => {
@@ -99,6 +103,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setSettings(settings);
     }
     view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sansSerifFont]);
 
   useEffect(() => {
@@ -109,6 +114,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setSettings(settings);
     }
     view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [monospaceFont]);
 
   useEffect(() => {
@@ -119,6 +125,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setSettings(settings);
     }
     view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [overrideFont]);
 
   const handleFontFamilyFont = (option: string) => {

apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx

@@ -29,6 +29,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setSettings(settings);
     }
     view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lineHeight]);
 
   useEffect(() => {
@@ -39,6 +40,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setSettings(settings);
     }
     view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fullJustification]);
 
   useEffect(() => {
@@ -49,6 +51,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setSettings(settings);
     }
     view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hyphenation]);
 
   useEffect(() => {
@@ -59,6 +62,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setSettings(settings);
     }
     view?.renderer.setAttribute('margin', `${marginPx}px`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [marginPx]);
 
   useEffect(() => {
@@ -69,6 +73,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setSettings(settings);
     }
     view?.renderer.setAttribute('gap', `${gapPercent}%`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [gapPercent]);
 
   useEffect(() => {
@@ -83,6 +88,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       'max-inline-size',
       `${maxColumnCount === 1 ? ONE_COLUMN_MAX_INLINE_SIZE : maxInlineSize}px`,
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxColumnCount]);
 
   useEffect(() => {
@@ -96,6 +102,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       'max-inline-size',
       `${maxColumnCount === 1 ? ONE_COLUMN_MAX_INLINE_SIZE : maxInlineSize}px`,
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxInlineSize]);
 
   return (

apps/readest-app/src/app/reader/components/settings/MiscPanel.tsx

@@ -69,6 +69,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     } else {
       getView(bookKey)?.renderer.removeAttribute('animated');
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [animated]);
 
   return (

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

@@ -35,11 +35,13 @@ const SearchBar: React.FC<SearchBarProps> = ({
 
   useEffect(() => {
     handleSearchTermChange(searchTerm);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [bookKey]);
 
   useEffect(() => {
     setSearchTerm(term);
     handleSearchTermChange(term);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [term]);
 
   useEffect(() => {

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

@@ -50,6 +50,7 @@ const SideBar: React.FC<{
     return () => {
       eventDispatcher.off('search', onSearchEvent);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleDragMove = (e: MouseEvent) => {

apps/readest-app/src/app/reader/hooks/useBooksManager.ts

@@ -9,9 +9,9 @@ const useBooksManager = () => {
   const searchParams = useSearchParams();
   const { envConfig } = useEnv();
   const { bookKeys, sideBarBookKey } = useReaderStore();
+  const [shouldUpdateSearchParams, setShouldUpdateSearchParams] = useState(false);
   const { setBookKeys, initViewState, setSideBarBookKey } = useReaderStore();
 
-  const [shouldUpdateSearchParams, setShouldUpdateSearchParams] = useState(false);
   useEffect(() => {
     if (shouldUpdateSearchParams) {
       const ids = bookKeys.map((key) => key.split('-')[0]).join(',');
@@ -22,6 +22,7 @@ const useBooksManager = () => {
       }
       setShouldUpdateSearchParams(false);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [bookKeys, shouldUpdateSearchParams]);
 
   // Append a new book and sync with bookKeys and URL

apps/readest-app/src/app/reader/hooks/useFoliateEvents.ts

@@ -31,5 +31,6 @@ export const useFoliateEvents = (
       if (onDrawAnnotation) view.removeEventListener('draw-annotation', onDrawAnnotation);
       if (onShowAnnotation) view.removeEventListener('show-annotation', onShowAnnotation);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [view, ...dependencies]);
 };

apps/readest-app/src/app/reader/hooks/useSidebar.ts

@@ -18,6 +18,7 @@ const useSidebar = (initialWidth: string, isPinned: boolean) => {
     setSideBarWidth(initialWidth);
     setSideBarPin(isPinned);
     setSideBarVisible(isPinned);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleSideBarResize = (newWidth: string) => {

apps/readest-app/src/app/reader/page.tsx

@@ -25,6 +25,7 @@ const ReaderPage = () => {
     };
 
     initLibrary();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

apps/readest-app/src/components/WindowButtons.tsx

@@ -52,6 +52,7 @@ const WindowButtons: React.FC<WindowButtonsProps> = ({
     return () => {
       headerElement?.removeEventListener('mousedown', handleMouseDown);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleMinimize = async () => {

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

@@ -106,6 +106,7 @@ const useShortcuts = (actions: KeyActionHandlers, dependencies: React.Dependency
       window.removeEventListener('keydown', unifiedHandleKeyDown);
       window.removeEventListener('message', unifiedHandleKeyDown);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [shortcuts, ...dependencies]);
 };
 

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

@@ -81,6 +81,7 @@ export const useTheme = () => {
       fg: palette['base-content'],
       primary: palette.primary,
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [themeMode, themeColor, isDarkMode]);
 
   const updateThemeMode = (mode: ThemeMode) => setThemeMode(mode);

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

@@ -35,6 +35,7 @@ const useTrafficLight = () => {
       unlistenEnterFullScreen?.();
       unlistenExitFullScreen?.();
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return { isTrafficLightVisible };