From 6afc9f22b6f606e67d89443981fc1178be313410 Mon Sep 17 00:00:00 2001 From: schroda <50052685+schroda@users.noreply.github.com> Date: Sun, 9 Mar 2025 15:48:54 +0100 Subject: [PATCH] Introduce "more" page - moves "Settings" into "more" page --- public/locales/en.json | 1 + src/App.tsx | 2 + src/modules/core/AppRoute.constants.ts | 4 ++ .../components/DefaultNavBar.tsx | 10 +-- src/modules/settings/screens/More.tsx | 66 +++++++++++++++++++ src/modules/settings/screens/Settings.tsx | 7 -- 6 files changed, 78 insertions(+), 12 deletions(-) create mode 100644 src/modules/settings/screens/More.tsx diff --git a/public/locales/en.json b/public/locales/en.json index 5fc5d6ff..18f56afd 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -427,6 +427,7 @@ "logged_in": "Logged in", "menu": "Menu", "mobile": "Mobile", + "more": "More", "never": "Never", "next": "Next", "none": "None", diff --git a/src/App.tsx b/src/App.tsx index f4c16658..ee656f53 100644 --- a/src/App.tsx +++ b/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 */} } /> } /> + } /> } /> } /> diff --git a/src/modules/core/AppRoute.constants.ts b/src/modules/core/AppRoute.constants.ts index 6a1d868e..3964b692 100644 --- a/src/modules/core/AppRoute.constants.ts +++ b/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; diff --git a/src/modules/navigation-bar/components/DefaultNavBar.tsx b/src/modules/navigation-bar/components/DefaultNavBar.tsx index 67af4840..0ad4620b 100644 --- a/src/modules/navigation-bar/components/DefaultNavBar.tsx +++ b/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 = [ show: 'both', }, { - path: AppRoutes.settings.path, - title: 'settings.title', - SelectedIconComponent: SettingsIcon, - IconComponent: SettingsIcon, + path: AppRoutes.more.path, + title: 'global.label.more', + SelectedIconComponent: MoreHorizIcon, + IconComponent: MoreHorizIcon, show: 'both', }, ]; diff --git a/src/modules/settings/screens/More.tsx b/src/modules/settings/screens/More.tsx new file mode 100644 index 00000000..3706d3d6 --- /dev/null +++ b/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 ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/modules/settings/screens/Settings.tsx b/src/modules/settings/screens/Settings.tsx index e5ba7049..e676af4b 100644 --- a/src/modules/settings/screens/Settings.tsx +++ b/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() { - - - - - - ); }