Introduce "awaitable-component"

package.json

@@ -52,6 +52,7 @@
     "@redux-devtools/extension": "3.3.0",
     "@vibrant/color": "4.0.0",
     "apollo-upload-client": "18.0.1",
+    "awaitable-component": "0.1.0",
     "csstype": "3.1.3",
     "dayjs": "1.11.18",
     "fast-average-color": "9.5.0",

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 />

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);

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

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,
+    onDismiss,
-    onConfirm,
+    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>
                         )}

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(),
-    );

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);
-    }
-}

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,
+    onDismiss,
-    onConfirm,
+    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>

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,
+    onDismiss,
-    onConfirm,
+    onSubmit,
-}: DialogProps & { validationResult: ValidateBackupResult }) => {
+    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
                             }

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, {
+                    await AwaitableComponent.show(
-                        validationResult: validateBackupData,
+                        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'),
         });
 

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

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: {

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,

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 (

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}`, {
+            await Confirmation.show(
-                title: t('global.label.are_you_sure'),
+                {
-                message: t('manga.action.library.remove.dialog.label.message', { title: manga.title }),
+                    title: t('global.label.are_you_sure'),
-                actions: {
+                    message: t('manga.action.library.remove.dialog.label.message', { title: manga.title }),
-                    confirm: { title: t('global.button.remove') },
+                    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}`, {
+                await Confirmation.show(
-                    title: t('global.error.label.failed_to_load_data'),
+                    {
-                    message: t('manga.action.library.add.dialog.duplicate.label.failure', {
+                        title: t('global.error.label.failed_to_load_data'),
-                        error: getErrorMessage(e),
+                        message: t('manga.action.library.add.dialog.duplicate.label.failure', {
-                    }),
+                            error: getErrorMessage(e),
-                    actions: {
+                        }),
-                        extra: { show: true, title: t('global.button.retry'), contain: true },
+                        actions: {
-                        confirm: { title: t('global.button.add') },
+                            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: () =>
+                    { id: `manga-library-state-add-${manga.id}` },
-                        update().catch(
+                );
-                            defaultPromiseErrorHandler('useManageMangaLibraryState::update: retry duplicate check'),
-                        ),
-                });
             }
 
             const doDuplicatesExist = duplicatedLibraryMangas?.data.mangas.totalCount;
             if (doDuplicatesExist) {
-                await GlobalDialogManager.confirm(`manga-library-state-add-duplicated-${manga.id}`, {
+                await Confirmation.show(
-                    title: t('global.label.are_you_sure'),
+                    {
-                    message: t('manga.action.library.add.dialog.duplicate.label.info'),
+                        title: t('global.label.are_you_sure'),
-                    actions: {
+                        message: t('manga.action.library.add.dialog.duplicate.label.info'),
-                        extra: { show: true, title: t('migrate.dialog.action.button.show_entry'), contain: true },
+                        actions: {
-                        confirm: { title: t('global.button.add') },
+                            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(
+            const { addToCategories, removeFromCategories } = await AwaitableComponent.show(
-                `manga-library-state-add-categories-${manga.id}`,
                 CategorySelect,
                 {
                     mangaId: manga.id,
                     addToLibrary: true,
                 },
+                { id: `manga-library-state-add-categories-${manga.id}` },
             );
 
             addToLibrary(addToCategories, removeFromCategories);

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: {

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: {

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,

yarn.lock

@@ -3765,6 +3765,11 @@ available-typed-arrays@^1.0.7:
   dependencies:
     possible-typed-array-names "^1.0.0"
 
+awaitable-component@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/awaitable-component/-/awaitable-component-0.1.0.tgz#7fe5ad6c0b02e8c66a14232f3d5fe8bbbe309a44"
+  integrity sha512-D8NRED2me8NsPLwJltOFKKl93OuV28ZYR/mgsyYl2QWbhgLa69cGJcTW/DnO6NN2iDeZ7Fx8P8QbmEfnDwVJDA==
+
 axe-core@^4.10.0:
   version "4.10.2"
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.2.tgz#85228e3e1d8b8532a27659b332e39b7fa0e022df"