Introduce "awaitable-component"

2025-11-02 17:18:49 +01:00
parent 7502393f40
commit 02621dec98
19 changed files with 136 additions and 240 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,7 @@ import { Navigate, Outlet, Route, Routes, useLocation, useNavigate } from 'react
 import { loadErrorMessages, loadDevMessages } from '@apollo/client/dev';
 import { loadable } from 'react-lazily/loadable';
 import Box from '@mui/material/Box';
+import { AwaitableComponent } from 'awaitable-component';
 import { AppContext } from '@/base/contexts/AppContext.tsx';
 import { DefaultNavBar } from '@/features/navigation-bar/components/DefaultNavBar.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
@@ -29,7 +30,6 @@ import { AuthGuard } from '@/features/authentication/components/AuthGuard.tsx';
 import { SearchParam } from '@/base/Base.types.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { ReactRouter } from '@/lib/react-router/ReactRouter.ts';
-import { GlobalDialog } from '@/base/global-dialog/GlobalDialog.tsx';
 import { AuthManager } from '@/features/authentication/AuthManager.ts';

 const { Browse } = loadable(() => import('@/features/browse/screens/Browse.tsx'), lazyLoadFallback);
@@ -286,7 +286,7 @@ const ReaderApp = () => (
 export const App: React.FC = () => (
    <AppContext>
        <ScrollToTop />
-        <GlobalDialog />
+        <AwaitableComponent.Root />

        <AuthGuard>
            <ServerUpdateChecker />
--- a/src/base/AppAwaitableComponent.ts
+++ b/src/base/AppAwaitableComponent.ts
@@ -0,0 +1,12 @@
+/*
+ * 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 { AwaitableComponent } from 'awaitable-component';
+import { ConfirmDialog } from '@/base/components/modals/ConfirmDialog.tsx';
+
+export const Confirmation = AwaitableComponent.create(ConfirmDialog);
--- a/src/base/components/feedback/SnackbarWithDescription.tsx
+++ b/src/base/components/feedback/SnackbarWithDescription.tsx
@@ -17,7 +17,7 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
 import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
 import { extractGraphqlExceptionInfo } from '@/lib/HelperFunctions.ts';
 import { TranslationKey } from '@/base/Base.types.ts';
-import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
+import { Confirmation } from '@/base/AppAwaitableComponent.ts';

 const MAX_DESCRIPTION_LENGTH = 200;

@@ -83,7 +83,7 @@ export const SnackbarWithDescription = memo(
                    {isDescriptionTooLong || (isGraphqlException && graphqlStackTrace) ? (
                        <Button
                            onClick={() => {
-                                GlobalDialogManager.confirm({
+                                Confirmation.show({
                                    title:
                                        typeof message === 'string'
                                            ? message
--- a/src/base/components/modals/ConfirmDialog.tsx
+++ b/src/base/components/modals/ConfirmDialog.tsx
@@ -13,6 +13,7 @@ import DialogTitle from '@mui/material/DialogTitle';
 import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
+import { AwaitableComponentProps } from 'awaitable-component';

 type Action = {
    show?: boolean;
@@ -31,15 +32,15 @@ export const ConfirmDialog = ({
    message,
    actions: passedActions,
    onExtra,
-    onCancel,
-    onConfirm,
-}: {
+    onDismiss,
+    onSubmit,
+    isVisible,
+    onExitComplete,
+}: AwaitableComponentProps & {
    title: string;
    message: string;
    actions?: Actions;
    onExtra?: () => void;
-    onCancel: () => void;
-    onConfirm: () => void;
 }) => {
    const { t } = useTranslation();

@@ -66,7 +67,7 @@ export const ConfirmDialog = ({
    } satisfies Actions;

    return (
-        <Dialog open onClose={onCancel}>
+        <Dialog open={isVisible} onTransitionExited={onExitComplete} onClose={onDismiss}>
            <DialogTitle>{title}</DialogTitle>
            <DialogContent
                sx={{
@@ -87,7 +88,7 @@ export const ConfirmDialog = ({
                    {actions.extra.show && (
                        <Button
                            onClick={() => {
-                                onCancel();
+                                onDismiss();
                                onExtra?.();
                            }}
                            variant={actions.extra.contain ? 'contained' : undefined}
@@ -102,12 +103,12 @@ export const ConfirmDialog = ({
                        }}
                    >
                        {actions.cancel.show && (
-                            <Button onClick={onCancel} variant={actions.cancel.contain ? 'contained' : undefined}>
+                            <Button onClick={onDismiss} variant={actions.cancel.contain ? 'contained' : undefined}>
                                {actions.cancel.title}
                            </Button>
                        )}
                        {actions.confirm.show && (
-                            <Button onClick={onConfirm} variant={actions.confirm.contain ? 'contained' : undefined}>
+                            <Button onClick={onSubmit} variant={actions.confirm.contain ? 'contained' : undefined}>
                                {actions.confirm.title}
                            </Button>
                        )}
--- a/src/base/global-dialog/GlobalDialog.tsx
+++ b/src/base/global-dialog/GlobalDialog.tsx
@@ -1,15 +0,0 @@
-/*
- * 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 { useSyncExternalStore } from 'react';
-import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
-
-export const GlobalDialog = () =>
-    useSyncExternalStore(GlobalDialogManager.subscribe.bind(GlobalDialogManager), () =>
-        GlobalDialogManager.getActive(),
-    );
--- a/src/base/global-dialog/GlobalDialogManager.tsx
+++ b/src/base/global-dialog/GlobalDialogManager.tsx
@@ -1,140 +0,0 @@
-/*
- * 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 { ComponentProps, ComponentType, ReactNode } from 'react';
-import { ControlledPromise } from '@/lib/ControlledPromise.ts';
-import { ConfirmDialog } from '@/base/components/modals/ConfirmDialog.tsx';
-
-type Id = string;
-
-export interface DialogProps<T = any> {
-    onCancel: () => void;
-    onConfirm: (value: T) => void;
-}
-
-type DialogPropsParam<Props extends {}> = Omit<Props, keyof DialogProps>;
-
-type ExtractDialogReturnType<T> = T extends DialogProps<infer U> ? U : never;
-
-export class GlobalDialogManager {
-    private static subscriberCounter = 0;
-
-    private static queue = new Set<Id>();
-
-    private static dialogs = new Map<Id, ReactNode>();
-
-    private static subscribers = new Map<Id, () => void>();
-
-    private static getNextId = (): Id => {
-        this.subscriberCounter = (this.subscriberCounter + 1) % Number.MAX_SAFE_INTEGER;
-
-        return this.subscriberCounter.toString();
-    };
-
-    private static notify(): void {
-        this.subscribers.forEach((callback) => {
-            callback();
-        });
-    }
-
-    private static add(id: Id, dialog: ReactNode): void {
-        this.queue.delete(id);
-        this.queue.add(id);
-        this.dialogs.set(id, dialog);
-
-        const showDialog = !(this.dialogs.size - 1);
-        if (showDialog) {
-            this.notify();
-        }
-    }
-
-    private static remove(id: Id): void {
-        this.queue.delete(id);
-        this.dialogs.delete(id);
-        this.notify();
-    }
-
-    private static unsubscribe(key: Id): void {
-        this.subscribers.delete(key);
-    }
-
-    static subscribe(callback: () => void): () => void {
-        const key = this.getNextId();
-        this.subscribers.set(key, callback);
-
-        return () => this.unsubscribe(key);
-    }
-
-    static getActive(): ReactNode {
-        const id = [...this.queue].slice(-1)[0];
-
-        return this.dialogs.get(id);
-    }
-
-    static async show<AllProps extends DialogProps>(
-        Dialog: ComponentType<AllProps>,
-        ...args: HasRequiredKeys<DialogPropsParam<AllProps>> extends true
-            ? [props: DialogPropsParam<AllProps>]
-            : [props?: DialogPropsParam<AllProps>]
-    ): Promise<ExtractDialogReturnType<AllProps>>;
-    static async show<AllProps extends DialogProps>(
-        id: Id,
-        Dialog: ComponentType<AllProps>,
-        ...args: HasRequiredKeys<DialogPropsParam<AllProps>> extends true
-            ? [props: DialogPropsParam<AllProps>]
-            : [props?: DialogPropsParam<AllProps>]
-    ): Promise<ExtractDialogReturnType<AllProps>>;
-    static async show<AllProps extends DialogProps>(
-        idOrDialog: Id | ComponentType<AllProps>,
-        dialogOrProps?: ComponentType<AllProps> | DialogPropsParam<AllProps>,
-        propsOrNothing?: DialogPropsParam<AllProps> | never,
-    ): Promise<ExtractDialogReturnType<AllProps>> {
-        const dialogPromise = new ControlledPromise<ExtractDialogReturnType<AllProps>>();
-
-        const wasIdPassed = typeof idOrDialog === 'string';
-        const id = wasIdPassed ? idOrDialog : this.getNextId();
-        const Dialog = (wasIdPassed ? dialogOrProps : idOrDialog) as ComponentType<AllProps>;
-        const props = (wasIdPassed ? propsOrNothing : dialogOrProps) as DialogPropsParam<AllProps> | undefined;
-
-        const dialog = (
-            <Dialog
-                {...({
-                    ...(props ?? {}),
-                    onCancel: () => dialogPromise.reject(new Error('Dialog was cancelled')),
-                    onConfirm: dialogPromise.resolve.bind(dialogPromise),
-                } as unknown as AllProps)}
-            />
-        );
-
-        this.add(id, dialog);
-
-        try {
-            return await dialogPromise.promise;
-        } finally {
-            this.remove(id);
-        }
-    }
-
-    static confirm(
-        props: DialogPropsParam<ComponentProps<typeof ConfirmDialog>>,
-    ): Promise<ExtractDialogReturnType<ComponentProps<typeof ConfirmDialog>>>;
-    static confirm(
-        id: Id,
-        props: DialogPropsParam<ComponentProps<typeof ConfirmDialog>>,
-    ): Promise<ExtractDialogReturnType<ComponentProps<typeof ConfirmDialog>>>;
-    static confirm(
-        idOrProps: Id | DialogPropsParam<ComponentProps<typeof ConfirmDialog>>,
-        propsOrNothing?: DialogPropsParam<ComponentProps<typeof ConfirmDialog>>,
-    ): Promise<ExtractDialogReturnType<ComponentProps<typeof ConfirmDialog>>> {
-        if (typeof idOrProps === 'string') {
-            return this.show(idOrProps, ConfirmDialog, propsOrNothing!);
-        }
-
-        return this.show(ConfirmDialog, idOrProps);
-    }
-}
--- a/src/features/backup/component/BackupFlagInclusionDialog.tsx
+++ b/src/features/backup/component/BackupFlagInclusionDialog.tsx
@@ -16,8 +16,8 @@ import { useState } from 'react';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import { AwaitableComponentProps } from 'awaitable-component';
 import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
-import { DialogProps } from '@/base/global-dialog/GlobalDialogManager.tsx';
 import {
    BACKUP_FLAG_GROUP_TO_TRANSLATION,
    BACKUP_FLAGS,
@@ -27,10 +27,12 @@ import {
 import { BackupFlagGroup, BackupFlagInclusionState } from '@/features/backup/Backup.types.ts';

 export const BackupFlagInclusionDialog = ({
-    onCancel,
-    onConfirm,
+    onDismiss,
+    onSubmit,
+    isVisible,
+    onExitComplete,
    title,
-}: DialogProps<BackupFlagInclusionState> & { title: string }) => {
+}: AwaitableComponentProps<BackupFlagInclusionState> & { title: string }) => {
    const { t } = useTranslation();

    const [includeStateByFlag, setIncludeStateByFlag] = useState(
@@ -38,7 +40,14 @@ export const BackupFlagInclusionDialog = ({
    );

    return (
-        <Dialog open onAbort={onCancel} maxWidth="xs" fullWidth onClose={onCancel}>
+        <Dialog
+            open={isVisible}
+            onTransitionExited={onExitComplete}
+            onAbort={onDismiss}
+            maxWidth="xs"
+            fullWidth
+            onClose={onSubmit}
+        >
            <DialogTitle>{title}</DialogTitle>
            <DialogContent>
                <FormGroup sx={{ gap: 2 }}>
@@ -63,10 +72,10 @@ export const BackupFlagInclusionDialog = ({
                </FormGroup>
            </DialogContent>
            <DialogActions>
-                <Button autoFocus onClick={onCancel} color="primary">
+                <Button autoFocus onClick={onDismiss} color="primary">
                    {t('global.button.cancel')}
                </Button>
-                <Button onClick={() => onConfirm(includeStateByFlag)} color="primary">
+                <Button onClick={() => onSubmit(includeStateByFlag)} color="primary">
                    {t('global.button.ok')}
                </Button>
            </DialogActions>
--- a/src/features/backup/component/BackupValidationDialog.tsx
+++ b/src/features/backup/component/BackupValidationDialog.tsx
@@ -16,20 +16,22 @@ import Button from '@mui/material/Button';
 import ListItem from '@mui/material/ListItem';
 import { Link } from 'react-router-dom';
 import Stack from '@mui/material/Stack';
+import { AwaitableComponentProps } from 'awaitable-component';
 import { BrowseTab } from '@/features/browse/Browse.types.ts';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
-import { DialogProps } from '@/base/global-dialog/GlobalDialogManager.tsx';
 import { ValidateBackupResult } from '@/lib/graphql/generated/graphql.ts';

 export const BackupValidationDialog = ({
    validationResult,
-    onCancel,
-    onConfirm,
-}: DialogProps & { validationResult: ValidateBackupResult }) => {
+    onDismiss,
+    onSubmit,
+    isVisible,
+    onExitComplete,
+}: AwaitableComponentProps & { validationResult: ValidateBackupResult }) => {
    const { t } = useTranslation();

    return (
-        <Dialog open>
+        <Dialog open={isVisible} onTransitionExited={onExitComplete} onAbort={onDismiss}>
            <DialogTitle>{t('settings.backup.action.validate.dialog.title')}</DialogTitle>
            <DialogContent dividers>
                {!!validationResult?.missingSources.length && (
@@ -67,7 +69,7 @@ export const BackupValidationDialog = ({
                >
                    {!!validationResult?.missingSources.length && (
                        <Button
-                            onClick={onCancel}
+                            onClick={onDismiss}
                            component={Link}
                            to={AppRoutes.browse.path(BrowseTab.EXTENSIONS)}
                            autoFocus={!!validationResult?.missingSources.length}
@@ -78,7 +80,7 @@ export const BackupValidationDialog = ({
                    )}
                    {!!validationResult?.missingTrackers.length && (
                        <Button
-                            onClick={onCancel}
+                            onClick={onDismiss}
                            component={Link}
                            to={AppRoutes.settings.childRoutes.tracking.path}
                            autoFocus={!!validationResult?.missingTrackers.length}
@@ -88,9 +90,9 @@ export const BackupValidationDialog = ({
                        </Button>
                    )}
                    <Stack direction="row">
-                        <Button onClick={onCancel}>{t('global.button.cancel')}</Button>
+                        <Button onClick={onDismiss}>{t('global.button.cancel')}</Button>
                        <Button
-                            onClick={onConfirm}
+                            onClick={onSubmit}
                            autoFocus={
                                !validationResult?.missingSources.length && !validationResult?.missingTrackers.length
                            }
--- a/src/features/backup/screens/Backup.tsx
+++ b/src/features/backup/screens/Backup.tsx
@@ -16,6 +16,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListSubheader from '@mui/material/ListSubheader';
 import { t as translate } from 'i18next';
 import { useEventListener, useMergedRef, useWindowEvent } from '@mantine/hooks';
+import { AwaitableComponent } from 'awaitable-component';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
 import { BackupRestoreState } from '@/lib/graphql/generated/graphql.ts';
@@ -29,7 +30,6 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
 import { ServerSettings } from '@/features/settings/Settings.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
-import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
 import { BackupFlagInclusionDialog } from '@/features/backup/component/BackupFlagInclusionDialog.tsx';
 import { BackupValidationDialog } from '@/features/backup/component/BackupValidationDialog.tsx';

@@ -117,7 +117,7 @@ export function Backup() {
    };

    const createBackup = async () => {
-        const flags = await GlobalDialogManager.show(BackupFlagInclusionDialog, {
+        const flags = await AwaitableComponent.show(BackupFlagInclusionDialog, {
            title: t('settings.backup.action.create.label.title'),
        });

@@ -155,9 +155,13 @@ export function Backup() {

            if (validateBackupData.missingSources.length || validateBackupData.missingTrackers.length) {
                try {
-                    await GlobalDialogManager.show(`backup-validate-${file.name}`, BackupValidationDialog, {
-                        validationResult: validateBackupData,
-                    });
+                    await AwaitableComponent.show(
+                        BackupValidationDialog,
+                        {
+                            validationResult: validateBackupData,
+                        },
+                        { id: `backup-validate-${file.name}` },
+                    );
                } catch (_) {
                    return false;
                }
@@ -174,7 +178,7 @@ export function Backup() {
    };

    const restoreBackup = async (backup: File) => {
-        const flags = await GlobalDialogManager.show(BackupFlagInclusionDialog, {
+        const flags = await AwaitableComponent.show(BackupFlagInclusionDialog, {
            title: t('settings.backup.action.restore.label.title'),
        });

--- a/src/features/category/components/CategorySelect.tsx
+++ b/src/features/category/components/CategorySelect.tsx
@@ -16,6 +16,7 @@ import FormGroup from '@mui/material/FormGroup';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import Stack from '@mui/material/Stack';
+import { AwaitableComponentProps } from 'awaitable-component';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { Mangas } from '@/features/manga/services/Mangas.ts';
 import { useSelectableCollection } from '@/base/collection/hooks/useSelectableCollection.ts';
@@ -36,10 +37,7 @@ import { GET_MANGA_CATEGORIES } from '@/lib/graphql/queries/MangaQuery.ts';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';

-type BaseProps = {
-    onCancel: () => void;
-    onConfirm: (selectedCategories: { addToCategories?: number[]; removeFromCategories?: number[] }) => void;
-};
+type BaseProps = AwaitableComponentProps<{ addToCategories?: number[]; removeFromCategories?: number[] }>;

 type SingleMangaModeProps = {
    mangaId: number;
@@ -94,7 +92,15 @@ const getCategoryCheckedState = (
 export function CategorySelect(props: CategorySelectProps) {
    const { t } = useTranslation();

-    const { onCancel, onConfirm, mangaId, mangaIds: passedMangaIds, addToLibrary = false } = props;
+    const {
+        onDismiss,
+        onSubmit,
+        isVisible,
+        onExitComplete,
+        mangaId,
+        mangaIds: passedMangaIds,
+        addToLibrary = false,
+    } = props;

    const isSingleSelectionMode = mangaId !== undefined;
    const mangaIds = passedMangaIds ?? [mangaId];
@@ -137,7 +143,7 @@ export function CategorySelect(props: CategorySelectProps) {
    const handleCancel = () => {
        setSelectionForKey('categoriesToAdd', mangaCategoryIds);
        setSelectionForKey('categoriesToRemove', []);
-        onCancel();
+        onDismiss();
    };

    const handleOk = () => {
@@ -148,7 +154,7 @@ export function CategorySelect(props: CategorySelectProps) {
            ? mangaCategoryIds.filter((categoryId) => !categoriesToAdd.includes(categoryId))
            : categoriesToRemove;

-        onConfirm({
+        onSubmit({
            addToCategories,
            removeFromCategories,
        });
@@ -186,7 +192,8 @@ export function CategorySelect(props: CategorySelectProps) {
                },
            }}
            maxWidth="xs"
-            open
+            open={isVisible}
+            onTransitionExited={onExitComplete}
            onClose={handleCancel}
        >
            <DialogTitle>{t('category.title.set_categories')}</DialogTitle>
--- a/src/features/chapter/services/Chapters.ts
+++ b/src/features/chapter/services/Chapters.ts
@@ -42,7 +42,7 @@ import {
 } from '@/features/chapter/Chapter.types.ts';
 import { assertIsDefined } from '@/base/Asserts.ts';
 import { DirectionOffset } from '@/base/Base.types.ts';
-import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
+import { Confirmation } from '@/base/AppAwaitableComponent.ts';

 export class Chapters {
    static getIds(chapters: { id: number }[]): number[] {
@@ -275,7 +275,7 @@ export class Chapters {
                assertIsDefined(confirmationMessage);

                try {
-                    await GlobalDialogManager.confirm({
+                    await Confirmation.show({
                        title: translate('global.label.are_you_sure'),
                        message: translate(confirmationMessage, { count: itemCount }),
                        actions: {
--- a/src/features/manga/components/MangaActionMenuItems.tsx
+++ b/src/features/manga/components/MangaActionMenuItems.tsx
@@ -19,6 +19,7 @@ import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import { Link } from 'react-router-dom';
 import SyncIcon from '@mui/icons-material/Sync';
 import Dialog from '@mui/material/Dialog';
+import { AwaitableComponent } from 'awaitable-component';
 import { Mangas } from '@/features/manga/services/Mangas.ts';
 import { SelectableCollectionReturnType } from '@/base/collection/hooks/useSelectableCollection.ts';
 import { MenuItem } from '@/base/components/menu/MenuItem.tsx';
@@ -35,7 +36,6 @@ import { MangaChapterStatFieldsFragment, MangaType } from '@/lib/graphql/generat
 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';

 type BaseProps = { onClose: () => void; setHideMenu: (hide: boolean) => void };
@@ -168,7 +168,7 @@ export const MangaActionMenuItems = ({
            )}
            <MenuItem
                onClick={() => {
-                    GlobalDialogManager.show(CategorySelect, {
+                    AwaitableComponent.show(CategorySelect, {
                        mangaId: manga?.id,
                        mangaIds: passedSelectedMangas ? Mangas.getIds(selectedMangas) : undefined,
                        addToLibrary: false,
--- a/src/features/manga/components/MangaToolbarMenu.tsx
+++ b/src/features/manga/components/MangaToolbarMenu.tsx
@@ -20,10 +20,10 @@ import { Link } from 'react-router-dom';
 import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import { AwaitableComponent } from 'awaitable-component';
 import { CustomTooltip } from '@/base/components/CustomTooltip.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 {
@@ -45,7 +45,7 @@ export const MangaToolbarMenu = ({ manga, onRefresh, refreshing }: IProps) => {
    };

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

    return (
--- a/src/features/manga/hooks/useManageMangaLibraryState.tsx
+++ b/src/features/manga/hooks/useManageMangaLibraryState.tsx
@@ -10,6 +10,7 @@ import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import gql from 'graphql-tag';
+import { AwaitableComponent } from 'awaitable-component';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
 import { getMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
@@ -20,8 +21,8 @@ import { GetCategoriesBaseQuery, GetCategoriesBaseQueryVariables, MangaType } fr
 import { GET_CATEGORIES_BASE } from '@/lib/graphql/queries/CategoryQuery.ts';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
-import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
 import { CategorySelect } from '@/features/category/components/CategorySelect';
+import { Confirmation } from '@/base/AppAwaitableComponent.ts';

 export const useManageMangaLibraryState = (
    manga: Pick<MangaType, 'id' | 'title'> & Partial<Pick<MangaType, 'inLibrary'>>,
@@ -50,13 +51,16 @@ export const useManageMangaLibraryState = (

    const removeFromLibrary = useCallback(async () => {
        if (confirmRemoval) {
-            await GlobalDialogManager.confirm(`manga-library-state-remove-${manga.id}`, {
-                title: t('global.label.are_you_sure'),
-                message: t('manga.action.library.remove.dialog.label.message', { title: manga.title }),
-                actions: {
-                    confirm: { title: t('global.button.remove') },
+            await Confirmation.show(
+                {
+                    title: t('global.label.are_you_sure'),
+                    message: t('manga.action.library.remove.dialog.label.message', { title: manga.title }),
+                    actions: {
+                        confirm: { title: t('global.button.remove') },
+                    },
                },
-            });
+                { id: `manga-library-state-remove-${manga.id}` },
+            );
        }

        await Mangas.removeFromLibrary([manga.id], true);
@@ -103,33 +107,39 @@ export const useManageMangaLibraryState = (
            try {
                duplicatedLibraryMangas = await Mangas.getDuplicateLibraryMangas(manga.title).response;
            } catch (e) {
-                await GlobalDialogManager.confirm(`manga-library-state-add-${manga.id}`, {
-                    title: t('global.error.label.failed_to_load_data'),
-                    message: t('manga.action.library.add.dialog.duplicate.label.failure', {
-                        error: getErrorMessage(e),
-                    }),
-                    actions: {
-                        extra: { show: true, title: t('global.button.retry'), contain: true },
-                        confirm: { title: t('global.button.add') },
+                await Confirmation.show(
+                    {
+                        title: t('global.error.label.failed_to_load_data'),
+                        message: t('manga.action.library.add.dialog.duplicate.label.failure', {
+                            error: getErrorMessage(e),
+                        }),
+                        actions: {
+                            extra: { show: true, title: t('global.button.retry'), contain: true },
+                            confirm: { title: t('global.button.add') },
+                        },
+                        onExtra: () =>
+                            update().catch(
+                                defaultPromiseErrorHandler('useManageMangaLibraryState::update: retry duplicate check'),
+                            ),
                    },
-                    onExtra: () =>
-                        update().catch(
-                            defaultPromiseErrorHandler('useManageMangaLibraryState::update: retry duplicate check'),
-                        ),
-                });
+                    { id: `manga-library-state-add-${manga.id}` },
+                );
            }

            const doDuplicatesExist = duplicatedLibraryMangas?.data.mangas.totalCount;
            if (doDuplicatesExist) {
-                await GlobalDialogManager.confirm(`manga-library-state-add-duplicated-${manga.id}`, {
-                    title: t('global.label.are_you_sure'),
-                    message: t('manga.action.library.add.dialog.duplicate.label.info'),
-                    actions: {
-                        extra: { show: true, title: t('migrate.dialog.action.button.show_entry'), contain: true },
-                        confirm: { title: t('global.button.add') },
+                await Confirmation.show(
+                    {
+                        title: t('global.label.are_you_sure'),
+                        message: t('manga.action.library.add.dialog.duplicate.label.info'),
+                        actions: {
+                            extra: { show: true, title: t('migrate.dialog.action.button.show_entry'), contain: true },
+                            confirm: { title: t('global.button.add') },
+                        },
+                        onExtra: () => navigate(AppRoutes.manga.path(duplicatedLibraryMangas!.data.mangas.nodes[0].id)),
                    },
-                    onExtra: () => navigate(AppRoutes.manga.path(duplicatedLibraryMangas!.data.mangas.nodes[0].id)),
-                });
+                    { id: `manga-library-state-add-duplicated-${manga.id}` },
+                );
            }

            const showCategorySelectDialog = showAddToLibraryCategorySelectDialog && !!userCreatedCategories.length;
@@ -138,13 +148,13 @@ export const useManageMangaLibraryState = (
                return;
            }

-            const { addToCategories, removeFromCategories } = await GlobalDialogManager.show(
-                `manga-library-state-add-categories-${manga.id}`,
+            const { addToCategories, removeFromCategories } = await AwaitableComponent.show(
                CategorySelect,
                {
                    mangaId: manga.id,
                    addToLibrary: true,
                },
+                { id: `manga-library-state-add-categories-${manga.id}` },
            );

            addToLibrary(addToCategories, removeFromCategories);
--- a/src/features/manga/services/Mangas.ts
+++ b/src/features/manga/services/Mangas.ts
@@ -50,7 +50,7 @@ import {
 } from '@/features/manga/Manga.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { assertIsDefined } from '@/base/Asserts.ts';
-import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
+import { Confirmation } from '@/base/AppAwaitableComponent.ts';

 type MangaToMigrate = NonNullable<GetMangaToMigrateQuery['manga']>;
 type MangaToMigrateTo = NonNullable<GetMangaToMigrateToFetchMutation['fetchManga']>['manga'];
@@ -553,7 +553,7 @@ export class Mangas {
                assertIsDefined(confirmationMessage);

                try {
-                    await GlobalDialogManager.confirm({
+                    await Confirmation.show({
                        title: translate('global.label.are_you_sure'),
                        message: translate(confirmationMessage, { count: itemCount }),
                        actions: {
--- a/src/features/reader/services/ReaderControls.ts
+++ b/src/features/reader/services/ReaderControls.ts
@@ -55,7 +55,7 @@ import {
    getReaderSettingsStore,
    getReaderTapZoneStore,
 } from '@/features/reader/stores/ReaderStore.ts';
-import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
+import { Confirmation } from '@/base/AppAwaitableComponent.ts';

 const getScrollDirectionInvert = (
    scrollDirection: ScrollDirection,
@@ -305,7 +305,7 @@ export class ReaderControls {
        const warningLineBreak = !isSameScanlator && !isContinuousChapter ? '\n\n' : '';
        const warning = `${sameScanlator}${warningLineBreak}${continuousChapter}`;

-        await GlobalDialogManager.confirm({
+        await Confirmation.show({
            title: translate('reader.chapter_transition.warning.title'),
            message: warning,
            actions: {
--- a/src/features/source/browse/components/SourceOptions.tsx
+++ b/src/features/source/browse/components/SourceOptions.tsx
@@ -38,7 +38,7 @@ import { SeparatorFilter } from '@/features/source/browse/components/filters/Sep
 import { StyledFab } from '@/base/components/buttons/StyledFab.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { ISourceMetadata, SourceFilters } from '@/features/source/Source.types.ts';
-import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
+import { Confirmation } from '@/base/AppAwaitableComponent.ts';

 interface IFilters {
    sourceFilter: SourceFilters[];
@@ -256,7 +256,7 @@ export function SourceOptions({
                                            selectSavedSearch(savedSearch);
                                        }}
                                        onDelete={() => {
-                                            GlobalDialogManager.confirm({
+                                            Confirmation.show({
                                                title: t('global.label.are_you_sure'),
                                                message: t('source.filter.save_search.dialog.label.delete', {
                                                    name: savedSearch,