ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Always use "useShallow" for store selection

Browse Source
This commit is contained in:
schroda
2025-09-21 00:28:38 +02:00
parent 5730690ae6
commit ed488f76dd
24 changed files with 85 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/features/reader/overlay/components/ReaderPageNumber.tsx
View File

@@ -17,20 +17,20 @@ import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
import { reverseString } from '@/base/utils/Strings.ts';
import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderPageNumber = ({
isDesktop,
readerNavBarWidth,
}: Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop'> &
Pick<NavbarContextType, 'readerNavBarWidth'>) => {
const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
const { currentPageIndex, pages, totalPages } = useReaderStoreShallow((state) => ({
const scrollbar = useReaderStore((state) => state.scrollbar);
const { currentPageIndex, pages, totalPages } = useReaderStore((state) => ({
currentPageIndex: state.pages.currentPageIndex,
pages: state.pages.pages,
totalPages: state.pages.totalPages,
}));
const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderStoreShallow((state) => ({
const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderStore((state) => ({
readingDirection: state.settings.readingDirection.value,
shouldShowPageNumber: state.settings.shouldShowPageNumber,
progressBarType: state.settings.progressBarType,

8
src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx
View File

@@ -30,17 +30,17 @@ import { FALLBACK_CHAPTER } from '@/features/chapter/Chapter.constants.ts';
import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' };
const BaseReaderOverlayHeaderMobile = forwardRef<HTMLDivElement, MobileHeaderProps>(({ isVisible }, ref) => {
const { t } = useTranslation();
const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' });
const currentChapter = useReaderStoreShallow((state) => state.chapters.currentChapter);
const currentChapter = useReaderStore((state) => state.chapters.currentChapter);
const manga = useReaderStoreShallow((state) => state.manga);
const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
const manga = useReaderStore((state) => state.manga);
const scrollbar = useReaderStore((state) => state.scrollbar);
const { id: mangaId, title } = manga ?? DEFAULT_MANGA;
const { id: chapterId, name, realUrl, isBookmarked } = currentChapter ?? FALLBACK_CHAPTER;

4
src/features/reader/overlay/navigation/components/ReaderLibraryButton.tsx
View File

@@ -14,7 +14,7 @@ import { memo } from 'react';
import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
import { useManageMangaLibraryState } from '@/features/manga/hooks/useManageMangaLibraryState.tsx';
import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const ACTION_FALLBACK_MANGA = {
...FALLBACK_MANGA,
@@ -23,7 +23,7 @@ const ACTION_FALLBACK_MANGA = {
};
export const ReaderLibraryButton = memo(() => {
const manga = useReaderStoreShallow((state) => state.manga);
const manga = useReaderStore((state) => state.manga);
const { inLibrary } = manga ?? ACTION_FALLBACK_MANGA;

6
src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
View File

@@ -29,7 +29,7 @@ import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholde
import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx';
import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => {
const wasNavBarStaticRef = useRef(isStaticNav);
@@ -55,8 +55,8 @@ const BaseReaderNavBarDesktop = ({
setReaderNavBarWidth,
}: ReaderNavBarDesktopProps & Pick<NavbarContextType, 'setReaderNavBarWidth'>) => {
const { t } = useTranslation();
const manga = useReaderStoreShallow((state) => state.manga);
const { chapters, currentChapter, previousChapter, nextChapter } = useReaderStoreShallow((state) => ({
const manga = useReaderStore((state) => state.manga);
const { chapters, currentChapter, previousChapter, nextChapter } = useReaderStore((state) => ({
chapters: state.chapters.chapters,
currentChapter: state.chapters.currentChapter,
previousChapter: state.chapters.previousChapter,

6
src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx
View File

@@ -22,7 +22,7 @@ import { CHAPTER_ACTION_TO_TRANSLATION, FALLBACK_CHAPTER } from '@/features/chap
import { IconBrowser } from '@/assets/icons/IconBrowser.tsx';
import { IconWebView } from '@/assets/icons/IconWebView.tsx';
import { requestManager } from '@/lib/requests/RequestManager.ts';
import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { ChapterDownloadInfo, ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
const DownloadButton = ({
@@ -62,12 +62,12 @@ const DownloadButton = ({
};
export const ReaderNavBarDesktopActions = memo(() => {
const currentChapter = useReaderStoreShallow((state) => state.chapters.currentChapter);
const currentChapter = useReaderStore((state) => state.chapters.currentChapter);
const { id, isBookmarked, realUrl } = currentChapter ?? FALLBACK_CHAPTER;
const { t } = useTranslation();
const { pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } = useReaderStoreShallow((state) => ({
const { pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } = useReaderStore((state) => ({
pageLoadStates: state.pages.pageLoadStates,
setPageLoadStates: state.pages.setPageLoadStates,
setRetryFailedPagesKeyPrefix: state.pages.setRetryFailedPagesKeyPrefix,

4
src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx
View File

@@ -17,13 +17,13 @@ import { getNextIndexFromPage, getPage } from '@/features/reader/overlay/progres
import { useGetOptionForDirection } from '@/features/theme/services/ThemeCreator.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 { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
const BaseReaderNavBarDesktopPageNavigation = () => {
const { t } = useTranslation();
const getOptionForDirection = useGetOptionForDirection();
const { currentPageIndex, pages } = useReaderStoreShallow((state) => ({
const { currentPageIndex, pages } = useReaderStore((state) => ({
currentPageIndex: state.pages.currentPageIndex,
pages: state.pages.pages,
}));

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

@@ -18,12 +18,12 @@ import { ReaderNavBarDesktopReadingDirection } from '@/features/reader/overlay/n
import { ReaderNavBarDesktopProps } from '@/features/reader/overlay/ReaderOverlay.types.ts';
import { ReaderService } from '@/features/reader/services/ReaderService.ts';
import { ReaderNavBarDesktopAutoScroll } from '@/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx';
import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick<ReaderNavBarDesktopProps, 'openSettings'>) => {
const { t } = useTranslation();
const { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection, autoScroll } =
useReaderStoreShallow((state) => ({
useReaderStore((state) => ({
readingMode: state.settings.readingMode,
shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads,
pageScaleMode: state.settings.pageScaleMode,

6
src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
View File

@@ -24,7 +24,7 @@ import { MobileReaderProgressBar } from '@/features/reader/overlay/progress-bar/
import { ReaderChapterList } from '@/features/reader/overlay/navigation/components/ReaderChapterList.tsx';
import { ReaderBottomBarMobileQuickSettings } from '@/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx';
import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderBottomBarMobile = ({
openSettings,
@@ -32,14 +32,14 @@ const BaseReaderBottomBarMobile = ({
topOffset = 0,
}: ReaderBottomBarMobileProps & { topOffset?: number }) => {
const { t } = useTranslation();
const { currentChapter, chapters } = useReaderStoreShallow((state) => ({
const { currentChapter, chapters } = useReaderStore((state) => ({
currentChapter: state.chapters.currentChapter,
chapters: state.chapters.chapters,
}));
const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' });
const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-dialog' });
const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
const scrollbar = useReaderStore((state) => state.scrollbar);
const [bottomBarRefHeight, setBottomBarRefHeight] = useState(0);
const bottomBarRef = useRef<HTMLDivElement>(null);

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

@@ -15,15 +15,15 @@ import { ReaderService } from '@/features/reader/services/ReaderService.ts';
import { DefaultSettingFootnote } from '@/features/reader/settings/components/DefaultSettingFootnote.tsx';
import { ReaderSettingAutoScroll } from '@/features/reader/auto-scroll/settings/ReaderSettingAutoScroll.tsx';
import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
import { useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderBottomBarMobileQuickSettings = () => {
const { t } = useTranslation();
const { isActive, toggleActive } = useReaderStoreShallow((state) => ({
const { isActive, toggleActive } = useReaderStore((state) => ({
isActive: state.autoScroll.isActive,
toggleActive: state.autoScroll.toggleActive,
}));
const { readingMode, readingDirection, autoScroll } = useReaderStoreShallow((state) => ({
const { readingMode, readingDirection, autoScroll } = useReaderStore((state) => ({
readingMode: state.settings.readingMode,
readingDirection: state.settings.readingDirection,
autoScroll: state.settings.autoScroll,

6
src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx
View File

@@ -31,7 +31,7 @@ import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
import { ReaderProgressBarSlotWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarSlotWrapper.tsx';
import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
import { ReadingMode } from '@/features/reader/Reader.types.ts';
import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseReaderProgressBar = ({
slotProps,
@@ -62,14 +62,14 @@ const BaseReaderProgressBar = ({
direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
fullSegmentClicks: boolean;
}) => {
const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderStoreShallow((state) => ({
const { pages, pageLoadStates, totalPages, currentPageIndex } = useReaderStore((state) => ({
pages: state.pages.pages,
pageLoadStates: state.pages.pageLoadStates,
totalPages: state.pages.totalPages,
currentPageIndex: state.pages.currentPageIndex,
}));
const readingMode = useReaderStore((state) => state.settings.readingMode.value);
const { isDragging, setIsDragging } = useReaderStoreShallow((state) => ({
const { isDragging, setIsDragging } = useReaderStore((state) => ({
isDragging: state.progressBar.isDragging,
setIsDragging: state.progressBar.setIsDragging,
}));

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

@@ -20,7 +20,7 @@ import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
import { ReaderProgressBarSlotDesktop } from '@/features/reader/overlay/progress-bar/desktop/components/ReaderProgressBarSlotDesktop.tsx';
import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx';
import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
const BaseStandardReaderProgressBar = ({
readerNavBarWidth,
@@ -30,16 +30,17 @@ const BaseStandardReaderProgressBar = ({
}) => {
const theme = useTheme();
const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
const scrollbar = useReaderStore((state) => state.scrollbar);
const totalPages = useReaderStore((state) => state.pages.totalPages);
const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } =
useReaderStoreShallow((state) => ({
const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } = useReaderStore(
(state) => ({
progressBarType: state.settings.progressBarType,
progressBarSize: state.settings.progressBarSize,
progressBarPosition: state.settings.progressBarPosition,
progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
}));
const { isMaximized, setIsMaximized, isDragging } = useReaderStoreShallow((state) => ({
}),
);
const { isMaximized, setIsMaximized, isDragging } = useReaderStore((state) => ({
isMaximized: state.progressBar.isMaximized,
setIsMaximized: state.progressBar.setIsMaximized,
isDragging: state.progressBar.isDragging,

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

@@ -28,7 +28,7 @@ import { ReaderProgressBarSlotMobile } from '@/features/reader/overlay/progress-
import { applyStyles } from '@/base/utils/ApplyStyles.ts';
import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx';
import { useReaderStore, useReaderStoreShallow } from '@/features/reader/stores/ReaderStore.ts';
import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record<ProgressBarPosition, SlideProps['direction']> = {
@@ -48,9 +48,9 @@ const BaseMobileReaderProgressBar = ({
topOffset?: number;
bottomOffset?: number;
}) => {
const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
const scrollbar = useReaderStore((state) => state.scrollbar);
const isVisible = useReaderStore((state) => state.overlay.isVisible);
const { currentPageIndex, pages } = useReaderStoreShallow((state) => ({
const { currentPageIndex, pages } = useReaderStore((state) => ({
currentPageIndex: state.pages.currentPageIndex,
pages: state.pages.pages,
}));
@@ -58,11 +58,11 @@ const BaseMobileReaderProgressBar = ({
previousChapter: state.chapters.previousChapter,
nextChapter: state.chapters.nextChapter,
}));
const { progressBarPosition, progressBarPositionAutoVertical } = useReaderStoreShallow((state) => ({
const { progressBarPosition, progressBarPositionAutoVertical } = useReaderStore((state) => ({
progressBarPosition: state.settings.progressBarPosition,
progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
}));
const { setIsMaximized, isDragging } = useReaderStoreShallow((state) => ({
const { setIsMaximized, isDragging } = useReaderStore((state) => ({
setIsMaximized: state.progressBar.setIsMaximized,
isDragging: state.progressBar.isDragging,
}));