Extract reader bookmark button

src/modules/chapter/Chapter.constants.ts

@@ -9,6 +9,8 @@
 import { TranslationKey } from '@/Base.types.ts';
 import { ChapterListOptions, ChapterSortMode } from '@/modules/chapter/Chapter.types.ts';
 
+export const FALLBACK_CHAPTER = { id: -1, name: '', realUrl: '', isBookmarked: false };
+
 export const DEFAULT_CHAPTER_OPTIONS: ChapterListOptions = {
     active: false,
     unread: undefined,

src/modules/reader/components/overlay/ReaderOverlayHeaderMobile.tsx

@@ -10,8 +10,6 @@ import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import ArrowBack from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import BookmarkIcon from '@mui/icons-material/Bookmark';
-import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { bindMenu, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
 import MenuItem from '@mui/material/MenuItem';
@@ -25,7 +23,6 @@ import { forwardRef, memo } from 'react';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
 import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
-import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
 import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';
 import { makeToast } from '@/modules/core/utils/Toast.ts';
 import { MobileHeaderProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
@@ -41,9 +38,11 @@ import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/Read
 import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { useReaderScrollbarContext } from '@/modules/reader/contexts/ReaderScrollbarContext.tsx';
 import { ReaderLibraryButton } from '@/modules/reader/components/overlay/navigation/ReaderLibraryButton.tsx';
+import { ReaderBookmarkButton } from '@/modules/reader/components/overlay/navigation/ReaderBookmarkButton.tsx';
+import { FALLBACK_CHAPTER } from '@/modules/chapter/Chapter.constants.ts';
+import { FALLBACK_MANGA } from '@/modules/manga/Manga.constants.ts';
 
-const DEFAULT_MANGA = { id: -1, title: '' };
+const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' };
-const DEFAULT_CHAPTER = { id: -1, name: '', realUrl: '', isBookmarked: false };
 
 const BaseReaderOverlayHeaderMobile = forwardRef<
     HTMLDivElement,
@@ -58,11 +57,7 @@ const BaseReaderOverlayHeaderMobile = forwardRef<
     const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' });
 
     const { id: mangaId, title } = manga ?? DEFAULT_MANGA;
-    const { id: chapterId, name, realUrl, isBookmarked } = currentChapter ?? DEFAULT_CHAPTER;
+    const { id: chapterId, name, realUrl, isBookmarked } = currentChapter ?? FALLBACK_CHAPTER;
-
-    const bookmarkAction: Extract<ChapterAction, 'unbookmark' | 'bookmark'> = currentChapter?.isBookmarked
-        ? 'unbookmark'
-        : 'bookmark';
 
     return (
         <Slide direction="down" in={isVisible} ref={ref}>
@@ -109,11 +104,7 @@ const BaseReaderOverlayHeaderMobile = forwardRef<
                     )}
                 </Stack>
                 <ReaderLibraryButton />
-                <CustomTooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
+                <ReaderBookmarkButton id={chapterId} isBookmarked={isBookmarked} />
-                    <IconButton onClick={() => Chapters.performAction(bookmarkAction, [chapterId], {})} color="inherit">
-                        {isBookmarked ? <BookmarkIcon /> : <BookmarkBorderIcon />}
-                    </IconButton>
-                </CustomTooltip>
                 <IconButton {...bindTrigger(popupState)} color="inherit">
                     <MoreVertIcon />
                 </IconButton>

src/modules/reader/components/overlay/navigation/ReaderBookmarkButton.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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 IconButton from '@mui/material/IconButton';
+import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
+import BookmarkIcon from '@mui/icons-material/Bookmark';
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
+import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
+import { TChapterReader } from '@/modules/chapter/Chapter.types.ts';
+
+const BaseReaderBookmarkButton = ({ id, isBookmarked }: Pick<TChapterReader, 'id' | 'isBookmarked'>) => {
+    const { t } = useTranslation();
+
+    const bookmarkAction: Extract<ChapterAction, 'unbookmark' | 'bookmark'> = isBookmarked ? 'unbookmark' : 'bookmark';
+
+    return (
+        <CustomTooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
+            <IconButton onClick={() => Chapters.performAction(bookmarkAction, [id], {})} color="inherit">
+                {isBookmarked ? <BookmarkIcon /> : <BookmarkBorderIcon />}
+            </IconButton>
+        </CustomTooltip>
+    );
+};
+
+export const ReaderBookmarkButton = memo(BaseReaderBookmarkButton);

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

@@ -9,15 +9,13 @@
 import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import IconButton from '@mui/material/IconButton';
-import BookmarkIcon from '@mui/icons-material/Bookmark';
-import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import DownloadIcon from '@mui/icons-material/Download';
 import ReplayIcon from '@mui/icons-material/Replay';
 import { memo, useMemo, useRef } from 'react';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
-import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
+import { actionToTranslationKey, Chapters } from '@/modules/chapter/services/Chapters.ts';
 import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
 import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
 import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
@@ -25,6 +23,8 @@ import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { ReaderLibraryButton } from '@/modules/reader/components/overlay/navigation/ReaderLibraryButton.tsx';
+import { ReaderBookmarkButton } from '@/modules/reader/components/overlay/navigation/ReaderBookmarkButton.tsx';
+import { FALLBACK_CHAPTER } from '@/modules/chapter/Chapter.constants.ts';
 
 const DownloadButton = ({ currentChapter }: Required<Pick<ReaderStateChapters, 'currentChapter'>>) => {
     const { t } = useTranslation();
@@ -66,7 +66,7 @@ const BaseReaderNavBarDesktopActions = memo(
         setRetryFailedPagesKeyPrefix,
     }: Required<Pick<ReaderStateChapters, 'currentChapter'>> &
         Pick<ReaderStatePages, 'pageLoadStates' | 'setPageLoadStates' | 'setRetryFailedPagesKeyPrefix'>) => {
-        const { id, isBookmarked, realUrl } = currentChapter ?? { id: -1, isBookmarked: false, realUrl: '' };
+        const { id, isBookmarked, realUrl } = currentChapter ?? FALLBACK_CHAPTER;
 
         const { t } = useTranslation();
 
@@ -77,18 +77,10 @@ const BaseReaderNavBarDesktopActions = memo(
             [pageLoadStates],
         );
 
-        const bookmarkAction: Extract<ChapterAction, 'unbookmark' | 'bookmark'> = isBookmarked
-            ? 'unbookmark'
-            : 'bookmark';
-
         return (
             <Stack sx={{ flexDirection: 'row', justifyContent: 'center', gap: 1 }}>
                 <ReaderLibraryButton />
-                <CustomTooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
+                <ReaderBookmarkButton id={id} isBookmarked={isBookmarked} />
-                    <IconButton onClick={() => Chapters.performAction(bookmarkAction, [id], {})} color="inherit">
-                        {isBookmarked ? <BookmarkIcon /> : <BookmarkBorderIcon />}
-                    </IconButton>
-                </CustomTooltip>
                 <CustomTooltip title={t('reader.button.retry_load_pages')} disabled={!haveSomePagesFailedToLoad}>
                     <IconButton
                         onClick={() => {