Hide chapter list action menu during active selection

Handling changing filters during selection is too cumbersome

src/modules/chapter/components/ChapterList.tsx

@@ -13,12 +13,6 @@ import Typography from '@mui/material/Typography';
 import { ComponentProps, useCallback, useMemo, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 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 { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { ChapterCard } from '@/modules/chapter/components/cards/ChapterCard.tsx';
 import { ResumeFab } from '@/modules/manga/components/ResumeFAB.tsx';
@@ -41,7 +35,6 @@ import { useSelectableCollection } from '@/modules/collection/hooks/useSelectabl
 import { SelectableCollectionSelectAll } from '@/modules/collection/components/SelectableCollectionSelectAll.tsx';
 import { Chapters } from '@/modules/chapter/services/Chapters.ts';
 import { ChapterActionMenuItems } from '@/modules/chapter/components/actions/ChapterActionMenuItems.tsx';
-import { ChaptersDownloadActionMenuItems } from '@/modules/chapter/components/actions/ChaptersDownloadActionMenuItems.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { LoadingPlaceholder } from '@/modules/core/components/feedback/LoadingPlaceholder.tsx';
 import { GET_CHAPTERS_MANGA } from '@/lib/graphql/queries/ChapterQuery.ts';
@@ -191,46 +184,16 @@ export const ChapterList = ({
                     </Typography>
 
                     <Stack direction="row">
-                        <CustomTooltip
+                        {areNoItemsSelected && (
-                            title={t('chapter.action.mark_as_read.add.label.action.current')}
+                            <ChaptersToolbarMenu
-                            disabled={areAllChaptersRead}
+                                mangaId={manga.id}
-                        >
+                                areAllChaptersDownloaded={areAllChaptersDownloaded}
-                            <IconButton
+                                areAllChaptersRead={areAllChaptersRead}
-                                disabled={areAllChaptersRead}
+                                options={options}
-                                onClick={() => Chapters.markAsRead(Chapters.getNonRead(chapters), true, manga.id)}
+                                updateOption={updateOption}
-                                color="inherit"
+                                unreadChapters={Chapters.getNonRead(chapters)}
-                            >
+                            />
-                                <DoneAllIcon />
+                        )}
-                            </IconButton>
-                        </CustomTooltip>
-                        <PopupState variant="popover" popupId="chapterlist-download-button">
-                            {(popupState) => (
-                                <>
-                                    <CustomTooltip
-                                        title={t('chapter.action.download.add.label.action')}
-                                        disabled={areAllChaptersRead}
-                                    >
-                                        <IconButton
-                                            disabled={areAllChaptersDownloaded}
-                                            {...bindTrigger(popupState)}
-                                            color="inherit"
-                                        >
-                                            <DownloadIcon />
-                                        </IconButton>
-                                    </CustomTooltip>
-                                    {popupState.isOpen && (
-                                        <Menu {...bindMenu(popupState)}>
-                                            <ChaptersDownloadActionMenuItems
-                                                mangaIds={[manga.id]}
-                                                closeMenu={popupState.close}
-                                            />
-                                        </Menu>
-                                    )}
-                                </>
-                            )}
-                        </PopupState>
-
-                        <ChaptersToolbarMenu options={options} updateOption={updateOption} />
                         <SelectableCollectionSelectAll
                             areAllItemsSelected={areAllItemsSelected}
                             areNoItemsSelected={areNoItemsSelected}

src/modules/chapter/components/ChaptersToolbarMenu.tsx

@@ -10,17 +10,39 @@ import FilterList from '@mui/icons-material/FilterList';
 import IconButton from '@mui/material/IconButton';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
+import Menu from '@mui/material/Menu';
+import DownloadIcon from '@mui/icons-material/Download';
+import DoneAllIcon from '@mui/icons-material/DoneAll';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip.tsx';
 import { ChapterOptions } from '@/modules/chapter/components/ChapterOptions.tsx';
 import { isFilterActive, updateChapterListOptions } from '@/modules/chapter/utils/ChapterList.util.tsx';
-import { ChapterListOptions } from '@/modules/chapter/Chapter.types.ts';
+import {
+    ChapterBookmarkInfo,
+    ChapterDownloadInfo,
+    ChapterIdInfo,
+    ChapterListOptions,
+} from '@/modules/chapter/Chapter.types.ts';
+import { ChaptersDownloadActionMenuItems } from '@/modules/chapter/components/actions/ChaptersDownloadActionMenuItems.tsx';
+import { Chapters } from '@/modules/chapter/services/Chapters.ts';
 
 interface IProps {
+    mangaId: number;
+    areAllChaptersRead: boolean;
+    areAllChaptersDownloaded: boolean;
     options: ChapterListOptions;
     updateOption: ReturnType<typeof updateChapterListOptions>;
+    unreadChapters: (ChapterIdInfo & ChapterDownloadInfo & ChapterBookmarkInfo)[];
 }
 
-export const ChaptersToolbarMenu = ({ options, updateOption }: IProps) => {
+export const ChaptersToolbarMenu = ({
+    mangaId,
+    areAllChaptersRead,
+    areAllChaptersDownloaded,
+    options,
+    updateOption,
+    unreadChapters,
+}: IProps) => {
     const { t } = useTranslation();
 
     const [open, setOpen] = React.useState(false);
@@ -28,6 +50,41 @@ export const ChaptersToolbarMenu = ({ options, updateOption }: IProps) => {
 
     return (
         <>
+            <CustomTooltip
+                title={t('chapter.action.mark_as_read.add.label.action.current')}
+                disabled={areAllChaptersRead}
+            >
+                <IconButton
+                    disabled={areAllChaptersRead}
+                    onClick={() => Chapters.markAsRead(unreadChapters, true, mangaId)}
+                    color="inherit"
+                >
+                    <DoneAllIcon />
+                </IconButton>
+            </CustomTooltip>
+            <PopupState variant="popover" popupId="chapterlist-download-button">
+                {(popupState) => (
+                    <>
+                        <CustomTooltip
+                            title={t('chapter.action.download.add.label.action')}
+                            disabled={areAllChaptersRead}
+                        >
+                            <IconButton
+                                disabled={areAllChaptersDownloaded}
+                                {...bindTrigger(popupState)}
+                                color="inherit"
+                            >
+                                <DownloadIcon />
+                            </IconButton>
+                        </CustomTooltip>
+                        {popupState.isOpen && (
+                            <Menu {...bindMenu(popupState)}>
+                                <ChaptersDownloadActionMenuItems mangaIds={[mangaId]} closeMenu={popupState.close} />
+                            </Menu>
+                        )}
+                    </>
+                )}
+            </PopupState>
             <CustomTooltip title={t('settings.title')}>
                 <IconButton onClick={() => setOpen(true)} color="inherit">
                     <FilterList color={isFiltered ? 'warning' : undefined} />