Feature/download queue clear queue (#490)

* Use "NavbarContext" in "DownloadsQueue"

* Add option to clear the whole download queue

src/i18n/locale/en.json

@@ -141,10 +141,12 @@
     "queue": {
       "error": {
         "label": {
-          "failed_to_remove": "Could not remove download from queue."
+          "failed_to_remove": "Could not remove the download from the queue.",
+          "failed_delete_all": "Could not remove all downloads from the queue"
         }
       },
       "label": {
+        "delete_all": "Delete all",
         "no_downloads": "No downloads"
       },
       "title": "Download Queue"

src/screens/DownloadQueue.tsx

@@ -14,14 +14,13 @@ import { Card, CardActionArea, Stack, Box, Tooltip } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import React, { useContext, useEffect } from 'react';
 import { DragDropContext, Draggable } from 'react-beautiful-dnd';
-
 import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { StrictModeDroppable } from '@/lib/StrictModeDroppable';
 import { makeToast } from '@/components/util/Toast';
-import { NavbarToolbar } from '@/components/navbar/DefaultNavBar';
 import { DownloadStateIndicator } from '@/components/molecules/DownloadStateIndicator';
 import { EmptyView } from '@/components/util/EmptyView';
 import { DownloadType } from '@/lib/graphql/generated/graphql.ts';
@@ -34,9 +33,18 @@ export const DownloadQueue: React.FC = () => {
     const { data: downloaderData } = requestManager.useDownloadSubscription();
     const queue = (downloaderData?.downloadChanged.queue as DownloadType[]) ?? [];
     const status = downloaderData?.downloadChanged.state ?? 'STARTED';
+    const isQueueEmpty = !queue.length;
 
     const { setTitle, setAction } = useContext(NavBarContext);
 
+    const clearQueue = async () => {
+        try {
+            await requestManager.clearDownloads().response;
+        } catch (e) {
+            makeToast(t('download.queue.error.label.failed_delete_all'), 'error');
+        }
+    };
+
     const toggleQueueStatus = () => {
         if (status === 'STOPPED') {
             requestManager.startDownloads();
@@ -47,15 +55,25 @@ export const DownloadQueue: React.FC = () => {
 
     useEffect(() => {
         setTitle(t('download.queue.title'));
-        setAction(null);
-    }, [t]);
+        setAction(
+            <>
+                <Tooltip title={t('download.queue.label.delete_all')}>
+                    <IconButton onClick={clearQueue} size="large" disabled={isQueueEmpty}>
+                        <DeleteSweepIcon />
+                    </IconButton>
+                </Tooltip>
+
+                <Tooltip title={t(status === 'STOPPED' ? 'global.button.start' : 'global.button.stop')}>
+                    <IconButton onClick={toggleQueueStatus} size="large" disabled={isQueueEmpty}>
+                        {status === 'STOPPED' ? <PlayArrowIcon /> : <PauseIcon />}
+                    </IconButton>
+                </Tooltip>
+            </>,
+        );
+    }, [t, status, isQueueEmpty]);
 
     const onDragEnd = () => {};
 
-    if (queue.length === 0) {
-        return <EmptyView message={t('download.queue.label.no_downloads')} />;
-    }
-
     const handleDelete = async (chapter: TChapter) => {
         const isRunning = status === 'STARTED';
 
@@ -83,15 +101,11 @@ export const DownloadQueue: React.FC = () => {
         requestManager.startDownloads().response.catch(() => {});
     };
 
+    if (isQueueEmpty) {
+        return <EmptyView message={t('download.queue.label.no_downloads')} />;
+    }
+
     return (
-        <>
-            <NavbarToolbar>
-                <Tooltip title={t(status === 'STOPPED' ? 'global.button.start' : 'global.button.stop')}>
-                    <IconButton onClick={toggleQueueStatus} size="large">
-                        {status === 'STOPPED' ? <PlayArrowIcon /> : <PauseIcon />}
-                    </IconButton>
-                </Tooltip>
-            </NavbarToolbar>
         <DragDropContext onDragEnd={onDragEnd}>
             <StrictModeDroppable droppableId="droppable">
                 {(droppableProvided) => (
@@ -156,6 +170,5 @@ export const DownloadQueue: React.FC = () => {
                 )}
             </StrictModeDroppable>
         </DragDropContext>
-        </>
     );
 };