fix(settings): correctly setting configs for selected book in parallel read, closes #2825 (#2908)

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

@@ -3,14 +3,12 @@ import React, { useEffect } from 'react';
 
 import { useEnv } from '@/context/EnvContext';
 import { useThemeStore } from '@/store/themeStore';
-import { useSettingsStore } from '@/store/settingsStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { getGridTemplate, getInsetEdges } from '@/utils/grid';
 import { getViewInsets } from '@/utils/insets';
-import SettingsDialog from '@/components/settings/SettingsDialog';
 import SearchResultsNav from './sidebar/SearchResultsNav';
 import BooknotesNav from './sidebar/BooknotesNav';
 import FoliateViewer from './FoliateViewer';
@@ -36,7 +34,6 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
   const { getProgress, getViewState, getViewSettings } = useReaderStore();
   const { setGridInsets, hoveredBookKey } = useReaderStore();
   const { sideBarBookKey } = useSidebarStore();
-  const { isSettingsDialogOpen } = useSettingsStore();
 
   const { safeAreaInsets: screenInsets } = useThemeStore();
   const aspectRatio = window.innerWidth / window.innerHeight;
@@ -211,7 +208,6 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
               isHoveredAnim={false}
               gridInsets={gridInsets}
             />
-            {isSettingsDialogOpen && <SettingsDialog bookKey={bookKey} />}
           </div>
         );
       })}

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

@@ -223,7 +223,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
         </div>
 
         <div className='bg-base-100 z-20 ml-auto flex h-full items-center space-x-4 ps-2'>
-          <SettingsToggler />
+          <SettingsToggler bookKey={bookKey} />
           <NotebookToggler bookKey={bookKey} />
           <Dropdown
             label={_('View Options')}

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

@@ -29,6 +29,7 @@ import Spinner from '@/components/Spinner';
 import SideBar from './sidebar/SideBar';
 import Notebook from './notebook/Notebook';
 import BooksGrid from './BooksGrid';
+import SettingsDialog from '@/components/settings/SettingsDialog';
 
 const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ ids, settings }) => {
   const _ = useTranslation();
@@ -41,6 +42,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
   const { getConfig, getBookData, saveConfig } = useBookDataStore();
   const { getView, setBookKeys, getViewSettings } = useReaderStore();
   const { initViewState, getViewState, clearViewState } = useReaderStore();
+  const { isSettingsDialogOpen, settingsDialogBookKey } = useSettingsStore();
   const [showDetailsBook, setShowDetailsBook] = useState<Book | null>(null);
   const isInitiating = useRef(false);
   const [loading, setLoading] = useState(false);
@@ -212,6 +214,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
     <div className='reader-content full-height flex'>
       <SideBar onGoToLibrary={handleCloseBooksToLibrary} />
       <BooksGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
+      {isSettingsDialogOpen && <SettingsDialog bookKey={settingsDialogBookKey} />}
       <Notebook />
       {showDetailsBook && (
         <BookDetailModal

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

@@ -6,12 +6,18 @@ import { useTranslation } from '@/hooks/useTranslation';
 import { useSettingsStore } from '@/store/settingsStore';
 import Button from '@/components/Button';
 
-const SettingsToggler = () => {
+interface SettingsTogglerProps {
+  bookKey: string;
+}
+
+const SettingsToggler: React.FC<SettingsTogglerProps> = ({ bookKey }) => {
   const _ = useTranslation();
   const { setHoveredBookKey } = useReaderStore();
   const { isSettingsDialogOpen, setSettingsDialogOpen } = useSettingsStore();
+  const { setSettingsDialogBookKey } = useSettingsStore();
   const handleToggleSettings = () => {
     setHoveredBookKey('');
+    setSettingsDialogBookKey(bookKey);
     setSettingsDialogOpen(!isSettingsDialogOpen);
   };
   return (