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 (

apps/readest-app/src/store/settingsStore.ts

@@ -8,11 +8,13 @@ export type FontPanelView = 'main-fonts' | 'custom-fonts';
 
 interface SettingsState {
   settings: SystemSettings;
+  settingsDialogBookKey: string;
   isSettingsDialogOpen: boolean;
   isSettingsGlobal: boolean;
   fontPanelView: FontPanelView;
   setSettings: (settings: SystemSettings) => void;
   saveSettings: (envConfig: EnvConfigType, settings: SystemSettings) => void;
+  setSettingsDialogBookKey: (bookKey: string) => void;
   setSettingsDialogOpen: (open: boolean) => void;
   setSettingsGlobal: (global: boolean) => void;
   setFontPanelView: (view: FontPanelView) => void;
@@ -22,6 +24,7 @@ interface SettingsState {
 
 export const useSettingsStore = create<SettingsState>((set) => ({
   settings: {} as SystemSettings,
+  settingsDialogBookKey: '',
   isSettingsDialogOpen: false,
   isSettingsGlobal: true,
   fontPanelView: 'main-fonts',
@@ -30,6 +33,7 @@ export const useSettingsStore = create<SettingsState>((set) => ({
     const appService = await envConfig.getAppService();
     await appService.saveSettings(settings);
   },
+  setSettingsDialogBookKey: (bookKey) => set({ settingsDialogBookKey: bookKey }),
   setSettingsDialogOpen: (open) => set({ isSettingsDialogOpen: open }),
   setSettingsGlobal: (global) => set({ isSettingsGlobal: global }),
   setFontPanelView: (view) => set({ fontPanelView: view }),

apps/readest-app/src/utils/style.ts

@@ -247,7 +247,6 @@ const getLayoutStyles = (
   }
   html, body {
     ${writingMode === 'auto' ? '' : `writing-mode: ${writingMode} !important;`}
-    ${writingMode.includes('vertical') ? 'font-feature-settings: "vrt2" 1, "vert" 1; text-orientation: upright;' : ''}
     text-align: var(--default-text-align);
     max-height: unset;
     -webkit-touch-callout: none;