Improve logic to show dialog outside of components

src/App.tsx

@@ -30,6 +30,7 @@ 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';
 
 const { Browse } = loadable(() => import('@/features/browse/screens/Browse.tsx'), lazyLoadFallback);
 const { DownloadQueue } = loadable(() => import('@/features/downloads/screens/DownloadQueue.tsx'), lazyLoadFallback);
@@ -295,12 +296,17 @@ const ReaderApp = () => (
 export const App: React.FC = () => (
     <AppContext>
         <ScrollToTop />
+        <GlobalDialog />
+
         <ServerUpdateChecker />
         <WebUIUpdateChecker />
         <InitialBackgroundRequests />
         <BackgroundSubscriptions />
+
         <ReactRouterSetter />
+
         <CssBaseline enableColorScheme />
+
         <AuthGuard>
             <Box sx={{ display: 'flex' }}>
                 <Box sx={{ flexShrink: 0, position: 'relative', height: '100vh' }}>

src/UtilTypes.d.ts

@@ -53,3 +53,13 @@ type OmitNotMatching<T, K extends keyof T> = {
 type ExtractCommon<T, U> = {
     [K in keyof T & keyof U]: T[K] extends U[K] ? T[K] : never;
 };
+
+type HasRequiredKeys<T> =
+    Exclude<
+        {
+            [K in keyof T]: T extends Record<K, T[K]> ? K : never;
+        }[keyof T],
+        undefined
+    > extends never
+        ? false
+        : true;

src/base/components/feedback/SnackbarWithDescription.tsx

@@ -13,11 +13,11 @@ import AlertTitle from '@mui/material/AlertTitle';
 import Button from '@mui/material/Button';
 import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
-import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx';
 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';
 
 const MAX_DESCRIPTION_LENGTH = 200;
 
@@ -83,7 +83,7 @@ export const SnackbarWithDescription = memo(
                     {isDescriptionTooLong || (isGraphqlException && graphqlStackTrace) ? (
                         <Button
                             onClick={() => {
-                                awaitConfirmation({
+                                GlobalDialogManager.confirm({
                                     title:
                                         typeof message === 'string'
                                             ? message

src/base/components/modals/ConfirmDialog.tsx

@@ -85,7 +85,13 @@ export const ConfirmDialog = ({
                     }}
                 >
                     {actions.extra.show && (
-                        <Button onClick={onExtra} variant={actions.extra.contain ? 'contained' : undefined}>
+                        <Button
+                            onClick={() => {
+                                onCancel();
+                                onExtra?.();
+                            }}
+                            variant={actions.extra.contain ? 'contained' : undefined}
+                        >
                             {actions.extra.title}
                         </Button>
                     )}

src/base/global-dialog/GlobalDialog.tsx

@@ -0,0 +1,15 @@
+/*
+ * 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

@@ -0,0 +1,140 @@
+/*
+ * 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/base/utils/AwaitableDialog.tsx

@@ -1,50 +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 { createRoot } from 'react-dom/client';
-import { ThemeProvider } from '@mui/material/styles';
-import { ConfirmDialog } from '@/base/components/modals/ConfirmDialog.tsx';
-import { ControlledPromise } from '@/lib/ControlledPromise.ts';
-import { getCurrentTheme } from '@/features/theme/services/ThemeCreator.ts';
-
-export const awaitConfirmation = async (
-    dialogProps: Omit<React.ComponentProps<typeof ConfirmDialog>, 'onCancel' | 'onConfirm'>,
-) => {
-    const dialogContainer = document.createElement('div');
-    document.body.appendChild(dialogContainer);
-
-    const root = createRoot(dialogContainer);
-
-    const confirmationPromise = new ControlledPromise();
-    const handleConfirmation = (accepted: boolean) => {
-        if (accepted) {
-            confirmationPromise.resolve();
-        } else {
-            confirmationPromise.reject(new Error('Confirmation declined'));
-        }
-
-        root.unmount();
-        document.body.removeChild(dialogContainer);
-    };
-
-    root.render(
-        <ThemeProvider theme={getCurrentTheme()}>
-            <ConfirmDialog
-                {...dialogProps}
-                onExtra={() => {
-                    handleConfirmation(false);
-                    dialogProps.onExtra?.();
-                }}
-                onCancel={() => handleConfirmation(false)}
-                onConfirm={() => handleConfirmation(true)}
-            />
-        </ThemeProvider>,
-    );
-
-    return confirmationPromise.promise;
-};

src/features/chapter/services/Chapters.ts

@@ -41,8 +41,8 @@ import {
     ChapterSourceOrderInfo,
 } from '@/features/chapter/Chapter.types.ts';
 import { assertIsDefined } from '@/base/Asserts.ts';
-import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx';
 import { DirectionOffset } from '@/base/Base.types.ts';
+import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
 
 export class Chapters {
     static getIds(chapters: { id: number }[]): number[] {
@@ -275,7 +275,7 @@ export class Chapters {
                 assertIsDefined(confirmationMessage);
 
                 try {
-                    await awaitConfirmation({
+                    await GlobalDialogManager.confirm({
                         title: translate('global.label.are_you_sure'),
                         message: translate(confirmationMessage, { count: itemCount }),
                         actions: {

src/features/manga/hooks/useManageMangaLibraryState.tsx

@@ -17,11 +17,11 @@ import { getMetadataServerSettings } from '@/features/settings/services/ServerSe
 import { Categories } from '@/features/category/services/Categories.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { Mangas } from '@/features/manga/services/Mangas.ts';
-import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx';
 import { GetCategoriesBaseQuery, GetCategoriesBaseQueryVariables, MangaType } from '@/lib/graphql/generated/graphql.ts';
 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';
 
 export const useManageMangaLibraryState = (
     manga: Pick<MangaType, 'id' | 'title'> & Partial<Pick<MangaType, 'inLibrary'>>,
@@ -54,7 +54,7 @@ export const useManageMangaLibraryState = (
 
     const removeFromLibrary = useCallback(async () => {
         if (confirmRemoval) {
-            await awaitConfirmation({
+            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: {
@@ -113,7 +113,7 @@ export const useManageMangaLibraryState = (
             try {
                 duplicatedLibraryMangas = await Mangas.getDuplicateLibraryMangas(manga.title).response;
             } catch (e) {
-                await awaitConfirmation({
+                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),
@@ -131,7 +131,7 @@ export const useManageMangaLibraryState = (
 
             const doDuplicatesExist = duplicatedLibraryMangas?.data.mangas.totalCount;
             if (doDuplicatesExist) {
-                await awaitConfirmation({
+                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: {

src/features/manga/services/Mangas.ts

@@ -49,8 +49,8 @@ import {
     SOURCES_BY_MANGA_TYPE,
 } from '@/features/manga/Manga.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
-import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx';
 import { assertIsDefined } from '@/base/Asserts.ts';
+import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
 
 type MangaToMigrate = NonNullable<GetMangaToMigrateQuery['manga']>;
 type MangaToMigrateTo = NonNullable<GetMangaToMigrateToFetchMutation['fetchManga']>['manga'];
@@ -553,7 +553,7 @@ export class Mangas {
                 assertIsDefined(confirmationMessage);
 
                 try {
-                    await awaitConfirmation({
+                    await GlobalDialogManager.confirm({
                         title: translate('global.label.are_you_sure'),
                         message: translate(confirmationMessage, { count: itemCount }),
                         actions: {

src/features/reader/services/ReaderControls.ts

@@ -45,7 +45,6 @@ import {
 import { Chapters } from '@/features/chapter/services/Chapters.ts';
 import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
 import { ChapterIdInfo, TChapterReader } from '@/features/chapter/Chapter.types.ts';
-import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { TReaderProgressCurrentPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import {
@@ -55,6 +54,7 @@ import {
     getReaderSettingsStore,
     getReaderTapZoneStore,
 } from '@/features/reader/stores/ReaderStore.ts';
+import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
 
 const getScrollDirectionInvert = (
     scrollDirection: ScrollDirection,
@@ -304,7 +304,7 @@ export class ReaderControls {
         const warningLineBreak = !isSameScanlator && !isContinuousChapter ? '\n\n' : '';
         const warning = `${sameScanlator}${warningLineBreak}${continuousChapter}`;
 
-        await awaitConfirmation({
+        await GlobalDialogManager.confirm({
             title: translate('reader.chapter_transition.warning.title'),
             message: warning,
             actions: {

src/features/source/browse/components/SourceOptions.tsx

@@ -36,9 +36,9 @@ import { TriStateFilter } from '@/features/source/browse/components/filters/TriS
 import { GroupFilter } from '@/features/source/browse/components/filters/GroupFilter.tsx';
 import { SeparatorFilter } from '@/features/source/browse/components/filters/SeparatorFilter.tsx';
 import { StyledFab } from '@/base/components/buttons/StyledFab.tsx';
-import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { ISourceMetadata, SourceFilters } from '@/features/source/Source.types.ts';
+import { GlobalDialogManager } from '@/base/global-dialog/GlobalDialogManager.tsx';
 
 interface IFilters {
     sourceFilter: SourceFilters[];
@@ -256,7 +256,7 @@ export function SourceOptions({
                                             selectSavedSearch(savedSearch);
                                         }}
                                         onDelete={() => {
-                                            awaitConfirmation({
+                                            GlobalDialogManager.confirm({
                                                 title: t('global.label.are_you_sure'),
                                                 message: t('source.filter.save_search.dialog.label.delete', {
                                                     name: savedSearch,