Rename folder "modules" to "features"

src/features/navigation-bar/NavigationBar.constants.ts

@@ -0,0 +1,128 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import { NavbarItem, NavBarItemMoreGroup } from '@/features/navigation-bar/NavigationBar.types.ts';
+import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { DownloaderState } from '@/lib/graphql/generated/graphql.ts';
+
+type RestrictedNavBarItem<Show extends NavbarItem['show']> = Omit<NavbarItem, 'show'> & { show: Show };
+
+const NAVIGATION_BAR_BASE_ITEMS = [
+    {
+        path: AppRoutes.library.path() as RestrictedNavBarItem<'both'>['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() as RestrictedNavBarItem<'both'>['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.download',
+        moreTitle: 'download.title.queue',
+        SelectedIconComponent: GetAppIcon,
+        IconComponent: GetAppOutlinedIcon,
+        show: 'desktop',
+        moreGroup: NavBarItemMoreGroup.HIDDEN_ITEM,
+        useBadge: () => {
+            const { t } = useTranslation();
+            const { data } = requestManager.useGetDownloadStatus();
+            const downloadStatus = data?.downloadStatus;
+
+            const isPaused = downloadStatus?.state === DownloaderState.Stopped;
+            const count = downloadStatus?.queue.length ?? 0;
+
+            if (!count) {
+                return {
+                    count,
+                    title: '',
+                };
+            }
+
+            return {
+                count,
+                title: t(isPaused ? 'download.queue.info.paused' : 'download.queue.info.remaining', { count }),
+            };
+        },
+    },
+    {
+        path: AppRoutes.settings.path,
+        title: 'settings.title',
+        SelectedIconComponent: SettingsIcon,
+        IconComponent: SettingsIcon,
+        show: 'desktop',
+        moreGroup: NavBarItemMoreGroup.SETTING_INFO,
+    },
+    {
+        path: AppRoutes.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[];

src/features/navigation-bar/NavigationBar.types.ts

@@ -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 { OverridableComponent } from '@mui/material/OverridableComponent';
+import { SvgIconTypeMap } from '@mui/material/SvgIcon';
+import { ReactNode } from 'react';
+import { TranslationKey } from '@/Base.types.ts';
+import { StaticAppRoute } from '@/features/core/AppRoute.constants.ts';
+
+export interface INavbarOverride {
+    status: boolean;
+    value: any;
+}
+
+export enum NavBarItemMoreGroup {
+    GENERAL,
+    HIDDEN_ITEM,
+    SETTING_INFO,
+}
+
+export interface NavbarItem {
+    path: StaticAppRoute;
+    title: TranslationKey;
+    moreTitle?: TranslationKey;
+    SelectedIconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
+    IconComponent: OverridableComponent<SvgIconTypeMap<{}, 'svg'>>;
+    show: 'mobile' | 'desktop' | 'both';
+    moreGroup: NavBarItemMoreGroup;
+    useBadge?: () => { count: number; title: string };
+}
+
+export type NavbarContextType = {
+    // AppBar title
+    title: string | React.ReactNode;
+    setTitle: (title: NavbarContextType['title'], browserTitle?: string) => void;
+
+    appBarHeight: number;
+    setAppBarHeight: React.Dispatch<React.SetStateAction<number>>;
+
+    // AppBar action buttons
+    action: ReactNode;
+    setAction: React.Dispatch<React.SetStateAction<ReactNode>>;
+
+    // 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>>;
+};

src/features/navigation-bar/NavigationBar.util.ts

@@ -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 '@/features/navigation-bar/NavigationBar.types.ts';
+import { MetadataHistorySettings } from '@/features/history/History.types.ts';
+import { AppRoutes, StaticAppRoute } from '@/features/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;
+                }
+            });
+    }
+}

src/features/navigation-bar/components/DefaultNavBar.tsx

@@ -0,0 +1,174 @@
+/*
+ * 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, 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 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 { useBackButton } from '@/features/core/hooks/useBackButton.ts';
+import { useGetOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
+import { MediaQuery } from '@/features/core/utils/MediaQuery.tsx';
+import { DesktopSideBar } from '@/features/navigation-bar/components/DesktopSideBar.tsx';
+import { useResizeObserver } from '@/features/core/hooks/useResizeObserver.tsx';
+import { MobileBottomBar } from '@/features/navigation-bar/components/MobileBottomBar.tsx';
+import { useNavBarContext } from '@/features/navigation-bar/contexts/NavbarContext.tsx';
+import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
+import { NAVIGATION_BAR_ITEMS } from '@/features/navigation-bar/NavigationBar.constants.ts';
+import { NavigationBarUtil } from '@/features/navigation-bar/NavigationBar.util.ts';
+
+export function DefaultNavBar() {
+    const { title, action, override, isCollapsed, setIsCollapsed, setAppBarHeight, navBarWidth, setNavBarWidth } =
+        useNavBarContext();
+
+    const theme = useTheme();
+    const getOptionForDirection = useGetOptionForDirection();
+    const { pathname } = useLocation();
+    const handleBack = useBackButton();
+    const isMobileWidth = MediaQuery.useIsMobileWidth();
+
+    const {
+        settings: { hideHistory },
+    } = useMetadataServerSettings();
+
+    const appBarRef = useRef<HTMLDivElement | null>(null);
+
+    const isMainRoute = NAVIGATION_BAR_ITEMS.some(({ path, show }) => {
+        if (isMobileWidth && show === 'desktop') {
+            return false;
+        }
+
+        if (!isMobileWidth && show === 'mobile') {
+            return false;
+        }
+
+        return path === pathname;
+    });
+    const actualNavBarWidth = isMobileWidth || isCollapsed ? 0 : navBarWidth;
+
+    const visibleNavBarItems = useMemo(
+        () =>
+            NavigationBarUtil.filterItems(NAVIGATION_BAR_ITEMS, {
+                hideHistory,
+                hideBoth: false,
+                hideDesktop: isMobileWidth,
+                hideMobile: !isMobileWidth,
+            }),
+        [isMobileWidth, hideHistory],
+    );
+    const NavBarComponent = useMemo(() => (isMobileWidth ? MobileBottomBar : DesktopSideBar), [isMobileWidth]);
+
+    const navBar = useMemo(
+        () => <NavBarComponent navBarItems={visibleNavBarItems} />,
+        [NavBarComponent, visibleNavBarItems],
+    );
+
+    useResizeObserver(
+        appBarRef,
+        useCallback(() => {
+            setAppBarHeight(appBarRef.current?.clientHeight ?? 0);
+        }, [appBarRef.current]),
+    );
+
+    useLayoutEffect(() => {
+        if (override.status) {
+            setAppBarHeight(0);
+            setNavBarWidth(0);
+        }
+
+        return () => {
+            setAppBarHeight(0);
+            setNavBarWidth(0);
+        };
+    }, [override.status]);
+
+    useLayoutEffect(() => {
+        if (!isMobileWidth) {
+            // do not reset navbar width to prevent grid from jumping due to the changing grid item width
+            return;
+        }
+
+        setNavBarWidth(0);
+    }, [isMobileWidth]);
+
+    // Allow default navbar to be overrided
+    if (override.status) return override.value;
+
+    return (
+        <>
+            <AppBar
+                ref={appBarRef}
+                sx={{
+                    position: 'fixed',
+                    marginLeft: actualNavBarWidth,
+                    pt: 'env(safe-area-inset-top)',
+                    width: `calc(100% - ${actualNavBarWidth}px)`,
+                    zIndex: theme.zIndex.drawer,
+                }}
+            >
+                <Toolbar sx={{ position: 'relative' }}>
+                    {!isMobileWidth && (
+                        <Stack
+                            sx={{
+                                position: 'absolute',
+                                left: 0,
+                                width: `calc(${navBarWidth}px + env(safe-area-inset-left))`,
+                                ...(!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 + env(safe-area-inset-left)))`,
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                        }}
+                    >
+                        {!isMainRoute && (
+                            <IconButton
+                                edge="start"
+                                component="button"
+                                sx={{ marginRight: 2 }}
+                                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}
+        </>
+    );
+}

src/features/navigation-bar/components/DesktopSideBar.tsx

@@ -0,0 +1,166 @@
+/*
+ * 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 Badge from '@mui/material/Badge';
+import Typography from '@mui/material/Typography';
+import { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
+import { ListItemLink } from '@/features/core/components/lists/ListItemLink.tsx';
+import { useGetOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
+import { useNavBarContext } from '@/features/navigation-bar/contexts/NavbarContext.tsx';
+import { useResizeObserver } from '@/features/core/hooks/useResizeObserver.tsx';
+import { NavbarItem } from '@/features/navigation-bar/NavigationBar.types.ts';
+import { TypographyMaxLines } from '@/features/core/components/texts/TypographyMaxLines.tsx';
+
+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, useBadge }: NavbarItem) => {
+    const { t } = useTranslation();
+    const location = useLocation();
+    const { isCollapsed } = useNavBarContext();
+    const theme = useTheme();
+    const badgeInfo = useBadge?.();
+
+    const isActive = location.pathname.startsWith(path);
+    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}>
+            <CustomTooltip
+                title={
+                    <>
+                        {t(title)}
+                        <br />
+                        {badgeInfo?.title}
+                    </>
+                }
+                placement="right"
+            >
+                <ListItem sx={listItemProps}>
+                    <ListItemIcon sx={listItemIconProps}>
+                        <Badge badgeContent={badgeInfo?.count} color="primary">
+                            <Icon
+                                sx={{
+                                    color: isActive ? 'primary.dark' : undefined,
+                                    ...theme.applyStyles('dark', {
+                                        color: isActive ? 'primary.light' : undefined,
+                                    }),
+                                }}
+                            />
+                        </Badge>
+                    </ListItemIcon>
+
+                    <ListItemText
+                        primary={
+                            <TypographyMaxLines
+                                lines={1}
+                                variant={isCollapsed ? 'caption' : undefined}
+                                sx={{
+                                    color: isActive ? 'primary.dark' : undefined,
+                                    ...theme.applyStyles('dark', {
+                                        color: isActive ? 'primary.light' : undefined,
+                                    }),
+                                }}
+                            >
+                                {t(title)}
+                            </TypographyMaxLines>
+                        }
+                        secondary={
+                            !isCollapsed && (
+                                <Typography variant="caption" color="textSecondary">
+                                    {badgeInfo?.title}
+                                </Typography>
+                            )
+                        }
+                        sx={{ maxWidth: '100%', m: 0, display: 'flex', flexDirection: 'column' }}
+                    />
+                </ListItem>
+            </CustomTooltip>
+        </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,
+                },
+            }}
+            PaperProps={{
+                ref,
+            }}
+        >
+            <Box
+                sx={{
+                    pt: 'env(safe-area-inset-top)',
+                    pl: 'env(safe-area-inset-left)',
+                    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>
+    );
+};

src/features/navigation-bar/components/MobileBottomBar.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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 { CSSProperties, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
+import Badge from '@mui/material/Badge';
+import { useResizeObserver } from '@/features/core/hooks/useResizeObserver.tsx';
+import { useNavBarContext } from '@/features/navigation-bar/contexts/NavbarContext.tsx';
+import { NavbarItem } from '@/features/navigation-bar/NavigationBar.types.ts';
+import { StaticAppRoute } from '@/features/core/AppRoute.constants.ts';
+
+export const MobileBottomBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    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,
+                pb: 'env(safe-area-inset-bottom)',
+                pl: 'env(safe-area-inset-left)',
+                pr: 'env(safe-area-inset-right)',
+                zIndex: theme.zIndex.drawer - 1,
+            }}
+            style={{
+                ...(theme.applyStyles('dark', {
+                    '--Paper-overlay': 'unset',
+                }) as CSSProperties),
+            }}
+            elevation={3}
+        >
+            <BottomNavigation
+                showLabels
+                value={selectedNavBarItem}
+                onChange={(_, newValue: StaticAppRoute) => {
+                    setSelectedNavBarItem(newValue);
+                    navigate(newValue);
+                }}
+            >
+                {navBarItems.map(({ path, title, IconComponent, SelectedIconComponent, useBadge }) => (
+                    <BottomNavigationAction
+                        value={path}
+                        label={t(title)}
+                        icon={
+                            <Badge key={path} badgeContent={useBadge?.().count} color="primary">
+                                {selectedNavBarItem === path ? <SelectedIconComponent /> : <IconComponent />}
+                            </Badge>
+                        }
+                    />
+                ))}
+            </BottomNavigation>
+        </Paper>
+    );
+};

src/features/navigation-bar/contexts/NavBarContextProvider.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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 '@/features/navigation-bar/contexts/NavbarContext.tsx';
+import { useLocalStorage } from '@/features/core/hooks/useStorage.tsx';
+import { INavbarOverride } from '@/features/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 updateTitle = useCallback(
+        (newTitle: string | React.ReactNode, browserTitle: string = typeof newTitle === 'string' ? newTitle : '') => {
+            document.title = `${browserTitle} - Suwayomi`;
+            setTitle(newTitle);
+        },
+        [setTitle],
+    );
+
+    const value = useMemo(
+        () => ({
+            title,
+            setTitle: updateTitle,
+            appBarHeight,
+            setAppBarHeight,
+            action,
+            setAction,
+            override,
+            setOverride,
+            isCollapsed,
+            setIsCollapsed,
+            navBarWidth,
+            setNavBarWidth,
+            readerNavBarWidth,
+            setReaderNavBarWidth,
+            bottomBarHeight,
+            setBottomBarHeight,
+        }),
+        [
+            title,
+            updateTitle,
+            appBarHeight,
+            setAppBarHeight,
+            action,
+            setAction,
+            override,
+            setOverride,
+            isCollapsed,
+            setIsCollapsed,
+            navBarWidth,
+            setNavBarWidth,
+            readerNavBarWidth,
+            setReaderNavBarWidth,
+            bottomBarHeight,
+            setBottomBarHeight,
+        ],
+    );
+    return <NavBarContext.Provider value={value}>{children}</NavBarContext.Provider>;
+}

src/features/navigation-bar/contexts/NavbarContext.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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 { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
+
+export const NavBarContext = React.createContext<NavbarContextType>({
+    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);

src/features/navigation-bar/hooks/useAppAction.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 { useEffect } from 'react';
+import { useNavBarContext } from '@/features/navigation-bar/contexts/NavbarContext.tsx';
+import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
+
+export const useAppAction = (action: NavbarContextType['action'], dependencies: any[] = []) => {
+    const { setAction } = useNavBarContext();
+
+    useEffect(() => {
+        setAction(action);
+        return () => setAction(null);
+    }, dependencies);
+};

src/features/navigation-bar/hooks/useAppTitle.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 { useNavBarContext } from '@/features/navigation-bar/contexts/NavbarContext.tsx';
+import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
+
+export function useAppTitle(
+    title: NavbarContextType['title'],
+    browserTitleOrDependencies: string,
+    dependencies?: any[],
+): void;
+export function useAppTitle(title: NavbarContextType['title'], browserTitleOrDependencies?: any[]): void;
+export function useAppTitle(
+    title: NavbarContextType['title'],
+    browserTitleOrDependencies?: string | any[],
+    dependencies: any[] = [title, browserTitleOrDependencies],
+): void {
+    const { setTitle } = useNavBarContext();
+
+    useLayoutEffect(() => {
+        if (typeof browserTitleOrDependencies === 'string') {
+            setTitle(title, browserTitleOrDependencies);
+        } else {
+            setTitle(title);
+        }
+
+        return () => {
+            setTitle('');
+        };
+    }, dependencies);
+}

src/features/navigation-bar/hooks/useAppTitleAndAction.ts

@@ -0,0 +1,20 @@
+/*
+ * 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 { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
+import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
+import { useAppAction } from '@/features/navigation-bar/hooks/useAppAction.ts';
+
+export const useAppTitleAndAction = (
+    title: NavbarContextType['title'],
+    action: NavbarContextType['action'],
+    actionDependencies?: any[],
+) => {
+    useAppTitle(title);
+    useAppAction(action, actionDependencies);
+};