Add library button to "ReaderOverlayHeaderMobile"

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

@@ -40,6 +40,7 @@ import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
 import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
 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';
 
 const DEFAULT_MANGA = { id: -1, title: '' };
 const DEFAULT_CHAPTER = { id: -1, name: '', realUrl: '', isBookmarked: false };
@@ -107,6 +108,7 @@ const BaseReaderOverlayHeaderMobile = forwardRef<
                         <LoadingPlaceholder />
                     )}
                 </Stack>
+                <ReaderLibraryButton />
                 <CustomTooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
                     <IconButton onClick={() => Chapters.performAction(bookmarkAction, [chapterId], {})} color="inherit">
                         {isBookmarked ? <BookmarkIcon /> : <BookmarkBorderIcon />}

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

@@ -0,0 +1,52 @@
+/*
+ * 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 FavoriteIcon from '@mui/icons-material/Favorite';
+import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
+import { memo } from 'react';
+import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
+import { useManageMangaLibraryState } from '@/modules/manga/hooks/useManageMangaLibraryState.tsx';
+import { FALLBACK_MANGA } from '@/modules/manga/Manga.constants.ts';
+import { TReaderStateMangaContext } from '@/modules/reader/types/Reader.types.ts';
+import { withPropsFrom } from '@/modules/core/hoc/withPropsFrom.tsx';
+import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
+
+const ACTION_FALLBACK_MANGA = {
+    ...FALLBACK_MANGA,
+    title: 'Fallback',
+    inLibrary: false,
+};
+
+const BaseReaderLibraryButton = ({ manga }: Pick<TReaderStateMangaContext, 'manga'>) => {
+    const { inLibrary } = manga ?? ACTION_FALLBACK_MANGA;
+
+    const { t } = useTranslation();
+    const { CategorySelectComponent, updateLibraryState } = useManageMangaLibraryState(manga ?? ACTION_FALLBACK_MANGA);
+
+    return (
+        <>
+            <CustomTooltip
+                title={inLibrary ? t('manga.action.library.remove.label.action') : t('manga.button.add_to_library')}
+            >
+                <IconButton onClick={updateLibraryState} color="inherit">
+                    {inLibrary ? <FavoriteIcon /> : <FavoriteBorderIcon />}
+                </IconButton>
+            </CustomTooltip>
+
+            {CategorySelectComponent}
+        </>
+    );
+};
+
+export const ReaderLibraryButton = withPropsFrom(
+    memo(BaseReaderLibraryButton),
+    [useReaderStateMangaContext],
+    ['manga'],
+);

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

@@ -16,19 +16,15 @@ 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 FavoriteIcon from '@mui/icons-material/Favorite';
-import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
-import { ReaderStateChapters, TReaderStateMangaContext } from '@/modules/reader/types/Reader.types.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';
 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 { useManageMangaLibraryState } from '@/modules/manga/hooks/useManageMangaLibraryState.tsx';
+import { ReaderLibraryButton } from '@/modules/reader/components/overlay/navigation/ReaderLibraryButton.tsx';
-import { FALLBACK_MANGA } from '@/modules/manga/Manga.constants.ts';
-import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
 
 const DownloadButton = ({ currentChapter }: Required<Pick<ReaderStateChapters, 'currentChapter'>>) => {
     const { t } = useTranslation();
@@ -62,29 +58,17 @@ const DownloadButton = ({ currentChapter }: Required<Pick<ReaderStateChapters, '
     );
 };
 
-const ACTION_FALLBACK_MANGA = {
-    ...FALLBACK_MANGA,
-    title: 'Fallback',
-    inLibrary: false,
-};
-
 const BaseReaderNavBarDesktopActions = memo(
     ({
-        manga,
         currentChapter,
         pageLoadStates,
         setPageLoadStates,
         setRetryFailedPagesKeyPrefix,
     }: Required<Pick<ReaderStateChapters, 'currentChapter'>> &
-        Pick<TReaderStateMangaContext, 'manga'> &
         Pick<ReaderStatePages, 'pageLoadStates' | 'setPageLoadStates' | 'setRetryFailedPagesKeyPrefix'>) => {
         const { id, isBookmarked, realUrl } = currentChapter ?? { id: -1, isBookmarked: false, realUrl: '' };
-        const { inLibrary } = manga ?? ACTION_FALLBACK_MANGA;
 
         const { t } = useTranslation();
-        const { CategorySelectComponent, updateLibraryState } = useManageMangaLibraryState(
-            manga ?? ACTION_FALLBACK_MANGA,
-        );
 
         const pageRetryKeyPrefix = useRef<number>(0);
 
@@ -98,17 +82,8 @@ const BaseReaderNavBarDesktopActions = memo(
             : 'bookmark';
 
         return (
-            <>
             <Stack sx={{ flexDirection: 'row', justifyContent: 'center', gap: 1 }}>
-                    <CustomTooltip
+                <ReaderLibraryButton />
-                        title={
-                            inLibrary ? t('manga.action.library.remove.label.action') : t('manga.button.add_to_library')
-                        }
-                    >
-                        <IconButton onClick={updateLibraryState} color="inherit">
-                            {inLibrary ? <FavoriteIcon /> : <FavoriteBorderIcon />}
-                        </IconButton>
-                    </CustomTooltip>
                 <CustomTooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
                     <IconButton onClick={() => Chapters.performAction(bookmarkAction, [id], {})} color="inherit">
                         {isBookmarked ? <BookmarkIcon /> : <BookmarkBorderIcon />}
@@ -145,14 +120,12 @@ const BaseReaderNavBarDesktopActions = memo(
                     </IconButton>
                 </CustomTooltip>
             </Stack>
-                {CategorySelectComponent}
-            </>
         );
     },
 );
 
 export const ReaderNavBarDesktopActions = withPropsFrom(
     BaseReaderNavBarDesktopActions,
-    [useReaderStateChaptersContext, userReaderStatePagesContext, useReaderStateMangaContext],
+    [useReaderStateChaptersContext, userReaderStatePagesContext],
-    ['currentChapter', 'pageLoadStates', 'setPageLoadStates', 'setRetryFailedPagesKeyPrefix', 'manga'],
+    ['currentChapter', 'pageLoadStates', 'setPageLoadStates', 'setRetryFailedPagesKeyPrefix'],
 );