From 359fa8df3503478fd228f444f34e02a85b353984 Mon Sep 17 00:00:00 2001 From: Huang Xin Date: Tue, 18 Mar 2025 19:58:01 +0800 Subject: [PATCH] refactor: always save when changes are made with settings, also closes #626 (#630) --- .../src/app/reader/components/BooksGrid.tsx | 33 ++-- .../src/app/reader/components/HintInfo.tsx | 7 +- .../src/app/reader/components/PageInfo.tsx | 9 +- .../src/app/reader/components/SectionInfo.tsx | 9 +- .../reader/components/settings/FontPanel.tsx | 63 ++------ .../components/settings/LayoutPanel.tsx | 150 ++++-------------- .../reader/components/settings/MiscPanel.tsx | 24 +-- .../components/settings/SettingsDialog.tsx | 13 +- .../app/reader/utils/viewSettingsHelper.ts | 29 ++++ apps/readest-app/src/services/constants.ts | 2 +- apps/readest-app/src/utils/font.ts | 1 - packages/foliate-js | 2 +- 12 files changed, 130 insertions(+), 212 deletions(-) create mode 100644 apps/readest-app/src/app/reader/utils/viewSettingsHelper.ts diff --git a/apps/readest-app/src/app/reader/components/BooksGrid.tsx b/apps/readest-app/src/app/reader/components/BooksGrid.tsx index 705f5944..11f2cdc8 100644 --- a/apps/readest-app/src/app/reader/components/BooksGrid.tsx +++ b/apps/readest-app/src/app/reader/components/BooksGrid.tsx @@ -81,18 +81,24 @@ const BooksGrid: React.FC = ({ bookKeys, onCloseBook }) => { /> -
-
+ {viewSettings.vertical && ( + <> +
+
+ + )} {viewSettings.vertical && viewSettings.doubleBorder && ( = ({ bookKeys, onCloseBook }) => { {viewSettings.showHeader && ( = ({ bookKeys, onCloseBook }) => { )} = ({ bookKeys, onCloseBook }) => { bookFormat={book.format} section={section} pageinfo={pageinfo} + showDoubleBorder={viewSettings.vertical && viewSettings.doubleBorder} isVertical={viewSettings.vertical} horizontalGap={horizontalGapPercent} verticalMargin={verticalMarginPixels} diff --git a/apps/readest-app/src/app/reader/components/HintInfo.tsx b/apps/readest-app/src/app/reader/components/HintInfo.tsx index 7650c8b3..9410eef2 100644 --- a/apps/readest-app/src/app/reader/components/HintInfo.tsx +++ b/apps/readest-app/src/app/reader/components/HintInfo.tsx @@ -4,6 +4,7 @@ import { eventDispatcher } from '@/utils/event'; interface SectionInfoProps { bookKey: string; + showDoubleBorder: boolean; isVertical: boolean; horizontalGap: number; verticalMargin: number; @@ -11,6 +12,7 @@ interface SectionInfoProps { const HintInfo: React.FC = ({ bookKey, + showDoubleBorder, isVertical, horizontalGap, verticalMargin, @@ -47,15 +49,16 @@ const HintInfo: React.FC = ({ className={clsx( 'hintinfo absolute flex items-center justify-end overflow-hidden', hintMessage ? 'bg-base-100' : 'bg-transparent', - isVertical ? 'writing-vertical-rl max-h-[50%] w-[30px]' : 'top-0 h-[44px] max-w-[50%]', + isVertical ? 'writing-vertical-rl max-h-[50%]' : 'top-0 h-[44px] max-w-[50%]', )} style={ isVertical ? { bottom: `${verticalMargin * 1.5}px`, left: `calc(100% - ${horizontalGap}%)`, + width: showDoubleBorder ? '30px' : `${horizontalGap}%`, } - : { right: `${horizontalGap}%` } + : { insetInlineEnd: `${horizontalGap}%` } } >

diff --git a/apps/readest-app/src/app/reader/components/PageInfo.tsx b/apps/readest-app/src/app/reader/components/PageInfo.tsx index 6146f55f..e9443340 100644 --- a/apps/readest-app/src/app/reader/components/PageInfo.tsx +++ b/apps/readest-app/src/app/reader/components/PageInfo.tsx @@ -7,6 +7,7 @@ interface PageInfoProps { bookFormat: string; section?: PageInfo; pageinfo?: PageInfo; + showDoubleBorder: boolean; isVertical: boolean; horizontalGap: number; verticalMargin: number; @@ -16,6 +17,7 @@ const PageInfoView: React.FC = ({ bookFormat, section, pageinfo, + showDoubleBorder, isVertical, horizontalGap, verticalMargin, @@ -42,16 +44,17 @@ const PageInfoView: React.FC = ({

diff --git a/apps/readest-app/src/app/reader/components/SectionInfo.tsx b/apps/readest-app/src/app/reader/components/SectionInfo.tsx index 564451db..e9523e4a 100644 --- a/apps/readest-app/src/app/reader/components/SectionInfo.tsx +++ b/apps/readest-app/src/app/reader/components/SectionInfo.tsx @@ -3,6 +3,7 @@ import React from 'react'; interface SectionInfoProps { section?: string; + showDoubleBorder: boolean; isVertical: boolean; horizontalGap: number; verticalMargin: number; @@ -10,6 +11,7 @@ interface SectionInfoProps { const SectionInfo: React.FC = ({ section, + showDoubleBorder, isVertical, horizontalGap, verticalMargin, @@ -18,18 +20,17 @@ const SectionInfo: React.FC = ({

= ({ bookKey }) => { const _ = useTranslation(); - const { appService } = useEnv(); - const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore(); - const { getView, getViewSettings, setViewSettings } = useReaderStore(); + const { envConfig, appService } = useEnv(); + const { getView, getViewSettings } = useReaderStore(); const view = getView(bookKey); const viewSettings = getViewSettings(bookKey)!; @@ -118,89 +117,49 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { }, []); useEffect(() => { - viewSettings.defaultFont = defaultFont; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.defaultFont = defaultFont; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'defaultFont', defaultFont); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [defaultFont]); useEffect(() => { - viewSettings.defaultFontSize = defaultFontSize; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.defaultFontSize = defaultFontSize; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'defaultFontSize', defaultFontSize); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [defaultFontSize]); useEffect(() => { - viewSettings.minimumFontSize = minFontSize; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.minimumFontSize = minFontSize; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'minimumFontSize', minFontSize); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [minFontSize]); useEffect(() => { - viewSettings.fontWeight = fontWeight; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.fontWeight = fontWeight; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'fontWeight', fontWeight); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [fontWeight]); useEffect(() => { - viewSettings.serifFont = serifFont; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.serifFont = serifFont; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'serifFont', serifFont); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [serifFont]); useEffect(() => { - viewSettings.sansSerifFont = sansSerifFont; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.sansSerifFont = sansSerifFont; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'sansSerifFont', sansSerifFont); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [sansSerifFont]); useEffect(() => { - viewSettings.monospaceFont = monospaceFont; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.monospaceFont = monospaceFont; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'monospaceFont', monospaceFont); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [monospaceFont]); useEffect(() => { - viewSettings.overrideFont = overrideFont; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.overrideFont = overrideFont; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'overrideFont', overrideFont); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [overrideFont]); diff --git a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx index 7c5da166..396cf92c 100644 --- a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx @@ -3,7 +3,7 @@ import { MdOutlineAutoMode } from 'react-icons/md'; import { MdOutlineTextRotationNone, MdTextRotateVertical } from 'react-icons/md'; import { TbTextDirectionRtl } from 'react-icons/tb'; -import { useSettingsStore } from '@/store/settingsStore'; +import { useEnv } from '@/context/EnvContext'; import { useReaderStore } from '@/store/readerStore'; import { useBookDataStore } from '@/store/bookDataStore'; import { useTranslation } from '@/hooks/useTranslation'; @@ -12,11 +12,12 @@ import { getStyles } from '@/utils/style'; import { getMaxInlineSize } from '@/utils/config'; import { getBookDirFromWritingMode, getBookLangCode } from '@/utils/book'; import { MIGHT_BE_RTL_LANGS } from '@/services/constants'; +import { saveViewSettings } from '../../utils/viewSettingsHelper'; import NumberInput from './NumberInput'; const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { const _ = useTranslation(); - const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore(); + const { envConfig } = useEnv(); const { getView, getViewSettings, setViewSettings } = useReaderStore(); const { getBookData } = useBookDataStore(); const view = getView(bookKey); @@ -44,100 +45,55 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { const [showFooter, setShowFooter] = useState(viewSettings.showFooter!); useEffect(() => { - viewSettings.paragraphMargin = paragraphMargin; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.paragraphMargin = paragraphMargin; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'paragraphMargin', paragraphMargin); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [paragraphMargin]); useEffect(() => { - viewSettings.lineHeight = lineHeight; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.lineHeight = lineHeight; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'lineHeight', lineHeight); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [lineHeight]); useEffect(() => { - viewSettings.wordSpacing = wordSpacing; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.wordSpacing = wordSpacing; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'wordSpacing', wordSpacing); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [wordSpacing]); useEffect(() => { - viewSettings.letterSpacing = letterSpacing; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.letterSpacing = letterSpacing; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'letterSpacing', letterSpacing); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [letterSpacing]); useEffect(() => { - viewSettings.textIndent = textIndent; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.textIndent = textIndent; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'textIndent', textIndent); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [textIndent]); useEffect(() => { - viewSettings.fullJustification = fullJustification; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.fullJustification = fullJustification; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'fullJustification', fullJustification); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [fullJustification]); useEffect(() => { - viewSettings.hyphenation = hyphenation; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.hyphenation = hyphenation; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'hyphenation', hyphenation); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [hyphenation]); useEffect(() => { - viewSettings.marginPx = marginPx; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.marginPx = marginPx; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'marginPx', marginPx); view?.renderer.setAttribute('margin', `${marginPx}px`); // eslint-disable-next-line react-hooks/exhaustive-deps }, [marginPx]); useEffect(() => { - viewSettings.gapPercent = gapPercent; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.gapPercent = gapPercent; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'gapPercent', gapPercent); view?.renderer.setAttribute('gap', `${gapPercent}%`); if (viewSettings.scrolled) { view?.renderer.setAttribute('flow', 'scrolled'); @@ -146,35 +102,20 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { }, [gapPercent]); useEffect(() => { - viewSettings.maxColumnCount = maxColumnCount; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.maxColumnCount = maxColumnCount; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'maxColumnCount', maxColumnCount); view?.renderer.setAttribute('max-column-count', maxColumnCount); view?.renderer.setAttribute('max-inline-size', `${getMaxInlineSize(viewSettings)}px`); // eslint-disable-next-line react-hooks/exhaustive-deps }, [maxColumnCount]); useEffect(() => { - viewSettings.maxInlineSize = maxInlineSize; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.maxInlineSize = maxInlineSize; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'maxInlineSize', maxInlineSize); view?.renderer.setAttribute('max-inline-size', `${getMaxInlineSize(viewSettings)}px`); // eslint-disable-next-line react-hooks/exhaustive-deps }, [maxInlineSize]); useEffect(() => { - viewSettings.maxBlockSize = maxBlockSize; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.maxBlockSize = maxBlockSize; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'maxBlockSize', maxBlockSize); view?.renderer.setAttribute('max-block-size', `${maxBlockSize}px`); // eslint-disable-next-line react-hooks/exhaustive-deps }, [maxBlockSize]); @@ -182,11 +123,10 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { useEffect(() => { // global settings are not supported for writing mode const prevWritingMode = viewSettings.writingMode; - viewSettings.writingMode = writingMode; - if (writingMode.includes('vertical')) { - viewSettings.vertical = true; + if (!writingMode.includes('vertical')) { + viewSettings.vertical = false; } - setViewSettings(bookKey, viewSettings); + saveViewSettings(envConfig, bookKey, 'writingMode', writingMode, true); if (view) { view.renderer.setStyles?.(getStyles(viewSettings)); view.book.dir = getBookDirFromWritingMode(writingMode); @@ -202,69 +142,46 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { }, [writingMode]); useEffect(() => { - viewSettings.overrideLayout = overrideLayout; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.overrideLayout = overrideLayout; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'overrideLayout', overrideLayout); view?.renderer.setStyles?.(getStyles(viewSettings)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [overrideLayout]); useEffect(() => { - viewSettings!.scrolled = isScrolledMode; + saveViewSettings(envConfig, bookKey, 'scrolled', isScrolledMode); getView(bookKey)?.renderer.setAttribute('flow', isScrolledMode ? 'scrolled' : 'paginated'); getView(bookKey)?.renderer.setAttribute( 'max-inline-size', `${getMaxInlineSize(viewSettings)}px`, ); getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!)); - setViewSettings(bookKey, viewSettings!); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.scrolled = isScrolledMode; - setSettings(settings); - } // eslint-disable-next-line react-hooks/exhaustive-deps }, [isScrolledMode]); useEffect(() => { - viewSettings.doubleBorder = doubleBorder; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.doubleBorder = doubleBorder; - setSettings(settings); + if (doubleBorder && viewSettings.vertical) { + viewSettings.gapPercent = Math.max( + viewSettings.gapPercent, + Math.ceil(4800 / window.innerWidth), + ); + setViewSettings(bookKey, viewSettings); } + saveViewSettings(envConfig, bookKey, 'doubleBorder', doubleBorder); // eslint-disable-next-line react-hooks/exhaustive-deps }, [doubleBorder]); useEffect(() => { - viewSettings.borderColor = borderColor; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.borderColor = borderColor; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'borderColor', borderColor); // eslint-disable-next-line react-hooks/exhaustive-deps }, [borderColor]); useEffect(() => { - viewSettings.showHeader = showHeader; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.showHeader = showHeader; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'showHeader', showHeader); // eslint-disable-next-line react-hooks/exhaustive-deps }, [showHeader]); useEffect(() => { - viewSettings.showFooter = showFooter; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.showFooter = showFooter; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'showFooter', showFooter); // eslint-disable-next-line react-hooks/exhaustive-deps }, [showFooter]); @@ -473,9 +390,12 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { label={_('Horizontal Margins (%)')} value={gapPercent} onChange={setGapPercent} - min={viewSettings.vertical ? 2 : 0} + min={ + viewSettings.vertical && (showFooter || showHeader) + ? Math.ceil(4800 / window.innerWidth) + : 0 + } max={30} - step={0.5} /> = ({ bookKey }) => { const _ = useTranslation(); + const { envConfig } = useEnv(); const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore(); const { getView, getViewSettings, setViewSettings } = useReaderStore(); const viewSettings = getViewSettings(bookKey)!; @@ -67,12 +70,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { }; useEffect(() => { - viewSettings.animated = animated; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.animated = animated; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'animated', animated); if (animated) { getView(bookKey)?.renderer.setAttribute('animated', ''); } else { @@ -82,22 +80,12 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { }, [animated]); useEffect(() => { - viewSettings.disableClick = isDisableClick; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.disableClick = isDisableClick; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'disableClick', isDisableClick); // eslint-disable-next-line react-hooks/exhaustive-deps }, [isDisableClick]); useEffect(() => { - viewSettings.continuousScroll = isContinuousScroll; - setViewSettings(bookKey, viewSettings); - if (isFontLayoutSettingsGlobal) { - settings.globalViewSettings.continuousScroll = isContinuousScroll; - setSettings(settings); - } + saveViewSettings(envConfig, bookKey, 'continuousScroll', isContinuousScroll); // eslint-disable-next-line react-hooks/exhaustive-deps }, [isContinuousScroll]); diff --git a/apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx b/apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx index 07c737dc..374b3bce 100644 --- a/apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx +++ b/apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx @@ -28,7 +28,9 @@ type TabConfig = { const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ bookKey }) => { const _ = useTranslation(); - const [activePanel, setActivePanel] = useState('Font'); + const [activePanel, setActivePanel] = useState( + (localStorage.getItem('lastConfigPanel') || 'Font') as SettingsPanelType, + ); const { setFontLayoutSettingsDialogOpen } = useSettingsStore(); const tabConfig = [ @@ -54,6 +56,11 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo }, ] as TabConfig[]; + const handleSetActivePanel = (tab: SettingsPanelType) => { + setActivePanel(tab); + localStorage.setItem('lastConfigPanel', tab); + }; + const handleClose = () => { setFontLayoutSettingsDialogOpen(false); }; @@ -76,7 +83,7 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo > -
+
{tabConfig.map(({ tab, icon: Icon, label }) => (