Reader overlay desktop nav bar

public/locales/en.json

@@ -757,9 +757,12 @@
       "chapter_list": "Chapter list",
       "close_menu": "Close menu",
       "exit": "Exit reader",
-      "next_chapter": "Next Chapter",
+      "next_chapter": "Next chapter",
+      "next_page": "Next page",
       "open_menu": "Open menu",
-      "previous_chapter": "Previous Chapter"
+      "previous_chapter": "Previous chapter",
+      "previous_page": "Previous page",
+      "retry_load_pages": "Retry errored pages"
     },
     "error": {
       "label": {
@@ -771,7 +774,8 @@
     "page_info": {
       "label": {
         "currently_on_page": "Currently on page",
-        "of_max_pages": "of {{maxPages}}"
+        "of_max_pages": "of {{maxPages}}",
+        "page": "Page"
       }
     },
     "settings": {
@@ -784,7 +788,7 @@
       "label": {
         "fit_page_to_window": "Fit page to window",
         "load_next_chapter": "Load next chapter at ending",
-        "offset_first_page": "Offset first page",
+        "offset_double_spread": "Offset double spreads",
         "reader_type": "Reader type",
         "reader_width": "Reader width",
         "reading_direction": "Reading direction",
@@ -794,6 +798,13 @@
         "skip_dup_chapters": "Skip duplicate chapters",
         "static_navigation": "Static navigation"
       },
+      "page_scale": {
+        "height": "Fit height",
+        "original": "Original size",
+        "screen": "Fit screen",
+        "stretch": "Stretch small pages",
+        "width": "Fit width"
+      },
       "reader_type": {
         "label": {
           "continuous_horizontal": "Continuous horizontal",

src/modules/core/components/buttons/ValueRotationButton.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 { useTranslation } from 'react-i18next';
+import { useMemo } from 'react';
+import Button from '@mui/material/Button';
+import { ValueToDisplayData } from '@/modules/core/Core.types.ts';
+
+export const ValueRotationButton = <Value extends string | number>({
+    value,
+    values,
+    setValue,
+    valueToDisplayData,
+}: {
+    value: Value;
+    values: Value[];
+    setValue: (value: Value) => void;
+    valueToDisplayData: ValueToDisplayData<Value>;
+}) => {
+    const { t } = useTranslation();
+
+    const indexOfValue = useMemo(() => values.indexOf(value), [value, values]);
+
+    return (
+        <Button
+            onClick={() => setValue(values[(indexOfValue + 1) % values.length])}
+            sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
+            variant="contained"
+            startIcon={valueToDisplayData[value].icon}
+            size="large"
+        >
+            {t(valueToDisplayData[value].title)}
+        </Button>
+    );
+};

src/modules/metadata/Metadata.constants.ts

@@ -7,7 +7,7 @@
  */
 
 import { AppMetadataKeys, IMetadataMigration } from '@/modules/metadata/Metadata.types.ts';
-import { ReadingMode } from '@/modules/reader/types/Reader.types.ts';
+import { ReaderPageScaleMode, ReadingMode } from '@/modules/reader/types/Reader.types.ts';
 
 export const APP_METADATA_KEY_PREFIX = 'webUI_';
 
@@ -16,9 +16,6 @@ const APP_METADATA_OBJECT: Record<AppMetadataKeys, undefined> = {
     showPageNumber: undefined,
     loadNextOnEnding: undefined,
     skipDupChapters: undefined,
-    fitPageToWindow: undefined,
-    scalePage: undefined,
-    offsetFirstPage: undefined,
     migration: undefined,
     deleteChaptersManuallyMarkedRead: undefined,
     deleteChaptersWhileReading: undefined,
@@ -62,6 +59,9 @@ const APP_METADATA_OBJECT: Record<AppMetadataKeys, undefined> = {
     progressBarSize: undefined,
     progressBarPosition: undefined,
     readingMode: undefined,
+    pageScaleMode: undefined,
+    shouldScalePage: undefined,
+    shouldOffsetDoubleSpreads: undefined,
 };
 
 export const VALID_APP_METADATA_KEYS = Object.keys(APP_METADATA_OBJECT);
@@ -193,6 +193,18 @@ export const METADATA_MIGRATIONS: IMetadataMigration[] = [
                 oldKey: 'readerType',
                 newKey: 'readingMode',
             },
+            {
+                oldKey: 'offsetFirstPage',
+                newKey: 'shouldOffsetDoubleSpreads',
+            },
+            {
+                oldKey: 'fitPageToWindow',
+                newKey: 'pageScaleMode',
+            },
+            {
+                oldKey: 'scalePage',
+                newKey: 'shouldScalePage',
+            },
         ],
         values: [
             // START: readerType
@@ -237,6 +249,18 @@ export const METADATA_MIGRATIONS: IMetadataMigration[] = [
                 newValue: `${ReadingMode.CONTINUOUS_HORIZONTAL}`,
             },
             // END: readerType
+            // START: fitPageToWindow
+            {
+                key: 'fitPageToWindow',
+                oldValue: 'false',
+                newValue: `${ReaderPageScaleMode.ORIGINAL}`,
+            },
+            {
+                key: 'fitPageToWindow',
+                oldValue: 'true',
+                newValue: `${ReaderPageScaleMode.SCREEN}`,
+            },
+            // END: fitPageToWindow
         ],
     },
 ];

src/modules/reader/components/overlay/navigation/ReaderChapterList.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { Virtuoso } from 'react-virtuoso';
+import { Virtuoso, VirtuosoProps } from 'react-virtuoso';
 import { useMemo } from 'react';
 import { IChapterWithMeta } from '@/modules/chapter/components/ChapterList.tsx';
 import { ChapterCard } from '@/modules/chapter/components/cards/ChapterCard.tsx';
@@ -16,7 +16,8 @@ import { ReaderStateChapters } from '@/modules/reader/types/Reader.types.ts';
 export const ReaderChapterList = ({
     currentChapter,
     chapters,
-}: Required<Pick<ReaderStateChapters, 'chapters' | 'currentChapter'>>) => {
+    style,
+}: Pick<ReaderStateChapters, 'chapters' | 'currentChapter'> & Pick<VirtuosoProps<any, any>, 'style'>) => {
     const { data: downloaderData } = requestManager.useGetDownloadStatus();
     const queue = downloaderData?.downloadStatus.queue ?? [];
 
@@ -43,8 +44,7 @@ export const ReaderChapterList = ({
         <Virtuoso
             style={{
                 height: `calc(${chaptersWithMeta.length} * 100px)`,
-                minHeight: '15vh',
+                ...style,
-                maxHeight: '75vh',
             }}
             initialTopMostItemIndex={currentChapterIndex ?? 0}
             totalCount={chaptersWithMeta.length}

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>
+    );
+};

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>
+    );
+};

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>
+    );
+};

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>
+);

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>
+);

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>
+    );
+};

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',
+});

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>
+    );
+};

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>
+    );
+};

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>
+    );
+};

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}
+    />
+);

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}
+    />
+);

src/modules/reader/components/overlay/navigation/mobile/ReaderBottomBarMobile.tsx

@@ -90,7 +90,14 @@ export const ReaderBottomBarMobile = ({ openSettings, isVisible }: ReaderBottomB
             {chapterListPopupState.isOpen && (
                 <Dialog {...bindDialog(chapterListPopupState)} fullWidth maxWidth="md" scroll="paper">
                     <DialogContent sx={{ p: 0, pb: 1 }}>
-                        <ReaderChapterList currentChapter={currentChapter} chapters={chapters} />
+                        <ReaderChapterList
+                            style={{
+                                minHeight: '15vh',
+                                maxHeight: '75vh',
+                            }}
+                            currentChapter={currentChapter}
+                            chapters={chapters}
+                        />
                     </DialogContent>
                 </Dialog>
             )}

src/modules/reader/constants/Reader.constants.ts

@@ -10,6 +10,7 @@ import {
     IReaderSettings,
     ProgressBarPosition,
     ProgressBarType,
+    ReaderPageScaleMode,
     ReadingDirection,
     ReadingMode,
 } from '@/modules/reader/types/Reader.types.ts';
@@ -20,15 +21,15 @@ export const DEFAULT_READER_SETTINGS: IReaderSettings = {
     showPageNumber: true,
     loadNextOnEnding: false,
     skipDupChapters: true,
-    fitPageToWindow: true,
-    scalePage: false,
-    offsetFirstPage: false,
     readerWidth: 50,
     tapZoneLayout: TapZoneLayouts.RIGHT_LEFT,
     tapZoneInvertMode: { vertical: false, horizontal: false },
     progressBarType: ProgressBarType.STANDARD,
     progressBarSize: 4,
     progressBarPosition: ProgressBarPosition.BOTTOM,
+    pageScaleMode: ReaderPageScaleMode.ORIGINAL,
+    shouldScalePage: false,
+    shouldOffsetDoubleSpreads: false,
     readingDirection: ReadingDirection.LTR,
     readingMode: ReadingMode.SINGLE_PAGE,
 };

src/modules/reader/constants/ReaderSettings.constants.tsx

@@ -0,0 +1,15 @@
+/*
+ * 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 { Direction } from '@mui/material/styles';
+import { ReadingDirection } from '@/modules/reader/types/Reader.types.ts';
+
+export const READING_DIRECTION_TO_THEME_DIRECTION: Record<ReadingDirection, Direction> = {
+    [ReadingDirection.LTR]: 'ltr',
+    [ReadingDirection.RTL]: 'rtl',
+};

src/modules/reader/types/Reader.types.ts

@@ -32,6 +32,13 @@ export enum ReadingMode {
     CONTINUOUS_HORIZONTAL,
 }
 
+export enum ReaderPageScaleMode {
+    WIDTH,
+    HEIGHT,
+    SCREEN,
+    ORIGINAL,
+}
+
 export interface ReaderStateChapters {
     chapters: TChapterReader[];
     currentChapter?: TChapterReader | null;
@@ -45,15 +52,15 @@ export interface IReaderSettings {
     showPageNumber: boolean;
     loadNextOnEnding: boolean;
     skipDupChapters: boolean;
-    fitPageToWindow: boolean;
-    scalePage: boolean;
-    offsetFirstPage: boolean;
     readerWidth: number;
     tapZoneLayout: TapZoneLayouts;
     tapZoneInvertMode: TapZoneInvertMode;
     progressBarType: ProgressBarType;
     progressBarSize: number;
     progressBarPosition: ProgressBarPosition;
+    pageScaleMode: ReaderPageScaleMode;
+    shouldScalePage: boolean;
+    shouldOffsetDoubleSpreads: boolean;
     readingDirection: ReadingDirection;
     readingMode: ReadingMode;
 }

src/modules/reader/types/ReaderOverlay.types.ts

@@ -12,6 +12,10 @@ export interface BaseReaderOverlayProps {
 
 export interface MobileHeaderProps extends BaseReaderOverlayProps {}
 
-export interface ReaderBottomBarMobileProps extends BaseReaderOverlayProps {
+interface ReaderNavBarBaseProps extends BaseReaderOverlayProps {
     openSettings: () => void;
 }
+
+export interface ReaderBottomBarMobileProps extends ReaderNavBarBaseProps {}
+
+export interface ReaderNavBarDesktopProps extends ReaderNavBarBaseProps {}