Feature/batch chapter download (#191)

* Add NavbarToolbar component for rendering items in toolbar through portal

* Refactor Manga screen, move chapters filtering to toolbar menu, cleanup ChapterOptions

* Fix warning

* Update layout of ChapterList and add selection for chapters, add batch download, move stuff around

* Add space to bookmark icon

* Clear actions when leaving source mangas page

* Move bookmark icon back inline and align it correctly with text

* Fixup MangaDetails buttons to update cache properly so buttons in manga menu are updated

* Move chapters filter to ChapterList

* Fixup error display overlapping with loaded content when revalidation fails

* Fixup spacing around ChapterList title

* Only show small progress if manga is loaded so there is not to many spinners

* Prevent title wrapping

* Add icon buttons to desktop sizes of manga toolbar menu

src/screens/Library.tsx

@@ -46,6 +46,10 @@ export default function Library() {
                 <UpdateChecker />
             </>,
         );
+        return () => {
+            setTitle('');
+            setAction(<></>);
+        };
     }, []);
 
     // a hack so MangaGrid doesn't stop working. I won't change it in case

src/screens/Manga.tsx

@@ -5,38 +5,37 @@
  * 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 React, {
-    useCallback, useEffect, useContext, useState, useRef,
-} from 'react';
+import { Warning } from '@mui/icons-material';
+import {
+    CircularProgress, IconButton, Stack, Tooltip,
+} from '@mui/material';
 import { Box } from '@mui/system';
-import MangaDetails from 'components/MangaDetails';
 import NavbarContext from 'components/context/NavbarContext';
-import { fetcher, useQuery } from 'util/client';
+import ChapterList from 'components/manga/ChapterList';
+import { useRefreshManga } from 'components/manga/hooks';
+import MangaDetails from 'components/manga/MangaDetails';
+import MangaToolbarMenu from 'components/manga/MangaToolbarMenu';
+import { NavbarToolbar } from 'components/navbar/DefaultNavBar';
+import EmptyView from 'components/util/EmptyView';
 import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
-import ChapterList from 'components/chapter/ChapterList';
+import React, {
+    useContext, useEffect, useRef,
+} from 'react';
 import { useParams } from 'react-router-dom';
+import { useQuery } from 'util/client';
 
 const AUTOFETCH_AGE = 60 * 60 * 24; // 24 hours
 
-export default function Manga() {
+const Manga: React.FC = () => {
     const { setTitle } = useContext(NavbarContext);
     const { id } = useParams<{ id: string }>();
     const autofetchedRef = useRef(false);
 
-    const { data: manga, error, mutate: mutateManga } = useQuery<IManga>(`/api/v1/manga/${id}/?onlineFetch=false`);
-    const { data: chaptersData, mutate: mutateChapters } = useQuery<IChapter[]>(`/api/v1/manga/${id}/chapters?onlineFetch=false`);
+    const {
+        data: manga, error, loading, isValidating, mutate,
+    } = useQuery<IManga>(`/api/v1/manga/${id}/?onlineFetch=false`);
 
-    const [fetchingOnline, setFetchingOnline] = useState(false);
-    const fetchOnline = useCallback(async () => {
-        setFetchingOnline(true);
-        await Promise.all([
-            fetcher(`/api/v1/manga/${id}/?onlineFetch=true`)
-                .then((res) => mutateManga(res, { revalidate: false })),
-            fetcher(`/api/v1/manga/${id}/chapters?onlineFetch=true`)
-                .then((res) => mutateChapters(res, { revalidate: false })),
-        ]);
-        setFetchingOnline(false);
-    }, [mutateManga, mutateChapters, id]);
+    const [refresh, { loading: refreshing }] = useRefreshManga(id);
 
     useEffect(() => {
         // Automatically fetch manga from source if data is older then 24 hours
@@ -49,7 +48,7 @@ export default function Manga() {
             && autofetchedRef.current === false
         ) {
             autofetchedRef.current = true;
-            fetchOnline();
+            refresh();
         }
     }, [manga]);
 
@@ -57,17 +56,50 @@ export default function Manga() {
         setTitle(manga?.title ?? 'Manga');
     }, [manga?.title]);
 
+    if (error && !manga) {
+        return (
+            <EmptyView message="Could not load manga" messageExtra={error.message ?? error} />
+        );
+    }
     return (
         <Box sx={{ display: { md: 'flex' }, overflow: 'hidden' }}>
-            {!manga && !error && <LoadingPlaceholder />}
-            {manga && (
-                <MangaDetails
-                    refreshing={fetchingOnline}
-                    manga={manga}
-                    onRefresh={fetchOnline}
-                />
-            )}
-            <ChapterList id={id} chaptersData={chaptersData} onRefresh={() => mutateChapters()} />
+            <NavbarToolbar>
+                <Stack direction="row" alignItems="center">
+                    {error && !isValidating && !refreshing && (
+                        <Tooltip title={(
+                            <>
+                                Could not fetch manga data
+                                <br />
+                                {error.message ?? error}
+                            </>
+                        )}
+                        >
+                            <IconButton onClick={() => mutate()}>
+                                <Warning color="error" />
+                            </IconButton>
+                        </Tooltip>
+                    )}
+                    {(manga && (refreshing || isValidating)) && (
+                        <IconButton disabled>
+                            <CircularProgress size={16} />
+                        </IconButton>
+                    )}
+                    {manga && (
+                        <MangaToolbarMenu
+                            manga={manga}
+                            onRefresh={refresh}
+                            refreshing={refreshing}
+                        />
+                    )}
+                </Stack>
+            </NavbarToolbar>
+
+            {loading && <LoadingPlaceholder />}
+
+            {manga && <MangaDetails manga={manga} />}
+            <ChapterList mangaId={id} />
         </Box>
     );
-}
+};
+
+export default Manga;

src/screens/SourceMangas.tsx

@@ -143,6 +143,10 @@ export default function SourceMangas(props: { popular: boolean }) {
             </>
             ,
         );
+
+        return () => {
+            setAction(<></>);
+        };
     }, [isConfigurable]);
 
     useEffect(() => {