Add setting to show duplicated library entries

src/App.tsx

@@ -44,6 +44,7 @@ const { Migrate } = loadable(() => import('@/screens/Migrate.tsx'), lazyLoadFall
 const { DeviceSetting } = loadable(() => import('@/components/settings/DeviceSetting.tsx'), lazyLoadFallback);
 const { TrackingSettings } = loadable(() => import('@/screens/settings/TrackingSettings.tsx'), lazyLoadFallback);
 const { TrackerOAuthLogin } = loadable(() => import('@/screens/TrackerOAuthLogin.tsx'), lazyLoadFallback);
+const { LibraryDuplicates } = loadable(() => import('@/screens/settings/LibraryDuplicates.tsx'), lazyLoadFallback);
 
 if (process.env.NODE_ENV !== 'production') {
     // Adds messages only in a dev environment
@@ -105,7 +106,10 @@ export const App: React.FC = () => (
                         <Route path="about" element={<About />} />
                         <Route path="categories" element={<Categories />} />
                         <Route path="defaultReaderSettings" element={<DefaultReaderSettings />} />
-                        <Route path="librarySettings" element={<LibrarySettings />} />
+                        <Route path="librarySettings">
+                            <Route index element={<LibrarySettings />} />
+                            <Route path="duplicates" element={<LibraryDuplicates />} />
+                        </Route>
                         <Route path="downloadSettings" element={<DownloadSettings />} />
                         <Route path="backup" element={<Backup />} />
                         <Route path="server" element={<ServerSettings />} />

src/components/manga/MangaBadges.tsx

@@ -74,10 +74,10 @@ export const MangaBadges = ({
                     {t('manga.button.in_library')}
                 </Typography>
             )}
-            {showUnreadBadge && (unread ?? 0) > 0 && (
+            {showUnreadBadge && mode === 'default' && (unread ?? 0) > 0 && (
                 <Typography sx={{ backgroundColor: 'primary.dark' }}>{unread}</Typography>
             )}
-            {showDownloadBadge && (downloadCount ?? 0) > 0 && (
+            {showDownloadBadge && mode === 'default' && (downloadCount ?? 0) > 0 && (
                 <Typography
                     sx={{
                         backgroundColor: 'success.dark',

src/screens/settings/LibraryDuplicates.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 { useContext, useEffect, useMemo } from 'react';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { MangaGrid } from '@/components/MangaGrid.tsx';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
+import { TManga } from '@/typings';
+import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { useLocalStorage } from '@/util/useStorage.tsx';
+import { GridLayout } from '@/components/context/LibraryOptionsContext.tsx';
+import { GridLayouts } from '@/components/source/GridLayouts.tsx';
+
+export const LibraryDuplicates = () => {
+    const { t } = useTranslation();
+
+    const [gridLayout, setGridLayout] = useLocalStorage('migrateGridLayout', GridLayout.List);
+
+    const { setTitle, setAction } = useContext(NavBarContext);
+    useEffect(() => {
+        setTitle(t('library.settings.advanced.duplicates.label.title'));
+        setAction(<GridLayouts gridLayout={gridLayout} onChange={setGridLayout} />);
+
+        return () => {
+            setTitle('');
+            setAction(null);
+        };
+    }, [t, gridLayout]);
+
+    const { data, loading, error, refetch } = requestManager.useGetMangas({ condition: { inLibrary: true } });
+
+    const duplicatedMangas = useMemo(() => {
+        const libraryMangas: TManga[] = data?.mangas.nodes ?? [];
+
+        const titleToMangas = Object.groupBy(libraryMangas, ({ title }) => title);
+
+        return Object.entries(titleToMangas)
+            .filter(([, mangasWithTitle]) => (mangasWithTitle?.length ?? 0) > 1)
+            .map(([, mangasWithTitle]) => mangasWithTitle ?? [])
+            .flat();
+    }, [data?.mangas.nodes]);
+
+    return (
+        <MangaGrid
+            mangas={duplicatedMangas}
+            hasNextPage={false}
+            loadMore={() => {}}
+            message={error ? t('manga.error.label.request_failure') : t('library.error.label.empty')}
+            messageExtra={error?.message}
+            isLoading={loading}
+            retry={error ? () => refetch().catch(defaultPromiseErrorHandler('LibraryDuplicates::refetch')) : undefined}
+            gridLayout={gridLayout}
+        />
+    );
+};

src/screens/settings/LibrarySettings.tsx

@@ -28,6 +28,7 @@ import { Mangas } from '@/lib/data/Mangas.ts';
 import { EmptyViewAbsoluteCentered } from '@/components/util/EmptyViewAbsoluteCentered.tsx';
 import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
 import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
+import { ListItemLink } from '@/components/util/ListItemLink.tsx';
 
 const removeNonLibraryMangasFromCategories = async (): Promise<void> => {
     try {
@@ -170,6 +171,12 @@ export function LibrarySettings() {
                         secondary={t('library.settings.advanced.database.cleanup.label.description')}
                     />
                 </ListItemButton>
+                <ListItemLink to="duplicates">
+                    <ListItemText
+                        primary={t('library.settings.advanced.duplicates.label.title')}
+                        secondary={t('library.settings.advanced.duplicates.label.description')}
+                    />
+                </ListItemLink>
             </List>
         </List>
     );