Introduce "awaitable-component"

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>

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
                             }

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