ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Only show hidden nav bar items in "More" page

Browse Source
This commit is contained in:
schroda
2025-04-05 15:17:46 +02:00
parent dbf06a54b9
commit dcf1b5b1c2
7 changed files with 241 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/modules/navigation-bar/NavigationBar.constants.ts Normal file
View File

@@ -0,0 +1,104 @@
/*
* 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 CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
import NewReleasesIcon from '@mui/icons-material/NewReleases';
import NewReleasesOutlinedIcon from '@mui/icons-material/NewReleasesOutlined';
import HistoryIcon from '@mui/icons-material/History';
import HistoryOutlinedIcon from '@mui/icons-material/HistoryOutlined';
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 MoreHorizIcon from '@mui/icons-material/MoreHoriz';
import SettingsIcon from '@mui/icons-material/Settings';
import InfoIcon from '@mui/icons-material/Info';
import { NavbarItem, NavBarItemMoreGroup } from '@/modules/navigation-bar/NavigationBar.types.ts';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
type RestrictedNavBarItem<Show extends NavbarItem['show']> = Omit<NavbarItem, 'show'> & { show: Show };
const NAVIGATION_BAR_BASE_ITEMS = [
{
path: AppRoutes.library.path,
title: 'library.title',
SelectedIconComponent: CollectionsBookmarkIcon,
IconComponent: CollectionsOutlinedBookmarkIcon,
show: 'both',
moreGroup: NavBarItemMoreGroup.GENERAL,
},
{
path: AppRoutes.updates.path,
title: 'updates.title',
SelectedIconComponent: NewReleasesIcon,
IconComponent: NewReleasesOutlinedIcon,
show: 'both',
moreGroup: NavBarItemMoreGroup.GENERAL,
},
{
path: AppRoutes.history.path,
title: 'history.title',
SelectedIconComponent: HistoryIcon,
IconComponent: HistoryOutlinedIcon,
show: 'both',
moreGroup: NavBarItemMoreGroup.GENERAL,
},
{
path: AppRoutes.browse.path,
title: 'global.label.browse',
SelectedIconComponent: ExploreIcon,
IconComponent: ExploreOutlinedIcon,
show: 'both',
moreGroup: NavBarItemMoreGroup.GENERAL,
},
] as const satisfies RestrictedNavBarItem<'both'>[];
const NAVIGATION_BAR_DESKTOP_ITEMS = [
{
path: AppRoutes.downloads.path,
title: 'download.title.queue',
SelectedIconComponent: GetAppIcon,
IconComponent: GetAppOutlinedIcon,
show: 'desktop',
moreGroup: NavBarItemMoreGroup.HIDDEN_ITEM,
},
{
path: AppRoutes.settings.path,
title: 'settings.title',
SelectedIconComponent: SettingsIcon,
IconComponent: SettingsIcon,
show: 'desktop',
moreGroup: NavBarItemMoreGroup.SETTING_INFO,
},
{
path: AppRoutes.settings.childRoutes.about.path,
title: 'settings.about.title',
SelectedIconComponent: InfoIcon,
IconComponent: InfoIcon,
show: 'desktop',
moreGroup: NavBarItemMoreGroup.SETTING_INFO,
},
] as const satisfies RestrictedNavBarItem<'desktop'>[];
export const NAVIGATION_BAR_MOBILE_ITEMS = [
{
path: AppRoutes.more.path,
title: 'global.label.more',
SelectedIconComponent: MoreHorizIcon,
IconComponent: MoreHorizIcon,
show: 'mobile',
moreGroup: NavBarItemMoreGroup.GENERAL,
},
] as const satisfies RestrictedNavBarItem<'mobile'>[];
export const NAVIGATION_BAR_ITEMS = [
...NAVIGATION_BAR_BASE_ITEMS,
...NAVIGATION_BAR_DESKTOP_ITEMS,
...NAVIGATION_BAR_MOBILE_ITEMS,
] as const satisfies NavbarItem[];

10
src/modules/navigation-bar/NavigationBar.types.ts
View File

@@ -9,18 +9,26 @@
import { OverridableComponent } from '@mui/material/OverridableComponent';
import { SvgIconTypeMap } from '@mui/material/SvgIcon';
import { TranslationKey } from '@/Base.types.ts';
import { StaticAppRoute } from '@/modules/core/AppRoute.constants.ts';
export interface INavbarOverride {
status: boolean;
value: any;
}
export enum NavBarItemMoreGroup {
GENERAL,
HIDDEN_ITEM,
SETTING_INFO,
}
export interface NavbarItem {
path: string;
path: StaticAppRoute;
title: TranslationKey;
SelectedIconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
IconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
show: 'mobile' | 'desktop' | 'both';
moreGroup: NavBarItemMoreGroup;
}
export type NavbarContextType = {

55
src/modules/navigation-bar/NavigationBar.util.ts Normal file
View File

@@ -0,0 +1,55 @@
/*
* 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 { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';
import { MetadataHistorySettings } from '@/modules/history/History.types.ts';
import { AppRoutes, StaticAppRoute } from '@/modules/core/AppRoute.constants.ts';
type NavBarItemDeviceFilterKey = `hide${Capitalize<NavbarItem['show']>}`;
type FilterSettings = Pick<MetadataHistorySettings, 'hideHistory'> &
Partial<Record<NavBarItemDeviceFilterKey, boolean>> & {
hideMore?: boolean;
};
const ITEM_TO_VISIBLE_FILTER: Partial<Record<StaticAppRoute, keyof FilterSettings>> = {
[AppRoutes.history.path]: 'hideHistory',
[AppRoutes.more.path]: 'hideMore',
};
export class NavigationBarUtil {
static isPathRestricted(path: StaticAppRoute, filter: FilterSettings): boolean {
const pathVisibleFilterKey = ITEM_TO_VISIBLE_FILTER[path];
if (!pathVisibleFilterKey) {
return false;
}
return !!filter[pathVisibleFilterKey];
}
static filterItems(
items: NavbarItem[],
{ hideBoth, hideDesktop, hideMobile, ...filter }: FilterSettings,
): NavbarItem[] {
return items
.filter((item) => !NavigationBarUtil.isPathRestricted(item.path, filter))
.filter((item) => {
switch (item.show) {
case 'both':
return !hideBoth;
case 'desktop':
return !hideDesktop;
case 'mobile':
return !hideMobile;
default:
return true;
}
});
}
}

76
src/modules/navigation-bar/components/DefaultNavBar.tsx
View File

@@ -11,78 +11,22 @@ import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import IconButton from '@mui/material/IconButton';
import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
import NewReleasesIcon from '@mui/icons-material/NewReleases';
import NewReleasesOutlinedIcon from '@mui/icons-material/NewReleasesOutlined';
import HistoryIcon from '@mui/icons-material/History';
import HistoryOutlinedIcon from '@mui/icons-material/HistoryOutlined';
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 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';
import { DesktopSideBar } from '@/modules/navigation-bar/components/DesktopSideBar.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { MobileBottomBar } from '@/modules/navigation-bar/components/MobileBottomBar.tsx';
import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';
import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
const navbarItems: Array<NavbarItem> = [
{
path: AppRoutes.library.path,
title: 'library.title',
SelectedIconComponent: CollectionsBookmarkIcon,
IconComponent: CollectionsOutlinedBookmarkIcon,
show: 'both',
},
{
path: AppRoutes.updates.path,
title: 'updates.title',
SelectedIconComponent: NewReleasesIcon,
IconComponent: NewReleasesOutlinedIcon,
show: 'both',
},
{
path: AppRoutes.history.path,
title: 'history.title',
SelectedIconComponent: HistoryIcon,
IconComponent: HistoryOutlinedIcon,
show: 'both',
},
{
path: AppRoutes.browse.path,
title: 'global.label.browse',
SelectedIconComponent: ExploreIcon,
IconComponent: ExploreOutlinedIcon,
show: 'both',
},
{
path: AppRoutes.downloads.path,
title: 'download.title.queue',
SelectedIconComponent: GetAppIcon,
IconComponent: GetAppOutlinedIcon,
show: 'desktop',
},
{
path: AppRoutes.more.path,
title: 'global.label.more',
SelectedIconComponent: MoreHorizIcon,
IconComponent: MoreHorizIcon,
show: 'both',
},
];
import { NAVIGATION_BAR_ITEMS } from '@/modules/navigation-bar/NavigationBar.constants.ts';
import { NavigationBarUtil } from '@/modules/navigation-bar/NavigationBar.util.ts';
export function DefaultNavBar() {
const { title, action, override, isCollapsed, setIsCollapsed, setAppBarHeight, navBarWidth, setNavBarWidth } =
@@ -113,7 +57,7 @@ export function DefaultNavBar() {
return () => setAppBarHeight(0);
}, [override.status]);
const isMainRoute = navbarItems.some(({ path, show }) => {
const isMainRoute = NAVIGATION_BAR_ITEMS.some(({ path, show }) => {
if (isMobileWidth && show === 'desktop') {
return false;
}
@@ -126,16 +70,14 @@ export function DefaultNavBar() {
});
const actualNavBarWidth = isMobileWidth || isCollapsed ? 0 : navBarWidth;
const activeNavBar: NavbarItem['show'] = isMobileWidth ? 'mobile' : 'desktop';
const visibleNavBarItems = useMemo(
() =>
navbarItems
.filter((item) => {
const isHistory = item.title === 'history.title';
return !isHistory || !hideHistory;
})
.filter(({ show }) => ['both', activeNavBar].includes(show)),
NavigationBarUtil.filterItems(NAVIGATION_BAR_ITEMS, {
hideHistory,
hideBoth: false,
hideDesktop: isMobileWidth,
hideMobile: !isMobileWidth,
}),
[isMobileWidth, hideHistory],
);
const NavBarComponent = useMemo(() => (isMobileWidth ? MobileBottomBar : DesktopSideBar), [isMobileWidth]);

3
src/modules/navigation-bar/components/MobileBottomBar.tsx
View File

@@ -16,6 +16,7 @@ import { CSSObject, useTheme } from '@mui/material/styles';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';
import { StaticAppRoute } from '@/modules/core/AppRoute.constants.ts';
export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
const { t } = useTranslation();
@@ -58,7 +59,7 @@ export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] })
<BottomNavigation
showLabels
value={selectedNavBarItem}
onChange={(_, newValue: string) => {
onChange={(_, newValue: StaticAppRoute) => {
setSelectedNavBarItem(newValue);
navigate(newValue);
}}