Add continue read button to library (#505)

src/components/MangaCard.tsx

@@ -10,12 +10,13 @@ import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
-import { Avatar, Box, CardContent, styled, Tooltip } from '@mui/material';
+import { Avatar, Box, CardContent, Stack, styled, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
 import { SpinnerImage } from '@/components/util/SpinnerImage';
 import { TPartialManga } from '@/typings.ts';
+import { ContinueReadingButton } from '@/components/manga/ContinueReadingButton.tsx';
 
 const BottomGradient = styled('div')({
     position: 'absolute',
@@ -44,11 +45,6 @@ const MangaTitle = styled(Typography)({
 });
 
 const GridMangaTitle = styled(MangaTitle)({
-    width: '100%',
-    position: 'absolute',
-    bottom: 0,
-    margin: '0.5em 0',
-    padding: '0 0.5em',
     fontSize: '1.05rem',
 });
 
@@ -75,17 +71,29 @@ export const MangaCard = (props: IProps) => {
     const { t } = useTranslation();
 
     const {
-        manga: { id, title, thumbnailUrl: tmpThumbnailUrl, downloadCount, unreadCount: unread, inLibrary },
+        manga: {
+            id,
+            title,
+            thumbnailUrl: tmpThumbnailUrl,
+            downloadCount,
+            unreadCount: unread,
+            inLibrary,
+            lastReadChapter,
+            chapters,
+        },
         gridLayout,
         inLibraryIndicator,
     } = props;
     const thumbnailUrl = tmpThumbnailUrl ?? 'nonExistingMangaUrl';
     const {
-        options: { showUnreadBadge, showDownloadBadge },
+        options: { showContinueReadingButton, showUnreadBadge, showDownloadBadge },
     } = useLibraryOptionsContext();
 
     const mangaLinkTo = `/manga/${id}/`;
 
+    const nextChapterIndexToRead = (lastReadChapter?.sourceOrder ?? 0) + 1;
+    const isLatestChapterRead = chapters?.totalCount === lastReadChapter?.sourceOrder;
+
     if (gridLayout !== GridLayout.List) {
         return (
             <Link to={mangaLinkTo} style={gridLayout === GridLayout.Comfortable ? { textDecoration: 'none' } : {}}>
@@ -155,22 +163,42 @@ export const MangaCard = (props: IProps) => {
                                     placeItems: 'center',
                                 }}
                             />
-                            {gridLayout !== GridLayout.Comfortable && (
+                            <>
-                                <>
+                                <BottomGradient />
-                                    <BottomGradient />
+                                <BottomGradientDoubledDown />
-                                    <BottomGradientDoubledDown />
+                                <Stack
-                                    <Tooltip title={title} placement="top">
+                                    direction="row"
-                                        <GridMangaTitle
+                                    justifyContent={gridLayout !== GridLayout.Comfortable ? 'space-between' : 'end'}
-                                            sx={{
+                                    alignItems="end"
-                                                color: 'white',
+                                    sx={{
-                                                textShadow: '0px 0px 3px #000000',
+                                        position: 'absolute',
-                                            }}
+                                        bottom: 0,
-                                        >
+                                        width: '100%',
-                                            {title}
+                                        margin: '0.5em 0',
-                                        </GridMangaTitle>
+                                        padding: '0 0.5em',
-                                    </Tooltip>
+                                        gap: '0.5em',
-                                </>
+                                    }}
-                            )}
+                                >
+                                    {gridLayout !== GridLayout.Comfortable && (
+                                        <Tooltip title={title} placement="top">
+                                            <GridMangaTitle
+                                                sx={{
+                                                    color: 'white',
+                                                    textShadow: '0px 0px 3px #000000',
+                                                }}
+                                            >
+                                                {title}
+                                            </GridMangaTitle>
+                                        </Tooltip>
+                                    )}
+                                    <ContinueReadingButton
+                                        showContinueReadingButton={showContinueReadingButton}
+                                        isLatestChapterRead={isLatestChapterRead}
+                                        nextChapterIndexToRead={nextChapterIndexToRead}
+                                        mangaLinkTo={mangaLinkTo}
+                                    />
+                                </Stack>
+                            </>
                         </CardActionArea>
                     </Card>
                     {gridLayout === GridLayout.Comfortable && (
@@ -178,6 +206,10 @@ export const MangaCard = (props: IProps) => {
                             <GridMangaTitle
                                 sx={{
                                     position: 'relative',
+                                    width: '100%',
+                                    bottom: 0,
+                                    margin: '0.5em 0',
+                                    padding: '0 0.5em',
                                     color: 'text.primary',
                                     height: '3rem',
                                 }}
@@ -237,25 +269,33 @@ export const MangaCard = (props: IProps) => {
                             <MangaTitle variant="h5">{title}</MangaTitle>
                         </Tooltip>
                     </Box>
-                    <BadgeContainer>
+                    <Stack direction="row" alignItems="center" gap="5px">
-                        {inLibraryIndicator && inLibrary && (
+                        <BadgeContainer>
-                            <Typography sx={{ backgroundColor: 'primary.dark' }}>
+                            {inLibraryIndicator && inLibrary && (
-                                {t('manga.button.in_library')}
+                                <Typography sx={{ backgroundColor: 'primary.dark' }}>
-                            </Typography>
+                                    {t('manga.button.in_library')}
-                        )}
+                                </Typography>
-                        {showUnreadBadge && unread! > 0 && (
+                            )}
-                            <Typography sx={{ backgroundColor: 'primary.dark' }}>{unread}</Typography>
+                            {showUnreadBadge && unread! > 0 && (
-                        )}
+                                <Typography sx={{ backgroundColor: 'primary.dark' }}>{unread}</Typography>
-                        {showDownloadBadge && downloadCount! > 0 && (
+                            )}
-                            <Typography
+                            {showDownloadBadge && downloadCount! > 0 && (
-                                sx={{
+                                <Typography
-                                    backgroundColor: 'success.dark',
+                                    sx={{
-                                }}
+                                        backgroundColor: 'success.dark',
-                            >
+                                    }}
-                                {downloadCount}
+                                >
-                            </Typography>
+                                    {downloadCount}
-                        )}
+                                </Typography>
-                    </BadgeContainer>
+                            )}
+                        </BadgeContainer>
+                        <ContinueReadingButton
+                            showContinueReadingButton={showContinueReadingButton}
+                            isLatestChapterRead={isLatestChapterRead}
+                            nextChapterIndexToRead={nextChapterIndexToRead}
+                            mangaLinkTo={mangaLinkTo}
+                        />
+                    </Stack>
                 </CardContent>
             </CardActionArea>
         </Card>

src/components/context/LibraryOptionsContext.tsx

@@ -21,6 +21,7 @@ export enum GridLayout {
 }
 
 export const DefaultLibraryOptions: LibraryOptions = {
+    showContinueReadingButton: false,
     showDownloadBadge: false,
     showUnreadBadge: false,
     gridLayout: GridLayout.Compact,

src/components/library/LibraryOptionsPanel.tsx

@@ -82,7 +82,8 @@ export const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
                     ));
                 }
                 if (key === 'display') {
-                    const { gridLayout, showDownloadBadge, showUnreadBadge, showTabSize } = options;
+                    const { gridLayout, showContinueReadingButton, showDownloadBadge, showUnreadBadge, showTabSize } =
+                        options;
                     return (
                         <>
                             <FormLabel>{t('global.grid_layout.title')}</FormLabel>
@@ -110,12 +111,12 @@ export const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
                             <FormLabel sx={{ mt: 2 }}>{t('library.option.display.badge.title')}</FormLabel>
                             <CheckboxInput
                                 label={t('library.option.display.badge.label.unread_badges')}
-                                checked={showUnreadBadge === true}
+                                checked={showUnreadBadge}
                                 onChange={() => handleFilterChange('showUnreadBadge', !showUnreadBadge)}
                             />
                             <CheckboxInput
                                 label={t('library.option.display.badge.label.download_badges')}
-                                checked={showDownloadBadge === true}
+                                checked={showDownloadBadge}
                                 onChange={() => handleFilterChange('showDownloadBadge', !showDownloadBadge)}
                             />
 
@@ -125,6 +126,15 @@ export const LibraryOptionsPanel: React.FC<IProps> = ({ open, onClose }) => {
                                 checked={showTabSize}
                                 onChange={() => handleFilterChange('showTabSize', !showTabSize)}
                             />
+
+                            <FormLabel sx={{ mt: 2 }}>{t('global.label.other')}</FormLabel>
+                            <CheckboxInput
+                                label={t('library.option.display.other.label.show_continue_reading_button')}
+                                checked={showContinueReadingButton}
+                                onChange={() =>
+                                    handleFilterChange('showContinueReadingButton', !showContinueReadingButton)
+                                }
+                            />
                         </>
                     );
                 }

src/components/manga/ContinueReadingButton.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { Button, Tooltip } from '@mui/material';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+
+export const ContinueReadingButton = ({
+    showContinueReadingButton,
+    isLatestChapterRead,
+    nextChapterIndexToRead,
+    mangaLinkTo,
+}: {
+    showContinueReadingButton: boolean;
+    isLatestChapterRead: boolean;
+    nextChapterIndexToRead: number;
+    mangaLinkTo: string;
+}) => {
+    const { t } = useTranslation();
+
+    const isFirstChapter = nextChapterIndexToRead === 1;
+
+    if (!showContinueReadingButton || isLatestChapterRead) {
+        return null;
+    }
+
+    return (
+        <Tooltip title={t(isFirstChapter ? 'global.button.start' : 'global.button.resume')}>
+            <Button
+                variant="contained"
+                size="small"
+                sx={{ minWidth: 'unset' }}
+                href={`${mangaLinkTo}chapter/${nextChapterIndexToRead}`}
+                onClick={(e) => e.stopPropagation()}
+                onMouseDown={(e) => e.stopPropagation()}
+            >
+                <PlayArrowIcon />
+            </Button>
+        </Tooltip>
+    );
+};

src/i18n/locale/en.json

@@ -141,8 +141,8 @@
     "queue": {
       "error": {
         "label": {
-          "failed_to_remove": "Could not remove the download from the queue.",
+          "failed_delete_all": "Could not remove all downloads from the queue",
-          "failed_delete_all": "Could not remove all downloads from the queue"
+          "failed_to_remove": "Could not remove the download from the queue."
         }
       },
       "label": {
@@ -319,6 +319,7 @@
       "loading": "Loading…",
       "never": "Never",
       "none": "None",
+      "other": "Other",
       "password": "Password",
       "sort": "Sort",
       "unknown": "Unknown",
@@ -379,6 +380,11 @@
           },
           "title": "Badges"
         },
+        "other": {
+          "label": {
+            "show_continue_reading_button": "Show continue reading button"
+          }
+        },
         "tab": {
           "label": {
             "show_number_of_items": "Show number of items"

src/typings.ts

@@ -340,6 +340,7 @@ enum GridLayout {
 
 export interface LibraryOptions {
     // display options
+    showContinueReadingButton: boolean;
     showDownloadBadge: boolean;
     showUnreadBadge: boolean;
     gridLayout: GridLayout;