Move reader "tap zone state" to "reader store"

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

@@ -1,25 +0,0 @@
-/*
- * Copyright (C) Contributors to the Suwayomi project
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
-import { createContext, useContext, ReactNode, useMemo, useState } from 'react';
-import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
-
-export const ReaderTapZoneContext = createContext<TReaderTapZoneContext>({
-    showPreview: false,
-    setShowPreview: () => undefined,
-});
-
-export const useReaderTapZoneContext = () => useContext(ReaderTapZoneContext);
-
-export const ReaderTapZoneContextProvider = ({ children }: { children: ReactNode }) => {
-    const [showPreview, setShowPreview] = useState(false);
-
-    const value = useMemo(() => ({ showPreview, setShowPreview }), [showPreview]);
-
-    return <ReaderTapZoneContext.Provider value={value}>{children}</ReaderTapZoneContext.Provider>;
-};

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

@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { ImmerStateCreator } from '@/lib/zustand/Zustand.types.ts';
+import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+
+export interface ReaderTapZoneStoreSlice {
+    tapZone: TReaderTapZoneContext & {
+        reset: () => void;
+    };
+}
+
+const DEFAULT_STATE = {
+    showPreview: false,
+} satisfies Pick<ReaderTapZoneStoreSlice['tapZone'], 'showPreview'>;
+
+export const createReaderTapZoneStoreSlice = <T extends ReaderTapZoneStoreSlice>(
+    ...[set, get]: Parameters<ImmerStateCreator<T>>
+): ReaderTapZoneStoreSlice => ({
+    tapZone: {
+        ...DEFAULT_STATE,
+        setShowPreview: (showPreview) =>
+            set((draft) => {
+                draft.tapZone.showPreview = showPreview;
+            }),
+        reset: () => set(() => ({ tapZone: { ...get().tapZone, ...DEFAULT_STATE } })),
+    },
+});

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

@@ -9,28 +9,24 @@
 import Box from '@mui/material/Box';
 import { useCallback, useLayoutEffect, useState } from 'react';
 import { useTheme } from '@mui/material/styles';
-import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx';
 import { ReaderTapZoneService } from '@/features/reader/tap-zones/ReaderTapZoneService.ts';
 import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { ReadingDirection } from '@/features/reader/Reader.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
-import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
-import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
+import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
 
 const CANVAS_ID = 'reader-tap-zone-layout-canvas';
 
-const BaseTapZoneLayout = ({
-    readerNavBarWidth,
-    showPreview,
-}: Pick<NavbarContextType, 'readerNavBarWidth'> & Pick<TReaderTapZoneContext, 'showPreview'>) => {
+const BaseTapZoneLayout = ({ readerNavBarWidth }: Pick<NavbarContextType, 'readerNavBarWidth'>) => {
     const theme = useTheme();
     const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderStoreShallow((state) => ({
         tapZoneLayout: state.settings.tapZoneLayout.value,
         tapZoneInvertMode: state.settings.tapZoneInvertMode.value,
         readingDirection: state.settings.readingDirection.value,
     }));
+    const showPreview = useReaderStore((state) => state.tapZone.showPreview);
 
     const [width, setWidth] = useState(0);
     const [height, setHeight] = useState(0);
@@ -71,8 +67,4 @@ const BaseTapZoneLayout = ({
     );
 };
 
-export const TapZoneLayout = withPropsFrom(
-    BaseTapZoneLayout,
-    [useNavBarContext, useReaderTapZoneContext],
-    ['readerNavBarWidth', 'showPreview'],
-);
+export const TapZoneLayout = withPropsFrom(BaseTapZoneLayout, [useNavBarContext], ['readerNavBarWidth']);