Show total page in reader desktop page select

Example:
- 10 total pages
- 4 is current page

select shows: 4 / 10

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) => (