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

Move navigation-bar files into new folder

Browse Source
This commit is contained in:
schroda
2024-10-05 22:17:23 +02:00
parent e466842c77
commit c0eabf8865
43 changed files with 73 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/category/screens/CategorySettings.tsx
View File

@@ -24,7 +24,7 @@ import Box from '@mui/material/Box';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { StrictModeDroppable } from '@/modules/core/components/StrictModeDroppable.tsx';
import { DEFAULT_FULL_FAB_HEIGHT } from '@/modules/core/components/buttons/StyledFab.tsx';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';

2
src/modules/chapter/components/ChapterList.tsx
View File

@@ -42,7 +42,7 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
import { GET_CHAPTERS_MANGA } from '@/lib/graphql/queries/ChapterQuery.ts';
import { Mangas } from '@/modules/manga/services/Mangas.ts';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
import { shouldForwardProp } from '@/modules/core/utils/ShouldForwardProp.ts';

2
src/modules/core/components/tabs/TabsMenu.tsx
View File

@@ -9,7 +9,7 @@
import Tabs, { TabsProps } from '@mui/material/Tabs';
import { styled } from '@mui/material/styles';
import { ForwardedRef, forwardRef } from 'react';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
const StyledTabsMenu = styled(Tabs)(({ theme }) => ({
display: 'flex',

2
src/modules/core/components/tabs/TabsWrapper.tsx
View File

@@ -7,7 +7,7 @@
*/
import Box, { BoxProps } from '@mui/material/Box';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
export const TabsWrapper = ({ children, ...props }: BoxProps) => {
const { appBarHeight } = useNavBarContext();

2
src/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx
View File

@@ -8,7 +8,7 @@
import { GroupedVirtuoso } from 'react-virtuoso';
import { ComponentProps } from 'react';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
export const StyledGroupedVirtuoso = ({
heightToSubtract = 0,

2
src/modules/core/contexts/AppContext.tsx
View File

@@ -20,7 +20,7 @@ import { SnackbarProvider } from 'notistack';
import { createAndSetTheme } from '@/theme.tsx';
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
import { ThemeMode, ThemeModeContext } from '@/modules/theme/contexts/ThemeModeContext.tsx';
import { NavBarContextProvider } from '@/components/navbar/NavBarContextProvider.tsx';
import { NavBarContextProvider } from '@/modules/navigation-bar/contexts/NavBarContextProvider.tsx';
import { LibraryOptionsContextProvider } from '@/modules/library/contexts/LibraryOptionsProvider.tsx';
import { ActiveDevice, DEFAULT_DEVICE, setActiveDevice } from '@/util/device.ts';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';

2
src/modules/core/hooks/useBackButton.ts
View File

@@ -8,7 +8,7 @@
import { useLocation, useNavigate } from 'react-router-dom';
import { useContext } from 'react';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
export const useBackButton = () => {
const navigate = useNavigate();

2
src/modules/extension/screens/Extensions.tsx
View File

@@ -33,7 +33,7 @@ import { LoadingPlaceholder } from '@/modules/core/components/placeholder/Loadin
import { makeToast } from '@/lib/ui/Toast.ts';
import { LangSelect } from '@/modules/core/components/inputs/LangSelect.tsx';
import { ExtensionCard } from '@/modules/extension/components/ExtensionCard.tsx';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { StyledGroupedVirtuoso } from '@/modules/core/components/virtuoso/StyledGroupedVirtuoso.tsx';
import { StyledGroupHeader } from '@/modules/core/components/virtuoso/StyledGroupHeader.tsx';
import { StyledGroupItemWrapper } from '@/modules/core/components/virtuoso/StyledGroupItemWrapper.tsx';

2
src/modules/library/screens/Library.tsx
View File

@@ -20,7 +20,7 @@ import { LibraryToolbarMenu } from '@/modules/library/components/LibraryToolbarM
import { LibraryMangaGrid } from '@/modules/library/components/LibraryMangaGrid.tsx';
import { AppbarSearch } from '@/modules/core/components/AppbarSearch.tsx';
import { UpdateChecker } from '@/modules/core/components/UpdateChecker.tsx';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useSelectableCollection } from '@/modules/collection/hooks/useSelectableCollection.ts';
import { SelectableCollectionSelectMode } from '@/modules/collection/components/SelectableCollectionSelectMode.tsx';
import { useGetVisibleLibraryMangas } from '@/modules/library/hooks/useGetVisibleLibraryMangas.ts';

2
src/modules/library/screens/LibraryDuplicates.tsx
View File

@@ -15,7 +15,7 @@ import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Box from '@mui/material/Box';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
import { GridLayout } from '@/modules/library/contexts/LibraryOptionsContext.tsx';
import { GridLayouts } from '@/modules/core/components/GridLayouts.tsx';

2
src/modules/library/screens/LibrarySettings.tsx
View File

@@ -15,7 +15,7 @@ import ListItemText from '@mui/material/ListItemText';
import Switch from '@mui/material/Switch';
import ListSubheader from '@mui/material/ListSubheader';
import { t as translate } from 'i18next';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { GlobalUpdateSettings } from '@/components/settings/globalUpdate/GlobalUpdateSettings.tsx';
import { makeToast } from '@/lib/ui/Toast.ts';
import {

2
src/modules/manga/components/MangaGrid.tsx
View File

@@ -32,7 +32,7 @@ import { AppStorage } from '@/lib/AppStorage.ts';
import { MangaCardProps } from '@/modules/manga/MangaCard.types.tsx';
import { MangaType } from '@/lib/graphql/generated/graphql.ts';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({ children, ...props }, ref) => (
<Grid {...props} ref={ref} container spacing={1}>

2
src/modules/manga/screens/Manga.tsx
View File

@@ -17,7 +17,7 @@ import { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom';
import { isNetworkRequestInFlight } from '@apollo/client/core/networkStatus';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { ChapterList } from '@/modules/chapter/components/ChapterList.tsx';
import { useRefreshManga } from '@/modules/manga/hooks/useRefreshManga.ts';
import { MangaDetails } from '@/modules/manga/components/MangaDetails.tsx';

2
src/modules/migration/screens/Migrate.tsx
View File

@@ -9,7 +9,7 @@
import { useContext, useEffect, useLayoutEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { TMigratableSource } from '@/modules/migration/components/MigrationCard.tsx';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';

2
src/modules/migration/screens/Migration.tsx
View File

@@ -29,7 +29,7 @@ import {
useMetadataServerSettings,
} from '@/lib/metadata/metadataServerSettings.ts';
import { makeToast } from '@/lib/ui/Toast.ts';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
const getMigratableSources = (
mangas: TMigratableSourcesResult | undefined,

24
src/modules/navigation-bar/NavigationBar.types.ts Normal file
View File

@@ -0,0 +1,24 @@
/*
* 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 { OverridableComponent } from '@mui/material/OverridableComponent';
import { SvgIconTypeMap } from '@mui/material/SvgIcon';
import { TranslationKey } from '@/Base.types.ts';
export interface INavbarOverride {
status: boolean;
value: any;
}
export interface NavbarItem {
path: string;
title: TranslationKey;
SelectedIconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
IconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
show: 'mobile' | 'desktop' | 'both';
}

187
src/modules/navigation-bar/components/DefaultNavBar.tsx Normal file
View File

@@ -0,0 +1,187 @@
/*
* 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 { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
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 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 { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';
import { useGetOptionForDirection } from '@/theme.tsx';
import { MediaQuery } from '@/lib/ui/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';
const navbarItems: Array<NavbarItem> = [
{
path: '/library',
title: 'library.title',
SelectedIconComponent: CollectionsBookmarkIcon,
IconComponent: CollectionsOutlinedBookmarkIcon,
show: 'both',
},
{
path: '/updates',
title: 'updates.title',
SelectedIconComponent: NewReleasesIcon,
IconComponent: NewReleasesOutlinedIcon,
show: 'both',
},
{
path: '/browse',
title: 'global.label.browse',
SelectedIconComponent: ExploreIcon,
IconComponent: ExploreOutlinedIcon,
show: 'both',
},
{
path: '/downloads',
title: 'download.title',
SelectedIconComponent: GetAppIcon,
IconComponent: GetAppOutlinedIcon,
show: 'both',
},
{
path: '/settings',
title: 'settings.title',
SelectedIconComponent: SettingsIcon,
IconComponent: SettingsIcon,
show: 'both',
},
];
export function DefaultNavBar() {
const { title, action, override, isCollapsed, setIsCollapsed, setAppBarHeight, navBarWidth, setNavBarWidth } =
useContext(NavBarContext);
const theme = useTheme();
const getOptionForDirection = useGetOptionForDirection();
const { pathname } = useLocation();
const handleBack = useBackButton();
const isMobileWidth = MediaQuery.useIsMobileWidth();
const isMainRoute = navbarItems.some(({ path }) => path === pathname);
const actualNavBarWidth = isMobileWidth || isCollapsed ? 0 : navBarWidth;
const appBarRef = useRef<HTMLDivElement | null>(null);
useResizeObserver(
appBarRef,
useCallback(() => setAppBarHeight(appBarRef.current?.clientHeight ?? 0), [appBarRef.current]),
);
useEffect(() => setAppBarHeight(0), []);
const activeNavBar: NavbarItem['show'] = isMobileWidth ? 'mobile' : 'desktop';
const visibleNavBarItems = useMemo(
() => navbarItems.filter(({ show }) => ['both', activeNavBar].includes(show)),
[isMobileWidth],
);
const NavBarComponent = useMemo(() => (isMobileWidth ? MobileBottomBar : DesktopSideBar), [isMobileWidth]);
useLayoutEffect(() => {
if (!isMobileWidth) {
// do not reset navbar width to prevent grid from jumping due to the changing grid item width
return;
}
setNavBarWidth(0);
}, [isMobileWidth]);
const navBar = useMemo(
() => <NavBarComponent navBarItems={visibleNavBarItems} />,
[NavBarComponent, visibleNavBarItems],
);
// Allow default navbar to be overrided
if (override.status) return override.value;
return (
<>
<AppBar
ref={appBarRef}
sx={{
position: 'fixed',
marginLeft: actualNavBarWidth,
width: `calc(100% - ${actualNavBarWidth}px)`,
zIndex: theme.zIndex.drawer,
}}
>
<Toolbar sx={{ position: 'relative' }}>
{!isMobileWidth && (
<Stack
sx={{
position: 'absolute',
left: 0,
width: navBarWidth,
...(!isCollapsed && { display: 'none' }),
alignItems: 'center',
}}
>
<IconButton aria-label="open drawer" onClick={() => setIsCollapsed(false)} color="inherit">
<MenuIcon />
</IconButton>
</Stack>
)}
<Stack
sx={{
ml: `${isCollapsed ? navBarWidth : 0}px`,
width: `calc(100% - ${isCollapsed ? navBarWidth : 0}px)`,
flexDirection: 'row',
alignItems: 'center',
}}
>
{!isMainRoute && (
<IconButton
edge="start"
component="button"
sx={{ marginRight: 2 }}
size="large"
aria-label="menu"
onClick={handleBack}
color="inherit"
>
{getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
</IconButton>
)}
<Typography
variant="h5"
component="h1"
noWrap
sx={{
textOverflow: 'ellipsis',
flexGrow: 1,
}}
>
{title}
</Typography>
{action}
</Stack>
</Toolbar>
</AppBar>
{!isMobileWidth || isMainRoute ? navBar : null}
</>
);
}

138
src/modules/navigation-bar/components/DesktopSideBar.tsx Normal file
View File

@@ -0,0 +1,138 @@
/*
* 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 Drawer from '@mui/material/Drawer';
import List from '@mui/material/List';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import { useTranslation } from 'react-i18next';
import { useLocation } from 'react-router-dom';
import IconButton from '@mui/material/IconButton';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import Divider from '@mui/material/Divider';
import { styled, useTheme } from '@mui/material/styles';
import { useCallback, useMemo, useRef } from 'react';
import Box from '@mui/material/Box';
import ListItem from '@mui/material/ListItem';
import Tooltip from '@mui/material/Tooltip';
import { ListItemLink } from '@/modules/core/components/ListItemLink.tsx';
import { useGetOptionForDirection } from '@/theme.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { NavbarItem } from '@/modules/navigation-bar/NavigationBar.types.ts';
const DrawerHeader = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
}));
const NavigationBarItem = ({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => {
const { t } = useTranslation();
const location = useLocation();
const { isCollapsed } = useNavBarContext();
const theme = useTheme();
const isActive = path === location.pathname;
const Icon = isActive ? SelectedIconComponent : IconComponent;
const { listItemProps, listItemIconProps } = useMemo(
() => ({
listItemProps: isCollapsed ? { p: 0.5, display: 'flex', flexDirection: 'column' } : {},
listItemIconProps: isCollapsed ? { justifyContent: 'center' } : {},
}),
[isCollapsed],
);
return (
<ListItemLink selected={!isCollapsed && isActive} sx={{ p: 0, m: 0 }} to={path}>
<Tooltip title={t(title)} placement="right">
<ListItem sx={listItemProps}>
<ListItemIcon sx={listItemIconProps}>
<Icon
sx={{
color: isActive ? 'primary.dark' : undefined,
...theme.applyStyles('dark', {
color: isActive ? 'primary.light' : undefined,
}),
}}
/>
</ListItemIcon>
<ListItemText
primary={t(title)}
sx={{ maxWidth: '100%' }}
primaryTypographyProps={{
sx: {
maxWidth: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
...(isCollapsed ? theme.typography.caption : {}),
color: isActive ? 'primary.dark' : undefined,
...theme.applyStyles('dark', {
color: isActive ? 'primary.light' : undefined,
}),
},
}}
/>
</ListItem>
</Tooltip>
</ListItemLink>
);
};
const MIN_WIDTH_COLLAPSED = undefined;
const MAX_WIDTH_COLLAPSED = 120;
const MIN_WIDTH_EXTENDED = 240;
const MAX_WIDTH_EXTENDED = 400;
export const DesktopSideBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
const { isCollapsed, setIsCollapsed, navBarWidth, setNavBarWidth } = useNavBarContext();
const getOptionForDirection = useGetOptionForDirection();
const ref = useRef<HTMLDivElement | null>(null);
useResizeObserver(
ref,
useCallback(() => setNavBarWidth(ref.current?.clientWidth ?? 0), [ref.current]),
);
return (
<Drawer
variant="permanent"
sx={{
width: navBarWidth,
'& .MuiDrawer-paper': {
zIndex: (theme) => theme.zIndex.drawer - 1,
},
}}
>
<Box
ref={ref}
sx={{
minWidth: isCollapsed ? MIN_WIDTH_COLLAPSED : MIN_WIDTH_EXTENDED,
maxWidth: isCollapsed ? MAX_WIDTH_COLLAPSED : MAX_WIDTH_EXTENDED,
}}
>
<DrawerHeader>
<IconButton onClick={() => setIsCollapsed(true)}>
{getOptionForDirection(<ChevronLeftIcon />, <ChevronRightIcon />)}
</IconButton>
</DrawerHeader>
<Divider />
<List sx={{ p: 1 }} dense={isCollapsed}>
{navBarItems.map((navBarItem) => (
<NavigationBarItem key={navBarItem.path} {...navBarItem} />
))}
</List>
</Box>
</Drawer>
);
};

61
src/modules/navigation-bar/components/MobileBottomBar.tsx Normal file
View File

@@ -0,0 +1,61 @@
/*
* 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 BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import { useTranslation } from 'react-i18next';
import Paper from '@mui/material/Paper';
import { useCallback, useLayoutEffect, useRef, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
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';
export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
const { t } = useTranslation();
const { setBottomBarHeight } = useNavBarContext();
const location = useLocation();
const navigate = useNavigate();
const ref = useRef<HTMLDivElement | null>(null);
useResizeObserver(
ref,
useCallback(() => setBottomBarHeight(ref.current?.clientHeight ?? 0), [ref.current]),
);
useLayoutEffect(() => () => setBottomBarHeight(0), []);
const [selectedNavBarItem, setSelectedNavBarItem] = useState(
navBarItems.find((navBarItem) => navBarItem.path === location.pathname)?.path,
);
return (
<Paper
ref={ref}
sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: (theme) => theme.zIndex.drawer - 1 }}
elevation={3}
>
<BottomNavigation
showLabels
value={selectedNavBarItem}
onChange={(_, newValue: string) => {
setSelectedNavBarItem(newValue);
navigate(newValue);
}}
>
{navBarItems.map(({ path, title, IconComponent, SelectedIconComponent }) => (
<BottomNavigationAction
key={path}
value={path}
label={t(title)}
icon={selectedNavBarItem === path ? <SelectedIconComponent /> : <IconComponent />}
/>
))}
</BottomNavigation>
</Paper>
);
};

83
src/modules/navigation-bar/contexts/NavBarContextProvider.tsx Normal file
View File

@@ -0,0 +1,83 @@
/*
* 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 React, { useCallback, useMemo, useState } from 'react';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useHistory } from '@/modules/core/hooks/useHistory.ts';
import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
import { INavbarOverride } from '@/modules/navigation-bar/NavigationBar.types.ts';
interface IProps {
children: React.ReactNode;
}
export function NavBarContextProvider({ children }: IProps) {
const [title, setTitle] = useState<string | React.ReactNode>('Suwayomi');
const [action, setAction] = useState<any>(<div />);
const [appBarHeight, setAppBarHeight] = useState(0);
const [override, setOverride] = useState<INavbarOverride>({
status: false,
value: <div />,
});
const [isCollapsed, setIsCollapsed] = useLocalStorage('NavBar::isCollapsed', false);
const [navBarWidth, setNavBarWidth] = useState(0);
const [readerNavBarWidth, setReaderNavBarWidth] = useState(0);
const [bottomBarHeight, setBottomBarHeight] = useState(0);
const history = useHistory();
const updateTitle = useCallback(
(newTitle: string | React.ReactNode, browserTitle: string = typeof newTitle === 'string' ? newTitle : '') => {
document.title = `${browserTitle} - Suwayomi`;
setTitle(newTitle);
},
[setTitle],
);
const value = useMemo(
() => ({
history,
title,
setTitle: updateTitle,
appBarHeight,
setAppBarHeight,
action,
setAction,
override,
setOverride,
isCollapsed,
setIsCollapsed,
navBarWidth,
setNavBarWidth,
readerNavBarWidth,
setReaderNavBarWidth,
bottomBarHeight,
setBottomBarHeight,
}),
[
history,
title,
updateTitle,
appBarHeight,
setAppBarHeight,
action,
setAction,
override,
setOverride,
isCollapsed,
setIsCollapsed,
navBarWidth,
setNavBarWidth,
readerNavBarWidth,
setReaderNavBarWidth,
bottomBarHeight,
setBottomBarHeight,
],
);
return <NavBarContext.Provider value={value}>{children}</NavBarContext.Provider>;
}

65
src/modules/navigation-bar/contexts/NavbarContext.tsx Normal file
View File

@@ -0,0 +1,65 @@
/*
* 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 React, { useContext } from 'react';
import { INavbarOverride } from '@/modules/navigation-bar/NavigationBar.types.ts';
type ContextType = {
history: string[];
// AppBar title
title: string | React.ReactNode;
setTitle: (title: ContextType['title'], browserTitle?: string) => void;
appBarHeight: number;
setAppBarHeight: React.Dispatch<React.SetStateAction<number>>;
// AppBar action buttons
action: any;
setAction: React.Dispatch<React.SetStateAction<any>>;
// Allow default navbar to be overrided
override: INavbarOverride;
setOverride: React.Dispatch<React.SetStateAction<INavbarOverride>>;
// NavBar
isCollapsed: boolean;
setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
navBarWidth: number;
setNavBarWidth: React.Dispatch<React.SetStateAction<number>>;
readerNavBarWidth: number;
setReaderNavBarWidth: React.Dispatch<React.SetStateAction<number>>;
bottomBarHeight: number;
setBottomBarHeight: React.Dispatch<React.SetStateAction<number>>;
};
export const NavBarContext = React.createContext<ContextType>({
history: [],
title: 'Suwayomi',
setTitle: (): void => {},
appBarHeight: 0,
setAppBarHeight: (): void => {},
action: <div />,
setAction: (): void => {},
override: { status: false, value: <div /> },
setOverride: (): void => {},
isCollapsed: false,
setIsCollapsed: (): void => {},
navBarWidth: 0,
setNavBarWidth: (): void => {},
readerNavBarWidth: 0,
setReaderNavBarWidth: (): void => {},
bottomBarHeight: 0,
setBottomBarHeight: (): void => {},
});
export const useNavBarContext = () => useContext(NavBarContext);

2
src/modules/reader/components/ReaderNavBar.tsx
View File

@@ -34,7 +34,7 @@ import { Select } from '@/modules/core/components/inputs/Select.tsx';
import { useGetOptionForDirection } from '@/theme.tsx';
import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
import { MangaChapterCountInfo, MangaIdInfo } from '@/modules/manga/services/Mangas.ts';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton.tsx';
import { IReaderSettings } from '@/modules/reader/Reader.types.ts';

2
src/modules/reader/screens/DefaultReaderSettings.tsx
View File

@@ -16,7 +16,7 @@ import {
} from '@/modules/reader/services/ReaderSettingsMetadata.ts';
import { ReaderSettingsOptions } from '@/modules/reader/components/ReaderSettingsOptions.tsx';
import { makeToast } from '@/lib/ui/Toast.ts';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';

2
src/modules/reader/screens/Reader.tsx
View File

@@ -26,7 +26,7 @@ import { DoublePagedPager } from '@/modules/reader/components/pager/DoublePagedP
import { VerticalPager } from '@/modules/reader/components/pager/VerticalPager.tsx';
import { ReaderNavBar } from '@/modules/reader/components/ReaderNavBar.tsx';
import { makeToast } from '@/lib/ui/Toast.ts';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useDebounce } from '@/modules/core/hooks/useDebounce.ts';
import {
GetChaptersReaderQuery,

2
src/modules/source/screens/SourceConfigure.tsx
View File

@@ -19,7 +19,7 @@ import {
import { ListPreference } from '@/modules/source/components/sourceConfiguration/ListPreference.tsx';
import { EditTextPreference } from '@/modules/source/components/sourceConfiguration/EditTextPreference.tsx';
import { MultiSelectListPreference } from '@/modules/source/components/sourceConfiguration/MultiSelectListPreference.tsx';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';

2
src/modules/source/screens/SourceMangas.tsx
View File

@@ -36,7 +36,7 @@ import {
GetSourceMangasFetchMutation,
GetSourceMangasFetchMutationVariables,
} from '@/lib/graphql/generated/graphql.ts';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { useMetadataServerSettings } from '@/lib/metadata/metadataServerSettings.ts';
import { useLocalStorage, useSessionStorage } from '@/modules/core/hooks/useStorage.tsx';
import { AppStorage } from '@/lib/AppStorage.ts';

2
src/modules/source/screens/Sources.tsx
View File

@@ -20,7 +20,7 @@ import { translateExtensionLanguage } from '@/modules/extension/services/Extensi
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
import { SourceCard } from '@/modules/source/components/SourceCard.tsx';
import { LangSelect } from '@/modules/core/components/inputs/LangSelect.tsx';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
import { SourceType } from '@/lib/graphql/generated/graphql.ts';

2
src/modules/tracker/screens/TrackingSettings.tsx
View File

@@ -14,7 +14,7 @@ import ListSubheader from '@mui/material/ListSubheader';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Switch from '@mui/material/Switch';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { NavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
import { requestManager } from '@/lib/requests/requests/RequestManager.ts';
import { EmptyViewAbsoluteCentered } from '@/modules/core/components/placeholder/EmptyViewAbsoluteCentered.tsx';
import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';