add EmptyView to DownloadQueue, refactro strings (#53)

* Added the Emty view message in the /download path

* Changed a few expression to template string

src/components/manga/ChapterCard.tsx

@@ -149,10 +149,7 @@ export default function ChapterCard(props: IProps) {
                                 {!chapter.bookmarked && 'Bookmark'}
                             </MenuItem>
                             <MenuItem onClick={() => sendChange('read', !chapter.read)}>
-                                Mark as
+                                {`Mark as ${chapter.read && 'unread'} ${!chapter.read && 'read'}`}
-                                {' '}
-                                {chapter.read && 'unread'}
-                                {!chapter.read && 'read'}
                             </MenuItem>
                             <MenuItem onClick={() => sendChange('markPrevRead', true)}>
                                 Mark previous as Read

src/components/manga/MangaDetails.tsx

@@ -205,24 +205,18 @@ export default function MangaDetails(props: IProps) {
                             {manga.title}
                         </h1>
                         <h3>
-                            Author:
+                            {'Author: '}
-                            {' '}
                             <span>{getValueOrUnknown(manga.author)}</span>
                         </h3>
                         <h3>
-                            Artist:
+                            {'Artist: '}
-                            {' '}
                             <span>{getValueOrUnknown(manga.artist)}</span>
                         </h3>
                         <h3>
-                            Status:
+                            {`Status: ${manga.status}`}
-                            {' '}
-                            {manga.status}
                         </h3>
                         <h3>
-                            Source:
+                            {`Source: ${getSourceName(manga.source)}`}
-                            {' '}
-                            {getSourceName(manga.source)}
                         </h3>
                     </div>
                 </div>

src/components/navbar/ReaderNavBar.tsx

@@ -332,13 +332,7 @@ export default function ReaderNavBar(props: IProps) {
                     <hr />
                     <div className={classes.navigation}>
                         <span>
-                            Currently on page
+                            {`Currently on page ${curPage + 1} of ${chapter.pageCount}`}
-                            {' '}
-                            {curPage + 1}
-                            {' '}
-                            of
-                            {' '}
-                            {chapter.pageCount}
                         </span>
                         <div className={classes.navigationChapters}>
                             {chapter.index > 1

src/screens/manga/DownloadQueue.tsx

@@ -24,6 +24,7 @@ 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/EmptyView';
 
 const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
 
@@ -91,6 +92,10 @@ export default function DownloadQueue() {
     const onDragEnd = (result: DropResult) => {
     };
 
+    if (queue.length === 0) {
+        return <EmptyView message="No downloads" />;
+    }
+
     return (
         <>
             <DragDropContext onDragEnd={onDragEnd}>