Replace "useCategorySelect" with "GlobalDialogManager"

2025-10-04 14:47:38 +02:00
parent d33f708104
commit b795f98766
8 changed files with 101 additions and 162 deletions
--- a/src/features/manga/components/MangaActionMenuItems.tsx
+++ b/src/features/manga/components/MangaActionMenuItems.tsx
@@ -29,17 +29,16 @@ import {
 } from '@/base/components/menu/Menu.utils.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { TrackManga } from '@/features/tracker/components/TrackManga.tsx';
-import { useCategorySelect } from '@/features/category/hooks/useCategorySelect.tsx';
 import { ChaptersDownloadActionMenuItems } from '@/features/chapter/components/actions/ChaptersDownloadActionMenuItems.tsx';
 import { NestedMenuItem } from '@/base/components/menu/NestedMenuItem.tsx';
 import { MangaChapterStatFieldsFragment, MangaType } from '@/lib/graphql/generated/graphql.ts';
 import { MangaAction, MangaDownloadInfo, MangaIdInfo, MangaUnreadInfo } from '@/features/manga/Manga.types.ts';
 import { MANGA_ACTION_TO_TRANSLATION } from '@/features/manga/Manga.constants.ts';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
+import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
+import { CategorySelect } from '@/features/category/components/CategorySelect.tsx';

-const ACTION_DISABLES_SELECTION_MODE: MangaAction[] = ['remove_from_library'] as const;
-
-type BaseProps = { onClose: (selectionModeState: boolean) => void; setHideMenu: (hide: boolean) => void };
+type BaseProps = { onClose: () => void; setHideMenu: (hide: boolean) => void };

 export type SingleModeProps = {
    manga: Pick<MangaType, 'id' | 'title' | 'sourceId'> & MangaDownloadInfo & MangaUnreadInfo;
@@ -77,16 +76,9 @@ export const MangaActionMenuItems = ({
    const hasUnreadChapters = !!manga?.unreadCount;
    const hasReadChapters = !!manga && manga.unreadCount !== manga.chapters.totalCount;

-    const { openCategorySelect, CategorySelectComponent } = useCategorySelect({
-        mangaId: manga?.id,
-        mangaIds: passedSelectedMangas ? Mangas.getIds(selectedMangas) : undefined,
-        onClose: () => onClose(true),
-        addToLibrary: false,
-    });
-
    const handleSelect = () => {
        handleSelection?.(manga.id, true);
-        onClose(true);
+        onClose();
    };

    const performAction = (action: MangaAction, mangas: MangaIdInfo[]) => {
@@ -94,7 +86,7 @@ export const MangaActionMenuItems = ({
            wasManuallyMarkedAsRead: true,
        }).catch(defaultPromiseErrorHandler(`MangaActionMenuItems:performAction(${action})`));

-        onClose(!ACTION_DISABLES_SELECTION_MODE.includes(action));
+        onClose();
    };

    const { downloadableMangas, downloadedMangas, unreadMangas, readMangas } = useMemo(
@@ -127,7 +119,7 @@ export const MangaActionMenuItems = ({
                >
                    <ChaptersDownloadActionMenuItems
                        mangaIds={isSingleMode ? [manga.id] : Mangas.getIds(selectedMangas)}
-                        closeMenu={() => onClose(true)}
+                        closeMenu={onClose}
                    />
                </NestedMenuItem>
            )}
@@ -176,8 +168,13 @@ export const MangaActionMenuItems = ({
            )}
            <MenuItem
                onClick={() => {
-                    openCategorySelect(true);
+                    GlobalDialogManager.show(CategorySelect, {
+                        mangaId: manga?.id,
+                        mangaIds: passedSelectedMangas ? Mangas.getIds(selectedMangas) : undefined,
+                        addToLibrary: false,
+                    });
                    setHideMenu(true);
+                    onClose();
                }}
                Icon={Label}
                title={getMenuItemTitle('change_categories', selectedMangas.length)}
@@ -187,7 +184,6 @@ export const MangaActionMenuItems = ({
                Icon={FavoriteBorderIcon}
                title={getMenuItemTitle('remove_from_library', selectedMangas.length)}
            />
-            {CategorySelectComponent}
            {isTrackDialogOpen && (
                <Dialog
                    open
@@ -196,7 +192,7 @@ export const MangaActionMenuItems = ({
                    scroll="paper"
                    onClose={() => {
                        setIsTrackDialogOpen(false);
-                        onClose(true);
+                        onClose();
                    }}
                >
                    <TrackManga manga={manga!} />
--- a/src/features/manga/components/MangaToolbarMenu.tsx
+++ b/src/features/manga/components/MangaToolbarMenu.tsx
@@ -21,9 +21,10 @@ import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
-import { useCategorySelect } from '@/features/category/hooks/useCategorySelect.tsx';
 import { MangaType } from '@/lib/graphql/generated/graphql.ts';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
+import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
+import { CategorySelect } from '@/features/category/components/CategorySelect.tsx';

 interface IProps {
    manga: Pick<MangaType, 'id' | 'inLibrary' | 'sourceId' | 'title'>;
@@ -43,9 +44,9 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
        setAnchorEl(null);
    };

-    const { openCategorySelect, CategorySelectComponent } = useCategorySelect({
-        mangaId: manga.id,
-    });
+    const openCategorySelection = () => {
+        GlobalDialogManager.show(CategorySelect, { mangaId: manga.id });
+    };

    return (
        <>
@@ -82,7 +83,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                            <CustomTooltip title={t('manga.label.edit_categories')}>
                                <IconButton
                                    onClick={() => {
-                                        openCategorySelect(true);
+                                        openCategorySelection();
                                    }}
                                    color="inherit"
                                >
@@ -142,7 +143,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                            <MenuItem
                                key="categories"
                                onClick={() => {
-                                    openCategorySelect(true);
+                                    openCategorySelection();
                                    handleClose();
                                }}
                            >
@@ -155,8 +156,6 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
                    </Menu>
                </>
            )}
-
-            {CategorySelectComponent}
        </>
    );
 };
--- a/src/features/manga/components/cards/MangaCard.tsx
+++ b/src/features/manga/components/cards/MangaCard.tsx
@@ -49,10 +49,7 @@ export const MangaCard = memo((props: MangaCardProps) => {
        settings: { showContinueReadingButton },
    } = useMetadataServerSettings();

-    const { CategorySelectComponent, updateLibraryState, isInLibrary } = useManageMangaLibraryState(
-        manga,
-        mode === 'source',
-    );
+    const { updateLibraryState, isInLibrary } = useManageMangaLibraryState(manga, mode === 'source');

    const mangaLinkTo = getMangaLinkTo(mode, manga.id, manga.sourceId, manga.title);

@@ -158,7 +155,6 @@ export const MangaCard = memo((props: MangaCardProps) => {
                                )}
                            </Menu>
                        )}
-                        {CategorySelectComponent}
                    </>
                )}
            </PopupState>
--- a/src/features/manga/components/details/MangaDetails.tsx
+++ b/src/features/manga/components/details/MangaDetails.tsx
@@ -227,7 +227,7 @@ export const MangaDetails = ({
        }
    }, [manga.source]);

-    const { CategorySelectComponent, updateLibraryState } = useManageMangaLibraryState(manga);
+    const { updateLibraryState } = useManageMangaLibraryState(manga);

    const copyTitle = async () => {
        try {
@@ -239,59 +239,56 @@ export const MangaDetails = ({
    };

    return (
-        <>
-            <DetailsWrapper>
-                <TopContentWrapper url={Mangas.getThumbnailUrl(manga)} mangaThumbnailBackdrop={mangaThumbnailBackdrop}>
-                    <ThumbnailMetadataWrapper>
-                        <Thumbnail manga={manga} mangaDynamicColorSchemes={mangaDynamicColorSchemes} />
-                        <MetadataContainer>
-                            <Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'flex-start', mb: 1 }}>
-                                <SearchLink query={manga.title} sourceId={manga.sourceId} mode="source.global-search">
-                                    <Typography variant="h5" component="h2" sx={{ wordBreak: 'break-word' }}>
-                                        {manga.title}
-                                    </Typography>
-                                </SearchLink>
-                                <CustomTooltip title={t('global.button.copy')}>
-                                    <IconButton onClick={copyTitle} color="inherit">
-                                        <ContentCopyIcon fontSize="small" />
-                                    </IconButton>
-                                </CustomTooltip>
-                            </Stack>
-                            {manga.author && (
-                                <Metadata
-                                    title={t('manga.label.author')}
-                                    value={valuesToJoinedSearchLinks(Mangas.getAuthors(manga), manga.source?.id, mode)}
-                                />
-                            )}
-                            {manga.artist && (
-                                <Metadata
-                                    title={t('manga.label.artist')}
-                                    value={valuesToJoinedSearchLinks(Mangas.getArtists(manga), manga.source?.id, mode)}
-                                />
-                            )}
+        <DetailsWrapper>
+            <TopContentWrapper url={Mangas.getThumbnailUrl(manga)} mangaThumbnailBackdrop={mangaThumbnailBackdrop}>
+                <ThumbnailMetadataWrapper>
+                    <Thumbnail manga={manga} mangaDynamicColorSchemes={mangaDynamicColorSchemes} />
+                    <MetadataContainer>
+                        <Stack sx={{ flexDirection: 'row', gap: 1, alignItems: 'flex-start', mb: 1 }}>
+                            <SearchLink query={manga.title} sourceId={manga.sourceId} mode="source.global-search">
+                                <Typography variant="h5" component="h2" sx={{ wordBreak: 'break-word' }}>
+                                    {manga.title}
+                                </Typography>
+                            </SearchLink>
+                            <CustomTooltip title={t('global.button.copy')}>
+                                <IconButton onClick={copyTitle} color="inherit">
+                                    <ContentCopyIcon fontSize="small" />
+                                </IconButton>
+                            </CustomTooltip>
+                        </Stack>
+                        {manga.author && (
                            <Metadata
-                                title={t('manga.label.status')}
-                                value={t(MANGA_STATUS_TO_TRANSLATION[manga.status])}
+                                title={t('manga.label.author')}
+                                value={valuesToJoinedSearchLinks(Mangas.getAuthors(manga), manga.source?.id, mode)}
                            />
-                            <Metadata title={t('source.title_one')} value={getSourceName(manga.source)} />
-                        </MetadataContainer>
-                    </ThumbnailMetadataWrapper>
-                    <MangaButtonsContainer>
-                        <CustomButton
-                            size="medium"
-                            onClick={updateLibraryState}
-                            variant={manga.inLibrary ? 'contained' : 'outlined'}
-                        >
-                            {manga.inLibrary ? <FavoriteIcon /> : <FavoriteBorderIcon />}
-                            {manga.inLibrary ? t('manga.button.in_library') : t('manga.button.add_to_library')}
-                        </CustomButton>
-                        <TrackMangaButton manga={manga} />
-                        <OpenSourceButton url={manga.realUrl} />
-                    </MangaButtonsContainer>
-                </TopContentWrapper>
-                <DescriptionGenre manga={manga} mode={mode} />
-            </DetailsWrapper>
-            {CategorySelectComponent}
-        </>
+                        )}
+                        {manga.artist && (
+                            <Metadata
+                                title={t('manga.label.artist')}
+                                value={valuesToJoinedSearchLinks(Mangas.getArtists(manga), manga.source?.id, mode)}
+                            />
+                        )}
+                        <Metadata
+                            title={t('manga.label.status')}
+                            value={t(MANGA_STATUS_TO_TRANSLATION[manga.status])}
+                        />
+                        <Metadata title={t('source.title_one')} value={getSourceName(manga.source)} />
+                    </MetadataContainer>
+                </ThumbnailMetadataWrapper>
+                <MangaButtonsContainer>
+                    <CustomButton
+                        size="medium"
+                        onClick={updateLibraryState}
+                        variant={manga.inLibrary ? 'contained' : 'outlined'}
+                    >
+                        {manga.inLibrary ? <FavoriteIcon /> : <FavoriteBorderIcon />}
+                        {manga.inLibrary ? t('manga.button.in_library') : t('manga.button.add_to_library')}
+                    </CustomButton>
+                    <TrackMangaButton manga={manga} />
+                    <OpenSourceButton url={manga.realUrl} />
+                </MangaButtonsContainer>
+            </TopContentWrapper>
+            <DescriptionGenre manga={manga} mode={mode} />
+        </DetailsWrapper>
    );
 };