Move reader "settings state" to "reader store"

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'],
 );

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'],
 );

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);