refactor

src/App.tsx

@@ -17,9 +17,9 @@ import CssBaseline from '@mui/material/CssBaseline';
 import {
     createTheme, ThemeProvider, Theme, StyledEngineProvider,
 } from '@mui/material/styles';
-import NavBar from 'components/navbar/NavBar';
-import NavbarContext from 'context/NavbarContext';
-import DarkTheme from 'context/DarkTheme';
+import DefaultNavBar from 'components/navbar/DefaultNavBar';
+import NavbarContext from 'components/context/NavbarContext';
+import DarkTheme from 'components/context/DarkTheme';
 import useLocalStorage from 'util/useLocalStorage';
 import Settings from 'screens/Settings';
 import About from 'screens/settings/About';
@@ -98,7 +98,7 @@ export default function App() {
                     <QueryParamProvider ReactRouterRoute={Route}>
                         <NavbarContext.Provider value={navBarContext}>
                             <CssBaseline />
-                            <NavBar />
+                            <DefaultNavBar />
                             <Container
                                 id="appMainContainer"
                                 maxWidth={false}

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/NavbarContext.tsx

@@ -8,10 +8,15 @@
 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>>
 };

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 {

src/screens/Settings.tsx

@@ -27,8 +27,8 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import TextField from '@mui/material/TextField';
 import FavoriteIcon from '@mui/icons-material/Favorite';
-import NavbarContext from '../context/NavbarContext';
-import DarkTheme from '../context/DarkTheme';
+import NavbarContext from '../components/context/NavbarContext';
+import DarkTheme from '../components/context/DarkTheme';
 import useLocalStorage from '../util/useLocalStorage';
 import ListItemLink from '../components/util/ListItemLink';
 

src/screens/manga/DownloadQueue.tsx

@@ -8,7 +8,7 @@
  * 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 NavbarContext from 'context/NavbarContext';
+import NavbarContext from 'components/context/NavbarContext';
 import React, { useContext, useEffect, useState } from 'react';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import PauseIcon from '@mui/icons-material/Pause';
@@ -24,7 +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';
+import EmptyView from 'components/util/EmptyView';
 
 const baseWebsocketUrl = JSON.parse(window.localStorage.getItem('serverBaseURL')!).replace('http', 'ws');
 

src/screens/manga/Extensions.tsx

@@ -9,14 +9,14 @@ import React, { useContext, useEffect, useState } from 'react';
 import { fromEvent } from 'file-selector';
 import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
-import ExtensionCard from 'components/manga/ExtensionCard';
-import NavbarContext from 'context/NavbarContext';
+import ExtensionCard from 'components/ExtensionCard';
+import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
-import LangSelect from 'components/manga/LangSelect';
+import LangSelect from 'components/navbar/action/LangSelect';
 import { extensionDefaultLangs, langCodeToName, langSortCmp } from 'util/language';
-import { makeToaster } from 'components/Toast';
-import LoadingPlaceholder from 'components/LoadingPlaceholder';
+import { makeToaster } from 'components/util/Toast';
+import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 
 const allLangs: string[] = [];
 

src/screens/manga/Library.tsx

@@ -7,11 +7,11 @@
 
 import { Tab, Tabs } from '@mui/material';
 import React, { useContext, useEffect, useState } from 'react';
-import NavbarContext from 'context/NavbarContext';
+import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 import cloneObject from 'util/cloneObject';
-import EmptyView from 'components/EmptyView';
-import LoadingPlaceholder from 'components/LoadingPlaceholder';
+import EmptyView from 'components/util/EmptyView';
+import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 import TabPanel from 'components/util/TabPanel';
 import LibraryOptions from '../../components/library/LibraryOptions';
 import LibraryMangaGrid from '../../components/library/LibraryMangaGrid';

src/screens/manga/Manga.tsx

@@ -10,12 +10,12 @@ import { Theme } from '@mui/material/styles';
 import makeStyles from '@mui/styles/makeStyles';
 import { useParams } from 'react-router-dom';
 import { Virtuoso } from 'react-virtuoso';
-import ChapterCard from 'components/manga/ChapterCard';
-import MangaDetails from 'components/manga/MangaDetails';
-import NavbarContext from 'context/NavbarContext';
+import ChapterCard from 'components/ChapterCard';
+import MangaDetails from 'components/MangaDetails';
+import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
-import LoadingPlaceholder from 'components/LoadingPlaceholder';
-import makeToast from 'components/Toast';
+import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
+import makeToast from 'components/util/Toast';
 
 const useStyles = makeStyles((theme: Theme) => ({
     root: {

src/screens/manga/Reader.tsx

@@ -9,13 +9,13 @@ import CircularProgress from '@mui/material/CircularProgress';
 import makeStyles from '@mui/styles/makeStyles';
 import React, { useContext, useEffect, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import HorizontalPager from 'components/manga/reader/pager/HorizontalPager';
-import PageNumber from 'components/manga/reader/PageNumber';
-import PagedPager from 'components/manga/reader/pager/PagedPager';
-import DoublePagedPager from 'components/manga/reader/pager/DoublePagedPager';
-import VerticalPager from 'components/manga/reader/pager/VerticalPager';
+import HorizontalPager from 'components/reader/pager/HorizontalPager';
+import PageNumber from 'components/reader/PageNumber';
+import PagedPager from 'components/reader/pager/PagedPager';
+import DoublePagedPager from 'components/reader/pager/DoublePagedPager';
+import VerticalPager from 'components/reader/pager/VerticalPager';
 import ReaderNavBar, { defaultReaderSettings } from 'components/navbar/ReaderNavBar';
-import NavbarContext from 'context/NavbarContext';
+import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
 import cloneObject from 'util/cloneObject';

src/screens/manga/SearchSingle.tsx

@@ -10,8 +10,8 @@ import makeStyles from '@mui/styles/makeStyles';
 import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 import { useParams } from 'react-router-dom';
-import MangaGrid from 'components/manga/MangaGrid';
-import NavbarContext from 'context/NavbarContext';
+import MangaGrid from 'components/MangaGrid';
+import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 
 const useStyles = makeStyles((theme) => ({

src/screens/manga/SourceConfigure.tsx

@@ -6,12 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useContext, useEffect, useState } from 'react';
-import NavbarContext from 'context/NavbarContext';
+import NavbarContext from 'components/context/NavbarContext';
 import { useParams } from 'react-router-dom';
 import client from 'util/client';
-import { SwitchPreferenceCompat, CheckBoxPreference } from 'components/manga/sourceConfiguration/TwoStatePreference';
-import ListPreference from 'components/manga/sourceConfiguration/ListPreference';
-import EditTextPreference from 'components/manga/sourceConfiguration/EditTextPreference';
+import { SwitchPreferenceCompat, CheckBoxPreference } from 'components/sourceConfiguration/TwoStatePreference';
+import ListPreference from 'components/sourceConfiguration/ListPreference';
+import EditTextPreference from 'components/sourceConfiguration/EditTextPreference';
 import List from '@mui/material/List';
 import cloneObject from 'util/cloneObject';
 

src/screens/manga/SourceMangas.tsx

@@ -8,8 +8,8 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import IconButton from '@mui/material/IconButton';
-import MangaGrid from 'components/manga/MangaGrid';
-import NavbarContext from 'context/NavbarContext';
+import MangaGrid from 'components/MangaGrid';
+import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 import SettingsIcon from '@mui/icons-material/Settings';
 

src/screens/manga/Sources.tsx

@@ -6,15 +6,15 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 
 import React, { useContext, useEffect, useState } from 'react';
-import LangSelect from 'components/manga/LangSelect';
-import SourceCard from 'components/manga/SourceCard';
-import NavbarContext from 'context/NavbarContext';
+import LangSelect from 'components/navbar/action/LangSelect';
+import SourceCard from 'components/SourceCard';
+import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 import {
     sourceDefualtLangs, sourceForcedDefaultLangs, langCodeToName, langSortCmp,
 } from 'util/language';
 import useLocalStorage from 'util/useLocalStorage';
-import LoadingPlaceholder from 'components/LoadingPlaceholder';
+import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 
 function sourceToLangList(sources: ISource[]) {
     const result: string[] = [];

src/screens/manga/Updates.tsx

@@ -17,7 +17,7 @@ import IconButton from '@mui/material/IconButton';
 import DownloadIcon from '@mui/icons-material/Download';
 import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
-import NavbarContext from 'context/NavbarContext';
+import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 import useLocalStorage from 'util/useLocalStorage';
 

src/screens/settings/About.tsx

@@ -6,7 +6,7 @@ import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import client from '../../util/client';
 import ListItemLink from '../../components/util/ListItemLink';
-import NavbarContext from '../../context/NavbarContext';
+import NavbarContext from '../../components/context/NavbarContext';
 
 const useStyles = makeStyles({
     loading: {

src/screens/settings/Backup.tsx

@@ -10,9 +10,9 @@ import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import { fromEvent } from 'file-selector';
-import makeToast from 'components/Toast';
+import makeToast from 'components/util/Toast';
 import ListItemLink from '../../components/util/ListItemLink';
-import NavbarContext from '../../context/NavbarContext';
+import NavbarContext from '../../components/context/NavbarContext';
 import client from '../../util/client';
 
 export default function Backup() {

src/screens/settings/Categories.tsx

@@ -33,7 +33,7 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import NavbarContext from 'context/NavbarContext';
+import NavbarContext from 'components/context/NavbarContext';
 import client from 'util/client';
 
 const getItemStyle = (isDragging: boolean,