From bc06d88db030823e4dd1b9a68461e8549ab617d4 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Fri, 2 Jan 2026 22:19:32 +0100
Subject: [PATCH] Use AwaitableComponent for "CreateThemeDialog"

---
 .../theme/components/CreateThemeButton.tsx    |  45 ++-
 .../theme/components/CreateThemeDialog.tsx    |  18 +-
 .../theme/components/ThemePreview.tsx         | 343 +++++++++---------
 3 files changed, 201 insertions(+), 205 deletions(-)

diff --git a/src/features/theme/components/CreateThemeButton.tsx b/src/features/theme/components/CreateThemeButton.tsx
index 57b65477..38a15d99 100644
--- a/src/features/theme/components/CreateThemeButton.tsx
+++ b/src/features/theme/components/CreateThemeButton.tsx
@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import AddCircleIcon from '@mui/icons-material/AddCircle';
-import { bindDialog, bindTrigger, usePopupState } from 'material-ui-popup-state/hooks';
+import { AwaitableComponent } from 'awaitable-component';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { ThemeCreationDialog } from '@/features/theme/components/CreateThemeDialog.tsx';
 import { TypographyMaxLines } from '@/base/components/texts/TypographyMaxLines.tsx';
@@ -18,29 +18,26 @@ import { TypographyMaxLines } from '@/base/components/texts/TypographyMaxLines.t
 export const CreateThemeButton = () => {
     const { t } = useTranslation();
 
-    const popupState = usePopupState({ variant: 'popover', popupId: 'theme-creation-dialog' });
-
     return (
-        <>
-            <Stack sx={{ alignItems: 'center', gap: 1, minWidth: '150px', maxWidth: '150px' }}>
-                <Button
-                    sx={{
-                        width: '100%',
-                        height: '225px',
-                    }}
-                    variant="contained"
-                    size="large"
-                    {...bindTrigger(popupState)}
-                >
-                    <AddCircleIcon fontSize="large" />
-                </Button>
-                <CustomTooltip title={t('settings.appearance.theme.create.title')} placement="top">
-                    <TypographyMaxLines sx={{ maxWidth: '100%' }}>
-                        {t('settings.appearance.theme.create.title')}
-                    </TypographyMaxLines>
-                </CustomTooltip>
-            </Stack>
-            {popupState.isOpen && <ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="create" />}
-        </>
+        <Stack sx={{ alignItems: 'center', gap: 1, minWidth: '150px', maxWidth: '150px' }}>
+            <Button
+                sx={{
+                    width: '100%',
+                    height: '225px',
+                }}
+                variant="contained"
+                size="large"
+                onClick={() => {
+                    AwaitableComponent.show(ThemeCreationDialog, { mode: 'create' });
+                }}
+            >
+                <AddCircleIcon fontSize="large" />
+            </Button>
+            <CustomTooltip title={t('settings.appearance.theme.create.title')} placement="top">
+                <TypographyMaxLines sx={{ maxWidth: '100%' }}>
+                    {t('settings.appearance.theme.create.title')}
+                </TypographyMaxLines>
+            </CustomTooltip>
+        </Stack>
     );
 };
diff --git a/src/features/theme/components/CreateThemeDialog.tsx b/src/features/theme/components/CreateThemeDialog.tsx
index 8fad91b2..210121d8 100644
--- a/src/features/theme/components/CreateThemeDialog.tsx
+++ b/src/features/theme/components/CreateThemeDialog.tsx
@@ -11,7 +11,6 @@ import { useState } from 'react';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
-import { bindDialog } from 'material-ui-popup-state/hooks';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
@@ -19,6 +18,7 @@ import DialogActions from '@mui/material/DialogActions';
 import TextField from '@mui/material/TextField';
 import Link from '@mui/material/Link';
 import { jsonrepair } from 'jsonrepair';
+import { AwaitableComponentProps } from 'awaitable-component';
 import { getErrorMessage, jsonSaveParse } from '@/lib/HelperFunctions.ts';
 import { AppTheme, isThemeNameUnique } from '@/features/theme/services/AppThemes.ts';
 import {
@@ -91,11 +91,13 @@ const dialogModeToTranslationKey: Record<
 };
 
 export const ThemeCreationDialog = ({
-    bindDialogProps,
     mode,
     appTheme = baseCustomTheme,
-}: {
-    bindDialogProps: ReturnType<typeof bindDialog>;
+    isVisible,
+    onExitComplete,
+    onSubmit,
+    onDismiss,
+}: AwaitableComponentProps<void> & {
     mode: DialogMode;
     appTheme?: AppTheme;
 }) => {
@@ -117,7 +119,7 @@ export const ThemeCreationDialog = ({
     const [didThemeChange, setDidThemeChange] = useState(mode === 'create');
 
     return (
-        <Dialog {...bindDialogProps} fullWidth maxWidth="md">
+        <Dialog open={isVisible} onTransitionExited={onExitComplete} fullWidth maxWidth="md">
             <DialogTitle>{t(dialogModeToTranslationKey[mode].title)}</DialogTitle>
             <DialogContent>
                 {loading && <LoadingPlaceholder />}
@@ -212,12 +214,12 @@ export const ThemeCreationDialog = ({
                 )}
             </DialogContent>
             <DialogActions>
-                <Button autoFocus onClick={bindDialogProps.onClose} color="primary">
+                <Button autoFocus onClick={() => onDismiss()} color="primary">
                     {t('global.button.cancel')}
                 </Button>
                 <Button
                     disabled={invalidTheme || invalidName || isCreating || !didThemeChange || !theme.id.length}
-                    onClick={(e) => {
+                    onClick={() => {
                         makeToast(t(dialogModeToTranslationKey[mode].action, { theme: theme.getName() }), 'info');
 
                         setIsCreating(true);
@@ -227,7 +229,7 @@ export const ThemeCreationDialog = ({
                                     t(dialogModeToTranslationKey[mode].success, { theme: theme.getName() }),
                                     'success',
                                 );
-                                bindDialogProps.onClose(e);
+                                onSubmit();
                             })
                             .catch((updateError) =>
                                 makeToast(
diff --git a/src/features/theme/components/ThemePreview.tsx b/src/features/theme/components/ThemePreview.tsx
index 75a28f1d..89a07415 100644
--- a/src/features/theme/components/ThemePreview.tsx
+++ b/src/features/theme/components/ThemePreview.tsx
@@ -17,7 +17,7 @@ import CardActionArea from '@mui/material/CardActionArea';
 import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 import EditIcon from '@mui/icons-material/Edit';
-import { bindDialog, usePopupState } from 'material-ui-popup-state/hooks';
+import { AwaitableComponent } from 'awaitable-component';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { useAppThemeContext } from '@/features/theme/AppThemeContext.tsx';
 import { AppTheme } from '@/features/theme/services/AppThemes.ts';
@@ -40,8 +40,6 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel
     const theme = useTheme();
     const { themeMode, setAppTheme, appTheme: activeAppTheme, shouldUsePureBlackMode } = useAppThemeContext();
 
-    const popupState = usePopupState({ variant: 'popover', popupId: `theme-edit-dialog-${appTheme.id}` });
-
     const isSelected = appTheme.id === activeAppTheme;
 
     const muiTheme = useMemo(
@@ -50,191 +48,190 @@ export const ThemePreview = ({ appTheme, onDelete }: { appTheme: AppTheme; onDel
     );
 
     return (
-        <>
-            <Stack
-                sx={{
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    minWidth: '150px',
-                    maxWidth: '150px',
-                    gap: 1,
-                }}
-            >
-                <ThemeProvider theme={muiTheme}>
-                    <Card
+        <Stack
+            sx={{
+                justifyContent: 'center',
+                alignItems: 'center',
+                minWidth: '150px',
+                maxWidth: '150px',
+                gap: 1,
+            }}
+        >
+            <ThemeProvider theme={muiTheme}>
+                <Card
+                    sx={{
+                        width: '100%',
+                        height: '225px',
+                        position: 'relative',
+                    }}
+                >
+                    <Box
                         sx={{
-                            width: '100%',
-                            height: '225px',
-                            position: 'relative',
+                            position: 'absolute',
+                            top: 0,
+                            right: 0,
+                            bottom: 0,
+                            left: 0,
+                            border: '4px solid',
+                            borderColor: isSelected ? muiTheme.palette.primary.light : muiTheme.palette.grey['100'],
+                            zIndex: 1,
+                            pointerEvents: 'none',
+                            borderRadius: 1,
+                            ...theme.applyStyles('dark', {
+                                borderColor: isSelected ? muiTheme.palette.primary.light : muiTheme.palette.grey['900'],
+                            }),
+                        }}
+                    />
+                    <CardActionArea
+                        sx={{
+                            height: '100%',
+                            backgroundColor: 'background.default',
+                        }}
+                        onClick={() => {
+                            const needToLoadFonts = ThemeFontLoader.hasMissing(appTheme.muiTheme);
+                            if (!needToLoadFonts) {
+                                setAppTheme(appTheme.id);
+                                return;
+                            }
+
+                            makeToast(t('settings.appearance.theme.select.fonts.loading'), 'info');
+                            ThemeFontLoader.load(appTheme.muiTheme)
+                                .then(() => setAppTheme(appTheme.id))
+                                .catch((e) =>
+                                    makeToast(
+                                        t('settings.appearance.theme.select.fonts.error'),
+                                        'error',
+                                        getErrorMessage(e),
+                                    ),
+                                );
                         }}
                     >
-                        <Box
-                            sx={{
-                                position: 'absolute',
-                                top: 0,
-                                right: 0,
-                                bottom: 0,
-                                left: 0,
-                                border: '4px solid',
-                                borderColor: isSelected ? muiTheme.palette.primary.light : muiTheme.palette.grey['100'],
-                                zIndex: 1,
-                                pointerEvents: 'none',
-                                borderRadius: 1,
-                                ...theme.applyStyles('dark', {
-                                    borderColor: isSelected
-                                        ? muiTheme.palette.primary.light
-                                        : muiTheme.palette.grey['900'],
-                                }),
-                            }}
-                        />
-                        <CardActionArea
-                            sx={{
-                                height: '100%',
-                                backgroundColor: 'background.default',
-                            }}
-                            onClick={() => {
-                                const needToLoadFonts = ThemeFontLoader.hasMissing(appTheme.muiTheme);
-                                if (!needToLoadFonts) {
-                                    setAppTheme(appTheme.id);
-                                    return;
-                                }
-
-                                makeToast(t('settings.appearance.theme.select.fonts.loading'), 'info');
-                                ThemeFontLoader.load(appTheme.muiTheme)
-                                    .then(() => setAppTheme(appTheme.id))
-                                    .catch((e) =>
-                                        makeToast(
-                                            t('settings.appearance.theme.select.fonts.error'),
-                                            'error',
-                                            getErrorMessage(e),
-                                        ),
-                                    );
-                            }}
-                        >
-                            <Stack sx={{ height: '100%', m: 0 }}>
-                                <Stack sx={{ height: '100%', gap: 2, p: 2 }}>
-                                    <Stack
-                                        sx={{
-                                            maxHeight: '20px',
-                                            flexDirection: 'row',
-                                            justifyContent: 'space-between',
-                                            alignItems: 'flex-start',
-                                        }}
-                                    >
-                                        <Box
-                                            sx={{
-                                                width: '65%',
-                                                height: '20px',
-                                                backgroundColor: 'primary.dark',
-                                                borderRadius: 1,
-                                            }}
-                                        />
-                                        <Stack
-                                            sx={{
-                                                alignItems: 'center',
-                                                gap: 1,
-                                                mt: -0.25,
-                                            }}
-                                        >
-                                            {isSelected && (
-                                                <CheckCircleIcon
-                                                    sx={{
-                                                        visibility: isSelected ? 'visible' : 'hidden',
-                                                        color: 'primary.light',
-                                                    }}
-                                                />
-                                            )}
-                                            {!isSelected && appTheme.isCustom && (
-                                                <IconButton
-                                                    onClick={(e) => {
-                                                        e.preventDefault();
-                                                        e.stopPropagation();
-                                                        onDelete();
-                                                    }}
-                                                    component="div"
-                                                    size="small"
-                                                    sx={{ mt: -0.5 }}
-                                                >
-                                                    <CustomTooltip title={t('global.button.delete')}>
-                                                        <DeleteIcon />
-                                                    </CustomTooltip>
-                                                </IconButton>
-                                            )}
-                                            {appTheme.isCustom && (
-                                                <IconButton
-                                                    onClick={(e) => {
-                                                        e.preventDefault();
-                                                        e.stopPropagation();
-                                                        popupState.open();
-                                                    }}
-                                                    component="div"
-                                                    size="small"
-                                                >
-                                                    <CustomTooltip title={t('global.button.edit')}>
-                                                        <EditIcon />
-                                                    </CustomTooltip>
-                                                </IconButton>
-                                            )}
-                                        </Stack>
-                                    </Stack>
-                                    <Box
-                                        sx={{
-                                            width: '55%',
-                                            height: '65%',
-                                            backgroundColor: 'background.paper',
-                                            p: 1,
-                                            borderRadius: 1,
-                                        }}
-                                    >
-                                        <Stack
-                                            sx={{
-                                                width: 'max-content',
-                                                flexDirection: 'row',
-                                                overflow: 'hidden',
-                                                borderRadius: 1,
-                                            }}
-                                        >
-                                            <ThemePreviewBadge sx={{ backgroundColor: 'primary.main' }} />
-                                            <ThemePreviewBadge sx={{ backgroundColor: 'secondary.main' }} />
-                                        </Stack>
-                                    </Box>
-                                </Stack>
+                        <Stack sx={{ height: '100%', m: 0 }}>
+                            <Stack sx={{ height: '100%', gap: 2, p: 2 }}>
                                 <Stack
                                     sx={{
-                                        height: '25%',
-                                        backgroundColor: 'background.paper',
-                                        alignItems: 'center',
+                                        maxHeight: '20px',
                                         flexDirection: 'row',
-                                        gap: 2,
-                                        p: 2,
+                                        justifyContent: 'space-between',
+                                        alignItems: 'flex-start',
                                     }}
                                 >
                                     <Box
                                         sx={{
-                                            width: '20px',
-                                            height: '20px',
-                                            borderRadius: '50%',
-                                            backgroundColor: 'primary.main',
-                                        }}
-                                    />
-                                    <Box
-                                        sx={{
-                                            flexGrow: 1,
+                                            width: '65%',
                                             height: '20px',
+                                            backgroundColor: 'primary.dark',
                                             borderRadius: 1,
-                                            backgroundColor: 'primary.light',
                                         }}
                                     />
+                                    <Stack
+                                        sx={{
+                                            alignItems: 'center',
+                                            gap: 1,
+                                            mt: -0.25,
+                                        }}
+                                    >
+                                        {isSelected && (
+                                            <CheckCircleIcon
+                                                sx={{
+                                                    visibility: isSelected ? 'visible' : 'hidden',
+                                                    color: 'primary.light',
+                                                }}
+                                            />
+                                        )}
+                                        {!isSelected && appTheme.isCustom && (
+                                            <IconButton
+                                                onClick={(e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    onDelete();
+                                                }}
+                                                component="div"
+                                                size="small"
+                                                sx={{ mt: -0.5 }}
+                                            >
+                                                <CustomTooltip title={t('global.button.delete')}>
+                                                    <DeleteIcon />
+                                                </CustomTooltip>
+                                            </IconButton>
+                                        )}
+                                        {appTheme.isCustom && (
+                                            <IconButton
+                                                onClick={(e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+
+                                                    AwaitableComponent.show(ThemeCreationDialog, {
+                                                        mode: 'edit',
+                                                        appTheme,
+                                                    });
+                                                }}
+                                                component="div"
+                                                size="small"
+                                            >
+                                                <CustomTooltip title={t('global.button.edit')}>
+                                                    <EditIcon />
+                                                </CustomTooltip>
+                                            </IconButton>
+                                        )}
+                                    </Stack>
                                 </Stack>
+                                <Box
+                                    sx={{
+                                        width: '55%',
+                                        height: '65%',
+                                        backgroundColor: 'background.paper',
+                                        p: 1,
+                                        borderRadius: 1,
+                                    }}
+                                >
+                                    <Stack
+                                        sx={{
+                                            width: 'max-content',
+                                            flexDirection: 'row',
+                                            overflow: 'hidden',
+                                            borderRadius: 1,
+                                        }}
+                                    >
+                                        <ThemePreviewBadge sx={{ backgroundColor: 'primary.main' }} />
+                                        <ThemePreviewBadge sx={{ backgroundColor: 'secondary.main' }} />
+                                    </Stack>
+                                </Box>
                             </Stack>
-                        </CardActionArea>
-                    </Card>
-                </ThemeProvider>
-                <CustomTooltip title={getName()} placement="top">
-                    <TypographyMaxLines sx={{ maxWidth: '100%' }}>{getName()}</TypographyMaxLines>
-                </CustomTooltip>
-            </Stack>
-            <ThemeCreationDialog bindDialogProps={bindDialog(popupState)} mode="edit" appTheme={appTheme} />
-        </>
+                            <Stack
+                                sx={{
+                                    height: '25%',
+                                    backgroundColor: 'background.paper',
+                                    alignItems: 'center',
+                                    flexDirection: 'row',
+                                    gap: 2,
+                                    p: 2,
+                                }}
+                            >
+                                <Box
+                                    sx={{
+                                        width: '20px',
+                                        height: '20px',
+                                        borderRadius: '50%',
+                                        backgroundColor: 'primary.main',
+                                    }}
+                                />
+                                <Box
+                                    sx={{
+                                        flexGrow: 1,
+                                        height: '20px',
+                                        borderRadius: 1,
+                                        backgroundColor: 'primary.light',
+                                    }}
+                                />
+                            </Stack>
+                        </Stack>
+                    </CardActionArea>
+                </Card>
+            </ThemeProvider>
+            <CustomTooltip title={getName()} placement="top">
+                <TypographyMaxLines sx={{ maxWidth: '100%' }}>{getName()}</TypographyMaxLines>
+            </CustomTooltip>
+        </Stack>
     );
 };