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

80
src/modules/settings/screens/More.tsx
View File

@@ -6,23 +6,57 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useLayoutEffect } from 'react';
import { Fragment, 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';
import { NAVIGATION_BAR_ITEMS } from '@/modules/navigation-bar/NavigationBar.constants.ts';
import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
import { NavigationBarUtil } from '@/modules/navigation-bar/NavigationBar.util.ts';
import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
import { NavbarItem, NavBarItemMoreGroup } from '@/modules/navigation-bar/NavigationBar.types.ts';
export const More = () => {
const { t } = useTranslation();
const { setTitle, setAction } = useNavBarContext();
const isMobileWidth = MediaQuery.useIsMobileWidth();
const {
settings: { hideHistory },
} = useMetadataServerSettings();
const hiddenNavBarItems = NavigationBarUtil.filterItems(NAVIGATION_BAR_ITEMS, {
hideHistory,
hideMore: true,
hideBoth: true,
hideDesktop: !isMobileWidth,
hideMobile: isMobileWidth,
});
const hiddenNavBarItemsByMoreGroup = Object.groupBy(hiddenNavBarItems, (item) => item.moreGroup);
const hiddenItemsMoreGroup = [
...(hiddenNavBarItemsByMoreGroup[NavBarItemMoreGroup.HIDDEN_ITEM] ?? []),
{
path: AppRoutes.settings.childRoutes.categories.path,
title: 'category.title.category_other',
SelectedIconComponent: ListAltIcon,
IconComponent: ListAltIcon,
show: 'both',
moreGroup: NavBarItemMoreGroup.HIDDEN_ITEM,
},
] satisfies NavbarItem[];
const finalHiddenNavBarItemsByGroup: typeof hiddenNavBarItemsByMoreGroup = {
...hiddenNavBarItemsByMoreGroup,
[NavBarItemMoreGroup.HIDDEN_ITEM]: hiddenItemsMoreGroup,
};
useLayoutEffect(() => {
setTitle(t('global.label.more'));
@@ -36,31 +70,19 @@ export const More = () => {
return (
<List sx={{ p: 0 }}>
<ListItemLink to={AppRoutes.downloads.path}>
<ListItemIcon>
<GetAppOutlinedIcon />
</ListItemIcon>
<ListItemText primary={t('download.title.queue')} />
</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>
{Object.entries(finalHiddenNavBarItemsByGroup).map(([group, items], index, list) => (
<Fragment key={group}>
{items.map((item) => (
<ListItemLink key={item.path} to={item.path}>
<ListItemIcon>
<item.IconComponent />
</ListItemIcon>
<ListItemText primary={t(item.title)} />
</ListItemLink>
))}
{index !== list.length - 1 && <Divider />}
</Fragment>
))}
</List>
);
};