Cleanup reader store slices hooks

src/features/reader/auto-scroll/ReaderAutoScroll.tsx

@@ -31,12 +31,12 @@ const BaseReaderAutoScroll = ({
     combinedDirection: Direction;
 }) => {
     const { scrollRef, direction } = useReaderAutoScrollStore((state) => ({
-        scrollRef: state.autoScroll.scrollRef,
+        scrollRef: state.scrollRef,
-        direction: state.autoScroll.direction,
+        direction: state.direction,
     }));
     const { readingMode, autoScroll } = useReaderSettingsStore((state) => ({
-        readingMode: state.settings.readingMode.value,
+        readingMode: state.readingMode.value,
-        autoScroll: state.settings.autoScroll,
+        autoScroll: state.autoScroll,
     }));
 
     const isScrollingInvertedBasedOnReadingDirection =

src/features/reader/auto-scroll/hooks/useReaderAutoScroll.ts

@@ -12,7 +12,7 @@ import { getReaderAutoScrollStore, useReaderAutoScrollStore } from '@/features/r
 
 export const useReaderAutoScroll = (isOverlayVisible: boolean, isStaticNav: IReaderSettings['isStaticNav']): void => {
     const { isPaused } = useReaderAutoScrollStore((state) => ({
-        isPaused: state.autoScroll.isPaused,
+        isPaused: state.isPaused,
     }));
 
     useEffect(() => {

src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx

@@ -28,7 +28,7 @@ export const ReaderNavBarDesktopAutoScroll = ({
     setAutoScroll: (newAutoScroll: IReaderSettings['autoScroll'], commit: boolean) => void;
 }) => {
     const { t } = useLingui();
-    const isActive = useReaderAutoScrollStore((state) => state.autoScroll.isActive);
+    const isActive = useReaderAutoScrollStore((state) => state.isActive);
 
     const updateTimeout = useRef<NodeJS.Timeout>(undefined);
 

src/features/reader/filters/ReaderRGBAFilter.tsx

@@ -16,7 +16,7 @@ const BaseReaderRGBAFilter = ({ readerNavBarWidth }: Pick<NavbarContextType, 're
     const {
         value: { red, green, blue, alpha, blendMode },
         enabled,
-    } = useReaderSettingsStore((state) => state.settings.customFilter.rgba);
+    } = useReaderSettingsStore((state) => state.customFilter.rgba);
 
     if (!enabled) {
         return null;

src/features/reader/hotkeys/ReaderHotkeys.tsx

@@ -66,7 +66,7 @@ export const ReaderHotkeys = ({
     const readerThemeDirection = ReaderService.useGetThemeDirection();
     const { enableScope, disableScope } = useHotkeysContext();
     const { hotkeys } = useReaderSettingsStore((state) => ({
-        hotkeys: state.settings.hotkeys,
+        hotkeys: state.hotkeys,
     }));
     const exitReader = ReaderService.useExit();
 

src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts

@@ -247,10 +247,10 @@ export const useReaderInfiniteScrollUpdateChapter = (
 ) => {
     const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderSettingsStore(
         (state) => ({
-            readingMode: state.settings.readingMode.value,
+            readingMode: state.readingMode.value,
-            readingDirection: state.settings.readingDirection.value,
+            readingDirection: state.readingDirection.value,
-            shouldUseInfiniteScroll: state.settings.shouldUseInfiniteScroll,
+            shouldUseInfiniteScroll: state.shouldUseInfiniteScroll,
-            shouldShowTransitionPage: state.settings.shouldShowTransitionPage,
+            shouldShowTransitionPage: state.shouldShowTransitionPage,
         }),
     );
 

src/features/reader/overlay/ReaderOverlay.tsx

@@ -23,7 +23,7 @@ const BaseReaderOverlay = ({
     isDesktop,
     isMobile,
 }: Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop' | 'isMobile'>) => {
-    const isVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
+    const isVisible = useReaderOverlayStore((state) => state.isVisible);
 
     const [areSettingsOpen, setAreSettingsOpen] = useState(false);
 

src/features/reader/overlay/components/ReaderPageNumber.tsx

@@ -29,18 +29,18 @@ const BaseReaderPageNumber = ({
     readerNavBarWidth,
 }: Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop'> &
     Pick<NavbarContextType, 'readerNavBarWidth'>) => {
-    const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
+    const scrollbar = useReaderScrollbarStore((state) => state);
     const { currentPageIndex, pages, totalPages } = useReaderPagesStore((state) => ({
-        currentPageIndex: state.pages.currentPageIndex,
+        currentPageIndex: state.currentPageIndex,
-        pages: state.pages.pages,
+        pages: state.pages,
-        totalPages: state.pages.totalPages,
+        totalPages: state.totalPages,
     }));
     const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderSettingsStore((state) => ({
-        readingDirection: state.settings.readingDirection.value,
+        readingDirection: state.readingDirection.value,
-        shouldShowPageNumber: state.settings.shouldShowPageNumber,
+        shouldShowPageNumber: state.shouldShowPageNumber,
-        progressBarType: state.settings.progressBarType,
+        progressBarType: state.progressBarType,
     }));
-    const isMaximized = useReaderProgressBarStore((state) => state.progressBar.isMaximized);
+    const isMaximized = useReaderProgressBarStore((state) => state.isMaximized);
 
     const pageName = useMemo(() => {
         const currentPageName = getPage(currentPageIndex, pages).name;

src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts

@@ -18,7 +18,7 @@ export const useReaderHideOverlayOnUserScroll = (
     scrollElementRef: MutableRefObject<HTMLDivElement | null>,
 ) => {
     const { showPreview } = useReaderTapZoneStore((state) => ({
-        showPreview: state.tapZone.showPreview,
+        showPreview: state.showPreview,
     }));
 
     useEffect(() => {

src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx

@@ -41,10 +41,10 @@ const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' };
 const BaseReaderOverlayHeaderMobile = ({ isVisible, ref }: MobileHeaderProps & { ref?: Ref<HTMLDivElement> }) => {
     const { t } = useLingui();
     const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' });
-    const currentChapter = useReaderChaptersStore((state) => state.chapters.currentChapter);
+    const currentChapter = useReaderChaptersStore((state) => state.currentChapter);
 
     const manga = useReaderStore((state) => state.manga);
-    const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
+    const scrollbar = useReaderScrollbarStore((state) => state);
 
     const { id: mangaId, title } = manga ?? DEFAULT_MANGA;
     const { id: chapterId, name, realUrl, isBookmarked } = currentChapter ?? FALLBACK_CHAPTER;

src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx

@@ -69,15 +69,15 @@ const BaseReaderNavBarDesktop = ({
         previousChapter,
         nextChapter,
     } = useReaderChaptersStore((state) => ({
-        chapters: state.chapters.chapters,
+        chapters: state.chapters,
-        currentChapterId: state.chapters.currentChapter?.id,
+        currentChapterId: state.currentChapter?.id,
-        currentChapterName: state.chapters.currentChapter?.name,
+        currentChapterName: state.currentChapter?.name,
-        currentChapterNumber: state.chapters.currentChapter?.chapterNumber,
+        currentChapterNumber: state.currentChapter?.chapterNumber,
-        currentChapterScanlator: state.chapters.currentChapter?.scanlator,
+        currentChapterScanlator: state.currentChapter?.scanlator,
-        previousChapter: state.chapters.previousChapter,
+        previousChapter: state.previousChapter,
-        nextChapter: state.chapters.nextChapter,
+        nextChapter: state.nextChapter,
     }));
-    const isStaticNav = useReaderSettingsStore((state) => state.settings.isStaticNav);
+    const isStaticNav = useReaderSettingsStore((state) => state.isStaticNav);
 
     const [navBarElement, setNavBarElement] = useState<HTMLDivElement | null>();
     useResizeObserver(

src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx

@@ -65,14 +65,14 @@ const DownloadButton = ({ id = -1, isDownloaded }: ChapterIdInfo & ChapterDownlo
 
 export const ReaderNavBarDesktopActions = memo(() => {
     const { id, isDownloaded, isBookmarked, realUrl } = useReaderChaptersStore((state) => ({
-        id: state.chapters.currentChapter?.id ?? FALLBACK_CHAPTER.id,
+        id: state.currentChapter?.id ?? FALLBACK_CHAPTER.id,
-        isDownloaded: state.chapters.currentChapter?.isDownloaded ?? FALLBACK_CHAPTER.isDownloaded,
+        isDownloaded: state.currentChapter?.isDownloaded ?? FALLBACK_CHAPTER.isDownloaded,
-        isBookmarked: state.chapters.currentChapter?.isBookmarked ?? FALLBACK_CHAPTER.isBookmarked,
+        isBookmarked: state.currentChapter?.isBookmarked ?? FALLBACK_CHAPTER.isBookmarked,
-        realUrl: state.chapters.currentChapter?.realUrl ?? FALLBACK_CHAPTER.realUrl,
+        realUrl: state.currentChapter?.realUrl ?? FALLBACK_CHAPTER.realUrl,
     }));
 
     const { t } = useLingui();
-    const pageLoadStates = useReaderPagesStore((state) => state.pages.pageLoadStates);
+    const pageLoadStates = useReaderPagesStore((state) => state.pageLoadStates);
 
     const pageRetryKeyPrefix = useRef<number>(0);
 

src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx

@@ -24,10 +24,10 @@ const BaseReaderNavBarDesktopPageNavigation = () => {
     const { t } = useLingui();
     const getOptionForDirection = useGetOptionForDirection();
     const { currentPageIndex, pages } = useReaderPagesStore((state) => ({
-        currentPageIndex: state.pages.currentPageIndex,
+        currentPageIndex: state.currentPageIndex,
-        pages: state.pages.pages,
+        pages: state.pages,
     }));
-    const readingDirection = useReaderSettingsStore((state) => state.settings.readingDirection.value);
+    const readingDirection = useReaderSettingsStore((state) => state.readingDirection.value);
 
     const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
     const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection];

src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx

@@ -24,12 +24,12 @@ const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick<ReaderNavBa
     const { t } = useLingui();
     const { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection, autoScroll } =
         useReaderSettingsStore((state) => ({
-            readingMode: state.settings.readingMode,
+            readingMode: state.readingMode,
-            shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads,
+            shouldOffsetDoubleSpreads: state.shouldOffsetDoubleSpreads,
-            pageScaleMode: state.settings.pageScaleMode,
+            pageScaleMode: state.pageScaleMode,
-            shouldStretchPage: state.settings.shouldStretchPage,
+            shouldStretchPage: state.shouldStretchPage,
-            readingDirection: state.settings.readingDirection,
+            readingDirection: state.readingDirection,
-            autoScroll: state.settings.autoScroll,
+            autoScroll: state.autoScroll,
         }));
 
     return (

src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx

@@ -33,13 +33,13 @@ const BaseReaderBottomBarMobile = ({
 }: ReaderBottomBarMobileProps & { topOffset?: number }) => {
     const { t } = useLingui();
     const { currentChapterId, chapters } = useReaderChaptersStore((state) => ({
-        currentChapterId: state.chapters.currentChapter?.id,
+        currentChapterId: state.currentChapter?.id,
-        chapters: state.chapters.chapters,
+        chapters: state.chapters,
     }));
 
     const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' });
     const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-dialog' });
-    const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
+    const scrollbar = useReaderScrollbarStore((state) => state);
 
     const [bottomBarRefHeight, setBottomBarRefHeight] = useState(0);
     const bottomBarRef = useRef<HTMLDivElement>(null);

src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx

@@ -23,11 +23,11 @@ import {
 
 const BaseReaderBottomBarMobileQuickSettings = () => {
     const { t } = useLingui();
-    const isActive = useReaderAutoScrollStore((state) => state.autoScroll.isActive);
+    const isActive = useReaderAutoScrollStore((state) => state.isActive);
     const { readingMode, readingDirection, autoScroll } = useReaderSettingsStore((state) => ({
-        readingMode: state.settings.readingMode,
+        readingMode: state.readingMode,
-        readingDirection: state.settings.readingDirection,
+        readingDirection: state.readingDirection,
-        autoScroll: state.settings.autoScroll,
+        autoScroll: state.autoScroll,
     }));
 
     return (

src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx

@@ -68,13 +68,13 @@ const BaseReaderProgressBar = ({
         fullSegmentClicks: boolean;
     }) => {
     const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderPagesStore((state) => ({
-        pages: state.pages.pages,
+        pages: state.pages,
-        pageLoadStates: state.pages.pageLoadStates,
+        pageLoadStates: state.pageLoadStates,
-        totalPages: state.pages.totalPages,
+        totalPages: state.totalPages,
-        currentPageIndex: state.pages.currentPageIndex,
+        currentPageIndex: state.currentPageIndex,
     }));
-    const readingMode = useReaderSettingsStore((state) => state.settings.readingMode.value);
+    const readingMode = useReaderSettingsStore((state) => state.readingMode.value);
-    const isDragging = useReaderProgressBarStore((state) => state.progressBar.isDragging);
+    const isDragging = useReaderProgressBarStore((state) => state.isDragging);
 
     const progressBarRef = useRef<HTMLDivElement | null>(null);
     const draggingDetectionTimeout = useRef<NodeJS.Timeout>(undefined);

src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx

@@ -36,18 +36,18 @@ const BaseStandardReaderProgressBar = ({
 }) => {
     const theme = useTheme();
 
-    const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
+    const scrollbar = useReaderScrollbarStore((state) => state);
-    const totalPages = useReaderPagesStore((state) => state.pages.totalPages);
+    const totalPages = useReaderPagesStore((state) => state.totalPages);
     const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } =
         useReaderSettingsStore((state) => ({
-            progressBarType: state.settings.progressBarType,
+            progressBarType: state.progressBarType,
-            progressBarSize: state.settings.progressBarSize,
+            progressBarSize: state.progressBarSize,
-            progressBarPosition: state.settings.progressBarPosition,
+            progressBarPosition: state.progressBarPosition,
-            progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
+            progressBarPositionAutoVertical: state.progressBarPositionAutoVertical,
         }));
     const { isMaximized, isDragging } = useReaderProgressBarStore((state) => ({
-        isMaximized: state.progressBar.isMaximized,
+        isMaximized: state.isMaximized,
-        isDragging: state.progressBar.isDragging,
+        isDragging: state.isDragging,
     }));
 
     const [, setRefreshProgressBarPosition] = useState({});

src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx

@@ -56,21 +56,21 @@ const BaseMobileReaderProgressBar = ({
     topOffset?: number;
     bottomOffset?: number;
 }) => {
-    const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
+    const scrollbar = useReaderScrollbarStore((state) => state);
-    const isVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
+    const isVisible = useReaderOverlayStore((state) => state.isVisible);
     const { currentPageIndex, pages } = useReaderPagesStore((state) => ({
-        currentPageIndex: state.pages.currentPageIndex,
+        currentPageIndex: state.currentPageIndex,
-        pages: state.pages.pages,
+        pages: state.pages,
     }));
     const { previousChapter, nextChapter } = useReaderChaptersStore((state) => ({
-        previousChapter: state.chapters.previousChapter,
+        previousChapter: state.previousChapter,
-        nextChapter: state.chapters.nextChapter,
+        nextChapter: state.nextChapter,
     }));
     const { progressBarPosition, progressBarPositionAutoVertical } = useReaderSettingsStore((state) => ({
-        progressBarPosition: state.settings.progressBarPosition,
+        progressBarPosition: state.progressBarPosition,
-        progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
+        progressBarPositionAutoVertical: state.progressBarPositionAutoVertical,
     }));
-    const isDragging = useReaderProgressBarStore((state) => state.progressBar.isDragging);
+    const isDragging = useReaderProgressBarStore((state) => state.isDragging);
 
     const [, setRefreshProgressBarPosition] = useState({});
     useResizeObserver(

src/features/reader/screens/Reader.tsx

@@ -52,10 +52,10 @@ const BaseReader = ({
     const manga = useReaderStore((state) => state.manga);
     const { mangaChapters, initialChapter, chapterForDuplicatesHandling, currentChapter } = useReaderChaptersStore(
         (state) => ({
-            mangaChapters: state.chapters.mangaChapters,
+            mangaChapters: state.mangaChapters,
-            initialChapter: state.chapters.initialChapter,
+            initialChapter: state.initialChapter,
-            chapterForDuplicatesHandling: state.chapters.chapterForDuplicatesHandling,
+            chapterForDuplicatesHandling: state.chapterForDuplicatesHandling,
-            currentChapter: state.chapters.currentChapter,
+            currentChapter: state.currentChapter,
         }),
     );
     const {
@@ -68,14 +68,14 @@ const BaseReader = ({
         shouldShowReadingModePreview,
         shouldShowTapZoneLayoutPreview,
     } = useReaderSettingsStore((state) => ({
-        shouldSkipDupChapters: state.settings.shouldSkipDupChapters,
+        shouldSkipDupChapters: state.shouldSkipDupChapters,
-        shouldSkipFilteredChapters: state.settings.shouldSkipFilteredChapters,
+        shouldSkipFilteredChapters: state.shouldSkipFilteredChapters,
-        backgroundColor: state.settings.backgroundColor,
+        backgroundColor: state.backgroundColor,
-        readingMode: state.settings.readingMode,
+        readingMode: state.readingMode,
-        tapZoneLayout: state.settings.tapZoneLayout,
+        tapZoneLayout: state.tapZoneLayout,
-        tapZoneInvertMode: state.settings.tapZoneInvertMode,
+        tapZoneInvertMode: state.tapZoneInvertMode,
-        shouldShowReadingModePreview: state.settings.shouldShowReadingModePreview,
+        shouldShowReadingModePreview: state.shouldShowReadingModePreview,
-        shouldShowTapZoneLayoutPreview: state.settings.shouldShowTapZoneLayoutPreview,
+        shouldShowTapZoneLayoutPreview: state.shouldShowTapZoneLayoutPreview,
     }));
 
     const scrollElementRef = useRef<HTMLDivElement | null>(null);

src/features/reader/services/ReaderService.ts

@@ -230,7 +230,7 @@ export class ReaderService {
 
     static useGetThemeDirection(): Direction {
         const { direction } = useTheme();
-        const readingDirection = useReaderSettingsStore((state) => state.settings.readingDirection.value);
+        const readingDirection = useReaderSettingsStore((state) => state.readingDirection.value);
 
         return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection
             ? direction
@@ -372,7 +372,7 @@ export class ReaderService {
 
     static useOverlayMode(): { mode: ReaderOverlayMode; isDesktop: boolean; isMobile: boolean } {
         const isTouchDevice = MediaQuery.useIsTouchDevice();
-        const overlayMode = useReaderSettingsStore((state) => state.settings.overlayMode);
+        const overlayMode = useReaderSettingsStore((state) => state.overlayMode);
 
         const isAutoModeSelected = overlayMode === ReaderOverlayMode.AUTO;
         const isDesktopModeSelected = overlayMode === ReaderOverlayMode.DESKTOP;
@@ -389,7 +389,7 @@ export class ReaderService {
     }
 
     static useExit(): () => void {
-        const exitMode = useReaderSettingsStore((state) => state.settings.exitMode);
+        const exitMode = useReaderSettingsStore((state) => state.exitMode);
         const handleBack = useBackButton();
         const navigate = useNavigate();
 

src/features/reader/settings/screens/ReaderSettings.tsx

@@ -18,7 +18,7 @@ import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
 
 export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () => void }) => {
-    const settings = useReaderSettingsStore((state) => state.settings);
+    const settings = useReaderSettingsStore((state) => state);
 
     useDisableAllHotkeysWhileMounted(isOpen);
 

src/features/reader/stores/ReaderStore.ts

@@ -166,26 +166,34 @@ const readerStore = create<ReaderStore>()(
 export const useReaderStore = <T>(selector: (state: ReaderStore) => T): T => readerStore(useShallow(selector));
 export const getReaderStore = () => readerStore.getState();
 
-export const useReaderScrollbarStore = useReaderStore;
+export const useReaderScrollbarStore = <T>(selector: (state: ReaderStore['scrollbar']) => T): T =>
+    readerStore(useShallow((state) => selector(state.scrollbar)));
 export const getReaderScrollbarStore = () => readerStore.getState().scrollbar;
 
-export const useReaderSettingsStore = useReaderStore;
+export const useReaderSettingsStore = <T>(selector: (state: ReaderStore['settings']) => T): T =>
+    readerStore(useShallow((state) => selector(state.settings)));
 export const getReaderSettingsStore = () => readerStore.getState().settings;
 
-export const useReaderOverlayStore = useReaderStore;
+export const useReaderOverlayStore = <T>(selector: (state: ReaderOverlayStoreSlice['overlay']) => T): T =>
+    readerStore(useShallow((state) => selector(state.overlay)));
 export const getReaderOverlayStore = () => readerStore.getState().overlay;
 
-export const useReaderAutoScrollStore = useReaderStore;
+export const useReaderAutoScrollStore = <T>(selector: (state: ReaderAutoScrollStoreSlice['autoScroll']) => T): T =>
+    readerStore(useShallow((state) => selector(state.autoScroll)));
 export const getReaderAutoScrollStore = () => readerStore.getState().autoScroll;
 
-export const useReaderPagesStore = useReaderStore;
+export const useReaderPagesStore = <T>(selector: (state: ReaderPagesStoreSlice['pages']) => T): T =>
+    readerStore(useShallow((state) => selector(state.pages)));
 export const getReaderPagesStore = () => readerStore.getState().pages;
 
-export const useReaderChaptersStore = useReaderStore;
+export const useReaderChaptersStore = <T>(selector: (state: ReaderChaptersStoreSlice['chapters']) => T): T =>
+    readerStore(useShallow((state) => selector(state.chapters)));
 export const getReaderChaptersStore = () => readerStore.getState().chapters;
 
-export const useReaderProgressBarStore = useReaderStore;
+export const useReaderProgressBarStore = <T>(selector: (state: ReaderProgressBarStoreSlice['progressBar']) => T): T =>
+    readerStore(useShallow((state) => selector(state.progressBar)));
 export const getReaderProgressBarStore = () => readerStore.getState().progressBar;
 
-export const useReaderTapZoneStore = useReaderStore;
+export const useReaderTapZoneStore = <T>(selector: (state: ReaderTapZoneStoreSlice['tapZone']) => T): T =>
+    readerStore(useShallow((state) => selector(state.tapZone)));
 export const getReaderTapZoneStore = () => readerStore.getState().tapZone;

src/features/reader/tap-zones/TapZoneLayout.tsx

@@ -22,11 +22,11 @@ const CANVAS_ID = 'reader-tap-zone-layout-canvas';
 const BaseTapZoneLayout = ({ readerNavBarWidth }: Pick<NavbarContextType, 'readerNavBarWidth'>) => {
     const theme = useTheme();
     const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderSettingsStore((state) => ({
-        tapZoneLayout: state.settings.tapZoneLayout.value,
+        tapZoneLayout: state.tapZoneLayout.value,
-        tapZoneInvertMode: state.settings.tapZoneInvertMode.value,
+        tapZoneInvertMode: state.tapZoneInvertMode.value,
-        readingDirection: state.settings.readingDirection.value,
+        readingDirection: state.readingDirection.value,
     }));
-    const showPreview = useReaderTapZoneStore((state) => state.tapZone.showPreview);
+    const showPreview = useReaderTapZoneStore((state) => state.showPreview);
 
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);

src/features/reader/viewer/ReaderViewer.tsx

@@ -72,23 +72,23 @@ const BaseReaderViewer = ({
     ref?: ForwardedRef<HTMLDivElement | null>;
 }) => {
     const { direction: themeDirection } = useTheme();
-    const isOverlayVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
+    const isOverlayVisible = useReaderOverlayStore((state) => state.isVisible);
     const { currentPageIndex, pageToScrollToIndex, pages, totalPages, transitionPageMode, retryFailedPagesKeyPrefix } =
         useReaderPagesStore((state) => ({
-            currentPageIndex: state.pages.currentPageIndex,
+            currentPageIndex: state.currentPageIndex,
-            pageToScrollToIndex: state.pages.pageToScrollToIndex,
+            pageToScrollToIndex: state.pageToScrollToIndex,
-            pages: state.pages.pages,
+            pages: state.pages,
-            totalPages: state.pages.totalPages,
+            totalPages: state.totalPages,
-            transitionPageMode: state.pages.transitionPageMode,
+            transitionPageMode: state.transitionPageMode,
-            retryFailedPagesKeyPrefix: state.pages.retryFailedPagesKeyPrefix,
+            retryFailedPagesKeyPrefix: state.retryFailedPagesKeyPrefix,
         }));
     const { initialChapter, currentChapter, chapters, visibleChapters, isCurrentChapterReady } = useReaderChaptersStore(
         (state) => ({
-            initialChapter: state.chapters.initialChapter,
+            initialChapter: state.initialChapter,
-            currentChapter: state.chapters.currentChapter,
+            currentChapter: state.currentChapter,
-            chapters: state.chapters.chapters,
+            chapters: state.chapters,
-            visibleChapters: state.chapters.visibleChapters,
+            visibleChapters: state.visibleChapters,
-            isCurrentChapterReady: state.chapters.isCurrentChapterReady,
+            isCurrentChapterReady: state.isCurrentChapterReady,
         }),
     );
     const {
@@ -103,16 +103,16 @@ const BaseReaderViewer = ({
         shouldStretchPage,
         isStaticNav,
     } = useReaderSettingsStore((state) => ({
-        readingMode: state.settings.readingMode.value,
+        readingMode: state.readingMode.value,
-        readingDirection: state.settings.readingDirection.value,
+        readingDirection: state.readingDirection.value,
-        readerWidth: state.settings.readerWidth.value,
+        readerWidth: state.readerWidth.value,
-        pageScaleMode: state.settings.pageScaleMode.value,
+        pageScaleMode: state.pageScaleMode.value,
-        shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads.value,
+        shouldOffsetDoubleSpreads: state.shouldOffsetDoubleSpreads.value,
-        imagePreLoadAmount: state.settings.imagePreLoadAmount,
+        imagePreLoadAmount: state.imagePreLoadAmount,
-        pageGap: state.settings.pageGap.value,
+        pageGap: state.pageGap.value,
-        customFilter: state.settings.customFilter,
+        customFilter: state.customFilter,
-        shouldStretchPage: state.settings.shouldStretchPage.value,
+        shouldStretchPage: state.shouldStretchPage.value,
-        isStaticNav: state.settings.isStaticNav,
+        isStaticNav: state.isStaticNav,
     }));
     const { resumeMode = ReaderResumeMode.START } = useLocation<ReaderOpenChapterLocationState>().state ?? {
         resumeMode: ReaderResumeMode.START,

src/features/reader/viewer/components/ReaderPage.tsx

@@ -86,7 +86,7 @@ const BaseReaderPage = ({
     const { src } = props;
 
     const isTabletWidth = MediaQuery.useIsTabletWidth();
-    const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
+    const scrollbar = useReaderScrollbarStore((state) => state);
 
     const handleLoad = useCallback(
         () => onLoad?.(pagesIndex, src, isPrimaryPage),

src/features/reader/viewer/components/ReaderTransitionPage.tsx

@@ -99,12 +99,12 @@ const BaseReaderTransitionPage = ({
 }) => {
     const { t } = useLingui();
     const manga = useReaderStore((state) => state.manga);
-    const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
+    const scrollbar = useReaderScrollbarStore((state) => state);
-    const transitionPageMode = useReaderPagesStore((state) => state.pages.transitionPageMode);
+    const transitionPageMode = useReaderPagesStore((state) => state.transitionPageMode);
     const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderSettingsStore((state) => ({
-        readingMode: state.settings.readingMode.value,
+        readingMode: state.readingMode.value,
-        backgroundColor: state.settings.backgroundColor,
+        backgroundColor: state.backgroundColor,
-        shouldShowTransitionPage: state.settings.shouldShowTransitionPage,
+        shouldShowTransitionPage: state.shouldShowTransitionPage,
     }));
 
     const isPreviousType = type === ReaderTransitionPageMode.PREVIOUS;
@@ -225,7 +225,7 @@ export const ReaderTransitionPage = withPropsFrom(
     memo(BaseReaderTransitionPage) as typeof BaseReaderTransitionPage,
     [
         ({ chapterId }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId'>) => {
-            const chapters = useReaderChaptersStore((state) => state.chapters.chapters);
+            const chapters = useReaderChaptersStore((state) => state.chapters);
 
             const currentChapterIndex = useMemo(
                 () => chapters.findIndex((chapter) => chapter.id === chapterId),
@@ -248,7 +248,7 @@ export const ReaderTransitionPage = withPropsFrom(
         useNavBarContext,
         ({ chapterId, type }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId' | 'type'>) => {
             const handleBack = useBackButton();
-            const chapters = useReaderChaptersStore((state) => state.chapters.chapters);
+            const chapters = useReaderChaptersStore((state) => state.chapters);
 
             const currentChapterIndex = useMemo(
                 () => chapters.findIndex((chapter) => chapter.id === chapterId),