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/components/navbar/DefaultNavBar.tsx

@@ -28,6 +28,7 @@ import NavBarContext from 'components/context/NavbarContext';
 import DarkTheme from 'components/context/DarkTheme';
 import ExtensionOutlinedIcon from 'components/util/CustomExtensionOutlinedIcon';
 import { Box } from '@mui/system';
+import { createPortal } from 'react-dom';
 import DesktopSideBar from './navigation/DesktopSideBar';
 import MobileBottomBar from './navigation/MobileBottomBar';
 
@@ -121,13 +122,25 @@ export default function DefaultNavBar() {
                                 </IconButton>
                             )
                     }
-                    <Typography variant={isMobileWidth ? 'h6' : 'h5'} sx={{ flexGrow: 1 }}>
+                    <Typography variant={isMobileWidth ? 'h6' : 'h5'} sx={{ flexGrow: 1 }} noWrap textOverflow="ellipsis">
                         {title}
                     </Typography>
                     {action}
+                    <div id="navbarToolbar" />
                 </Toolbar>
             </AppBar>
             {navbar}
         </Box>
     );
 }
+
+interface INavbarToolbarProps {
+    children?: React.ReactNode
+}
+
+export const NavbarToolbar: React.FC<INavbarToolbarProps> = ({ children }) => {
+    const container = document.getElementById('navbarToolbar');
+    if (!container) return null;
+
+    return createPortal(children, container);
+};