Improve logic to show dialog outside of components

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