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

Refactor base app layout

Browse Source
This commit is contained in:
schroda
2024-07-11 17:22:52 +02:00
parent 31837392b5
commit f43b7af3cd
19 changed files with 443 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/App.tsx
View File

@@ -6,12 +6,13 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Container from '@mui/material/Container';
import CssBaseline from '@mui/material/CssBaseline';
import React, { useLayoutEffect } from 'react';
import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
import { loadErrorMessages, loadDevMessages } from '@apollo/client/dev';
import { loadable } from 'react-lazily/loadable';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import { AppContext } from '@/components/context/AppContext';
import '@/i18n';
import { DefaultNavBar } from '@/components/navbar/DefaultNavBar';
@@ -20,6 +21,7 @@ import { WebUIUpdateChecker } from '@/components/util/WebUIUpdateChecker.tsx';
import { ServerUpdateChecker } from '@/components/util/ServerUpdateChecker.tsx';
import { lazyLoadFallback } from '@/util/LazyLoad.tsx';
import { ErrorBoundary } from '@/util/ErrorBoundary.tsx';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
const { Browse } = loadable(() => import('@/screens/Browse'), lazyLoadFallback);
const { DownloadQueue } = loadable(() => import('@/screens/DownloadQueue'), lazyLoadFallback);
@@ -76,26 +78,23 @@ const BackgroundSubscriptions = () => {
return null;
};
export const App: React.FC = () => (
<AppContext>
<ScrollToTop />
<ServerUpdateChecker />
<WebUIUpdateChecker />
<BackgroundSubscriptions />
<CssBaseline enableColorScheme />
<DefaultNavBar />
<Container
const MainApp = () => {
const { navBarWidth, bottomBarHeight } = useNavBarContext();
return (
<Box
id="appMainContainer"
maxWidth={false}
disableGutters
component="main"
sx={{
mt: 8,
ml: { sm: 8 },
mb: { xs: 8, sm: 0 },
width: 'auto',
overflow: 'auto',
flexGrow: 1,
minHeight: `calc(100vh - ${bottomBarHeight}px)`,
maxWidth: `calc(100vw - ${navBarWidth}px)`,
position: 'relative',
mb: `${bottomBarHeight}px`,
}}
>
<Toolbar />
<ErrorBoundary>
<Routes>
{/* General Routes */}
@@ -142,12 +141,32 @@ export const App: React.FC = () => (
<Route path="tracker/login/oauth" element={<TrackerOAuthLogin />} />
</Routes>
</ErrorBoundary>
</Container>
<ErrorBoundary>
<Routes>
<Route path="manga/:mangaId/chapter/:chapterIndex" element={<Reader />} />
<Route path="*" element={null} />
</Routes>
</ErrorBoundary>
</Box>
);
};
const ReaderApp = () => (
<ErrorBoundary>
<Routes>
<Route path="manga/:mangaId/chapter/:chapterIndex" element={<Reader />} />
<Route path="*" element={null} />
</Routes>
</ErrorBoundary>
);
export const App: React.FC = () => (
<AppContext>
<ScrollToTop />
<ServerUpdateChecker />
<WebUIUpdateChecker />
<BackgroundSubscriptions />
<CssBaseline enableColorScheme />
<Box sx={{ display: 'flex' }}>
<Box sx={{ flexShrink: 0 }}>
<DefaultNavBar />
</Box>
<MainApp />
<ReaderApp />
</Box>
</AppContext>
);

21
src/components/context/NavbarContext.tsx
View File

@@ -16,6 +16,9 @@ type ContextType = {
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>>;
@@ -23,16 +26,34 @@ type ContextType = {
// 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>>;
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 => {},
bottomBarHeight: 0,
setBottomBarHeight: (): void => {},
});
export const useNavBarContext = () => useContext(NavBarContext);

136
src/components/navbar/DefaultNavBar.tsx
View File

@@ -6,12 +6,11 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import React, { useContext } from 'react';
import { useCallback, useContext, 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 Box from '@mui/material/Box';
import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
import NewReleasesIcon from '@mui/icons-material/NewReleases';
@@ -23,15 +22,17 @@ 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 { createPortal } from 'react-dom';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import MenuIcon from '@mui/icons-material/Menu';
import Stack from '@mui/material/Stack';
import { NavbarItem } from '@/typings';
import { NavBarContext } from '@/components/context/NavbarContext';
import { DesktopSideBar } from '@/components/navbar/navigation/DesktopSideBar';
import { MobileBottomBar } from '@/components/navbar/navigation/MobileBottomBar';
import { useBackButton } from '@/util/useBackButton.ts';
import { getOptionForDirection } from '@/theme.ts';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
import { DesktopSideBar } from '@/components/navbar/navigation/DesktopSideBar.tsx';
import { useResizeObserver } from '@/util/useResizeObserver.tsx';
import { MobileBottomBar } from '@/components/navbar/navigation/MobileBottomBar.tsx';
const navbarItems: Array<NavbarItem> = [
{
@@ -72,7 +73,8 @@ const navbarItems: Array<NavbarItem> = [
];
export function DefaultNavBar() {
const { title, action, override } = useContext(NavBarContext);
const { title, action, override, isCollapsed, setIsCollapsed, setAppBarHeight, navBarWidth } =
useContext(NavBarContext);
const { pathname } = useLocation();
const handleBack = useBackButton();
@@ -80,59 +82,91 @@ export function DefaultNavBar() {
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]),
);
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]);
const navBar = useMemo(
() => <NavBarComponent navBarItems={visibleNavBarItems} />,
[NavBarComponent, visibleNavBarItems],
);
// Allow default navbar to be overrided
if (override.status) return override.value;
let navbar: JSX.Element | null = null;
if (isMobileWidth) {
if (isMainRoute) {
navbar = <MobileBottomBar navBarItems={navbarItems.filter((it) => it.show !== 'desktop')} />;
}
} else {
navbar = <DesktopSideBar navBarItems={navbarItems.filter((it) => it.show !== 'mobile')} />;
}
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="fixed" color="default">
<Toolbar>
{!isMainRoute && (
<IconButton
component="button"
edge="start"
sx={{ marginRight: 2 }}
color="inherit"
aria-label="menu"
size="large"
onClick={handleBack}
<>
<AppBar
ref={appBarRef}
sx={{
position: 'fixed',
marginLeft: actualNavBarWidth,
width: `calc(100% - ${actualNavBarWidth}px)`,
zIndex: (theme) => theme.zIndex.drawer + 1,
}}
color="default"
>
<Toolbar sx={{ position: 'relative' }}>
{!isMobileWidth && (
<Stack
sx={{
position: 'absolute',
left: 0,
width: navBarWidth,
...(!isCollapsed && { display: 'none' }),
alignItems: 'center',
}}
>
{getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
</IconButton>
<IconButton color="inherit" aria-label="open drawer" onClick={() => setIsCollapsed(false)}>
<MenuIcon />
</IconButton>
</Stack>
)}
<Typography
variant={isMobileWidth ? 'h6' : 'h5'}
sx={{ flexGrow: 1 }}
noWrap
textOverflow="ellipsis"
<Stack
sx={{
ml: `${isCollapsed ? navBarWidth : 0}px`,
width: '100%',
flexDirection: 'row',
alignItems: 'center',
}}
>
{title}
</Typography>
{action}
<div id="navbarToolbar" />
{!isMainRoute && (
<IconButton
edge="start"
component="button"
sx={{ marginRight: 2 }}
size="large"
color="inherit"
aria-label="menu"
onClick={handleBack}
>
{getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
</IconButton>
)}
<Typography
variant={isMobileWidth ? 'h6' : 'h5'}
sx={{ flexGrow: 1 }}
noWrap
textOverflow="ellipsis"
>
{title}
</Typography>
{action}
</Stack>
</Toolbar>
</AppBar>
{navbar}
</Box>
{!isMobileWidth || isMainRoute ? navBar : null}
</>
);
}
interface INavbarToolbarProps {
children?: React.ReactNode;
}
export const NavbarToolbar: React.FC<INavbarToolbarProps> = ({ children }) => {
const container = document.getElementById('navbarToolbar');
if (!container) return null;
return createPortal(children, container);
};

31
src/components/navbar/NavBarContextProvider.tsx
View File

@@ -10,6 +10,7 @@ import React, { useCallback, useMemo, useState } from 'react';
import { INavbarOverride } from '@/typings';
import { NavBarContext } from '@/components/context/NavbarContext';
import { useHistory } from '@/util/useHistory.ts';
import { useLocalStorage } from '@/util/useStorage.tsx';
interface IProps {
children: React.ReactNode;
@@ -18,10 +19,14 @@ interface IProps {
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 [bottomBarHeight, setBottomBarHeight] = useState(0);
const history = useHistory();
@@ -38,12 +43,36 @@ export function NavBarContextProvider({ children }: IProps) {
history,
title,
setTitle: updateTitle,
appBarHeight,
setAppBarHeight,
action,
setAction,
override,
setOverride,
isCollapsed,
setIsCollapsed,
navBarWidth,
setNavBarWidth,
bottomBarHeight,
setBottomBarHeight,
}),
[history, title, updateTitle, action, setAction, override, setOverride],
[
history,
title,
updateTitle,
appBarHeight,
setAppBarHeight,
action,
setAction,
override,
setOverride,
isCollapsed,
setIsCollapsed,
navBarWidth,
setNavBarWidth,
bottomBarHeight,
setBottomBarHeight,
],
);
return <NavBarContext.Provider value={value}>{children}</NavBarContext.Provider>;
}

140
src/components/navbar/navigation/DesktopSideBar.tsx
View File

@@ -6,56 +6,116 @@
* 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 Tooltip from '@mui/material/Tooltip';
import ListItemButton from '@mui/material/ListItemButton';
import { styled, useTheme } from '@mui/material/styles';
import { Link, useLocation } from 'react-router-dom';
import ListItemText from '@mui/material/ListItemText';
import { useTranslation } from 'react-i18next';
import { NavbarItem } from '@/typings';
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, useEffect, useMemo, useRef } from 'react';
import Box from '@mui/material/Box';
import ListItem from '@mui/material/ListItem';
import Tooltip from '@mui/material/Tooltip';
import { NavbarItem } from '@/typings.ts';
import { ListItemLink } from '@/components/util/ListItemLink.tsx';
import { getOptionForDirection } from '@/theme.ts';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
import { useResizeObserver } from '@/util/useResizeObserver.tsx';
const SideNavBarContainer = styled('div')(({ theme }) => ({
height: '100vh',
width: theme.spacing(8),
backgroundColor: theme.palette.custom.dark,
position: 'fixed',
top: 0,
left: 0,
paddingTop: theme.spacing(8),
const DrawerHeader = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
}));
interface IProps {
navBarItems: Array<NavbarItem>;
}
export function DesktopSideBar({ navBarItems }: IProps) {
const NavigationBarItem = ({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => {
const { t } = useTranslation();
const location = useLocation();
const { isCollapsed } = useNavBarContext();
const theme = useTheme();
const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => {
if (location.pathname === path)
return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="large" />;
return (
<IconComponent sx={{ color: theme.palette.mode === 'dark' ? 'grey.A400' : 'grey.600' }} fontSize="large" />
);
};
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 (
<SideNavBarContainer>
{navBarItems.map(({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => (
<Link to={path} style={{ color: 'inherit', textDecoration: 'none' }} key={path}>
<ListItemButton disableRipple key={title}>
<ListItemIcon sx={{ minWidth: '0' }}>
<Tooltip placement="right" title={t(title)}>
{iconFor(path, IconComponent, SelectedIconComponent)}
</Tooltip>
</ListItemIcon>
</ListItemButton>
</Link>
))}
</SideNavBarContainer>
<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.main' : undefined }} />
</ListItemIcon>
<ListItemText
primary={t(title)}
sx={{ maxWidth: '100%' }}
primaryTypographyProps={{
sx: {
maxWidth: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis',
...(isCollapsed ? theme.typography.caption : {}),
color: isActive ? 'primary.main' : 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();
useEffect(() => () => setNavBarWidth(0), []);
const ref = useRef<HTMLDivElement | null>(null);
useResizeObserver(
ref,
useCallback(() => setNavBarWidth(ref.current?.clientWidth ?? 0), [ref]),
);
return (
<Drawer variant="permanent" sx={{ width: navBarWidth }}>
<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>
);
};

112
src/components/navbar/navigation/MobileBottomBar.tsx
View File

@@ -6,76 +6,58 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Box from '@mui/material/Box';
import ListItemButton from '@mui/material/ListItemButton';
import { styled, useTheme } from '@mui/material/styles';
import { Link as RRDLink, useLocation } from 'react-router-dom';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import { useTranslation } from 'react-i18next';
import { NavbarItem } from '@/typings';
import Paper from '@mui/material/Paper';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { NavbarItem } from '@/typings.ts';
import { useResizeObserver } from '@/util/useResizeObserver.tsx';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
const BottomNavContainer = styled('div')(({ theme }) => ({
bottom: 0,
left: 0,
height: theme.spacing(7),
width: '100vw',
backgroundColor: theme.palette.custom.light,
position: 'fixed',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'center',
// For Some reason the theme is throwing and error when accessing the Zindex object,
// This is the zIndex of the appBar in the default theme
zIndex: 1100,
}));
const Link = styled(RRDLink)({
textDecoration: 'none',
flex: 1,
});
interface IProps {
navBarItems: Array<NavbarItem>;
}
export function MobileBottomBar({ navBarItems }: IProps) {
export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
const { t } = useTranslation();
const { setBottomBarHeight } = useNavBarContext();
const location = useLocation();
const theme = useTheme();
const navigate = useNavigate();
const iconFor = (path: string, IconComponent: any, SelectedIconComponent: any) => {
if (location.pathname === path)
return <SelectedIconComponent sx={{ color: 'primary.main' }} fontSize="medium" />;
return (
<IconComponent sx={{ color: theme.palette.mode === 'dark' ? 'grey.A400' : 'grey.600' }} fontSize="medium" />
);
};
useEffect(() => () => setBottomBarHeight(0), []);
const ref = useRef<HTMLDivElement | null>(null);
useResizeObserver(
ref,
useCallback(() => setBottomBarHeight(ref.current?.clientHeight ?? 0), [ref]),
);
const [selectedNavBarItem, setSelectedNavBarItem] = useState(
navBarItems.find((navBarItem) => navBarItem.path === location.pathname)?.path,
);
return (
<BottomNavContainer>
{navBarItems.map(({ path, title, IconComponent, SelectedIconComponent }: NavbarItem) => (
<Link to={path} key={path}>
<ListItemButton disableRipple sx={{ justifyContent: 'center', padding: '8px' }} key={title}>
<Box display="flex" flexDirection="column" alignItems="center">
{iconFor(path, IconComponent, SelectedIconComponent)}
<Box
sx={{
fontSize: '0.65rem',
color:
// eslint-disable-next-line no-nested-ternary
location.pathname === path
? 'primary.main'
: theme.palette.mode === 'dark'
? 'grey.A400'
: 'grey.600',
}}
>
{t(title)}
</Box>
</Box>
</ListItemButton>
</Link>
))}
</BottomNavContainer>
<Paper
ref={ref}
sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: (theme) => theme.zIndex.drawer - 1 }}
elevation={3}
>
<BottomNavigation
sx={{ backgroundColor: 'custom.light' }}
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>
);
}
};

1
src/components/sourceConfiguration/MultiSelectListPreference.tsx
View File

@@ -79,7 +79,6 @@ function ListDialog(props: IListDialogProps) {
<Checkbox
checked={selectedValues.some((selectedValue) => value === selectedValue)}
onChange={(e) => handleChange(e, value)}
color="default"
/>
}
label={value}

64
src/components/tabs/TabsMenu.tsx
View File

@@ -8,39 +8,55 @@
import Tabs, { TabsProps } from '@mui/material/Tabs';
import { styled } from '@mui/material/styles';
import { ForwardedRef, forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
import { useResizeObserver } from '@/util/useResizeObserver.tsx';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
const StyledTabsMenu = styled(Tabs)(({ theme }) => ({
display: 'flex',
position: 'fixed',
top: '64px',
width: 'calc(100% - 64px)',
position: 'sticky',
left: 0,
right: 0,
zIndex: 1,
backgroundColor: theme.palette.background.default,
border: 0,
borderBottomWidth: 2,
borderStyle: 'solid',
borderColor: theme.palette.divider,
[theme.breakpoints.down('sm')]: {
top: '56px', // header height
width: '100%',
},
}));
export const TabsMenu = ({ children, tabsCount, ...props }: TabsProps & { tabsCount: number }) => {
// Visual Hack: 160px is min-width for viewport width of >600
const scrollableTabs = window.innerWidth < tabsCount * 160;
export const TabsMenu = forwardRef(
(
{ children, tabsCount, ...props }: TabsProps & { tabsCount: number },
ref: ForwardedRef<HTMLDivElement | null>,
) => {
const { appBarHeight } = useNavBarContext();
return (
<StyledTabsMenu
{...props}
indicatorColor="primary"
textColor="primary"
centered={!scrollableTabs}
variant={scrollableTabs ? 'scrollable' : 'fullWidth'}
scrollButtons
allowScrollButtonsMobile
>
{children}
</StyledTabsMenu>
);
};
const tabsMenuRef = useRef<HTMLDivElement | null>(null);
useImperativeHandle(ref, () => tabsMenuRef.current!);
const [width, setWidth] = useState<number>();
useResizeObserver(
tabsMenuRef,
useCallback(() => setWidth(tabsMenuRef.current?.clientWidth), [tabsMenuRef]),
);
// Visual Hack: 160px is min-width for viewport width of >600
const scrollableTabs = !width ? false : width < tabsCount * 160;
return (
<StyledTabsMenu
{...props}
sx={{ ...props.sx, top: appBarHeight }}
ref={tabsMenuRef}
indicatorColor="primary"
textColor="primary"
centered={!scrollableTabs}
variant={scrollableTabs ? 'scrollable' : 'fullWidth'}
scrollButtons
allowScrollButtonsMobile
>
{children}
</StyledTabsMenu>
);
},
);

26
src/components/tabs/TabsWrapper.tsx
View File

@@ -6,19 +6,15 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
import Box, { BoxProps } from '@mui/material/Box';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
export const TabsWrapper = styled(Box)(({ theme }) => ({
// TabsMenu height + TabsMenu bottom padding - grid item top padding
marginTop: `calc(48px + 13px - 8px)`,
// header height - TabsMenu height - TabsMenu bottom padding + grid item top padding
minHeight: 'calc(100vh - 64px - 48px - 13px + 8px)',
position: 'relative',
[theme.breakpoints.down('sm')]: {
// TabsMenu - 8px margin diff header height (56px) + TabsMenu bottom padding - grid item top padding
marginTop: `calc(48px - 8px + 13px - 8px)`,
// header height (+ 8px margin) - footer height - TabsMenu height
minHeight: 'calc(100vh - 64px - 64px - 48px)',
},
}));
export const TabsWrapper = ({ children, ...props }: BoxProps) => {
const { appBarHeight } = useNavBarContext();
return (
<Box {...props} sx={{ ...props.sx, position: 'relative', height: `calc(100% - ${appBarHeight}px)` }}>
{children}
</Box>
);
};

7
src/components/virtuoso/StyledGroupItemWrapper.tsx
View File

@@ -9,9 +9,6 @@
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
export const StyledGroupItemWrapper = styled(Box, { shouldForwardProp: (prop) => prop !== 'isLastItem' })<{
isLastItem: boolean;
}>(({ isLastItem }) => ({
padding: '0 10px',
paddingBottom: isLastItem ? '0' : '10px',
export const StyledGroupItemWrapper = styled(Box)(() => ({
padding: '1px 10px 10px 10px',
}));

32
src/components/virtuoso/StyledGroupedVirtuoso.tsx
View File

@@ -6,18 +6,24 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { styled } from '@mui/material/styles';
import { GroupedVirtuoso } from 'react-virtuoso';
import { ComponentProps } from 'react';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
export const StyledGroupedVirtuoso = styled(GroupedVirtuoso, {
shouldForwardProp: (prop) => prop !== 'heightToSubtract',
})<{
heightToSubtract?: number;
}>(({ theme, heightToSubtract = 0 }) => ({
// 64px header
height: `calc(100vh - 64px - ${heightToSubtract}px)`,
[theme.breakpoints.down('sm')]: {
// 64px header (margin); 64px menu (margin);
height: `calc(100vh - 64px - 64px - ${heightToSubtract}px)`,
},
}));
export const StyledGroupedVirtuoso = ({
heightToSubtract = 0,
style,
...props
}: ComponentProps<typeof GroupedVirtuoso> & { heightToSubtract?: number }) => {
const { appBarHeight, bottomBarHeight } = useNavBarContext();
return (
<GroupedVirtuoso
{...props}
style={{
...style,
height: `calc(100vh - ${heightToSubtract}px - ${appBarHeight}px - ${bottomBarHeight}px)`,
}}
/>
);
};

14
src/screens/Browse.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/
import { useContext, useEffect, useState } from 'react';
import { useCallback, useContext, useEffect, useRef, useState } from 'react';
import Tab from '@mui/material/Tab';
import { useTranslation } from 'react-i18next';
import { Sources } from '@/screens/Sources';
@@ -16,11 +16,19 @@ import { TabsWrapper } from '@/components/tabs/TabsWrapper.tsx';
import { TabsMenu } from '@/components/tabs/TabsMenu.tsx';
import { Migration } from '@/screens/Migration.tsx';
import { NavBarContext } from '@/components/context/NavbarContext.tsx';
import { useResizeObserver } from '@/util/useResizeObserver.tsx';
export function Browse() {
const { t } = useTranslation();
const { setTitle } = useContext(NavBarContext);
const tabsMenuRef = useRef<HTMLDivElement | null>(null);
const [tabsMenuHeight, setTabsMenuHeight] = useState(0);
useResizeObserver(
tabsMenuRef,
useCallback(() => setTabsMenuHeight(tabsMenuRef.current!.offsetHeight), [tabsMenuRef]),
);
const [tabNum, setTabNum] = useState<number>(0);
useEffect(() => {
@@ -29,7 +37,7 @@ export function Browse() {
return (
<TabsWrapper>
<TabsMenu value={tabNum} tabsCount={2} onChange={(e, newTab) => setTabNum(newTab)}>
<TabsMenu ref={tabsMenuRef} value={tabNum} tabsCount={2} onChange={(e, newTab) => setTabNum(newTab)}>
<Tab sx={{ textTransform: 'none' }} label={t('source.title_one')} />
<Tab sx={{ textTransform: 'none' }} label={t('extension.title_other')} />
<Tab sx={{ textTransform: 'none' }} label={t('migrate.title')} />
@@ -38,7 +46,7 @@ export function Browse() {
<Sources />
</TabPanel>
<TabPanel index={1} currentIndex={tabNum}>
<Extensions />
<Extensions tabsMenuHeight={tabsMenuHeight} />
</TabPanel>
<TabPanel index={2} currentIndex={tabNum}>
<Migration />

30
src/screens/Extensions.tsx
View File

@@ -39,7 +39,6 @@ import { StyledGroupHeader } from '@/components/virtuoso/StyledGroupHeader.tsx';
import { StyledGroupItemWrapper } from '@/components/virtuoso/StyledGroupItemWrapper.tsx';
import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
const LANGUAGE = 0;
const EXTENSIONS = 1;
@@ -98,12 +97,10 @@ function getExtensionsInfo(extensions: TExtension[]): {
};
}
export function Extensions() {
export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
const { t } = useTranslation();
const { setAction } = useContext(NavBarContext);
const isMobileWidth = MediaQuery.useIsMobileWidth();
const {
data: serverSettingsData,
loading: areServerSettingsLoading,
@@ -281,34 +278,14 @@ export function Extensions() {
{toasts}
{FileInputComponent}
<StyledGroupedVirtuoso
style={{
// override Virtuoso default values and set them with class
height: 'undefined',
}}
heightToSubtract={
isMobileWidth
? // desktop: TabsMenu height
48
: // desktop: TabsMenu height - TabsMenu bottom padding + grid item top padding
48 + 13 - 8
}
heightToSubtract={tabsMenuHeight}
overscan={window.innerHeight * 0.5}
groupCounts={groupCounts}
groupContent={(index) => {
const [groupName] = filteredGroupedExtensions[index];
return (
<StyledGroupHeader
key={groupName}
variant="h4"
style={{
paddingLeft: '24px',
paddingTop: '6px',
paddingBottom: '16px',
fontWeight: 'bold',
}}
isFirstItem={index === 0}
>
<StyledGroupHeader key={groupName} variant="h4" isFirstItem={index === 0}>
{translateExtensionLanguage(groupName)}
</StyledGroupHeader>
);
@@ -319,7 +296,6 @@ export function Extensions() {
return (
<StyledGroupItemWrapper
key={`${item.pkgName}_${item.isInstalled}_${item.isObsolete}_${item.hasUpdate}`}
isLastItem={index === visibleExtensions.length - 1}
>
<ExtensionCard
extension={item}

7
src/screens/Migration.tsx
View File

@@ -65,11 +65,8 @@ export const Migration = () => {
return (
<List>
{Object.values(migratableSources).map((migratableSource, index) => (
<StyledGroupItemWrapper
key={migratableSource.id}
isLastItem={index === Object.values(migratableSources).length - 1}
>
{Object.values(migratableSources).map((migratableSource) => (
<StyledGroupItemWrapper key={migratableSource.id}>
<MigrationCard {...migratableSource} />
</StyledGroupItemWrapper>
))}

4
src/screens/SearchAll.tsx
View File

@@ -25,9 +25,9 @@ import { MangaCardProps } from '@/components/manga/MangaCard.types.tsx';
import { EmptyView } from '@/components/util/EmptyView';
import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
import { SourceType } from '@/lib/graphql/generated/graphql.ts';
import { BaseMangaGrid } from '@/components/source/BaseMangaGrid.tsx';
import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
type SourceLoadingState = { isLoading: boolean; hasResults: boolean; emptySearch: boolean };
type SourceToLoadingStateMap = Map<string, SourceLoadingState>;
@@ -152,7 +152,7 @@ const SourceSearchPreview = React.memo(
</Card>
{errorMessage ? (
<EmptyView
sx={{ alignItems: 'start' }}
sx={{ alignItems: 'start', height: undefined }}
noFaces
message={errorMessage}
messageExtra={error && error.message}

2
src/screens/Updates.tsx
View File

@@ -163,7 +163,7 @@ export const Updates: React.FC = () => {
const download = downloadForChapter(chapter);
return (
<StyledGroupItemWrapper key={index} isLastItem={index === updateEntries.length - 1}>
<StyledGroupItemWrapper key={index}>
<Card>
<CardActionArea
component={Link}

6
src/screens/settings/Categories.tsx
View File

@@ -238,11 +238,7 @@ export function Categories() {
/>
<FormControlLabel
control={
<Checkbox
checked={dialogDefault}
onChange={(e) => setDialogDefault(e.target.checked)}
color="default"
/>
<Checkbox checked={dialogDefault} onChange={(e) => setDialogDefault(e.target.checked)} />
}
label={t('category.label.use_as_default_category')}
/>

9
src/screens/settings/LibraryDuplicates.tsx
View File

@@ -35,6 +35,7 @@ import { GET_MANGAS_DUPLICATES } from '@/lib/graphql/queries/MangaQuery.ts';
import { MangaIdInfo } from '@/lib/data/Mangas.ts';
import { BaseMangaGrid } from '@/components/source/BaseMangaGrid.tsx';
import { IMangaGridProps } from '@/components/MangaGrid.tsx';
import { StyledGroupItemWrapper } from '@/components/virtuoso/StyledGroupItemWrapper.tsx';
const findDuplicatesByTitle = <Manga extends Pick<MangaType, 'title'>>(
libraryMangas: Manga[],
@@ -174,10 +175,6 @@ export const LibraryDuplicates = () => {
if (gridLayout === GridLayout.List) {
return (
<StyledGroupedVirtuoso
style={{
// override Virtuoso default values and set them with class
height: 'undefined',
}}
groupCounts={mangasCountByTitle}
groupContent={(index) => (
<StyledGroupHeader variant="h5" isFirstItem={index === 0}>
@@ -185,14 +182,14 @@ export const LibraryDuplicates = () => {
</StyledGroupHeader>
)}
itemContent={(index) => (
<Box key={duplicatedMangas[index].id} sx={{ px: 1, pb: 1 }}>
<StyledGroupItemWrapper key={duplicatedMangas[index].id}>
<MangaCard
manga={duplicatedMangas[index] as IMangaGridProps['mangas'][number]}
gridLayout={gridLayout}
selected={null}
mode="duplicate"
/>
</Box>
</StyledGroupItemWrapper>
)}
/>
);

22
src/util/useResizeObserver.tsx Normal file
View File

@@ -0,0 +1,22 @@
/*
* 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 { RefObject, useLayoutEffect } from 'react';
export const useResizeObserver = (ref: RefObject<HTMLElement>, callback: ResizeObserverCallback) => {
useLayoutEffect(() => {
if (!ref.current) {
return () => {};
}
const resizeObserver = new ResizeObserver(callback);
resizeObserver.observe(ref.current);
return () => resizeObserver.disconnect();
}, [ref, callback]);
};