Move reader "settings state" to "reader store"

2025-09-20 14:15:40 +02:00
parent 5177f9efdc
commit 98ec5257b9
28 changed files with 315 additions and 538 deletions
--- a/src/features/reader/overlay/components/ReaderPageNumber.tsx
+++ b/src/features/reader/overlay/components/ReaderPageNumber.tsx
@@ -11,7 +11,7 @@ import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
-import { IReaderSettings, ProgressBarType, ReadingDirection } from '@/features/reader/Reader.types.ts';
+import { ProgressBarType, ReadingDirection } from '@/features/reader/Reader.types.ts';
 import { getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
 import { useReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx';
@@ -25,19 +25,20 @@ const BaseReaderPageNumber = ({
    isDesktop,
    readerNavBarWidth,
    isMaximized,
-    progressBarType,
-    shouldShowPageNumber,
-    readingDirection,
 }: Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop'> &
    Pick<NavbarContextType, 'readerNavBarWidth'> &
-    Pick<TReaderProgressBarContext, 'isMaximized'> &
-    Pick<IReaderSettings, 'progressBarType' | 'shouldShowPageNumber' | 'readingDirection'>) => {
+    Pick<TReaderProgressBarContext, 'isMaximized'>) => {
    const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
    const { currentPageIndex, pages, totalPages } = useReaderStoreShallow((state) => ({
        currentPageIndex: state.pages.currentPageIndex,
        pages: state.pages.pages,
        totalPages: state.pages.totalPages,
    }));
+    const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderStoreShallow((state) => ({
+        readingDirection: state.settings.readingDirection.value,
+        shouldShowPageNumber: state.settings.shouldShowPageNumber,
+        progressBarType: state.settings.progressBarType,
+    }));

    const pageName = useMemo(() => {
        const currentPageName = getPage(currentPageIndex, pages).name;
@@ -89,11 +90,6 @@ const BaseReaderPageNumber = ({

 export const ReaderPageNumber = withPropsFrom(
    BaseReaderPageNumber,
-    [
-        ReaderService.useOverlayMode,
-        useNavBarContext,
-        useReaderProgressBarContext,
-        ReaderService.useSettingsWithoutDefaultFlag,
-    ],
-    ['isDesktop', 'readerNavBarWidth', 'isMaximized', 'progressBarType', 'shouldShowPageNumber', 'readingDirection'],
+    [ReaderService.useOverlayMode, useNavBarContext, useReaderProgressBarContext],
+    ['isDesktop', 'readerNavBarWidth', 'isMaximized'],
 );
--- a/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
+++ b/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
@@ -27,10 +27,9 @@ import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
-import { IReaderSettings } from '@/features/reader/Reader.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx';
-import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
+import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => {
    const wasNavBarStaticRef = useRef(isStaticNav);
@@ -54,10 +53,7 @@ const BaseReaderNavBarDesktop = ({
    isVisible,
    openSettings,
    setReaderNavBarWidth,
-    isStaticNav,
-}: ReaderNavBarDesktopProps &
-    Pick<NavbarContextType, 'setReaderNavBarWidth'> &
-    Pick<IReaderSettings, 'isStaticNav'>) => {
+}: ReaderNavBarDesktopProps & Pick<NavbarContextType, 'setReaderNavBarWidth'>) => {
    const { t } = useTranslation();
    const manga = useReaderStoreShallow((state) => state.manga);
    const { chapters, currentChapter, previousChapter, nextChapter } = useReaderStoreShallow((state) => ({
@@ -66,6 +62,7 @@ const BaseReaderNavBarDesktop = ({
        previousChapter: state.chapters.previousChapter,
        nextChapter: state.chapters.nextChapter,
    }));
+    const isStaticNav = useReaderStore((state) => state.settings.isStaticNav);

    const [navBarElement, setNavBarElement] = useState<HTMLDivElement | null>();
    useResizeObserver(
@@ -146,6 +143,6 @@ const BaseReaderNavBarDesktop = ({

 export const ReaderNavBarDesktop = withPropsFrom(
    memo(BaseReaderNavBarDesktop),
-    [useNavBarContext, ReaderService.useSettingsWithoutDefaultFlag],
-    ['setReaderNavBarWidth', 'isStaticNav'],
+    [useNavBarContext],
+    ['setReaderNavBarWidth'],
 );
--- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx
+++ b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx
@@ -16,17 +16,14 @@ import { Select } from '@/base/components/inputs/Select.tsx';
 import { getNextIndexFromPage, getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import { useGetOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
-import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { ReaderNavBarDesktopNextPreviousButton } from '@/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopNextPreviousButton.tsx';
 import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx';
-import { IReaderSettings } from '@/features/reader/Reader.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
-import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
+import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 const BaseReaderNavBarDesktopPageNavigation = ({
-    readingDirection,
    openPage,
-}: Pick<IReaderSettings, 'readingDirection'> & {
+}: {
    openPage: ReturnType<typeof ReaderControls.useOpenPage>;
 }) => {
    const { t } = useTranslation();
@@ -35,6 +32,7 @@ const BaseReaderNavBarDesktopPageNavigation = ({
        currentPageIndex: state.pages.currentPageIndex,
        pages: state.pages.pages,
    }));
+    const readingDirection = useReaderStore((state) => state.settings.readingDirection.value);

    const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
    const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection];
@@ -82,6 +80,6 @@ const BaseReaderNavBarDesktopPageNavigation = ({

 export const ReaderNavBarDesktopPageNavigation = withPropsFrom(
    memo(BaseReaderNavBarDesktopPageNavigation),
-    [() => ({ openPage: ReaderControls.useOpenPage() }), ReaderService.useSettingsWithoutDefaultFlag],
-    ['readingDirection', 'openPage'],
+    [() => ({ openPage: ReaderControls.useOpenPage() })],
+    ['openPage'],
 );
--- a/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx
+++ b/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx
@@ -10,35 +10,27 @@ import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
 import SettingsIcon from '@mui/icons-material/Settings';
+import { memo } from 'react';
 import { ReaderNavBarDesktopPageScale } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopPageScale.tsx';
 import { ReaderNavBarDesktopReadingMode } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingMode.tsx';
 import { ReaderNavBarDesktopOffsetDoubleSpread } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopOffsetDoubleSpread.tsx';
 import { ReaderNavBarDesktopReadingDirection } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingDirection.tsx';
-import { IReaderSettingsWithDefaultFlag } from '@/features/reader/Reader.types.ts';
 import { ReaderNavBarDesktopProps } from '@/features/reader/overlay/ReaderOverlay.types.ts';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
-import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { ReaderNavBarDesktopAutoScroll } from '@/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx';
+import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

-const BaseReaderNavBarDesktopQuickSettings = ({
-    readingMode,
-    shouldOffsetDoubleSpreads,
-    pageScaleMode,
-    shouldStretchPage,
-    readingDirection,
-    autoScroll,
-    openSettings,
-}: Pick<ReaderNavBarDesktopProps, 'openSettings'> &
-    Pick<
-        IReaderSettingsWithDefaultFlag,
-        | 'readingMode'
-        | 'shouldOffsetDoubleSpreads'
-        | 'pageScaleMode'
-        | 'shouldStretchPage'
-        | 'readingDirection'
-        | 'autoScroll'
-    >) => {
+const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick<ReaderNavBarDesktopProps, 'openSettings'>) => {
    const { t } = useTranslation();
+    const { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection, autoScroll } =
+        useReaderStoreShallow((state) => ({
+            readingMode: state.settings.readingMode,
+            shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads,
+            pageScaleMode: state.settings.pageScaleMode,
+            shouldStretchPage: state.settings.shouldStretchPage,
+            readingDirection: state.settings.readingDirection,
+            autoScroll: state.settings.autoScroll,
+        }));

    return (
        <Stack sx={{ gap: 1 }}>
@@ -85,15 +77,4 @@ const BaseReaderNavBarDesktopQuickSettings = ({
    );
 };

-export const ReaderNavBarDesktopQuickSettings = withPropsFrom(
-    BaseReaderNavBarDesktopQuickSettings,
-    [ReaderService.useSettings],
-    [
-        'readingMode',
-        'shouldOffsetDoubleSpreads',
-        'pageScaleMode',
-        'shouldStretchPage',
-        'readingDirection',
-        'autoScroll',
-    ],
-);
+export const ReaderNavBarDesktopQuickSettings = memo(BaseReaderNavBarDesktopQuickSettings);
--- a/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx
+++ b/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx
@@ -13,22 +13,21 @@ import { ReaderSettingReadingMode } from '@/features/reader/settings/layout/comp
 import { ReaderSettingReadingDirection } from '@/features/reader/settings/layout/components/ReaderSettingReadingDirection.tsx';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { DefaultSettingFootnote } from '@/features/reader/settings/components/DefaultSettingFootnote.tsx';
-import { IReaderSettingsWithDefaultFlag } from '@/features/reader/Reader.types.ts';
-import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { ReaderSettingAutoScroll } from '@/features/reader/auto-scroll/settings/ReaderSettingAutoScroll.tsx';
 import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
 import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

-const BaseReaderBottomBarMobileQuickSettings = ({
-    readingMode,
-    readingDirection,
-    autoScroll,
-}: Pick<IReaderSettingsWithDefaultFlag, 'readingMode' | 'readingDirection' | 'autoScroll'>) => {
+const BaseReaderBottomBarMobileQuickSettings = () => {
    const { t } = useTranslation();
    const { isActive, toggleActive } = useReaderStoreShallow((state) => ({
        isActive: state.autoScroll.isActive,
        toggleActive: state.autoScroll.toggleActive,
    }));
+    const { readingMode, readingDirection, autoScroll } = useReaderStoreShallow((state) => ({
+        readingMode: state.settings.readingMode,
+        readingDirection: state.settings.readingDirection,
+        autoScroll: state.settings.autoScroll,
+    }));

    return (
        <Stack sx={{ gap: 2 }}>
@@ -58,8 +57,4 @@ const BaseReaderBottomBarMobileQuickSettings = ({
    );
 };

-export const ReaderBottomBarMobileQuickSettings = withPropsFrom(
-    memo(BaseReaderBottomBarMobileQuickSettings),
-    [ReaderService.useSettings],
-    ['readingMode', 'readingDirection', 'autoScroll'],
-);
+export const ReaderBottomBarMobileQuickSettings = memo(BaseReaderBottomBarMobileQuickSettings);
--- a/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx
+++ b/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx
@@ -35,22 +35,20 @@ import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx';
 import { ReaderProgressBarSlotWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarSlotWrapper.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
-import { IReaderSettings, ReadingMode } from '@/features/reader/Reader.types.ts';
-import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
+import { ReadingMode } from '@/features/reader/Reader.types.ts';
+import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 const BaseReaderProgressBar = ({
    slotProps,
    slots,
    createProgressBarSlot,
    progressBarPosition,
-    readingMode,
    isDragging,
    setIsDragging,
    openPage,
    direction,
    fullSegmentClicks,
 }: ReaderProgressBarProps &
-    Pick<IReaderSettings, 'readingMode'> &
    Pick<TReaderProgressBarContext, 'isDragging' | 'setIsDragging'> &
    Pick<ComponentProps<typeof ReaderProgressBarSlotWrapper>, 'createProgressBarSlot'> & {
        slotProps?: {
@@ -80,6 +78,7 @@ const BaseReaderProgressBar = ({
        totalPages: state.pages.totalPages,
        currentPageIndex: state.pages.currentPageIndex,
    }));
+    const readingMode = useReaderStore((state) => state.settings.readingMode.value);

    const progressBarRef = useRef<HTMLDivElement | null>(null);
    const draggingDetectionTimeout = useRef<NodeJS.Timeout>(undefined);
@@ -250,10 +249,6 @@ const BaseReaderProgressBar = ({

 export const ReaderProgressBar = withPropsFrom(
    memo(BaseReaderProgressBar),
-    [
-        useReaderProgressBarContext,
-        () => ({ openPage: ReaderControls.useOpenPage() }),
-        ReaderService.useSettingsWithoutDefaultFlag,
-    ],
-    ['isDragging', 'setIsDragging', 'openPage', 'readingMode'],
+    [useReaderProgressBarContext, () => ({ openPage: ReaderControls.useOpenPage() })],
+    ['isDragging', 'setIsDragging', 'openPage'],
 );
--- a/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx
+++ b/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx
@@ -10,7 +10,7 @@ import { useTheme } from '@mui/material/styles';
 import { memo, useCallback, useState } from 'react';
 import { ReaderProgressBar } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.tsx';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
-import { IReaderSettings, ProgressBarType } from '@/features/reader/Reader.types.ts';
+import { ProgressBarType } from '@/features/reader/Reader.types.ts';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { getProgressBarPositionInfo } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { ReaderProgressBarDirectionWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarDirectionWrapper.tsx';
@@ -29,23 +29,22 @@ const BaseStandardReaderProgressBar = ({
    isMaximized,
    setIsMaximized,
    isDragging,
-    progressBarType,
-    progressBarSize,
-    progressBarPosition,
-    progressBarPositionAutoVertical,
    readerDirection,
 }: Pick<NavbarContextType, 'readerNavBarWidth'> &
-    Pick<TReaderProgressBarContext, 'isMaximized' | 'setIsMaximized' | 'isDragging'> &
-    Pick<
-        IReaderSettings,
-        'progressBarType' | 'progressBarSize' | 'progressBarPosition' | 'progressBarPositionAutoVertical'
-    > & {
+    Pick<TReaderProgressBarContext, 'isMaximized' | 'setIsMaximized' | 'isDragging'> & {
        readerDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
    }) => {
    const theme = useTheme();

    const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
    const totalPages = useReaderStore((state) => state.pages.totalPages);
+    const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } =
+        useReaderStoreShallow((state) => ({
+            progressBarType: state.settings.progressBarType,
+            progressBarSize: state.settings.progressBarSize,
+            progressBarPosition: state.settings.progressBarPosition,
+            progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
+        }));

    const [, setRefreshProgressBarPosition] = useState({});
    useResizeObserver(
@@ -244,21 +243,6 @@ const BaseStandardReaderProgressBar = ({

 export const StandardReaderProgressBar = withPropsFrom(
    memo(BaseStandardReaderProgressBar),
-    [
-        useNavBarContext,
-        useReaderProgressBarContext,
-        ReaderService.useSettingsWithoutDefaultFlag,
-        () => ({ readerDirection: ReaderService.useGetThemeDirection() }),
-    ],
-    [
-        'readerNavBarWidth',
-        'isMaximized',
-        'setIsMaximized',
-        'isDragging',
-        'progressBarType',
-        'progressBarSize',
-        'progressBarPosition',
-        'progressBarPositionAutoVertical',
-        'readerDirection',
-    ],
+    [useNavBarContext, useReaderProgressBarContext, () => ({ readerDirection: ReaderService.useGetThemeDirection() })],
+    ['readerNavBarWidth', 'isMaximized', 'setIsMaximized', 'isDragging', 'readerDirection'],
 );
--- a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
+++ b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
@@ -21,7 +21,7 @@ import {
    getProgressBarPositionInfo,
 } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
-import { IReaderSettings, ProgressBarPosition } from '@/features/reader/Reader.types.ts';
+import { ProgressBarPosition } from '@/features/reader/Reader.types.ts';
 import { ReaderProgressBarDirectionWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarDirectionWrapper.tsx';
 import { useReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
@@ -45,16 +45,13 @@ const BaseMobileReaderProgressBar = ({
    setIsMaximized,
    isDragging,
    direction: readerDirection,
-    progressBarPosition,
-    progressBarPositionAutoVertical,
    topOffset = 0,
    bottomOffset = 0,
-}: Pick<TReaderProgressBarContext, 'setIsMaximized' | 'isDragging'> &
-    Pick<IReaderSettings, 'progressBarPosition' | 'progressBarPositionAutoVertical'> & {
-        direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
-        topOffset?: number;
-        bottomOffset?: number;
-    }) => {
+}: Pick<TReaderProgressBarContext, 'setIsMaximized' | 'isDragging'> & {
+    direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
+    topOffset?: number;
+    bottomOffset?: number;
+}) => {
    const openChapter = ReaderControls.useOpenChapter();
    const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
    const isVisible = useReaderStore((state) => state.overlay.isVisible);
@@ -66,6 +63,10 @@ const BaseMobileReaderProgressBar = ({
        previousChapter: state.chapters.previousChapter,
        nextChapter: state.chapters.nextChapter,
    }));
+    const { progressBarPosition, progressBarPositionAutoVertical } = useReaderStoreShallow((state) => ({
+        progressBarPosition: state.settings.progressBarPosition,
+        progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
+    }));

    const [, setRefreshProgressBarPosition] = useState({});
    useResizeObserver(
@@ -353,10 +354,6 @@ const BaseMobileReaderProgressBar = ({

 export const MobileReaderProgressBar = withPropsFrom(
    memo(BaseMobileReaderProgressBar),
-    [
-        useReaderProgressBarContext,
-        () => ({ direction: ReaderService.useGetThemeDirection() }),
-        ReaderService.useSettingsWithoutDefaultFlag,
-    ],
-    ['setIsMaximized', 'isDragging', 'direction', 'progressBarPosition', 'progressBarPositionAutoVertical'],
+    [useReaderProgressBarContext, () => ({ direction: ReaderService.useGetThemeDirection() })],
+    ['setIsMaximized', 'isDragging', 'direction'],
 );