Reader overlay desktop nav bar

2024-10-03 04:02:59 +02:00
parent 671059c65c
commit 56684e405c
21 changed files with 928 additions and 20 deletions
--- a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
+++ b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
@@ -0,0 +1,155 @@
+/*
+ * 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 Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import { useTranslation } from 'react-i18next';
+import IconButton from '@mui/material/IconButton';
+import ArrowBack from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import PushPinIcon from '@mui/icons-material/PushPin';
+import Divider from '@mui/material/Divider';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import Drawer from '@mui/material/Drawer';
+import { useGetOptionForDirection } from '@/theme.tsx';
+import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
+import { useBackButton } from '@/modules/core/hooks/useBackButton.ts';
+import { ReaderNavContainer } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavContainer.tsx';
+import { ReaderNavBarDesktopMetadata } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopMetadata.tsx';
+import { ReaderNavBarDesktopPageNavigation } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx';
+import { ReaderNavBarDesktopChapterNavigation } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx';
+import { ReaderNavBarDesktopQuickSettings } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx';
+import { ReaderNavBarDesktopActions } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopActions.tsx';
+import { useNavBarContext } from '@/modules/navigation-bar/contexts/NavbarContext.tsx';
+import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
+import { useReaderStateMangaContext } from '@/modules/reader/contexts/state/ReaderStateMangaContext.tsx';
+import { createUpdateReaderSettings } from '@/modules/reader/services/ReaderSettingsMetadata.ts';
+import { makeToast } from '@/modules/core/utils/Toast.ts';
+import { userReaderStatePagesContext } from '@/modules/reader/contexts/state/ReaderStatePagesContext.tsx';
+import { useReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
+import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder.tsx';
+
+const useGetPreviousNavBarStaticValue = (isVisible: boolean, staticNav: boolean) => {
+    const wasNavBarStaticRef = useRef(staticNav);
+    const wasNavBarStaticPreviousRef = useRef(staticNav);
+
+    const resetWasNavBarStaticValue = wasNavBarStaticPreviousRef.current !== wasNavBarStaticRef.current && !isVisible;
+    if (resetWasNavBarStaticValue) {
+        wasNavBarStaticRef.current = false;
+    }
+
+    const didNavBarStaticValueChange = wasNavBarStaticPreviousRef.current !== staticNav;
+    if (didNavBarStaticValueChange) {
+        wasNavBarStaticRef.current = wasNavBarStaticPreviousRef.current;
+        wasNavBarStaticPreviousRef.current = staticNav;
+    }
+
+    return wasNavBarStaticRef.current;
+};
+
+export const ReaderNavBarDesktop = ({ isVisible, openSettings }: ReaderNavBarDesktopProps) => {
+    const { t } = useTranslation();
+    const { setReaderNavBarWidth } = useNavBarContext();
+    const { manga } = useReaderStateMangaContext();
+    const { chapters, currentChapter, nextChapter, previousChapter } = useReaderStateChaptersContext();
+    const { pages, currentPageIndex, setCurrentPageIndex } = userReaderStatePagesContext();
+
+    const handleBack = useBackButton();
+    const getOptionForDirection = useGetOptionForDirection();
+
+    const updateReaderSettings = createUpdateReaderSettings(manga ?? { id: -1 }, () =>
+        makeToast(t('reader.settings.error.label.failed_to_save_settings')),
+    );
+
+    const settings = ReaderService.useSettings();
+
+    const [navBarElement, setNavBarElement] = useState<HTMLDivElement | null>();
+    useResizeObserver(
+        navBarElement,
+        useCallback(() => {
+            if (!settings?.staticNav) {
+                return;
+            }
+
+            setReaderNavBarWidth(navBarElement!.offsetWidth);
+        }, [navBarElement, settings?.staticNav]),
+    );
+    useLayoutEffect(() => () => setReaderNavBarWidth(0), []);
+
+    const wasNavBarStatic = useGetPreviousNavBarStaticValue(isVisible, settings.staticNav);
+    const changedNavBarStaticValue = wasNavBarStatic && isVisible;
+    const drawerTransitionDuration = changedNavBarStaticValue ? 0 : undefined;
+
+    return (
+        <Drawer
+            variant={settings.staticNav ? 'permanent' : 'persistent'}
+            open={isVisible || settings.staticNav}
+            transitionDuration={drawerTransitionDuration}
+            PaperProps={{
+                ref: (ref: HTMLDivElement | null) => setNavBarElement(ref),
+            }}
+        >
+            <ReaderNavContainer sx={{ backgroundColor: 'background.paper', pointerEvents: 'all' }}>
+                <Stack sx={{ p: 2, gap: 2, backgroundColor: 'action.hover' }}>
+                    <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <Tooltip title={t('reader.button.exit')}>
+                            <IconButton onClick={handleBack} color="inherit">
+                                {getOptionForDirection(<ArrowBack />, <ArrowForwardIcon />)}
+                            </IconButton>
+                        </Tooltip>
+                        <Tooltip title={t('reader.settings.label.static_navigation')}>
+                            <IconButton
+                                onClick={() => {
+                                    setReaderNavBarWidth(0);
+                                    updateReaderSettings('staticNav', !settings.staticNav);
+                                }}
+                                color={settings.staticNav ? 'primary' : 'inherit'}
+                            >
+                                <PushPinIcon />
+                            </IconButton>
+                        </Tooltip>
+                    </Stack>
+                    {manga && currentChapter ? (
+                        <>
+                            <ReaderNavBarDesktopMetadata
+                                mangaId={manga.id}
+                                mangaTitle={manga.title}
+                                chapterTitle={currentChapter.name}
+                            />
+                            <ReaderNavBarDesktopActions currentChapter={currentChapter} />
+                        </>
+                    ) : (
+                        <LoadingPlaceholder />
+                    )}
+                </Stack>
+                <Stack sx={{ p: 2, gap: 2 }}>
+                    <Stack sx={{ gap: 1 }}>
+                        <ReaderNavBarDesktopPageNavigation
+                            currentPageIndex={currentPageIndex}
+                            setCurrentPageIndex={setCurrentPageIndex}
+                            pages={pages}
+                        />
+                        <ReaderNavBarDesktopChapterNavigation
+                            chapters={chapters}
+                            currentChapter={currentChapter}
+                            nextChapter={nextChapter}
+                            previousChapter={previousChapter}
+                        />
+                    </Stack>
+                    <Divider />
+                    <ReaderNavBarDesktopQuickSettings
+                        settings={settings}
+                        updateSetting={updateReaderSettings}
+                        openSettings={openSettings}
+                    />
+                </Stack>
+            </ReaderNavContainer>
+        </Drawer>
+    );
+};
--- a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopActions.tsx
+++ b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopActions.tsx
@@ -0,0 +1,98 @@
+/*
+ * 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 Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import { useTranslation } from 'react-i18next';
+import IconButton from '@mui/material/IconButton';
+import BookmarkIcon from '@mui/icons-material/Bookmark';
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import DownloadIcon from '@mui/icons-material/Download';
+import ReplayIcon from '@mui/icons-material/Replay';
+import { useMemo } from 'react';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { actionToTranslationKey, ChapterAction, Chapters } from '@/modules/chapter/services/Chapters.ts';
+import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { DownloadStateIndicator } from '@/modules/core/components/DownloadStateIndicator.tsx';
+import { DownloadStatusFieldsFragment } from '@/lib/graphql/generated/graphql.ts';
+
+const DownloadButton = ({
+    currentChapter,
+    downloadChapter,
+}: Required<Pick<ReaderStateChapters, 'currentChapter'>> & {
+    downloadChapter?: DownloadStatusFieldsFragment['queue'][number];
+}) => {
+    const { t } = useTranslation();
+
+    if (currentChapter && Chapters.isDownloaded(currentChapter)) {
+        return (
+            <Tooltip title={t(actionToTranslationKey.delete.action.single)}>
+                <IconButton onClick={() => Chapters.performAction('delete', [currentChapter.id], {})} color="inherit">
+                    <DeleteIcon />
+                </IconButton>
+            </Tooltip>
+        );
+    }
+
+    if (downloadChapter) {
+        return <DownloadStateIndicator download={downloadChapter} />;
+    }
+
+    return (
+        <Tooltip title={t(actionToTranslationKey.download.action.single)}>
+            <IconButton
+                disabled={!currentChapter}
+                onClick={() => Chapters.performAction('download', [currentChapter?.id ?? -1], {})}
+                color="inherit"
+            >
+                <DownloadIcon />
+            </IconButton>
+        </Tooltip>
+    );
+};
+
+export const ReaderNavBarDesktopActions = ({
+    currentChapter,
+}: Required<Pick<ReaderStateChapters, 'currentChapter'>>) => {
+    const { id, isBookmarked, realUrl } = currentChapter ?? { id: -1, isBookmarked: false, realUrl: '' };
+
+    const { t } = useTranslation();
+
+    const { data: downloaderData } = requestManager.useGetDownloadStatus();
+    const queue = downloaderData?.downloadStatus.queue ?? [];
+
+    const downloadChapter = useMemo(
+        () => queue.find((queueItem) => queueItem.chapter.id === currentChapter?.id),
+        [queue, id],
+    );
+
+    const bookmarkAction: Extract<ChapterAction, 'unbookmark' | 'bookmark'> = isBookmarked ? 'unbookmark' : 'bookmark';
+
+    return (
+        <Stack sx={{ flexDirection: 'row', justifyContent: 'center', gap: 1 }}>
+            <Tooltip title={t(actionToTranslationKey[bookmarkAction].action.single)}>
+                <IconButton onClick={() => Chapters.performAction(bookmarkAction, [id], {})} color="inherit">
+                    {isBookmarked ? <BookmarkIcon /> : <BookmarkBorderIcon />}
+                </IconButton>
+            </Tooltip>
+            <Tooltip title={t('reader.button.retry_load_pages')}>
+                <IconButton color="inherit">
+                    <ReplayIcon />
+                </IconButton>
+            </Tooltip>
+            <DownloadButton currentChapter={currentChapter} downloadChapter={downloadChapter} />
+            <Tooltip title={t('chapter.action.label.open_on_source')}>
+                <IconButton disabled={!realUrl} href={realUrl ?? ''} rel="noreferrer" target="_blank" color="inherit">
+                    <OpenInNewIcon />
+                </IconButton>
+            </Tooltip>
+        </Stack>
+    );
+};
--- a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx
+++ b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopChapterNavigation.tsx
@@ -0,0 +1,118 @@
+/*
+ * 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 Stack from '@mui/material/Stack';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import MenuItem from '@mui/material/MenuItem';
+import { ContextType, useLayoutEffect } from 'react';
+import Popover from '@mui/material/Popover';
+import { bindPopover, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import { Link } from 'react-router-dom';
+import { Select } from '@/modules/core/components/inputs/Select.tsx';
+import { Chapters } from '@/modules/chapter/services/Chapters.ts';
+import { ReaderStateChaptersContext } from '@/modules/reader/contexts/state/ReaderStateChaptersContext.tsx';
+import { ReaderChapterList } from '@/modules/reader/components/overlay/navigation/ReaderChapterList.tsx';
+import { ReaderNavBarDesktopNextPreviousButton } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx';
+import { useGetOptionForDirection } from '@/theme.tsx';
+import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
+
+export const ReaderNavBarDesktopChapterNavigation = ({
+    currentChapter,
+    previousChapter,
+    nextChapter,
+    chapters = [],
+}: Pick<
+    ContextType<typeof ReaderStateChaptersContext>,
+    'chapters' | 'currentChapter' | 'previousChapter' | 'nextChapter'
+>) => {
+    const { t } = useTranslation();
+    const { readingDirection } = ReaderService.useSettings();
+    const getOptionForDirection = useGetOptionForDirection();
+
+    const popupState = usePopupState({ variant: 'popover', popupId: 'reader-nav-bar-desktop-chapter-list' });
+
+    const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];
+
+    useLayoutEffect(() => {
+        popupState.close();
+    }, [currentChapter?.id]);
+
+    return (
+        <Stack sx={{ flexDirection: 'row', gap: 1 }} dir="ltr">
+            <ReaderNavBarDesktopNextPreviousButton
+                component={Link}
+                type="previous"
+                title={t(
+                    getOptionForDirection('reader.button.previous_chapter', 'reader.button.next_chapter', direction),
+                )}
+                disabled={getOptionForDirection(!previousChapter, !nextChapter, direction)}
+                to={getOptionForDirection(
+                    previousChapter && Chapters.getReaderUrl(previousChapter),
+                    nextChapter && Chapters.getReaderUrl(nextChapter),
+                    direction,
+                )}
+                replace
+            />
+            <FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}>
+                <InputLabel id="reader-nav-bar-desktop-chapter-select">{t('chapter.title_one')}</InputLabel>
+                <Select
+                    {...bindTrigger(popupState)}
+                    open={popupState.isOpen}
+                    value={currentChapter?.id ?? 0}
+                    // hide actual select menu
+                    MenuProps={{ sx: { visibility: 'hidden' } }}
+                    label={t('chapter.title_one')}
+                    labelId="reader-nav-bar-desktop-chapter-select"
+                >
+                    {/* hacky way to use the select component with a custom menu, the only possible value that is needed is the current chapter */}
+                    <MenuItem key={currentChapter?.id} value={currentChapter?.id ?? 0}>
+                        {currentChapter ? `#${currentChapter.chapterNumber} ${currentChapter.name}` : ''}
+                    </MenuItem>
+                </Select>
+            </FormControl>
+            <ReaderNavBarDesktopNextPreviousButton
+                component={Link}
+                type="next"
+                title={t(
+                    getOptionForDirection('reader.button.next_chapter', 'reader.button.previous_chapter', direction),
+                )}
+                disabled={getOptionForDirection(!nextChapter, !previousChapter, direction)}
+                to={getOptionForDirection(
+                    nextChapter && Chapters.getReaderUrl(nextChapter),
+                    previousChapter && Chapters.getReaderUrl(previousChapter),
+                    direction,
+                )}
+                replace
+            />
+            <Popover
+                {...bindPopover(popupState)}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }}
+            >
+                <Box sx={{ mb: 1 }}>
+                    <ReaderChapterList
+                        style={{
+                            width: '500px',
+                            maxWidth: '90vw',
+                            minHeight: '150px',
+                            maxHeight: '300px',
+                        }}
+                        currentChapter={currentChapter}
+                        chapters={chapters}
+                    />
+                </Box>
+            </Popover>
+        </Stack>
+    );
+};
--- a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopMetadata.tsx
+++ b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopMetadata.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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 Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import Link from '@mui/material/Link';
+
+import { Link as RouterLink } from 'react-router-dom';
+import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines';
+
+export const ReaderNavBarDesktopMetadata = ({
+    mangaId,
+    mangaTitle,
+    chapterTitle,
+}: {
+    mangaId: number;
+    mangaTitle: string;
+    chapterTitle: string;
+}) => (
+    <Stack>
+        <Tooltip title={mangaTitle} placement="right">
+            <TypographyMaxLines lines={3} variant="h6" component="h1" sx={{ textAlign: 'center' }}>
+                <Link component={RouterLink} to={`/manga/${mangaId}`} sx={{ textDecoration: 'none', color: 'inherit' }}>
+                    {mangaTitle}
+                </Link>
+            </TypographyMaxLines>
+        </Tooltip>
+        <Tooltip title={chapterTitle} placement="right">
+            <TypographyMaxLines lines={4} variant="body1" component="h2" sx={{ textAlign: 'center' }}>
+                {chapterTitle}
+            </TypographyMaxLines>
+        </Tooltip>
+    </Stack>
+);
--- a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx
+++ b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx
@@ -0,0 +1,28 @@
+/*
+ * 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 Tooltip from '@mui/material/Tooltip';
+import { ComponentProps } from 'react';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton';
+
+export const ReaderNavBarDesktopNextPreviousButton = ({
+    title,
+    type,
+    ...customIconButtonProps
+}: Omit<ComponentProps<typeof CustomIconButton>, 'children'> & {
+    title: string;
+    type: 'previous' | 'next';
+}) => (
+    <Tooltip title={title}>
+        <CustomIconButton sx={{ minWidth: 0, px: 1, flexBasis: '15%' }} variant="contained" {...customIconButtonProps}>
+            {type === 'previous' ? <KeyboardArrowLeftIcon /> : <KeyboardArrowRightIcon />}
+        </CustomIconButton>
+    </Tooltip>
+);
--- a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx
+++ b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopPageNavigation.tsx
@@ -0,0 +1,76 @@
+/*
+ * 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 Stack from '@mui/material/Stack';
+import { useTranslation } from 'react-i18next';
+import MenuItem from '@mui/material/MenuItem';
+import { useMemo } from 'react';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import { Select } from '@/modules/core/components/inputs/Select.tsx';
+import { getPage } from '@/modules/reader/utils/ReaderProgressBar.utils.tsx';
+import { ReaderStatePages } from '@/modules/reader/types/ReaderProgressBar.types.ts';
+import { ReaderControls } from '@/modules/reader/services/ReaderControls.ts';
+import { useGetOptionForDirection } from '@/theme.tsx';
+import { ReaderService } from '@/modules/reader/services/ReaderService.ts';
+import { ReaderNavBarDesktopNextPreviousButton } from '@/modules/reader/components/overlay/navigation/desktop/ReaderNavBarDesktopNextPreviousButton.tsx';
+import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/modules/reader/constants/ReaderSettings.constants.tsx';
+
+export const ReaderNavBarDesktopPageNavigation = ({
+    currentPageIndex,
+    setCurrentPageIndex,
+    pages,
+}: Pick<ReaderStatePages, 'currentPageIndex' | 'setCurrentPageIndex' | 'pages'>) => {
+    const { t } = useTranslation();
+    const openPage = ReaderControls.useOpenPage();
+    const { readingDirection } = ReaderService.useSettings();
+    const getOptionForDirection = useGetOptionForDirection();
+    const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
+
+    const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];
+
+    return (
+        <Stack sx={{ flexDirection: 'row', gap: 1 }} dir="ltr">
+            <ReaderNavBarDesktopNextPreviousButton
+                type="previous"
+                title={t(getOptionForDirection('reader.button.previous_page', 'reader.button.next_page', direction))}
+                disabled={getOptionForDirection(
+                    !currentPageIndex,
+                    currentPage.primary.index === pages.slice(-1)[0].primary.index,
+                    direction,
+                )}
+                onClick={() => openPage('previous')}
+            />
+            <FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}>
+                <InputLabel id="reader-nav-bar-desktop-page-select">{t('reader.page_info.label.page')}</InputLabel>
+                <Select
+                    labelId="reader-nav-bar-desktop-page-select"
+                    label={t('reader.page_info.label.page')}
+                    value={currentPage.primary.index}
+                    onChange={(e) => setCurrentPageIndex(e.target.value as number)}
+                >
+                    {pages.map(({ primary: { index }, name }) => (
+                        <MenuItem key={index} value={index}>
+                            {name}
+                        </MenuItem>
+                    ))}
+                </Select>
+            </FormControl>
+            <ReaderNavBarDesktopNextPreviousButton
+                type="next"
+                title={t(getOptionForDirection('reader.button.next_page', 'reader.button.previous_page', direction))}
+                disabled={getOptionForDirection(
+                    currentPage.primary.index === pages.slice(-1)[0].primary.index,
+                    !currentPageIndex,
+                    direction,
+                )}
+                onClick={() => openPage('next')}
+            />
+        </Stack>
+    );
+};
--- a/src/modules/reader/components/overlay/navigation/desktop/ReaderNavContainer.tsx
+++ b/src/modules/reader/components/overlay/navigation/desktop/ReaderNavContainer.tsx
@@ -0,0 +1,18 @@
+/*
+ * 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 Stack from '@mui/material/Stack';
+import { styled } from '@mui/material/styles';
+
+export const ReaderNavContainer = styled(Stack)({
+    width: '400px',
+    minWidth: '400px',
+    maxWidth: '400px',
+    height: '100vh',
+    overflowY: 'auto',
+});
--- a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopOffsetDoubleSpread.tsx
+++ b/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopOffsetDoubleSpread.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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 { useTranslation } from 'react-i18next';
+import Button from '@mui/material/Button';
+import { OffsetDoubleSpreadIcon } from '@/assets/icons/svg/OffsetDoubleSpreadIcon.tsx';
+import { IReaderSettings, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
+
+export const ReaderNavBarDesktopOffsetDoubleSpread = ({
+    readingMode,
+    shouldOffsetDoubleSpreads,
+    setShouldOffsetDoubleSpreads,
+}: Pick<IReaderSettings, 'readingMode' | 'shouldOffsetDoubleSpreads'> & {
+    setShouldOffsetDoubleSpreads: (offset: boolean) => void;
+}) => {
+    const { t } = useTranslation();
+
+    if (readingMode !== ReadingMode.DOUBLE_PAGE) {
+        return null;
+    }
+
+    return (
+        <Button
+            sx={{ justifyContent: 'start', textTransform: 'unset' }}
+            size="large"
+            onClick={() => setShouldOffsetDoubleSpreads(!shouldOffsetDoubleSpreads)}
+            color={shouldOffsetDoubleSpreads ? 'secondary' : 'primary'}
+            variant="contained"
+            startIcon={<OffsetDoubleSpreadIcon />}
+        >
+            {t('reader.settings.label.offset_double_spread')}
+        </Button>
+    );
+};
--- a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopPageScale.tsx
+++ b/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopPageScale.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 Stack from '@mui/material/Stack';
+import Tooltip from '@mui/material/Tooltip';
+import { useTranslation } from 'react-i18next';
+import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
+import ExpandIcon from '@mui/icons-material/Expand';
+import CropOriginalIcon from '@mui/icons-material/CropOriginal';
+import FitScreenIcon from '@mui/icons-material/FitScreen';
+import { CustomIconButton } from '@/modules/core/components/buttons/CustomIconButton.tsx';
+import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
+import { IReaderSettings, ReaderPageScaleMode } from '@/modules/reader/types/Reader.types.ts';
+import { ValueToDisplayData } from '@/modules/core/Core.types';
+
+const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReaderPageScaleMode> = {
+    [ReaderPageScaleMode.WIDTH]: {
+        title: 'reader.settings.page_scale.width',
+        icon: <ExpandIcon sx={{ transform: 'rotate(90deg)' }} />,
+    },
+    [ReaderPageScaleMode.HEIGHT]: {
+        title: 'reader.settings.page_scale.height',
+        icon: <ExpandIcon />,
+    },
+    [ReaderPageScaleMode.SCREEN]: {
+        title: 'reader.settings.page_scale.screen',
+        icon: <ZoomOutMapIcon />,
+    },
+    [ReaderPageScaleMode.ORIGINAL]: {
+        title: 'reader.settings.page_scale.original',
+        icon: <CropOriginalIcon />,
+    },
+};
+
+const READER_PAGE_SCALE_MODE_VALUES = Object.values(ReaderPageScaleMode).filter((value) => typeof value === 'number');
+
+export const ReaderNavBarDesktopPageScale = ({
+    pageScaleMode,
+    shouldScalePage,
+    updateSetting,
+}: Pick<IReaderSettings, 'pageScaleMode' | 'shouldScalePage'> & {
+    updateSetting: <Setting extends keyof Pick<IReaderSettings, 'pageScaleMode' | 'shouldScalePage'>>(
+        setting: Setting,
+        value: IReaderSettings[Setting],
+    ) => void;
+}) => {
+    const { t } = useTranslation();
+
+    const isPageScalingPossible = pageScaleMode !== ReaderPageScaleMode.ORIGINAL;
+
+    return (
+        <Stack sx={{ flexDirection: 'row', gap: 1 }}>
+            <ValueRotationButton
+                value={pageScaleMode}
+                values={READER_PAGE_SCALE_MODE_VALUES}
+                setValue={(value) => updateSetting('pageScaleMode', value)}
+                valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+            />
+            {isPageScalingPossible && (
+                <Tooltip title={t('reader.settings.label.scale_page')}>
+                    <CustomIconButton
+                        onClick={() => updateSetting('shouldScalePage', !shouldScalePage)}
+                        sx={{ minWidth: 0 }}
+                        variant="contained"
+                        color={shouldScalePage ? 'secondary' : 'primary'}
+                    >
+                        <FitScreenIcon />
+                    </CustomIconButton>
+                </Tooltip>
+            )}
+        </Stack>
+    );
+};
--- a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx
+++ b/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx
@@ -0,0 +1,60 @@
+/*
+ * 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 Stack from '@mui/material/Stack';
+import { useTranslation } from 'react-i18next';
+import Button from '@mui/material/Button';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { ReaderNavBarDesktopPageScale } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopPageScale.tsx';
+import { ReaderNavBarDesktopReadingMode } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingMode.tsx';
+import { ReaderNavBarDesktopOffsetDoubleSpread } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopOffsetDoubleSpread.tsx';
+import { ReaderNavBarDesktopReadingDirection } from '@/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingDirection.tsx';
+import { IReaderSettings } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderNavBarDesktopProps } from '@/modules/reader/types/ReaderOverlay.types.ts';
+
+export const ReaderNavBarDesktopQuickSettings = ({
+    settings: { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldScalePage, readingDirection },
+    updateSetting,
+    openSettings,
+}: {
+    settings: IReaderSettings;
+    updateSetting: <Setting extends keyof IReaderSettings>(setting: Setting, value: IReaderSettings[Setting]) => void;
+} & Pick<ReaderNavBarDesktopProps, 'openSettings'>) => {
+    const { t } = useTranslation();
+
+    return (
+        <Stack sx={{ gap: 1 }}>
+            <ReaderNavBarDesktopReadingMode
+                readingMode={readingMode}
+                setReadingMode={(value) => updateSetting('readingMode', value)}
+            />
+            <ReaderNavBarDesktopOffsetDoubleSpread
+                shouldOffsetDoubleSpreads={shouldOffsetDoubleSpreads}
+                setShouldOffsetDoubleSpreads={(value) => updateSetting('shouldOffsetDoubleSpreads', value)}
+            />
+            <ReaderNavBarDesktopPageScale
+                pageScaleMode={pageScaleMode}
+                shouldScalePage={shouldScalePage}
+                updateSetting={updateSetting}
+            />
+            <ReaderNavBarDesktopReadingDirection
+                readingDirection={readingDirection}
+                setReadingDirection={(value) => updateSetting('readingDirection', value)}
+            />
+            <Button
+                onClick={() => openSettings()}
+                size="large"
+                sx={{ justifyContent: 'start', textTransform: 'none' }}
+                variant="contained"
+                startIcon={<SettingsIcon />}
+            >
+                {t('reader.settings.title.reader_settings')}
+            </Button>
+        </Stack>
+    );
+};
--- a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingDirection.tsx
+++ b/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingDirection.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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 ArrowCircleLeftIcon from '@mui/icons-material/ArrowCircleLeft';
+import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
+import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
+import { IReaderSettings, ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
+import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
+
+const READING_MODE_VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReadingDirection> = {
+    [ReadingDirection.LTR]: {
+        title: 'reader.settings.reading_direction.ltr',
+        icon: <ArrowCircleRightIcon />,
+    },
+    [ReadingDirection.RTL]: {
+        title: 'reader.settings.reading_direction.rtl',
+        icon: <ArrowCircleLeftIcon />,
+    },
+};
+
+const READING_DIRECTION_VALUES = Object.values(ReadingDirection).filter((value) => typeof value === 'number');
+
+export const ReaderNavBarDesktopReadingDirection = ({
+    readingDirection,
+    setReadingDirection,
+}: Pick<IReaderSettings, 'readingDirection'> & {
+    setReadingDirection: (readingDirection: ReadingDirection) => void;
+}) => (
+    <ValueRotationButton
+        value={readingDirection}
+        values={READING_DIRECTION_VALUES}
+        setValue={setReadingDirection}
+        valueToDisplayData={READING_MODE_VALUE_TO_DISPLAY_DATA}
+    />
+);
--- a/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingMode.tsx
+++ b/src/modules/reader/components/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopReadingMode.tsx
@@ -0,0 +1,50 @@
+/*
+ * 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 { SinglePageIcon } from '@/assets/icons/svg/SinglePageIcon.tsx';
+import { DoublePageIcon } from '@/assets/icons/svg/DoublePageIcon.tsx';
+import { ContinuousVerticalPageIcon } from '@/assets/icons/svg/ContinuousVerticalPageIcon.tsx';
+import { ContinuousHorizontalPageIcon } from '@/assets/icons/svg/ContinuousHorizontalPageIcon.tsx';
+import { ValueRotationButton } from '@/modules/core/components/buttons/ValueRotationButton.tsx';
+import { ValueToDisplayData } from '@/modules/core/Core.types.tsx';
+import { IReaderSettings, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
+
+const VALUE_TO_DISPLAY_DATA: ValueToDisplayData<ReadingMode> = {
+    [ReadingMode.SINGLE_PAGE]: {
+        title: 'reader.settings.reader_type.label.single_page',
+        icon: <SinglePageIcon />,
+    },
+    [ReadingMode.DOUBLE_PAGE]: {
+        title: 'reader.settings.reader_type.label.double_page',
+        icon: <DoublePageIcon />,
+    },
+    [ReadingMode.CONTINUOUS_VERTICAL]: {
+        title: 'reader.settings.reader_type.label.continuous_vertical',
+        icon: <ContinuousVerticalPageIcon />,
+    },
+    [ReadingMode.CONTINUOUS_HORIZONTAL]: {
+        title: 'reader.settings.reader_type.label.continuous_horizontal',
+        icon: <ContinuousHorizontalPageIcon />,
+    },
+};
+
+const READING_MODE_VALUES = Object.values(ReadingMode).filter((value) => typeof value === 'number');
+
+export const ReaderNavBarDesktopReadingMode = ({
+    readingMode,
+    setReadingMode,
+}: Pick<IReaderSettings, 'readingMode'> & {
+    setReadingMode: (mode: ReadingMode) => void;
+}) => (
+    <ValueRotationButton
+        value={readingMode}
+        values={READING_MODE_VALUES}
+        setValue={setReadingMode}
+        valueToDisplayData={VALUE_TO_DISPLAY_DATA}
+    />
+);