Show chapter title in Reader chapter select

src/components/navbar/ReaderNavBar.tsx

@@ -12,7 +12,7 @@ import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Typography from '@mui/material/Typography';
 import { useLocation, useNavigate } from 'react-router-dom';
 import Slide from '@mui/material/Slide';
@@ -125,10 +125,12 @@ interface IProps {
     setSettingValue: (key: keyof IReaderSettings, value: AllowedMetadataValueTypes, persist?: boolean) => void;
     manga: TManga;
     chapter: TChapter;
+    chapters: TChapter[];
     curPage: number;
     scrollToPage: (page: number) => void;
     openNextChapter: (offset: ChapterOffset) => void;
     retrievingNextChapter: boolean;
+    hasDuplicatedChapters: boolean;
 }
 
 export function ReaderNavBar(props: IProps) {
@@ -141,12 +143,25 @@ export function ReaderNavBar(props: IProps) {
     }>();
     const { prevDrawerOpen, prevSettingsCollapseOpen } = location.state ?? {};
 
-    const { settings, setSettingValue, manga, chapter, curPage, scrollToPage, openNextChapter, retrievingNextChapter } =
+    const {
-        props;
+        settings,
+        setSettingValue,
+        manga,
+        chapter,
+        chapters,
+        curPage,
+        scrollToPage,
+        openNextChapter,
+        retrievingNextChapter,
+        hasDuplicatedChapters,
+    } = props;
 
     const handleBack = useBackButton();
     useSetDefaultBackTo(`/manga/${manga.id}`);
 
+    const hasMultipleScanlators = useMemo(() => !!new Set(chapters.map(({ scanlator }) => scanlator)).size, [chapters]);
+    const chapterSelectShowScanlator = !hasDuplicatedChapters && hasMultipleScanlators;
+
     const [drawerOpen, setDrawerOpen] = useState(settings.staticNav || prevDrawerOpen);
     const [updateDrawerOnRender, setUpdateDrawerOnRender] = useState(true);
     const [hideOpenButton, setHideOpenButton] = useState(settings.staticNav || prevDrawerOpen);
@@ -338,13 +353,12 @@ export function ReaderNavBar(props: IProps) {
                                         });
                                     }}
                                 >
-                                    {Array(Math.max(0, manga.chapters.totalCount))
+                                    {chapters.map(({ id, sourceOrder, name, chapterNumber, scanlator }) => (
-                                        .fill(1)
+                                        <MenuItem
-                                        .map((ignoreValue, index) => (
+                                            key={id}
-                                            <MenuItem key={`Chapter#${index + 1}`} value={index + 1}>{`${t(
+                                            value={sourceOrder}
-                                                'chapter.title',
+                                        >{`#${chapterNumber}${chapterSelectShowScanlator && scanlator != null ? ` (${scanlator})` : ''} | ${name}`}</MenuItem>
-                                            )} ${index + 1}`}</MenuItem>
+                                    ))}
-                                        ))}
                                 </Select>
                             </FormControl>
                             <Tooltip title={t('reader.button.next_chapter')}>

src/screens/Reader.tsx

@@ -185,6 +185,11 @@ export function Reader() {
 
     const { settings: metadataSettings } = useMetadataServerSettings();
 
+    const uniqueChapters = useMemo(
+        () =>
+            settings.skipDupChapters ? Chapters.removeDuplicates(chapter, mangaChapters ?? []) : mangaChapters ?? [],
+        [chapter, mangaChapters, settings.skipDupChapters],
+    );
     const prevChapters = useMemo(
         () =>
             Chapters.getNextChapters(chapter, mangaChapters ?? [], {
@@ -380,17 +385,19 @@ export function Reader() {
                     setSettingValue={setSettingValue}
                     manga={manga}
                     chapter={chapter}
+                    chapters={uniqueChapters}
                     curPage={curPage}
                     scrollToPage={setPageToScrollTo}
                     openNextChapter={openNextChapter}
                     retrievingNextChapter={retrievingNextChapter}
+                    hasDuplicatedChapters={settings.skipDupChapters && mangaChapters?.length !== uniqueChapters.length}
                 />
             ),
         });
 
         // clean up for when we leave the reader
         return () => setOverride({ status: false, value: <div /> });
-    }, [manga, chapter, settings, curPage, chapterIndex, retrievingNextChapter, openNextChapter]);
+    }, [manga, chapter, settings, curPage, chapterIndex, retrievingNextChapter, openNextChapter, uniqueChapters]);
 
     useEffect(() => {
         if (!wasLastPageReadSet) {