Add chapters download menu

src/components/chapter/ChapterList.tsx

@@ -18,6 +18,8 @@ import { useTranslation } from 'react-i18next';
 import IconButton from '@mui/material/IconButton';
 import DownloadIcon from '@mui/icons-material/Download';
 import DoneAllIcon from '@mui/icons-material/DoneAll';
+import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
+import Menu from '@mui/material/Menu';
 import { TChapter, TManga } from '@/typings.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { ChapterCard } from '@/components/chapter/ChapterCard.tsx';
@@ -33,7 +35,7 @@ import { SelectableCollectionSelectAll } from '@/components/collection/Selectabl
 import { Chapters } from '@/lib/data/Chapters.ts';
 import { ChaptersWithMeta } from '@/lib/data/ChaptersWithMeta.ts';
 import { ChapterActionMenuItems } from '@/components/chapter/ChapterActionMenuItems.tsx';
-import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
+import { ChaptersDownloadActionMenuItems } from '@/components/chapter/ChaptersDownloadActionMenuItems.tsx';
 
 const ChapterListHeader = styled(Stack)(({ theme }) => ({
     margin: 8,
@@ -168,18 +170,26 @@ export const ChapterList: React.FC<IProps> = ({ manga, isRefreshing }) => {
                                 <DoneAllIcon />
                             </IconButton>
                         </Tooltip>
-                        <Tooltip title={t('chapter.action.download.add.label.action')}>
-                            <IconButton
-                                disabled={areAllChaptersDownloaded}
-                                onClick={() =>
-                                    Chapters.download(
-                                        ChaptersWithMeta.getIds(ChaptersWithMeta.getNonDownloaded(chaptersWithMeta)),
-                                    ).catch(defaultPromiseErrorHandler('ChapterList::download'))
-                                }
-                            >
-                                <DownloadIcon />
-                            </IconButton>
-                        </Tooltip>
+                        <PopupState variant="popover" popupId="chapterlist-download-button">
+                            {(popupState) => (
+                                <>
+                                    <Tooltip title={t('chapter.action.download.add.label.action')}>
+                                        <IconButton disabled={areAllChaptersDownloaded} {...bindTrigger(popupState)}>
+                                            <DownloadIcon />
+                                        </IconButton>
+                                    </Tooltip>
+                                    {popupState.isOpen && (
+                                        <Menu {...bindMenu(popupState)}>
+                                            <ChaptersDownloadActionMenuItems
+                                                mangaIds={[manga.id]}
+                                                closeMenu={popupState.close}
+                                            />
+                                        </Menu>
+                                    )}
+                                </>
+                            )}
+                        </PopupState>
+
                         <ChaptersToolbarMenu options={options} optionsDispatch={dispatch} />
                         <SelectableCollectionSelectAll
                             areAllItemsSelected={areAllItemsSelected}

src/components/chapter/ChaptersDownloadActionMenuItems.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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 MenuItem from '@mui/material/MenuItem';
+import { useTranslation } from 'react-i18next';
+import { TManga } from '@/typings.ts';
+import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
+import { Mangas } from '@/lib/data/Mangas.ts';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
+
+const DownloadRange = {
+    NEXT_1: 1,
+    NEXT_5: 5,
+    NEXT_10: 10,
+    NEXT_25: 25,
+    UNREAD: undefined,
+};
+
+export const ChaptersDownloadActionMenuItems = ({
+    mangaIds,
+    closeMenu,
+}: {
+    mangaIds: TManga['id'][];
+    closeMenu: () => void;
+}) => {
+    const { t } = useTranslation();
+
+    const {
+        settings: { downloadAheadLimit },
+    } = useMetadataServerSettings();
+
+    const handleSelect = (size?: number, onlyUnread: boolean = true) => {
+        Mangas.performAction('download', mangaIds, {
+            onlyUnread,
+            size,
+        }).catch(defaultPromiseErrorHandler('ChapterDownloadButton::handleSelect'));
+        closeMenu?.();
+    };
+
+    return (
+        <>
+            <MenuItem onClick={() => handleSelect(DownloadRange.NEXT_1)}>
+                {t('chapter.action.download.add.label.next')}
+            </MenuItem>
+            <MenuItem onClick={() => handleSelect(DownloadRange.NEXT_5)}>
+                {t('chapter.action.download.add.label.next_five')}
+            </MenuItem>
+            <MenuItem onClick={() => handleSelect(DownloadRange.NEXT_10)}>
+                {t('chapter.action.download.add.label.next_ten')}
+            </MenuItem>
+            <MenuItem onClick={() => handleSelect(DownloadRange.NEXT_25)}>
+                {t('chapter.action.download.add.label.next_twentyfive')}
+            </MenuItem>
+            <MenuItem onClick={() => handleSelect(downloadAheadLimit)}>
+                {t('chapter.action.download.add.label.ahead', { count: downloadAheadLimit })}
+            </MenuItem>
+            <MenuItem onClick={() => handleSelect(DownloadRange.UNREAD)}>
+                {t('chapter.action.download.add.label.unread')}
+            </MenuItem>
+            <MenuItem onClick={() => handleSelect(downloadAheadLimit)}>
+                {t('chapter.action.download.add.label.all', { onlyUnread: false })}
+            </MenuItem>
+        </>
+    );
+};