From ff43e50bb4f4dfdd1601c9efa22d772b128aed90 Mon Sep 17 00:00:00 2001
From: robo <30987265+Robonau@users.noreply.github.com>
Date: Thu, 24 Feb 2022 19:04:09 +0000
Subject: [PATCH 1/4] Download Queue info

add Imanga type definition to IDownloadChapter

add source name to queue
add manga name to queue
---
 src/screens/DownloadQueue.tsx | 4 +++-
 src/typings.d.ts              | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/screens/DownloadQueue.tsx b/src/screens/DownloadQueue.tsx
index 66f9e3a1fe..8f45f81a0e 100644
--- a/src/screens/DownloadQueue.tsx
+++ b/src/screens/DownloadQueue.tsx
@@ -125,7 +125,9 @@ export default function DownloadQueue() {
                                             </ListItemIcon>
                                             <ListItemText
                                                 primary={
-                                                    `${item.chapter.name} | `
+                                                    `${item.manga.source.name} | `
+                                                + `${item.manga.title} | `
+                                                + `${item.chapter.name} | `
                                                 + ` (${(item.progress * 100).toFixed(2)}%)`
                                                 + ` => state: ${item.state}`
                                                 }
diff --git a/src/typings.d.ts b/src/typings.d.ts
index 18d779c52b..4496eea99b 100644
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -155,6 +155,7 @@ interface IDownloadChapter{
     state: 'Queued' | 'Downloading' | 'Finished' | 'Error'
     progress: number
     chapter: IChapter
+    manga: IManga
 }
 
 interface IQueue {

From fd97ceeaa6ee41a28aa2b8c243f03e218aacb4b9 Mon Sep 17 00:00:00 2001
From: robo <30987265+Robonau@users.noreply.github.com>
Date: Fri, 25 Feb 2022 18:26:02 +0000
Subject: [PATCH 2/4] more like tachi

---
 src/screens/DownloadQueue.tsx | 53 ++++++++++++++++++++++++++---------
 1 file changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/screens/DownloadQueue.tsx b/src/screens/DownloadQueue.tsx
index 8f45f81a0e..e3565c8c0d 100644
--- a/src/screens/DownloadQueue.tsx
+++ b/src/screens/DownloadQueue.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /* eslint-disable @typescript-eslint/no-shadow */
 /* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/jsx-props-no-spreading */
@@ -23,9 +24,12 @@ import List from '@mui/material/List';
 import DragHandleIcon from '@mui/icons-material/DragHandle';
 import ListItem from '@mui/material/ListItem';
 import { ListItemIcon } from '@mui/material';
-import ListItemText from '@mui/material/ListItemText';
 import EmptyView from 'components/util/EmptyView';
 
+import { Box } from '@mui/system';
+import Typography from '@mui/material/Typography';
+import { useHistory } from 'react-router-dom';
+
 const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
 
 const getItemStyle = (isDragging: boolean,
@@ -48,6 +52,8 @@ export default function DownloadQueue() {
     const [queueState, setQueueState] = useState<IQueue>(initialQueue);
     const { queue, status } = queueState;
 
+    const history = useHistory();
+
     const theme = useTheme();
 
     const { setTitle, setAction } = useContext(NavbarContext);
@@ -111,6 +117,22 @@ export default function DownloadQueue() {
                                     {(provided, snapshot) => (
                                         <ListItem
                                             ContainerProps={{ ref: provided.innerRef } as any}
+                                            sx={{
+                                                display: 'flex',
+                                                justifyContent: 'flex-start',
+                                                alignItems: 'flex-start',
+                                                padding: 2,
+                                                margin: '10px',
+                                                '&:hover': {
+                                                    backgroundColor: 'action.hover',
+                                                    transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                                                },
+                                                '&:active': {
+                                                    backgroundColor: 'action.selected',
+                                                    transition: 'background-color 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+                                                },
+                                            }}
+                                            onClick={() => history.push(`/manga/${item.chapter.mangaId}`)}
                                             {...provided.draggableProps}
                                             {...provided.dragHandleProps}
                                             style={getItemStyle(
@@ -120,21 +142,25 @@ export default function DownloadQueue() {
                                             )}
                                             ref={provided.innerRef}
                                         >
-                                            <ListItemIcon>
+                                            <ListItemIcon sx={{ margin: 'auto 0' }}>
                                                 <DragHandleIcon />
                                             </ListItemIcon>
-                                            <ListItemText
-                                                primary={
-                                                    `${item.manga.source.name} | `
-                                                + `${item.manga.title} | `
-                                                + `${item.chapter.name} | `
-                                                + ` (${(item.progress * 100).toFixed(2)}%)`
-                                                + ` => state: ${item.state}`
-                                                }
-                                            />
+                                            <Box sx={{ display: 'flex' }}>
+                                                <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                                                    <Typography variant="h5" component="h2">
+                                                        {item.manga.title}
+                                                    </Typography>
+                                                    <Typography variant="caption" display="block" gutterBottom>
+                                                        {item.chapter.name}
+                                                    </Typography>
+                                                </Box>
+                                            </Box>
                                             <IconButton
-                                                onClick={() => {
-                                                // deleteCategory(index);
+                                                sx={{ marginLeft: 'auto' }}
+                                                onClick={(e) => {
+                                                    // deleteCategory(index);
+                                                    // prevent parent tags from getting the event
+                                                    e.stopPropagation();
                                                 }}
                                                 size="large"
                                             >
@@ -143,6 +169,7 @@ export default function DownloadQueue() {
                                         </ListItem>
                                     )}
                                 </Draggable>
+
                             ))}
                             {provided.placeholder}
                         </List>

From 776a3ac9c175c1a25d3e6ee2042ce972aa6f7d7e Mon Sep 17 00:00:00 2001
From: robo <30987265+Robonau@users.noreply.github.com>
Date: Fri, 25 Feb 2022 18:41:33 +0000
Subject: [PATCH 3/4] add back state and % data

---
 src/screens/DownloadQueue.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/screens/DownloadQueue.tsx b/src/screens/DownloadQueue.tsx
index e3565c8c0d..9c7de1854a 100644
--- a/src/screens/DownloadQueue.tsx
+++ b/src/screens/DownloadQueue.tsx
@@ -151,7 +151,9 @@ export default function DownloadQueue() {
                                                         {item.manga.title}
                                                     </Typography>
                                                     <Typography variant="caption" display="block" gutterBottom>
-                                                        {item.chapter.name}
+                                                        {`${item.chapter.name} `
+                                                        + `(${(item.progress * 100).toFixed(2)}%)`
+                                                        + ` => state: ${item.state}`}
                                                     </Typography>
                                                 </Box>
                                             </Box>

From a64aab7f4fe03fb7a389d3f685d204650945fd83 Mon Sep 17 00:00:00 2001
From: robo <30987265+Robonau@users.noreply.github.com>
Date: Thu, 3 Mar 2022 17:28:49 +0000
Subject: [PATCH 4/4] yup forgot to remove after

---
 src/screens/DownloadQueue.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/screens/DownloadQueue.tsx b/src/screens/DownloadQueue.tsx
index 9c7de1854a..21801ef1ad 100644
--- a/src/screens/DownloadQueue.tsx
+++ b/src/screens/DownloadQueue.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 /* eslint-disable @typescript-eslint/no-shadow */
 /* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/jsx-props-no-spreading */