Introduce "more" page

- moves "Settings" into "more" page

public/locales/en.json

@@ -427,6 +427,7 @@
       "logged_in": "Logged in",
       "menu": "Menu",
       "mobile": "Mobile",
+      "more": "More",
       "never": "Never",
       "next": "Next",
       "none": "None",

src/App.tsx

@@ -63,6 +63,7 @@ const { GlobalReaderSettings } = loadable(
     () => import('@/modules/reader/screens/GlobalReaderSettings.tsx'),
     lazyLoadFallback,
 );
+const { More } = loadable(() => import('@/modules/settings/screens/More.tsx'), lazyLoadFallback);
 
 if (process.env.NODE_ENV !== 'production') {
     // Adds messages only in a dev environment
@@ -119,6 +120,7 @@ const MainApp = () => {
                     {/* General Routes */}
                     <Route path={AppRoutes.root.match} element={<Navigate to={AppRoutes.library.path} replace />} />
                     <Route path={AppRoutes.matchAll.match} element={<Navigate to={AppRoutes.root.path} replace />} />
+                    <Route path={AppRoutes.more.match} element={<More />} />
                     <Route path={AppRoutes.settings.match}>
                         <Route index element={<Settings />} />
                         <Route path={AppRoutes.settings.childRoutes.about.match} element={<About />} />

src/modules/core/AppRoute.constants.ts

@@ -154,4 +154,8 @@ export const AppRoutes = {
         path: (mangaId: MangaIdInfo['id'], chapterSourceOrder: ChapterSourceOrderInfo['sourceOrder']) =>
             `/manga/${mangaId}/chapter/${chapterSourceOrder}`,
     },
+    more: {
+        match: '/more',
+        path: '/more',
+    },
 } satisfies TAppRoutes;

src/modules/navigation-bar/components/DefaultNavBar.tsx

@@ -19,13 +19,13 @@ import ExploreIcon from '@mui/icons-material/Explore';
 import ExploreOutlinedIcon from '@mui/icons-material/ExploreOutlined';
 import GetAppIcon from '@mui/icons-material/GetApp';
 import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
-import SettingsIcon from '@mui/icons-material/Settings';
 import ArrowBack from '@mui/icons-material/ArrowBack';
 import { useLocation } from 'react-router-dom';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import MenuIcon from '@mui/icons-material/Menu';
 import Stack from '@mui/material/Stack';
 import { useTheme } from '@mui/material/styles';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';
 import { useGetOptionForDirection } from '@/modules/theme/services/ThemeCreator.ts';
 import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
@@ -66,10 +66,10 @@ const navbarItems: Array<NavbarItem> = [
         show: 'both',
     },
     {
-        path: AppRoutes.settings.path,
+        path: AppRoutes.more.path,
-        title: 'settings.title',
+        title: 'global.label.more',
-        SelectedIconComponent: SettingsIcon,
+        SelectedIconComponent: MoreHorizIcon,
-        IconComponent: SettingsIcon,
+        IconComponent: MoreHorizIcon,
         show: 'both',
     },
 ];

src/modules/settings/screens/More.tsx

@@ -0,0 +1,66 @@
+/*
+ * 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 { useLayoutEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import List from '@mui/material/List';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import InfoIcon from '@mui/icons-material/Info';
+import ListAltIcon from '@mui/icons-material/ListAlt';
+import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
+import Divider from '@mui/material/Divider';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
+import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+
+export const More = () => {
+    const { t } = useTranslation();
+    const { setTitle, setAction } = useNavBarContext();
+
+    useLayoutEffect(() => {
+        setTitle(t('global.label.more'));
+        setAction(null);
+
+        return () => {
+            setTitle('');
+            setAction(null);
+        };
+    }, [t]);
+
+    return (
+        <List sx={{ p: 0 }}>
+            <ListItemLink to={AppRoutes.downloads.path}>
+                <ListItemIcon>
+                    <GetAppOutlinedIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('download.title')} />
+            </ListItemLink>
+            <ListItemLink to={AppRoutes.settings.childRoutes.categories.path}>
+                <ListItemIcon>
+                    <ListAltIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('category.title.category_other')} />
+            </ListItemLink>
+            <Divider />
+            <ListItemLink to={AppRoutes.settings.path}>
+                <ListItemIcon>
+                    <SettingsIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('settings.title')} />
+            </ListItemLink>
+            <ListItemLink to={AppRoutes.settings.childRoutes.about.path}>
+                <ListItemIcon>
+                    <InfoIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('settings.about.title')} />
+            </ListItemLink>
+        </List>
+    );
+};

src/modules/settings/screens/Settings.tsx

@@ -11,7 +11,6 @@ import AutoStoriesIcon from '@mui/icons-material/AutoStories';
 import List from '@mui/material/List';
 import ListAltIcon from '@mui/icons-material/ListAlt';
 import BackupIcon from '@mui/icons-material/Backup';
-import InfoIcon from '@mui/icons-material/Info';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemButton from '@mui/material/ListItemButton';
@@ -135,12 +134,6 @@ export function Settings() {
                 </ListItemIcon>
                 <ListItemText primary={t('settings.server.title.server')} />
             </ListItemLink>
-            <ListItemLink to={AppRoutes.settings.childRoutes.about.path}>
-                <ListItemIcon>
-                    <InfoIcon />
-                </ListItemIcon>
-                <ListItemText primary={t('settings.about.title')} />
-            </ListItemLink>
         </List>
     );
 }