diff --git a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx index 22348985..f2de94d2 100644 --- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx +++ b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx @@ -20,6 +20,7 @@ import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings import { useReaderPagesStore, useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts'; import { ReaderControls } from '@/features/reader/services/ReaderControls.ts'; import { useTheme } from '@mui/material/styles'; +import { reverseString } from '@/base/utils/Strings.ts'; const BaseReaderNavBarDesktopPageNavigation = () => { const { t } = useLingui(); @@ -49,6 +50,13 @@ const BaseReaderNavBarDesktopPageNavigation = () => { labelId="reader-nav-bar-desktop-page-select" label={t`Page`} value={getIndexOfPage(currentPage)} + renderValue={(value) => { + const separator = ' / '; + + const text = `${getPage(value, pages).name}${separator}${getIndexOfPage(pages.slice(-1)[0]) + 1}`; + + return getOptionForDirection(text, reverseString(text, separator), direction); + }} onChange={(e) => ReaderControls.openPage(e.target.value as number, undefined, false)} > {pages.map((page) => (