Rename folder "modules" to "features"

src/features/library/Library.types.ts

@@ -0,0 +1,66 @@
+/*
+ * 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 { NullAndUndefined } from '@/Base.types.ts';
+import { MangaStatus, MangaType, TrackerType } from '@/lib/graphql/generated/graphql.ts';
+import { GridLayout } from '@/features/core/Core.types.ts';
+
+export type MetadataLibrarySettings = {
+    showAddToLibraryCategorySelectDialog: boolean;
+    ignoreFilters: boolean;
+    removeMangaFromCategories: boolean;
+    showTabSize: boolean;
+    showContinueReadingButton: boolean;
+    showDownloadBadge: boolean;
+    showUnreadBadge: boolean;
+    gridLayout: GridLayout;
+};
+export type LibrarySortMode =
+    | 'unreadChapters'
+    | 'totalChapters'
+    | 'alphabetically'
+    | 'dateAdded'
+    | 'lastRead'
+    | 'latestFetchedChapter'
+    | 'latestUploadedChapter';
+
+export interface LibraryOptions {
+    // sort options
+    sortBy: NullAndUndefined<LibrarySortMode>;
+    sortDesc: NullAndUndefined<boolean>;
+
+    // filter options
+    hasDownloadedChapters: NullAndUndefined<boolean>;
+    hasBookmarkedChapters: NullAndUndefined<boolean>;
+    hasUnreadChapters: NullAndUndefined<boolean>;
+    hasReadChapters: NullAndUndefined<boolean>;
+    hasDuplicateChapters: NullAndUndefined<boolean>;
+    hasTrackerBinding: Record<TrackerType['id'], NullAndUndefined<boolean>>;
+    hasStatus: Record<MangaStatus, NullAndUndefined<boolean>>;
+}
+
+export type TMangaDuplicate = Pick<MangaType, 'id' | 'title' | 'description'>;
+
+export type TMangaDuplicates<Manga> = Record<string, Manga[]>;
+
+export type TMangaDuplicateResult<Manga> = { byTitle: Manga[]; byAlternativeTitle: Manga[] };
+
+export type LibraryDuplicatesWorkerInput<Manga extends TMangaDuplicate = TMangaDuplicate> = {
+    mangas: Manga[];
+    checkAlternativeTitles: boolean;
+};
+
+export type LibraryDuplicatesDescriptionWorkerInput<Manga extends TMangaDuplicate = TMangaDuplicate> = {
+    mangasToCheck: Manga[];
+    mangas: Manga[];
+};
+
+export type LibraryOptionsContextType = {
+    options: LibraryOptions;
+    setOptions: React.Dispatch<React.SetStateAction<LibraryOptions>>;
+};

src/features/library/components/LibraryMangaGrid.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 React, { useLayoutEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IMangaGridProps, MangaGrid } from '@/features/manga/components/MangaGrid.tsx';
+import { GridLayout } from '@/features/core/Core.types.ts';
+import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
+
+interface LibraryMangaGridProps
+    extends Required<Pick<IMangaGridProps, 'isSelectModeActive' | 'selectedMangaIds' | 'handleSelection' | 'mangas'>>,
+        Pick<IMangaGridProps, 'retry' | 'message' | 'messageExtra'> {
+    showFilteredOutMessage: boolean;
+    isLoading: boolean;
+}
+
+const loadMoreNoop = () => undefined;
+
+export const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({
+    showFilteredOutMessage,
+    message,
+    messageExtra,
+    ...gridProps
+}) => {
+    const { t } = useTranslation();
+
+    const {
+        settings: { gridLayout },
+    } = useMetadataServerSettings();
+
+    useLayoutEffect(() => {
+        document.body.style.overflowY = gridLayout === GridLayout.List ? 'auto' : 'scroll';
+        return () => {
+            document.body.style.overflowY = 'auto';
+        };
+    }, []);
+
+    return (
+        <MangaGrid
+            gridWrapperProps={{ sx: { p: 1 } }}
+            {...gridProps}
+            hasNextPage={false}
+            loadMore={loadMoreNoop}
+            message={showFilteredOutMessage ? t('library.error.label.no_matches') : message}
+            messageExtra={showFilteredOutMessage ? undefined : messageExtra}
+            gridLayout={gridLayout}
+        />
+    );
+};

src/features/library/components/LibraryOptionsPanel.tsx

@@ -0,0 +1,220 @@
+/*
+ * 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 FormLabel from '@mui/material/FormLabel';
+import RadioGroup from '@mui/material/RadioGroup';
+import { useTranslation } from 'react-i18next';
+import { CheckboxInput } from '@/features/core/components/inputs/CheckboxInput.tsx';
+import { RadioInput } from '@/features/core/components/inputs/RadioInput.tsx';
+import { SortRadioInput } from '@/features/core/components/inputs/SortRadioInput.tsx';
+import { ThreeStateCheckboxInput } from '@/features/core/components/inputs/ThreeStateCheckboxInput.tsx';
+import { OptionsTabs } from '@/features/core/components/modals/OptionsTabs.tsx';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { Trackers } from '@/features/tracker/services/Trackers.ts';
+import { GetTrackersSettingsQuery, MangaStatus } from '@/lib/graphql/generated/graphql.ts';
+import { GET_TRACKERS_SETTINGS } from '@/lib/graphql/queries/TrackerQuery.ts';
+import { createUpdateCategoryMetadata, useGetCategoryMetadata } from '@/features/category/services/CategoryMetadata.ts';
+import { makeToast } from '@/features/core/utils/Toast.ts';
+import {
+    createUpdateMetadataServerSettings,
+    updateMetadataServerSettings,
+    useMetadataServerSettings,
+} from '@/features/settings/services/ServerSettingsMetadata.ts';
+import { TranslationKey } from '@/Base.types.ts';
+import { LibrarySortMode } from '@/features/library/Library.types.ts';
+import { CategoryMetadataInfo } from '@/features/category/Category.types.ts';
+import { MANGA_STATUS_TO_TRANSLATION } from '@/features/manga/Manga.constants.ts';
+import { GridLayout } from '@/features/core/Core.types.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+
+const TITLES: { [key in 'filter' | 'sort' | 'display']: TranslationKey } = {
+    filter: 'global.label.filter',
+    sort: 'global.label.sort',
+    display: 'global.label.display',
+};
+
+const SORT_OPTIONS: [LibrarySortMode, TranslationKey][] = [
+    ['unreadChapters', 'library.option.sort.label.by_unread_chapters'],
+    ['totalChapters', 'library.option.sort.label.by_total_chapters'],
+    ['alphabetically', 'library.option.sort.label.alphabetically'],
+    ['dateAdded', 'library.option.sort.label.by_date_added'],
+    ['lastRead', 'library.option.sort.label.by_last_read'],
+    ['latestFetchedChapter', 'library.option.sort.label.by_latest_fetched_chapter'],
+    ['latestUploadedChapter', 'library.option.sort.label.by_latest_uploaded_chapter'],
+];
+
+export const LibraryOptionsPanel = ({
+    category,
+    open,
+    onClose,
+}: {
+    category: CategoryMetadataInfo;
+    open: boolean;
+    onClose: () => void;
+}) => {
+    const { t } = useTranslation();
+
+    const trackerList = requestManager.useGetTrackerList<GetTrackersSettingsQuery>(GET_TRACKERS_SETTINGS);
+    const loggedInTrackers = Trackers.getLoggedIn(trackerList.data?.trackers.nodes ?? []);
+
+    const categoryLibraryOptions = useGetCategoryMetadata(category);
+    const updateCategoryLibraryOptions = createUpdateCategoryMetadata(category, (e) =>
+        makeToast(t('global.error.label.failed_to_save_changes'), 'error', getErrorMessage(e)),
+    );
+
+    const {
+        settings: { showTabSize, showContinueReadingButton, showDownloadBadge, showUnreadBadge, gridLayout },
+    } = useMetadataServerSettings();
+    const setSettingValue = createUpdateMetadataServerSettings((e) =>
+        makeToast(t('search.error.label.failed_to_save_settings'), 'error', getErrorMessage(e)),
+    );
+
+    return (
+        <OptionsTabs<'filter' | 'sort' | 'display'>
+            open={open}
+            onClose={onClose}
+            tabs={['filter', 'sort', 'display']}
+            tabTitle={(key) => t(TITLES[key])}
+            tabContent={(key) => {
+                if (key === 'filter') {
+                    return (
+                        <>
+                            <ThreeStateCheckboxInput
+                                label={t('global.filter.label.unread')}
+                                checked={categoryLibraryOptions.hasUnreadChapters}
+                                onChange={(c) => updateCategoryLibraryOptions('hasUnreadChapters', c)}
+                            />
+                            <ThreeStateCheckboxInput
+                                label={t('global.filter.label.started')}
+                                checked={categoryLibraryOptions.hasReadChapters}
+                                onChange={(c) => updateCategoryLibraryOptions('hasReadChapters', c)}
+                            />
+                            <ThreeStateCheckboxInput
+                                label={t('global.filter.label.downloaded')}
+                                checked={categoryLibraryOptions.hasDownloadedChapters}
+                                onChange={(c) => updateCategoryLibraryOptions('hasDownloadedChapters', c)}
+                            />
+                            <ThreeStateCheckboxInput
+                                label={t('global.filter.label.bookmarked')}
+                                checked={categoryLibraryOptions.hasBookmarkedChapters}
+                                onChange={(c) => updateCategoryLibraryOptions('hasBookmarkedChapters', c)}
+                            />
+                            <ThreeStateCheckboxInput
+                                label={t('global.filter.label.duplicate_chapters')}
+                                checked={categoryLibraryOptions.hasDuplicateChapters}
+                                onChange={(c) => updateCategoryLibraryOptions('hasDuplicateChapters', c)}
+                            />
+                            <FormLabel sx={{ mt: 2 }}>{t('manga.label.status')}</FormLabel>
+                            {Object.values(MangaStatus).map((status) => (
+                                <ThreeStateCheckboxInput
+                                    key={status}
+                                    label={t(MANGA_STATUS_TO_TRANSLATION[status])}
+                                    checked={categoryLibraryOptions.hasStatus[status]}
+                                    onChange={(checked) =>
+                                        updateCategoryLibraryOptions('hasStatus', {
+                                            ...categoryLibraryOptions.hasStatus,
+                                            [status]: checked,
+                                        })
+                                    }
+                                />
+                            ))}
+                            <FormLabel sx={{ mt: 2 }}>{t('global.filter.label.tracked')}</FormLabel>
+                            {loggedInTrackers.map((tracker) => (
+                                <ThreeStateCheckboxInput
+                                    key={tracker.id}
+                                    label={tracker.name}
+                                    checked={categoryLibraryOptions.hasTrackerBinding[tracker.id]}
+                                    onChange={(checked) =>
+                                        updateCategoryLibraryOptions('hasTrackerBinding', {
+                                            ...categoryLibraryOptions.hasTrackerBinding,
+                                            [tracker.id]: checked,
+                                        })
+                                    }
+                                />
+                            ))}
+                        </>
+                    );
+                }
+                if (key === 'sort') {
+                    return SORT_OPTIONS.map(([mode, label]) => (
+                        <SortRadioInput
+                            key={mode}
+                            label={t(label)}
+                            checked={categoryLibraryOptions.sortBy === mode}
+                            sortDescending={categoryLibraryOptions.sortDesc}
+                            onClick={() =>
+                                mode !== categoryLibraryOptions.sortBy
+                                    ? updateCategoryLibraryOptions('sortBy', mode)
+                                    : updateCategoryLibraryOptions('sortDesc', !categoryLibraryOptions.sortDesc)
+                            }
+                        />
+                    ));
+                }
+                if (key === 'display') {
+                    return (
+                        <>
+                            <FormLabel>{t('global.grid_layout.title')}</FormLabel>
+                            <RadioGroup
+                                onChange={(e) => updateMetadataServerSettings('gridLayout', Number(e.target.value))}
+                                value={gridLayout}
+                            >
+                                <RadioInput
+                                    label={t('global.grid_layout.label.compact_grid')}
+                                    value={GridLayout.Compact}
+                                    checked={gridLayout == null || gridLayout === GridLayout.Compact}
+                                />
+                                <RadioInput
+                                    label={t('global.grid_layout.label.comfortable_grid')}
+                                    value={GridLayout.Comfortable}
+                                    checked={gridLayout === GridLayout.Comfortable}
+                                />
+                                <RadioInput
+                                    label={t('global.grid_layout.label.list')}
+                                    value={GridLayout.List}
+                                    checked={gridLayout === GridLayout.List}
+                                />
+                            </RadioGroup>
+
+                            <FormLabel sx={{ mt: 2 }}>{t('library.option.display.badge.title')}</FormLabel>
+                            <CheckboxInput
+                                label={t('library.option.display.badge.label.unread_badges')}
+                                checked={showUnreadBadge}
+                                onChange={() => updateMetadataServerSettings('showUnreadBadge', !showUnreadBadge)}
+                            />
+                            <CheckboxInput
+                                label={t('library.option.display.badge.label.download_badges')}
+                                checked={showDownloadBadge}
+                                onChange={() => updateMetadataServerSettings('showDownloadBadge', !showDownloadBadge)}
+                            />
+
+                            <FormLabel sx={{ mt: 2 }}>{t('library.option.display.tab.title')}</FormLabel>
+                            <CheckboxInput
+                                label={t('library.option.display.tab.label.show_number_of_items')}
+                                checked={showTabSize}
+                                onChange={() => setSettingValue('showTabSize', !showTabSize)}
+                            />
+
+                            <FormLabel sx={{ mt: 2 }}>{t('global.label.other')}</FormLabel>
+                            <CheckboxInput
+                                label={t('library.option.display.other.label.show_continue_reading_button')}
+                                checked={showContinueReadingButton}
+                                onChange={() =>
+                                    updateMetadataServerSettings(
+                                        'showContinueReadingButton',
+                                        !showContinueReadingButton,
+                                    )
+                                }
+                            />
+                        </>
+                    );
+                }
+                return null;
+            }}
+        />
+    );
+};

src/features/library/components/LibraryToolbarMenu.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 FilterList from '@mui/icons-material/FilterList';
+import IconButton from '@mui/material/IconButton';
+import { ComponentProps, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CustomTooltip } from '@/features/core/components/CustomTooltip.tsx';
+import { LibraryOptionsPanel } from '@/features/library/components/LibraryOptionsPanel.tsx';
+import { getCategoryMetadata } from '@/features/category/services/CategoryMetadata.ts';
+
+export const LibraryToolbarMenu = ({
+    category,
+}: {
+    category: ComponentProps<typeof LibraryOptionsPanel>['category'];
+}) => {
+    const { t } = useTranslation();
+
+    const [open, setOpen] = useState(false);
+    const options = getCategoryMetadata(category);
+    const active =
+        options.hasDownloadedChapters != null ||
+        options.hasUnreadChapters != null ||
+        options.hasReadChapters != null ||
+        options.hasBookmarkedChapters != null ||
+        options.hasDuplicateChapters != null ||
+        Object.values(options.hasStatus).some((hasStatus) => hasStatus != null) ||
+        Object.values(options.hasTrackerBinding).some((trackerFilterStatus) => trackerFilterStatus != null);
+
+    return (
+        <>
+            <CustomTooltip title={t('settings.title')}>
+                <IconButton onClick={() => setOpen(!open)} color={active ? 'warning' : 'inherit'}>
+                    <FilterList />
+                </IconButton>
+            </CustomTooltip>
+            <LibraryOptionsPanel category={category} open={open} onClose={() => setOpen(false)} />
+        </>
+    );
+};

src/features/library/hooks/useGetVisibleLibraryMangas.ts

@@ -0,0 +1,279 @@
+/*
+ * 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 { StringParam, useQueryParam } from 'use-query-params';
+import { useMemo } from 'react';
+import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
+import { ChapterType, MangaType, TrackRecordType } from '@/lib/graphql/generated/graphql.ts';
+import { enhancedCleanup } from '@/util/Strings.ts';
+import { useGetCategoryMetadata } from '@/features/category/services/CategoryMetadata.ts';
+import { NullAndUndefined } from '@/Base.types.ts';
+import { LibraryOptions, LibrarySortMode } from '@/features/library/Library.types.ts';
+import { CategoryIdInfo, CategoryMetadataInfo } from '@/features/category/Category.types.ts';
+import {
+    MangaChapterCountInfo,
+    MangaDownloadInfo,
+    MangaIdInfo,
+    MangaStatusInfo,
+    MangaUnreadInfo,
+} from '@/features/manga/Manga.types.ts';
+import { SourceDisplayNameInfo } from '@/features/source/Source.types.ts';
+import { SearchParam } from '@/features/core/Core.types.ts';
+
+const triStateFilter = (
+    triState: NullAndUndefined<boolean>,
+    enabledFilter: () => boolean,
+    disabledFilter: () => boolean,
+): boolean => {
+    switch (triState) {
+        case true:
+            return enabledFilter();
+        case false:
+            return disabledFilter();
+        default:
+            return true;
+    }
+};
+
+const triStateFilterNumber = (triState: NullAndUndefined<boolean>, count?: number): boolean =>
+    triStateFilter(
+        triState,
+        () => !!count && count >= 1,
+        () => count === 0,
+    );
+
+const triStateFilterBoolean = (triState: NullAndUndefined<boolean>, status?: boolean): boolean =>
+    triStateFilter(
+        triState,
+        () => !!status,
+        () => !status,
+    );
+
+const performSearch = (
+    queries: NullAndUndefined<string>[] | undefined,
+    strings: NullAndUndefined<string>[],
+): boolean => {
+    const actualQueries = queries?.filter((query) => query != null);
+    const actualStrings = strings?.filter((str) => str != null);
+
+    if (!actualQueries?.length) return true;
+
+    const cleanedUpQueries = actualQueries.map(enhancedCleanup);
+    const cleanedUpStrings = actualStrings.map(enhancedCleanup).join(', ');
+
+    return cleanedUpQueries.every((query) => cleanedUpStrings.includes(query));
+};
+
+type TMangaQueryFilter = Pick<MangaType, 'title' | 'genre' | 'description' | 'artist' | 'author' | 'sourceId'> & {
+    source?: NullAndUndefined<SourceDisplayNameInfo>;
+};
+const querySearchManga = (
+    query: NullAndUndefined<string>,
+    { title, genre: genres, description, artist, author, source, sourceId }: TMangaQueryFilter,
+): boolean =>
+    performSearch([query], [title]) ||
+    performSearch(
+        query?.split(','),
+        genres.map((genre) => enhancedCleanup(genre)),
+    ) ||
+    performSearch([query], [description]) ||
+    performSearch([query], [artist]) ||
+    performSearch([query], [author]) ||
+    performSearch([query], [source?.displayName]) ||
+    performSearch([query], [sourceId]);
+
+type TMangaTrackerFilter = { trackRecords: { nodes: Pick<TrackRecordType, 'id' | 'trackerId'>[] } };
+const trackerFilter = (trackFilters: LibraryOptions['hasTrackerBinding'], manga: TMangaTrackerFilter): boolean =>
+    Object.entries(trackFilters)
+        .map(([trackFilterId, trackFilterState]) => {
+            const isTrackerBound = manga.trackRecords.nodes.some(
+                (trackRecord) => trackRecord.trackerId === Number(trackFilterId),
+            );
+
+            return triStateFilter(
+                trackFilterState,
+                () => isTrackerBound,
+                () => !isTrackerBound,
+            );
+        })
+        .every(Boolean);
+
+const statusFilter = (statusFilters: LibraryOptions['hasStatus'], manga: MangaStatusInfo): boolean =>
+    Object.entries(statusFilters)
+        .map(([status, statusFilterState]) => triStateFilterBoolean(statusFilterState, status === manga.status))
+        .every(Boolean);
+
+type TMangaFilterOptions = Pick<
+    LibraryOptions,
+    | 'hasUnreadChapters'
+    | 'hasReadChapters'
+    | 'hasDownloadedChapters'
+    | 'hasBookmarkedChapters'
+    | 'hasDuplicateChapters'
+    | 'hasTrackerBinding'
+    | 'hasStatus'
+>;
+type TMangaFilter = Pick<MangaType, 'bookmarkCount' | 'hasDuplicateChapters'> &
+    TMangaTrackerFilter &
+    MangaStatusInfo &
+    MangaChapterCountInfo &
+    MangaDownloadInfo &
+    MangaUnreadInfo;
+const filterManga = (
+    manga: TMangaFilter,
+    {
+        hasDownloadedChapters,
+        hasUnreadChapters,
+        hasReadChapters,
+        hasBookmarkedChapters,
+        hasDuplicateChapters,
+        hasTrackerBinding,
+        hasStatus,
+    }: TMangaFilterOptions,
+): boolean =>
+    triStateFilterNumber(hasDownloadedChapters, manga.downloadCount) &&
+    triStateFilterNumber(hasUnreadChapters, manga.unreadCount) &&
+    triStateFilterNumber(hasReadChapters, manga.chapters.totalCount - manga.unreadCount) &&
+    triStateFilterNumber(hasBookmarkedChapters, manga.bookmarkCount) &&
+    triStateFilterBoolean(hasDuplicateChapters, manga.hasDuplicateChapters) &&
+    trackerFilter(hasTrackerBinding, manga) &&
+    statusFilter(hasStatus, manga);
+
+type TMangasFilter = TMangaQueryFilter & TMangaFilter;
+const filterMangas = <Manga extends TMangasFilter>(
+    mangas: Manga[],
+    query: NullAndUndefined<string>,
+    options: TMangaFilterOptions & { ignoreFilters: boolean },
+): Manga[] => {
+    const ignoreFiltersWhileSearching = options.ignoreFilters && query?.length;
+
+    return mangas.filter((manga) => {
+        const matchesSearch = querySearchManga(query, manga);
+        const matchesFilters = ignoreFiltersWhileSearching || filterManga(manga, options);
+
+        return matchesSearch && matchesFilters;
+    });
+};
+
+const sortByNumber = (a: number | string = 0, b: number | string = 0) => Number(a) - Number(b);
+
+const sortByString = (a: string, b: string): number => a.localeCompare(b);
+
+type TMangaSort = Pick<MangaType, 'title' | 'inLibraryAt' | 'unreadCount'> &
+    MangaChapterCountInfo & {
+        lastReadChapter?: Pick<ChapterType, 'lastReadAt'> | null;
+        latestUploadedChapter?: Pick<ChapterType, 'uploadDate'> | null;
+        latestFetchedChapter?: Pick<ChapterType, 'fetchedAt'> | null;
+    };
+const sortManga = <Manga extends TMangaSort>(
+    manga: Manga[],
+    sort: NullAndUndefined<LibrarySortMode>,
+    desc: NullAndUndefined<boolean>,
+): Manga[] => {
+    const result = [...manga];
+
+    switch (sort) {
+        case 'alphabetically':
+            result.sort((a, b) => sortByString(a.title, b.title));
+            break;
+        case 'dateAdded':
+            result.sort((a, b) => sortByNumber(a.inLibraryAt, b.inLibraryAt));
+            break;
+        case 'unreadChapters':
+            result.sort((a, b) => sortByNumber(a.unreadCount, b.unreadCount));
+            break;
+        case 'lastRead':
+            result.sort((a, b) => sortByNumber(a.lastReadChapter?.lastReadAt, b.lastReadChapter?.lastReadAt));
+            break;
+        case 'latestUploadedChapter':
+            result.sort((a, b) =>
+                sortByNumber(a.latestUploadedChapter?.uploadDate, b.latestUploadedChapter?.uploadDate),
+            );
+            break;
+        case 'latestFetchedChapter':
+            result.sort((a, b) => sortByNumber(a.latestFetchedChapter?.fetchedAt, b.latestFetchedChapter?.fetchedAt));
+            break;
+        case 'totalChapters':
+            result.sort((a, b) => sortByNumber(a.chapters.totalCount, b.chapters.totalCount));
+            break;
+        default:
+            break;
+    }
+
+    if (desc) {
+        result.reverse();
+    }
+
+    return result;
+};
+
+const DEFAULT_CATEGORY: CategoryIdInfo = { id: -1 };
+export const useGetVisibleLibraryMangas = <Manga extends MangaIdInfo & TMangasFilter & TMangaSort>(
+    mangas: Manga[],
+    category?: CategoryMetadataInfo,
+): {
+    visibleMangas: Manga[];
+    showFilteredOutMessage: boolean;
+    filterKey: string;
+} => {
+    const [query] = useQueryParam(SearchParam.QUERY, StringParam);
+    const options = useGetCategoryMetadata(category ?? DEFAULT_CATEGORY);
+    const {
+        hasUnreadChapters,
+        hasReadChapters,
+        hasDownloadedChapters,
+        hasBookmarkedChapters,
+        hasTrackerBinding,
+        hasDuplicateChapters,
+        hasStatus,
+    } = options;
+    const { settings } = useMetadataServerSettings();
+
+    const filteredMangas = useMemo(
+        () =>
+            filterMangas(mangas, query, {
+                ...options,
+                ignoreFilters: settings.ignoreFilters,
+            }),
+        [
+            mangas,
+            query,
+            hasUnreadChapters,
+            hasReadChapters,
+            hasDownloadedChapters,
+            hasBookmarkedChapters,
+            hasTrackerBinding,
+            hasDuplicateChapters,
+            hasStatus,
+            settings.ignoreFilters,
+        ],
+    );
+    const sortedMangas = useMemo(
+        () => sortManga(filteredMangas, options.sortBy, options.sortDesc),
+        [filteredMangas, options.sortBy, options.sortDesc],
+    );
+
+    const isATrackFilterActive = Object.values(options.hasTrackerBinding).some(
+        (trackFilterState) => trackFilterState != null,
+    );
+    const showFilteredOutMessage =
+        (hasUnreadChapters != null ||
+            hasReadChapters != null ||
+            hasDownloadedChapters != null ||
+            hasBookmarkedChapters != null ||
+            !!query ||
+            isATrackFilterActive) &&
+        filteredMangas.length === 0 &&
+        mangas.length > 0;
+
+    return {
+        visibleMangas: sortedMangas,
+        showFilteredOutMessage,
+        filterKey: `${JSON.stringify(options)}${settings.ignoreFilters}`,
+    };
+};

src/features/library/screens/Library.tsx

@@ -0,0 +1,324 @@
+/*
+ * 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 Chip, { ChipProps } from '@mui/material/Chip';
+import Tab from '@mui/material/Tab';
+import { styled } from '@mui/material/styles';
+import { useCallback, useMemo, useState } from 'react';
+import { useQueryParam, NumberParam, StringParam } from 'use-query-params';
+import { useTranslation } from 'react-i18next';
+import Button from '@mui/material/Button';
+import { Link } from 'react-router-dom';
+import Box from '@mui/material/Box';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
+import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder.tsx';
+import { TabPanel } from '@/features/core/components/tabs/TabPanel.tsx';
+import { LibraryToolbarMenu } from '@/features/library/components/LibraryToolbarMenu.tsx';
+import { LibraryMangaGrid } from '@/features/library/components/LibraryMangaGrid.tsx';
+import { AppbarSearch } from '@/features/core/components/AppbarSearch.tsx';
+import { UpdateChecker } from '@/features/core/components/UpdateChecker.tsx';
+import { useSelectableCollection } from '@/features/collection/hooks/useSelectableCollection.ts';
+import { SelectableCollectionSelectMode } from '@/features/collection/components/SelectableCollectionSelectMode.tsx';
+import { useGetVisibleLibraryMangas } from '@/features/library/hooks/useGetVisibleLibraryMangas.ts';
+import { SelectionFAB } from '@/features/collection/components/SelectionFAB.tsx';
+import { MangaActionMenuItems } from '@/features/manga/components/MangaActionMenuItems.tsx';
+import { TabsMenu } from '@/features/core/components/tabs/TabsMenu.tsx';
+import { TabsWrapper } from '@/features/core/components/tabs/TabsWrapper.tsx';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import {
+    GetCategoriesLibraryQuery,
+    GetCategoriesLibraryQueryVariables,
+    GetLibraryMangaCountQuery,
+    GetLibraryMangaCountQueryVariables,
+    MangaChapterStatFieldsFragment,
+    MangaType,
+} from '@/lib/graphql/generated/graphql.ts';
+import { GET_CATEGORIES_LIBRARY } from '@/lib/graphql/queries/CategoryQuery.ts';
+import { Mangas } from '@/features/manga/services/Mangas.ts';
+import { MANGA_CHAPTER_STAT_FIELDS } from '@/lib/graphql/fragments/MangaFragments.ts';
+import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
+import { GET_LIBRARY_MANGA_COUNT } from '@/lib/graphql/queries/MangaQuery.ts';
+import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
+import { useAppAction } from '@/features/navigation-bar/hooks/useAppAction.ts';
+import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
+import { SearchParam } from '@/features/core/Core.types.ts';
+
+const TitleWithSizeTag = styled('span')({
+    display: 'flex',
+    alignItems: 'center',
+});
+
+const TitleSizeTag = ({ sx, ...props }: ChipProps) => (
+    <Chip {...props} size="small" sx={{ ...sx, marginLeft: '5px' }} />
+);
+
+export function Library() {
+    const { t } = useTranslation();
+
+    const {
+        settings: { showTabSize },
+    } = useMetadataServerSettings();
+
+    const {
+        data: categoriesResponse,
+        error: tabsError,
+        loading: areCategoriesLoading,
+        refetch: refetchCategories,
+    } = requestManager.useGetCategories<GetCategoriesLibraryQuery, GetCategoriesLibraryQueryVariables>(
+        GET_CATEGORIES_LIBRARY,
+        {
+            notifyOnNetworkStatusChange: true,
+        },
+    );
+    const tabsData = categoriesResponse?.categories.nodes.filter(
+        (category) => category.id !== 0 || (category.id === 0 && category.mangas.totalCount),
+    );
+    const tabs = tabsData ?? [];
+
+    const librarySizeResponse = requestManager.useGetMangas<
+        GetLibraryMangaCountQuery,
+        GetLibraryMangaCountQueryVariables
+    >(GET_LIBRARY_MANGA_COUNT, {});
+
+    const librarySize = librarySizeResponse.data?.mangas.totalCount ?? 0;
+
+    const [tabSearchParam, setTabSearchParam] = useQueryParam(SearchParam.TAB, NumberParam);
+    const [query] = useQueryParam(SearchParam.QUERY, StringParam);
+
+    const activeTab: (typeof tabs)[number] | undefined = tabs.find((tab) => tab.id === tabSearchParam) ?? tabs[0];
+
+    const {
+        data: categoryMangaResponse,
+        error: mangaError,
+        loading: mangaLoading,
+        refetch: refetchCategoryMangas,
+    } = requestManager.useGetCategoryMangas(activeTab?.id, { skip: !activeTab, notifyOnNetworkStatusChange: true });
+    const categoryMangas = categoryMangaResponse?.mangas.nodes ?? [];
+    const {
+        visibleMangas: mangas,
+        showFilteredOutMessage,
+        filterKey,
+    } = useGetVisibleLibraryMangas(categoryMangas, activeTab);
+
+    const retryFetchCategoryMangas = useCallback(
+        () => refetchCategoryMangas().catch(defaultPromiseErrorHandler('Library::refetchCategoryMangas')),
+        [refetchCategoryMangas, activeTab],
+    );
+
+    const mangaIds = useMemo(() => mangas.map((manga) => manga.id), [mangas]);
+
+    const [isSelectModeActive, setIsSelectModeActive] = useState(false);
+    const {
+        areNoItemsForKeySelected: areNoItemsSelected,
+        areAllItemsForKeySelected: areAllItemsSelected,
+        selectedItemIds,
+        handleSelectAll,
+        handleSelection,
+        clearSelection,
+    } = useSelectableCollection<MangaType['id'], string>(mangas.length, {
+        itemIds: mangaIds,
+        currentKey: activeTab?.id.toString(),
+    });
+
+    const handleSelect: typeof handleSelection = useCallback(
+        (id, selected, selectOptions) => {
+            setIsSelectModeActive(!!(selectedItemIds.length + (selected ? 1 : -1)));
+            handleSelection(id, selected, selectOptions);
+        },
+        [setIsSelectModeActive, handleSelection],
+    );
+
+    const selectedMangas = useMemo(
+        () =>
+            selectedItemIds
+                .map((id) =>
+                    Mangas.getFromCache<MangaChapterStatFieldsFragment>(
+                        id,
+                        MANGA_CHAPTER_STAT_FIELDS,
+                        'MANGA_CHAPTER_STAT_FIELDS',
+                    ),
+                )
+                .filter((manga) => !!manga),
+        [selectedItemIds.length, mangas],
+    );
+
+    const selectionFab = useMemo(() => {
+        if (!isSelectModeActive) {
+            return null;
+        }
+
+        return (
+            <SelectionFAB selectedItemsCount={selectedItemIds.length} title="manga.title">
+                {(handleClose, setHideMenu) => (
+                    <MangaActionMenuItems
+                        selectedMangas={selectedMangas}
+                        onClose={() => {
+                            handleClose();
+                            setIsSelectModeActive(false);
+                            clearSelection();
+                        }}
+                        setHideMenu={setHideMenu}
+                    />
+                )}
+            </SelectionFAB>
+        );
+    }, [isSelectModeActive, selectedMangas]);
+
+    const triggerGlobalSearchButton = useMemo(
+        () =>
+            !!query && (
+                <Box sx={{ p: 2 }}>
+                    <Button
+                        size="large"
+                        component={Link}
+                        to={AppRoutes.sources.childRoutes.searchAll.path(query)}
+                        sx={{ textTransform: 'none', width: '100%' }}
+                    >
+                        {t('library.action.label.search_globally', { query })}
+                    </Button>
+                </Box>
+            ),
+        [query],
+    );
+
+    useAppTitle(
+        <TitleWithSizeTag>
+            {t('library.title')}
+            {showTabSize && <TitleSizeTag sx={{ color: 'inherit' }} label={librarySize} />}
+        </TitleWithSizeTag>,
+        t('library.title'),
+        [t, showTabSize, librarySize],
+    );
+    useAppAction(
+        <>
+            {!isSelectModeActive && activeTab && (
+                <>
+                    <AppbarSearch />
+                    <LibraryToolbarMenu category={activeTab} />
+                    <UpdateChecker categoryId={activeTab?.id} />
+                </>
+            )}
+            {!!mangas.length && (
+                <SelectableCollectionSelectMode
+                    isActive={isSelectModeActive}
+                    areAllItemsSelected={areAllItemsSelected}
+                    areNoItemsSelected={areNoItemsSelected}
+                    onSelectAll={(selectAll) =>
+                        handleSelectAll(selectAll, [...new Set(mangas.map((manga) => manga.id))])
+                    }
+                    onModeChange={(checked) => {
+                        setIsSelectModeActive(checked);
+
+                        if (checked) {
+                            handleSelectAll(true, [...new Set(mangas.map((manga) => manga.id))]);
+                        } else {
+                            tabs.forEach((tab) => handleSelectAll(false, [], tab.id.toString()));
+                        }
+                    }}
+                />
+            )}
+        </>,
+        [isSelectModeActive, areNoItemsSelected, areAllItemsSelected, activeTab, mangas.length],
+    );
+
+    const handleTabChange = (newTab: number) => {
+        setTabSearchParam(newTab);
+    };
+
+    if (tabsError != null || librarySizeResponse.error) {
+        return (
+            <EmptyViewAbsoluteCentered
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={tabsError?.message ?? librarySizeResponse.error?.message}
+                retry={() => {
+                    if (tabsError) {
+                        refetchCategories().catch(defaultPromiseErrorHandler('Library::refetchCategories'));
+                    }
+
+                    if (librarySizeResponse.error) {
+                        librarySizeResponse.refetch().catch(defaultPromiseErrorHandler('Library::refetchLibrarySize'));
+                    }
+                }}
+            />
+        );
+    }
+
+    if (areCategoriesLoading || librarySizeResponse.loading) {
+        return <LoadingPlaceholder />;
+    }
+
+    if (tabs.length === 0) {
+        return <EmptyViewAbsoluteCentered message={t('library.error.label.empty')} />;
+    }
+
+    if (tabs.length === 1) {
+        return (
+            <>
+                {triggerGlobalSearchButton}
+                <LibraryMangaGrid
+                    // the key needs to include filters and query to force a re-render of the virtuoso grid to prevent https://github.com/petyosi/react-virtuoso/issues/1242
+                    key={filterKey}
+                    mangas={mangas}
+                    message={mangaError ? t('manga.error.label.request_failure') : t('library.error.label.empty')}
+                    messageExtra={mangaError?.message}
+                    isLoading={mangaLoading}
+                    selectedMangaIds={selectedItemIds}
+                    isSelectModeActive={isSelectModeActive}
+                    handleSelection={handleSelect}
+                    showFilteredOutMessage={!mangaError && showFilteredOutMessage}
+                    retry={mangaError && retryFetchCategoryMangas}
+                />
+                {selectionFab}
+            </>
+        );
+    }
+
+    return (
+        <TabsWrapper>
+            <TabsMenu value={activeTab.id} onChange={(e, newTab) => handleTabChange(newTab)}>
+                {tabs.map((tab) => (
+                    <Tab
+                        sx={{ flexGrow: 1, maxWidth: 'unset' }}
+                        key={tab.id}
+                        label={
+                            <TitleWithSizeTag>
+                                {tab.name}
+                                {showTabSize ? <TitleSizeTag label={tab.mangas.totalCount} /> : null}
+                            </TitleWithSizeTag>
+                        }
+                        value={tab.id}
+                    />
+                ))}
+            </TabsMenu>
+            {triggerGlobalSearchButton}
+            {tabs.map((tab) => (
+                <TabPanel key={tab.order} index={tab.order} currentIndex={activeTab.order}>
+                    {tab === activeTab && (
+                        <LibraryMangaGrid
+                            // the key needs to include filters and query to force a re-render of the virtuoso grid to prevent https://github.com/petyosi/react-virtuoso/issues/1242
+                            key={filterKey}
+                            mangas={mangas}
+                            message={
+                                mangaError ? t('manga.error.label.request_failure') : t('category.error.label.empty')
+                            }
+                            messageExtra={mangaError?.message}
+                            isLoading={mangaLoading}
+                            selectedMangaIds={selectedItemIds}
+                            isSelectModeActive={isSelectModeActive}
+                            handleSelection={handleSelect}
+                            showFilteredOutMessage={!mangaError && showFilteredOutMessage}
+                            retry={mangaError && retryFetchCategoryMangas}
+                        />
+                    )}
+                </TabPanel>
+            ))}
+            {selectionFab}
+        </TabsWrapper>
+    );
+}

src/features/library/screens/LibraryDuplicates.tsx

@@ -0,0 +1,188 @@
+/*
+ * 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 { useCallback, useEffect, useMemo, useState } from 'react';
+import IconButton from '@mui/material/IconButton';
+import SettingsIcon from '@mui/icons-material/Settings';
+import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { useLocalStorage } from '@/features/core/hooks/useStorage.tsx';
+import { GridLayouts } from '@/features/core/components/GridLayouts.tsx';
+import { CheckboxInput } from '@/features/core/components/inputs/CheckboxInput.tsx';
+import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder.tsx';
+import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { MangaCard } from '@/features/manga/components/cards/MangaCard.tsx';
+import { StyledGroupedVirtuoso } from '@/features/core/components/virtuoso/StyledGroupedVirtuoso.tsx';
+import { StyledGroupHeader } from '@/features/core/components/virtuoso/StyledGroupHeader.tsx';
+import { GetMangasDuplicatesQuery, GetMangasDuplicatesQueryVariables } from '@/lib/graphql/generated/graphql.ts';
+import { GET_MANGAS_DUPLICATES } from '@/lib/graphql/queries/MangaQuery.ts';
+import { BaseMangaGrid } from '@/features/manga/components/BaseMangaGrid.tsx';
+import { IMangaGridProps } from '@/features/manga/components/MangaGrid.tsx';
+import { StyledGroupItemWrapper } from '@/features/core/components/virtuoso/StyledGroupItemWrapper.tsx';
+import { VirtuosoUtil } from '@/lib/virtuoso/Virtuoso.util.tsx';
+import { LibraryDuplicatesWorkerInput, TMangaDuplicate, TMangaDuplicates } from '@/features/library/Library.types.ts';
+import { GridLayout } from '@/features/core/Core.types.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { useAppTitleAndAction } from '@/features/navigation-bar/hooks/useAppTitleAndAction.ts';
+
+export const LibraryDuplicates = () => {
+    const { t } = useTranslation();
+
+    const [gridLayout, setGridLayout] = useLocalStorage('libraryDuplicatesGridLayout', GridLayout.List);
+    const [checkAlternativeTitles, setCheckAlternativeTitles] = useLocalStorage(
+        'libraryDuplicatesCheckAlternativeTitles',
+        false,
+    );
+
+    useAppTitleAndAction(
+        t('library.settings.advanced.duplicates.label.title'),
+        <>
+            <GridLayouts gridLayout={gridLayout} onChange={setGridLayout} />
+            <PopupState variant="popover" popupId="library-dupliactes-settings">
+                {(popupState) => (
+                    <>
+                        <IconButton {...bindTrigger(popupState)} color="inherit">
+                            <SettingsIcon />
+                        </IconButton>
+                        <Menu {...bindMenu(popupState)}>
+                            <MenuItem>
+                                <CheckboxInput
+                                    label={t('library.settings.advanced.duplicates.settings.label.check_description')}
+                                    checked={checkAlternativeTitles}
+                                    onChange={(_, checked) => setCheckAlternativeTitles(checked)}
+                                />
+                            </MenuItem>
+                        </Menu>
+                    </>
+                )}
+            </PopupState>
+        </>,
+        [t, gridLayout, checkAlternativeTitles],
+    );
+
+    const { data, loading, error, refetch } = requestManager.useGetMangas<
+        GetMangasDuplicatesQuery,
+        GetMangasDuplicatesQueryVariables
+    >(GET_MANGAS_DUPLICATES, { condition: { inLibrary: true } });
+
+    const [isCheckingForDuplicates, setIsCheckingForDuplicates] = useState(true);
+
+    const [mangasByTitle, setMangasByTitle] = useState<Record<string, TMangaDuplicate[]>>({});
+    useEffect(() => {
+        setIsCheckingForDuplicates(true);
+        const libraryMangas: TMangaDuplicate[] = data?.mangas.nodes ?? [];
+
+        if (!libraryMangas.length) {
+            setMangasByTitle({});
+            return () => {};
+        }
+
+        const worker = new Worker(new URL('../workers/LibraryDuplicatesWorker.ts', import.meta.url), {
+            type: 'module',
+        });
+
+        worker.onmessage = (event: MessageEvent<TMangaDuplicates<(typeof libraryMangas)[number]>>) => {
+            setMangasByTitle(event.data);
+            setIsCheckingForDuplicates(false);
+        };
+        worker.postMessage({ mangas: libraryMangas, checkAlternativeTitles } satisfies LibraryDuplicatesWorkerInput);
+
+        return () => worker.terminate();
+    }, [data?.mangas.nodes, checkAlternativeTitles]);
+
+    const duplicatedTitles = useMemo(
+        () => Object.keys(mangasByTitle).toSorted((titleA, titleB) => titleA.localeCompare(titleB)),
+        [mangasByTitle],
+    );
+    const duplicatedMangas = useMemo(
+        () => duplicatedTitles.map((title) => mangasByTitle[title]).flat(),
+        [mangasByTitle],
+    );
+    const mangasCountByTitle = useMemo(
+        () => duplicatedTitles.map((title) => mangasByTitle[title]).map((mangas) => mangas.length),
+        [mangasByTitle],
+    );
+
+    const computeItemKey = VirtuosoUtil.useCreateGroupedComputeItemKey(
+        mangasCountByTitle,
+        useCallback((index) => duplicatedTitles[index], [duplicatedTitles]),
+        useCallback(
+            (index, groupIndex) => `${duplicatedTitles[groupIndex]}-${duplicatedMangas[index].id}}`,
+            [duplicatedTitles, duplicatedMangas],
+        ),
+    );
+
+    if (loading || isCheckingForDuplicates) {
+        return <LoadingPlaceholder />;
+    }
+
+    if (error) {
+        return (
+            <EmptyViewAbsoluteCentered
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={getErrorMessage(error)}
+                retry={() => refetch().catch(defaultPromiseErrorHandler('LibraryDuplicates::refetch'))}
+            />
+        );
+    }
+
+    if (gridLayout === GridLayout.List) {
+        return (
+            <StyledGroupedVirtuoso
+                persistKey="library-duplicates"
+                groupCounts={mangasCountByTitle}
+                groupContent={(index) => (
+                    <StyledGroupHeader isFirstItem={index === 0}>
+                        <Typography variant="h5" component="h2">
+                            {duplicatedTitles[index]}
+                        </Typography>
+                    </StyledGroupHeader>
+                )}
+                computeItemKey={computeItemKey}
+                itemContent={(index) => (
+                    <StyledGroupItemWrapper>
+                        <MangaCard
+                            manga={duplicatedMangas[index] as IMangaGridProps['mangas'][number]}
+                            gridLayout={gridLayout}
+                            selected={null}
+                            mode="duplicate"
+                        />
+                    </StyledGroupItemWrapper>
+                )}
+            />
+        );
+    }
+
+    return duplicatedTitles.map((title, index) => (
+        <Box key={title}>
+            <StyledGroupHeader sx={{ pt: index === 0 ? undefined : 0, pb: 0 }} isFirstItem={false}>
+                <Typography variant="h5" component="h2">
+                    {title}
+                </Typography>
+            </StyledGroupHeader>
+            <BaseMangaGrid
+                // the key needs to include filters and query to force a re-render of the virtuoso grid to prevent https://github.com/petyosi/react-virtuoso/issues/1242
+                key={checkAlternativeTitles.toString()}
+                mangas={mangasByTitle[title] as IMangaGridProps['mangas']}
+                hasNextPage={false}
+                loadMore={() => {}}
+                isLoading={false}
+                gridLayout={gridLayout}
+                inLibraryIndicator={false}
+                horizontal
+                mode="duplicate"
+            />
+        </Box>
+    ));
+};

src/features/library/screens/LibrarySettings.tsx

@@ -0,0 +1,204 @@
+/*
+ * 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 List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import Switch from '@mui/material/Switch';
+import ListSubheader from '@mui/material/ListSubheader';
+import { t as translate } from 'i18next';
+import { GlobalUpdateSettings } from '@/features/settings/components/globalUpdate/GlobalUpdateSettings.tsx';
+import { makeToast } from '@/features/core/utils/Toast.ts';
+import {
+    createUpdateMetadataServerSettings,
+    useMetadataServerSettings,
+} from '@/features/settings/services/ServerSettingsMetadata.ts';
+import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { Mangas } from '@/features/manga/services/Mangas.ts';
+import { EmptyViewAbsoluteCentered } from '@/features/core/components/feedback/EmptyViewAbsoluteCentered.tsx';
+import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
+import { LoadingPlaceholder } from '@/features/core/components/feedback/LoadingPlaceholder.tsx';
+import { ListItemLink } from '@/features/core/components/lists/ListItemLink.tsx';
+import {
+    GetCategoriesSettingsQuery,
+    GetCategoriesSettingsQueryVariables,
+    GetMangasBaseQuery,
+    GetMangasBaseQueryVariables,
+} from '@/lib/graphql/generated/graphql.ts';
+import { GET_CATEGORIES_SETTINGS } from '@/lib/graphql/queries/CategoryQuery.ts';
+import { GET_MANGAS_BASE } from '@/lib/graphql/queries/MangaQuery.ts';
+import { MetadataLibrarySettings } from '@/features/library/Library.types.ts';
+import { AppRoutes } from '@/features/core/AppRoute.constants.ts';
+import { getErrorMessage } from '@/lib/HelperFunctions.ts';
+import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
+
+const removeNonLibraryMangasFromCategories = async (): Promise<void> => {
+    try {
+        const nonLibraryMangas = await requestManager.getMangas<GetMangasBaseQuery, GetMangasBaseQueryVariables>(
+            GET_MANGAS_BASE,
+            {
+                filter: { inLibrary: { equalTo: false }, categoryId: { isNull: false } },
+            },
+            { fetchPolicy: 'no-cache' },
+        ).response;
+
+        const mangaIdsToRemove = Mangas.getIds(nonLibraryMangas.data.mangas.nodes);
+
+        if (mangaIdsToRemove.length) {
+            await requestManager.updateMangasCategories(mangaIdsToRemove, {
+                clearCategories: true,
+            }).response;
+        }
+        makeToast(translate('library.settings.advanced.database.cleanup.label.success'), 'success');
+    } catch (e) {
+        makeToast(translate('library.settings.advanced.database.cleanup.label.error'), 'error', getErrorMessage(e));
+    }
+};
+
+export function LibrarySettings() {
+    const { t } = useTranslation();
+
+    useAppTitle(t('library.title'));
+
+    const categories = requestManager.useGetCategories<GetCategoriesSettingsQuery, GetCategoriesSettingsQueryVariables>(
+        GET_CATEGORIES_SETTINGS,
+    );
+    const serverSettings = requestManager.useGetServerSettings({ notifyOnNetworkStatusChange: true });
+    const {
+        settings,
+        loading: areMetadataServerSettingsLoading,
+        request: { error: metadataServerSettingsError, refetch: refetchMetadataServerSettings },
+    } = useMetadataServerSettings();
+
+    const setSettingValue = createUpdateMetadataServerSettings<keyof MetadataLibrarySettings>((e) =>
+        makeToast(t('search.error.label.failed_to_save_settings'), 'error', getErrorMessage(e)),
+    );
+
+    // -1 for the DEFAULT category
+    const categoryCount = (categories.data?.categories.nodes.length ?? 1) - 1;
+
+    const loading = serverSettings.loading || areMetadataServerSettingsLoading || categories.loading;
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
+    const error = serverSettings.error ?? metadataServerSettingsError ?? categories.error;
+    if (error) {
+        return (
+            <EmptyViewAbsoluteCentered
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={getErrorMessage(error)}
+                retry={() => {
+                    if (serverSettings.error) {
+                        serverSettings
+                            ?.refetch()
+                            .catch(defaultPromiseErrorHandler('LibrarySettings::refetchServerSettings'));
+                    }
+
+                    if (metadataServerSettingsError) {
+                        refetchMetadataServerSettings().catch(
+                            defaultPromiseErrorHandler('LibrarySettings::refetchMetadataServerSettings'),
+                        );
+                    }
+
+                    if (categories.error) {
+                        categories.refetch().catch(defaultPromiseErrorHandler('LibrarySettings::refetchCategories'));
+                    }
+                }}
+            />
+        );
+    }
+
+    return (
+        <List sx={{ pt: 0 }}>
+            <List
+                subheader={
+                    <ListSubheader component="div" id="library-category-settings">
+                        {t('category.title.category_other')}
+                    </ListSubheader>
+                }
+            >
+                <ListItemLink to={AppRoutes.settings.childRoutes.categories.path}>
+                    <ListItemText
+                        primary={t('category.dialog.title.edit_category_other')}
+                        secondary={t('category.value', { count: categoryCount })}
+                    />
+                </ListItemLink>
+                <ListItem>
+                    <ListItemText
+                        primary={t('library.settings.general.add_to_library.category_selection.label.title')}
+                        secondary={t('library.settings.general.add_to_library.category_selection.label.description')}
+                    />
+                    <Switch
+                        edge="end"
+                        checked={settings.showAddToLibraryCategorySelectDialog}
+                        onChange={(e) => setSettingValue('showAddToLibraryCategorySelectDialog', e.target.checked)}
+                    />
+                </ListItem>
+                <ListItem>
+                    <ListItemText
+                        primary={t('library.settings.general.remove_from_library.remove_from_categories.label.title')}
+                        secondary={t(
+                            'library.settings.general.remove_from_library.remove_from_categories.label.description',
+                        )}
+                    />
+                    <Switch
+                        edge="end"
+                        checked={settings.removeMangaFromCategories}
+                        onChange={(e) => setSettingValue('removeMangaFromCategories', e.target.checked)}
+                    />
+                </ListItem>
+            </List>
+            <List
+                subheader={
+                    <ListSubheader component="div" id="library-general-settings">
+                        {t('global.label.general')}
+                    </ListSubheader>
+                }
+            >
+                <ListItem>
+                    <ListItemText
+                        primary={t('library.settings.general.search.ignore_filters.label.title')}
+                        secondary={t('library.settings.general.search.ignore_filters.label.description')}
+                    />
+                    <Switch
+                        edge="end"
+                        checked={settings.ignoreFilters}
+                        onChange={(e) => setSettingValue('ignoreFilters', e.target.checked)}
+                    />
+                </ListItem>
+            </List>
+            <GlobalUpdateSettings
+                serverSettings={serverSettings.data!.settings}
+                categories={categories.data!.categories.nodes}
+            />
+            <List
+                subheader={
+                    <ListSubheader component="div" id="library-advanced">
+                        {t('global.label.advanced')}
+                    </ListSubheader>
+                }
+            >
+                <ListItemButton onClick={() => removeNonLibraryMangasFromCategories()}>
+                    <ListItemText
+                        primary={t('library.settings.advanced.database.cleanup.label.title')}
+                        secondary={t('library.settings.advanced.database.cleanup.label.description')}
+                    />
+                </ListItemButton>
+                <ListItemLink to={AppRoutes.settings.childRoutes.library.childRoutes.duplicates.path}>
+                    <ListItemText
+                        primary={t('library.settings.advanced.duplicates.label.title')}
+                        secondary={t('library.settings.advanced.duplicates.label.description')}
+                    />
+                </ListItemLink>
+            </List>
+        </List>
+    );
+}

src/features/library/util/LibraryDuplicates.util.ts

@@ -0,0 +1,104 @@
+/*
+ * 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 { MangaType } from '@/lib/graphql/generated/graphql.ts';
+import { enhancedCleanup } from '@/util/Strings.ts';
+import { TMangaDuplicate, TMangaDuplicateResult, TMangaDuplicates } from '@/features/library/Library.types.ts';
+
+export const findDuplicatesByTitle = <Manga extends Pick<MangaType, 'title'>>(
+    libraryMangas: Manga[],
+): TMangaDuplicates<Manga> => {
+    const titleToMangas = Object.groupBy(libraryMangas, ({ title }) => enhancedCleanup(title));
+
+    return Object.fromEntries(
+        Object.entries(titleToMangas)
+            .filter((titleToMangaMap): titleToMangaMap is [string, Manga[]] => (titleToMangaMap[1]?.length ?? 0) > 1)
+            .map(([, mangas]) => [mangas[0].title, mangas]),
+    );
+};
+
+const findDuplicatesByTitleAndAlternativeTitlesSingleManga = <Manga extends TMangaDuplicate>(
+    manga: Manga,
+    mangas: Manga[],
+): TMangaDuplicateResult<Manga> => {
+    const titleToCheck = enhancedCleanup(manga.title);
+
+    const result: ReturnType<typeof findDuplicatesByTitleAndAlternativeTitlesSingleManga<Manga>> = {
+        byTitle: [manga],
+        byAlternativeTitle: [manga],
+    };
+
+    mangas.forEach((libraryManga) => {
+        const isDifferentManga = manga.id !== libraryManga.id;
+        if (!isDifferentManga) {
+            return;
+        }
+
+        const doesTitleMatch = enhancedCleanup(libraryManga.title) === titleToCheck;
+        const doesAlternativeTitleMatch = enhancedCleanup(libraryManga?.description ?? '').includes(titleToCheck);
+
+        const isDuplicate = doesTitleMatch || doesAlternativeTitleMatch;
+        if (!isDuplicate) {
+            return;
+        }
+
+        if (doesTitleMatch) {
+            result.byTitle.push(libraryManga);
+        }
+
+        if (doesAlternativeTitleMatch) {
+            result.byAlternativeTitle.push(libraryManga);
+        }
+    });
+
+    return result;
+};
+
+export const findDuplicatesByTitleAndAlternativeTitles = <Manga extends TMangaDuplicate>(
+    mangasToCheck: Manga[],
+    mangas: Manga[] = mangasToCheck,
+): TMangaDuplicates<Manga> => {
+    const titleToMangas: TMangaDuplicates<Manga> = {};
+    const titleToAlternativeTitleMatches: TMangaDuplicates<Manga> = {};
+
+    mangasToCheck.forEach((mangaToCheck) => {
+        const titleToCheck = enhancedCleanup(mangaToCheck.title);
+
+        titleToMangas[titleToCheck] ??= [];
+        titleToAlternativeTitleMatches[titleToCheck] ??= [];
+
+        const { byTitle, byAlternativeTitle } = findDuplicatesByTitleAndAlternativeTitlesSingleManga(
+            mangaToCheck,
+            mangas,
+        );
+
+        titleToMangas[titleToCheck].push(...byTitle);
+        titleToAlternativeTitleMatches[titleToCheck].push(...byAlternativeTitle);
+    });
+
+    const titleToDuplicatesEntries = Object.entries(titleToMangas)
+        .map(([title, titleMatches]) => {
+            const uniqueTitleMatches = new Set(titleMatches);
+            const uniqueAlternativeTitleMatches = new Set(titleToAlternativeTitleMatches[title] ?? []);
+
+            const originalTitle = [...uniqueTitleMatches][0].title;
+
+            const combinedDuplicates = [...uniqueTitleMatches, ...uniqueAlternativeTitleMatches];
+            const duplicates = [...new Set([...combinedDuplicates])];
+
+            const noDuplicatesFound = duplicates.length === 1;
+            if (noDuplicatesFound) {
+                return null;
+            }
+
+            return [originalTitle, duplicates];
+        })
+        .filter((entry) => !!entry);
+
+    return Object.fromEntries(titleToDuplicatesEntries);
+};

src/features/library/workers/LibraryDuplicatesDescriptionWorker.ts

@@ -0,0 +1,17 @@
+/*
+ * 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 { findDuplicatesByTitleAndAlternativeTitles } from '@/features/library/util/LibraryDuplicates.util.ts';
+import { LibraryDuplicatesDescriptionWorkerInput } from '@/features/library/Library.types.ts';
+
+// eslint-disable-next-line no-restricted-globals
+self.onmessage = (event: MessageEvent<LibraryDuplicatesDescriptionWorkerInput>) => {
+    const { mangasToCheck, mangas } = event.data;
+
+    postMessage(findDuplicatesByTitleAndAlternativeTitles(mangasToCheck, mangas));
+};

src/features/library/workers/LibraryDuplicatesWorker.ts

@@ -0,0 +1,71 @@
+/*
+ * 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 { findDuplicatesByTitle } from '@/features/library/util/LibraryDuplicates.util.ts';
+import {
+    LibraryDuplicatesDescriptionWorkerInput,
+    LibraryDuplicatesWorkerInput,
+    TMangaDuplicate,
+    TMangaDuplicates,
+} from '@/features/library/Library.types.ts';
+import { Queue } from '@/lib/Queue.ts';
+import { ControlledPromise } from '@/lib/ControlledPromise.ts';
+import { enhancedCleanup } from '@/util/Strings.ts';
+
+const queue = new Queue((navigator.hardwareConcurrency ?? 5) - 1);
+const MANGAS_PER_CHUNK = 200;
+
+// eslint-disable-next-line no-restricted-globals
+self.onmessage = async (event: MessageEvent<LibraryDuplicatesWorkerInput>) => {
+    const { mangas, checkAlternativeTitles } = event.data;
+
+    if (!checkAlternativeTitles) {
+        postMessage(findDuplicatesByTitle(mangas));
+        return;
+    }
+
+    const chunkPromises: Promise<TMangaDuplicates<TMangaDuplicate>>[] = [];
+    for (let chunkStart = 0; chunkStart < mangas.length; chunkStart += MANGAS_PER_CHUNK) {
+        chunkPromises.push(
+            queue.enqueue(chunkStart.toString(), () => {
+                const workerPromise = new ControlledPromise<TMangaDuplicates<TMangaDuplicate>>();
+
+                const worker = new Worker(new URL('LibraryDuplicatesDescriptionWorker.ts', import.meta.url), {
+                    type: 'module',
+                });
+
+                worker.onmessage = (subWorkerEvent: MessageEvent<TMangaDuplicates<TMangaDuplicate>>) =>
+                    workerPromise.resolve(subWorkerEvent.data);
+
+                worker.postMessage({
+                    mangas,
+                    mangasToCheck: mangas.slice(chunkStart, chunkStart + MANGAS_PER_CHUNK),
+                } satisfies LibraryDuplicatesDescriptionWorkerInput);
+
+                return workerPromise.promise;
+            }).promise,
+        );
+    }
+
+    const chunkedResults = await Promise.all(chunkPromises);
+    const mergedResult: TMangaDuplicates<TMangaDuplicate> = {};
+
+    const cleanedUpTitleToOriginalTitle: Record<string, string> = {};
+    chunkedResults.forEach((chunkedResult) =>
+        Object.entries(chunkedResult).forEach(([title, duplicates]) => {
+            const cleanedTitle = enhancedCleanup(title);
+            cleanedUpTitleToOriginalTitle[cleanedTitle] ??= title;
+            const originalTitle = cleanedUpTitleToOriginalTitle[cleanedTitle];
+
+            // ignore duplicated results for a title from other chunked results
+            mergedResult[originalTitle] ??= duplicates;
+        }),
+    );
+
+    postMessage(mergedResult);
+};