put Sources and Extensions in the same screen

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';