refactor

src/components/MangaCard.tsx

@@ -13,7 +13,7 @@ import Typography from '@mui/material/Typography';
 import { Link } from 'react-router-dom';
 import { Grid } from '@mui/material';
 import useLocalStorage from 'util/useLocalStorage';
-import SpinnerImage from 'components/SpinnerImage';
+import SpinnerImage from 'components/util/SpinnerImage';
 
 const useStyles = makeStyles((theme) => ({
     root: {

src/components/MangaDetails.tsx

@@ -13,10 +13,10 @@ import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import PublicIcon from '@mui/icons-material/Public';
 import React, { useContext, useEffect, useState } from 'react';
-import NavbarContext from 'context/NavbarContext';
+import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
-import CategorySelect from './CategorySelect';
+import CategorySelect from './navbar/action/CategorySelect';
 
 const useStyles = (inLibrary: string) => makeStyles((theme: Theme) => ({
     root: {

src/components/MangaGrid.tsx

@@ -7,8 +7,8 @@
 
 import React, { useEffect, useRef } from 'react';
 import Grid from '@mui/material/Grid';
-import EmptyView from 'components/EmptyView';
-import LoadingPlaceholder from 'components/LoadingPlaceholder';
+import EmptyView from 'components/util/EmptyView';
+import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 import MangaCard from './MangaCard';
 
 export interface IMangaGridProps{

src/components/context/DarkTheme.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 from 'react';
+
+type ContextType = {
+    darkTheme: boolean
+    setDarkTheme: React.Dispatch<React.SetStateAction<boolean>>
+};
+
+const DarkTheme = React.createContext<ContextType>({
+    darkTheme: true,
+    setDarkTheme: ():void => {},
+});
+
+export default DarkTheme;

src/components/context/NavbarContext.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 from 'react';
+
+type ContextType = {
+    // AppBar title
+    title: string
+    setTitle: React.Dispatch<React.SetStateAction<string>>
+
+    // AppBar action buttons
+    action: any
+    setAction: React.Dispatch<React.SetStateAction<any>>
+
+    // Allow default navbar to be overrided
+    override: INavbarOverride
+    setOverride: React.Dispatch<React.SetStateAction<INavbarOverride>>
+};
+
+const NavBarContext = React.createContext<ContextType>({
+    title: 'Tachidesk',
+    setTitle: ():void => {},
+    action: <div />,
+    setAction: ():void => {},
+    override: { status: false, value: <div /> },
+    setOverride: ():void => {},
+});
+
+export default NavBarContext;

src/components/library/LibraryMangaGrid.tsx

@@ -7,8 +7,8 @@
  */
 
 import React from 'react';
-import MangaGrid, { IMangaGridProps } from '../manga/MangaGrid';
-import useLibraryOptions, { NullAndUndefined } from '../../util/useLibraryOptions';
+import MangaGrid, { IMangaGridProps } from 'components/MangaGrid';
+import useLibraryOptions, { NullAndUndefined } from 'util/useLibraryOptions';
 
 const FILTERED_OUT_MESSAGE = 'There are no Manga matching this filter';
 

src/components/library/LibraryOptions.tsx

@@ -9,8 +9,8 @@
 import React from 'react';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import { Drawer, FormControlLabel, IconButton } from '@mui/material';
-import useLibraryOptions from '../../util/useLibraryOptions';
-import ThreeStateCheckbox from '../ThreeStateCheckbox';
+import useLibraryOptions from 'util/useLibraryOptions';
+import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox';
 
 function Options() {
     const { unread, setUnread } = useLibraryOptions();

src/components/navbar/DefaultNavBar.tsx

@@ -20,10 +20,10 @@ import GetAppIcon from '@mui/icons-material/GetApp';
 import SettingsIcon from '@mui/icons-material/Settings';
 import ArrowBack from '@mui/icons-material/ArrowBack';
 import { useHistory } from 'react-router-dom';
-import NavBarContext from 'context/NavbarContext';
-import DarkTheme from 'context/DarkTheme';
-import PermanentSideBar from './PermanentSideBar';
-import BottomNavigationBar from './BottomNavigationBar';
+import NavBarContext from 'components/context/NavbarContext';
+import DarkTheme from 'components/context/DarkTheme';
+import DesktopSideBar from './navigation/DesktopSideBar';
+import MobileBottomBar from './navigation/MobileBottomBar';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -62,26 +62,27 @@ const navbarItems: Array<NavbarItem> = [
     },
 ];
 
-export default function NavBar() {
+export default function DefaultNavBar() {
     const classes = useStyles();
     const { title, action, override } = useContext(NavBarContext);
-    const theme = useTheme();
-    const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
-    const history = useHistory();
-    const isMainRoute = navbarItems.some(({ path }) => path === history.location.pathname);
-
     const { darkTheme } = useContext(DarkTheme);
 
-    // Allow default navbar to be overrided with `NavBarContext`
+    const theme = useTheme();
+    const history = useHistory();
+
+    const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
+    const isMainRoute = navbarItems.some(({ path }) => path === history.location.pathname);
+
+    // Allow default navbar to be overrided
     if (override.status) return override.value;
 
     let navbar = <></>;
     if (isMobileWidth) {
         if (!isMainRoute) {
-            navbar = <BottomNavigationBar navBarItems={navbarItems} />;
+            navbar = <MobileBottomBar navBarItems={navbarItems} />;
         }
     } else {
-        navbar = <PermanentSideBar navBarItems={navbarItems} />;
+        navbar = <DesktopSideBar navBarItems={navbarItems} />;
     }
 
     return (

src/components/navbar/ReaderNavBar.tsx

@@ -27,7 +27,7 @@ import ListItemText from '@mui/material/ListItemText';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
 import Collapse from '@mui/material/Collapse';
 import Button from '@mui/material/Button';
-import NavBarContext from '../../context/NavbarContext';
+import NavBarContext from 'components/context/NavbarContext';
 
 const useStyles = (settings: IReaderSettings) => makeStyles((theme) => ({
     // main container and root div need to change classes...

src/components/navbar/TemporaryDrawer.tsx

@@ -1,62 +0,0 @@
-/*
- * Copyright (C) Contributors to the Suwayomi project
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * 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 from 'react';
-import makeStyles from '@mui/styles/makeStyles';
-import Drawer from '@mui/material/Drawer';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import { Link } from 'react-router-dom';
-
-const useStyles = makeStyles({
-    list: {
-        width: 250,
-    },
-});
-
-interface IProps {
-    drawerOpen: boolean
-
-    setDrawerOpen: React.Dispatch<React.SetStateAction<boolean>>
-    navBarItems: Array<NavbarItem>
-}
-
-export default function TemporaryDrawer({ drawerOpen, setDrawerOpen, navBarItems }: IProps) {
-    const classes = useStyles();
-
-    return (
-        <div>
-            <Drawer
-                open={drawerOpen}
-                anchor="left"
-                onClose={() => setDrawerOpen(false)}
-            >
-                <div
-                    className={classes.list}
-                    role="presentation"
-                    onClick={() => setDrawerOpen(false)}
-                    onKeyDown={() => setDrawerOpen(false)}
-                >
-                    <List>
-                        {navBarItems.map((({ path, title, IconComponent }: NavbarItem) => (
-                            <Link to={path} style={{ color: 'inherit', textDecoration: 'none' }}>
-                                <ListItem button key={title}>
-                                    <ListItemIcon>
-                                        <IconComponent />
-                                    </ListItemIcon>
-                                    <ListItemText primary={title} />
-                                </ListItem>
-                            </Link>
-                        )))}
-                    </List>
-                </div>
-            </Drawer>
-        </div>
-    );
-}

src/components/navbar/navigation/DesktopSideBar.tsx

@@ -26,7 +26,7 @@ interface IProps {
     navBarItems: Array<NavbarItem>
 }
 
-export default function PermanentSideBar({ navBarItems }: IProps) {
+export default function DesktopSideBar({ navBarItems }: IProps) {
     const location = useLocation();
     return (
         <SideNavBarContainer>

src/components/navbar/navigation/MobileBottomBar.tsx

@@ -32,7 +32,7 @@ interface IProps {
     navBarItems: Array<NavbarItem>
 }
 
-export default function BottomNavigationBar({ navBarItems }: IProps) {
+export default function MobileBottomBar({ navBarItems }: IProps) {
     const location = useLocation();
     return (
         <BottomNavContainer>

src/components/reader/Page.tsx

@@ -7,7 +7,7 @@
 
 import makeStyles from '@mui/styles/makeStyles';
 import React, { useEffect, useRef } from 'react';
-import SpinnerImage from 'components/SpinnerImage';
+import SpinnerImage from 'components/util/SpinnerImage';
 import useLocalStorage from 'util/useLocalStorage';
 
 function imageStyle(settings: IReaderSettings): any {