put Sources and Extensions in the same screen

Author: AriaMoradi

src/App.tsx

@@ -20,7 +20,6 @@ import NavBar from 'components/navbar/NavBar';
 import NavbarContext from 'context/NavbarContext';
 import DarkTheme from 'context/DarkTheme';
 import useLocalStorage from 'util/useLocalStorage';
-import MangaSources from 'screens/manga/Sources';
 import Settings from 'screens/Settings';
 import About from 'screens/settings/About';
 import Categories from 'screens/settings/Categories';
@@ -29,11 +28,11 @@ import Library from 'screens/manga/Library';
 import SearchSingle from 'screens/manga/SearchSingle';
 import SourceConfigure from 'screens/manga/SourceConfigure';
 import Manga from 'screens/manga/Manga';
-import MangaExtensions from 'screens/manga/Extensions';
 import SourceMangas from 'screens/manga/SourceMangas';
 import Reader from 'screens/manga/Reader';
 import Updates from 'screens/manga/Updates';
 import DownloadQueue from 'screens/manga/DownloadQueue';
+import Browse from 'screens/manga/Browse';
 
 declare module '@mui/styles/defaultTheme' {
     // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -127,9 +126,6 @@ export default function App() {
                                 <Route path="/sources/:sourceId/search/">
                                     <SearchSingle />
                                 </Route>
-                                <Route path="/extensions">
-                                    <MangaExtensions />
-                                </Route>
                                 <Route path="/sources/:sourceId/popular/">
                                     <SourceMangas popular />
                                 </Route>
@@ -139,9 +135,6 @@ export default function App() {
                                 <Route path="/sources/:sourceId/configure/">
                                     <SourceConfigure />
                                 </Route>
-                                <Route path="/sources">
-                                    <MangaSources />
-                                </Route>
                                 <Route path="/downloads">
                                     <DownloadQueue />
                                 </Route>
@@ -157,6 +150,9 @@ export default function App() {
                                 <Route path="/updates">
                                     <Updates />
                                 </Route>
+                                <Route path="/browse">
+                                    <Browse />
+                                </Route>
                             </Switch>
                         </Container>
                         <Switch>

src/components/navbar/NavBar.tsx

@@ -16,7 +16,6 @@ import { useMediaQuery } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
 import NewReleasesIcon from '@mui/icons-material/NewReleases';
-import ExtensionIcon from '@mui/icons-material/Extension';
 import ExploreIcon from '@mui/icons-material/Explore';
 import GetAppIcon from '@mui/icons-material/GetApp';
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -50,12 +49,8 @@ const navbarItems: Array<NavbarItem> = [
         title: 'Updates',
         IconComponent: NewReleasesIcon,
     }, {
-        path: '/extensions',
-        title: 'Extensions',
-        IconComponent: ExtensionIcon,
-    }, {
-        path: '/sources',
-        title: 'Sources',
+        path: '/browse',
+        title: 'Browse',
         IconComponent: ExploreIcon,
     }, {
         path: '/downloads',

src/screens/Settings.tsx

@@ -30,7 +30,7 @@ import FavoriteIcon from '@mui/icons-material/Favorite';
 import NavbarContext from '../context/NavbarContext';
 import DarkTheme from '../context/DarkTheme';
 import useLocalStorage from '../util/useLocalStorage';
-import ListItemLink from '../util/ListItemLink';
+import ListItemLink from '../components/util/ListItemLink';
 
 export default function Settings() {
     const { setTitle, setAction } = useContext(NavbarContext);

src/screens/manga/Browse.tsx

@@ -5,8 +5,45 @@
  * 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, { useContext, useEffect, useState } from 'react';
+import React, { useState } from 'react';
+import makeStyles from '@mui/styles/makeStyles';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import TabPanel from 'components/util/TabPanel';
+import Sources from 'screens/manga/Sources';
+import Extensions from 'screens/manga/Extensions';
+
+const useStyles = makeStyles({
+    noCapitalize: {
+        textTransform: 'none',
+    },
+});
 
 export default function Browse() {
-    return <h1>fek</h1>;
+    const classes = useStyles();
+    const [tabNum, setTabNum] = useState<number>(0);
+
+    return (
+        <>
+            <Tabs
+                value={tabNum}
+                onChange={(e, newTab) => setTabNum(newTab)}
+                indicatorColor="primary"
+                textColor="primary"
+                centered
+                variant="fullWidth"
+                scrollButtons
+                allowScrollButtonsMobile
+            >
+                <Tab className={classes.noCapitalize} label="Sources" />
+                <Tab className={classes.noCapitalize} label="Extensions" />
+            </Tabs>
+            <TabPanel index={0} currentIndex={tabNum}>
+                <Sources />
+            </TabPanel>
+            <TabPanel index={1} currentIndex={tabNum}>
+                <Extensions />
+            </TabPanel>
+        </>
+    );
 }

src/screens/manga/Sources.tsx

@@ -37,7 +37,7 @@ function groupByLang(sources: ISource[]) {
     return result;
 }
 
-export default function MangaSources() {
+export default function Sources() {
     const { setTitle, setAction } = useContext(NavbarContext);
 
     const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownSourceLangs', sourceDefualtLangs());

src/screens/settings/About.tsx

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

src/screens/settings/Backup.tsx

@@ -11,7 +11,7 @@ import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import { fromEvent } from 'file-selector';
 import makeToast from 'components/Toast';
-import ListItemLink from '../../util/ListItemLink';
+import ListItemLink from '../../components/util/ListItemLink';
 import NavbarContext from '../../context/NavbarContext';
 import client from '../../util/client';