replace ElMessageBox.prompt

src/components/dialogs/AvatarDialog/AvatarDialog.vue

@@ -545,7 +545,6 @@
     import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
-    import { ElMessageBox } from 'element-plus';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { TabsUnderline } from '@/components/ui/tabs';
     import { storeToRefs } from 'pinia';
@@ -925,18 +924,17 @@
     }
 
     function promptChangeAvatarDescription(avatar) {
-        ElMessageBox.prompt(
+        modalStore
-            t('prompt.change_avatar_description.description'),
+            .prompt({
-            t('prompt.change_avatar_description.header'),
+                title: t('prompt.change_avatar_description.header'),
-            {
+                description: t('prompt.change_avatar_description.description'),
-                distinguishCancelAndClose: true,
+                confirmText: t('prompt.change_avatar_description.ok'),
-                confirmButtonText: t('prompt.change_avatar_description.ok'),
+                cancelText: t('prompt.change_avatar_description.cancel'),
-                cancelButtonText: t('prompt.change_avatar_description.cancel'),
                 inputValue: avatar.ref.description,
-                inputErrorMessage: t('prompt.change_avatar_description.input_error')
+                errorMessage: t('prompt.change_avatar_description.input_error')
-            }
+            })
-        )
+            .then(({ ok, value }) => {
-            .then(({ value }) => {
+                if (!ok) return;
                 if (value && value !== avatar.ref.description) {
                     avatarRequest
                         .saveAvatar({
@@ -954,14 +952,17 @@
     }
 
     function promptRenameAvatar(avatar) {
-        ElMessageBox.prompt(t('prompt.rename_avatar.description'), t('prompt.rename_avatar.header'), {
+        modalStore
-            distinguishCancelAndClose: true,
+            .prompt({
-            confirmButtonText: t('prompt.rename_avatar.ok'),
+                title: t('prompt.rename_avatar.header'),
-            cancelButtonText: t('prompt.rename_avatar.cancel'),
+                description: t('prompt.rename_avatar.description'),
-            inputValue: avatar.ref.name,
+                confirmText: t('prompt.rename_avatar.ok'),
-            inputErrorMessage: t('prompt.rename_avatar.input_error')
+                cancelText: t('prompt.rename_avatar.cancel'),
-        })
+                inputValue: avatar.ref.name,
-            .then(({ value }) => {
+                errorMessage: t('prompt.rename_avatar.input_error')
+            })
+            .then(({ ok, value }) => {
+                if (!ok) return;
                 if (value && value !== avatar.ref.name) {
                     avatarRequest
                         .saveAvatar({

src/components/dialogs/UserDialog/UserDialog.vue

@@ -1304,6 +1304,7 @@
         ArrowUp,
         Copy,
         Download,
+        DownloadIcon,
         Eye,
         Languages,
         Loader2,

src/components/dialogs/WorldDialog/WorldDialog.vue

@@ -746,7 +746,6 @@
     } from 'lucide-vue-next';
     import { computed, defineAsyncComponent, nextTick, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
-    import { ElMessageBox } from 'element-plus';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { TabsUnderline } from '@/components/ui/tabs';
     import { storeToRefs } from 'pinia';
@@ -1120,14 +1119,17 @@
     }
 
     function promptRenameWorld(world) {
-        ElMessageBox.prompt(t('prompt.rename_world.description'), t('prompt.rename_world.header'), {
+        modalStore
-            distinguishCancelAndClose: true,
+            .prompt({
-            confirmButtonText: t('prompt.rename_world.ok'),
+                title: t('prompt.rename_world.header'),
-            cancelButtonText: t('prompt.rename_world.cancel'),
+                description: t('prompt.rename_world.description'),
-            inputValue: world.ref.name,
+                confirmText: t('prompt.rename_world.ok'),
-            inputErrorMessage: t('prompt.rename_world.input_error')
+                cancelText: t('prompt.rename_world.cancel'),
-        })
+                inputValue: world.ref.name,
-            .then(({ value }) => {
+                errorMessage: t('prompt.rename_world.input_error')
+            })
+            .then(({ ok, value }) => {
+                if (!ok) return;
                 if (value && value !== world.ref.name) {
                     worldRequest
                         .saveWorld({
@@ -1143,18 +1145,17 @@
             .catch(() => {});
     }
     function promptChangeWorldDescription(world) {
-        ElMessageBox.prompt(
+        modalStore
-            t('prompt.change_world_description.description'),
+            .prompt({
-            t('prompt.change_world_description.header'),
+                title: t('prompt.change_world_description.header'),
-            {
+                description: t('prompt.change_world_description.description'),
-                distinguishCancelAndClose: true,
+                confirmText: t('prompt.change_world_description.ok'),
-                confirmButtonText: t('prompt.change_world_description.ok'),
+                cancelText: t('prompt.change_world_description.cancel'),
-                cancelButtonText: t('prompt.change_world_description.cancel'),
                 inputValue: world.ref.description,
-                inputErrorMessage: t('prompt.change_world_description.input_error')
+                errorMessage: t('prompt.change_world_description.input_error')
-            }
+            })
-        )
+            .then(({ ok, value }) => {
-            .then(({ value }) => {
+                if (!ok) return;
                 if (value && value !== world.ref.description) {
                     worldRequest
                         .saveWorld({
@@ -1171,15 +1172,18 @@
     }
 
     function promptChangeWorldCapacity(world) {
-        ElMessageBox.prompt(t('prompt.change_world_capacity.description'), t('prompt.change_world_capacity.header'), {
+        modalStore
-            distinguishCancelAndClose: true,
+            .prompt({
-            confirmButtonText: t('prompt.change_world_capacity.ok'),
+                title: t('prompt.change_world_capacity.header'),
-            cancelButtonText: t('prompt.change_world_capacity.cancel'),
+                description: t('prompt.change_world_capacity.description'),
-            inputValue: world.ref.capacity,
+                confirmText: t('prompt.change_world_capacity.ok'),
-            inputPattern: /\d+$/,
+                cancelText: t('prompt.change_world_capacity.cancel'),
-            inputErrorMessage: t('prompt.change_world_capacity.input_error')
+                inputValue: world.ref.capacity,
-        })
+                pattern: /\d+$/,
-            .then(({ value }) => {
+                errorMessage: t('prompt.change_world_capacity.input_error')
+            })
+            .then(({ ok, value }) => {
+                if (!ok) return;
                 if (value && value !== world.ref.capacity) {
                     worldRequest
                         .saveWorld({
@@ -1196,19 +1200,18 @@
     }
 
     function promptChangeWorldRecommendedCapacity(world) {
-        ElMessageBox.prompt(
+        modalStore
-            t('prompt.change_world_recommended_capacity.description'),
+            .prompt({
-            t('prompt.change_world_recommended_capacity.header'),
+                title: t('prompt.change_world_recommended_capacity.header'),
-            {
+                description: t('prompt.change_world_recommended_capacity.description'),
-                distinguishCancelAndClose: true,
+                confirmText: t('prompt.change_world_capacity.ok'),
-                confirmButtonText: t('prompt.change_world_capacity.ok'),
+                cancelText: t('prompt.change_world_capacity.cancel'),
-                cancelButtonText: t('prompt.change_world_capacity.cancel'),
                 inputValue: world.ref.recommendedCapacity,
-                inputPattern: /\d+$/,
+                pattern: /\d+$/,
-                inputErrorMessage: t('prompt.change_world_recommended_capacity.input_error')
+                errorMessage: t('prompt.change_world_recommended_capacity.input_error')
-            }
+            })
-        )
+            .then(({ ok, value }) => {
-            .then(({ value }) => {
+                if (!ok) return;
                 if (value && value !== world.ref.recommendedCapacity) {
                     worldRequest
                         .saveWorld({
@@ -1225,14 +1228,17 @@
     }
 
     function promptChangeWorldYouTubePreview(world) {
-        ElMessageBox.prompt(t('prompt.change_world_preview.description'), t('prompt.change_world_preview.header'), {
+        modalStore
-            distinguishCancelAndClose: true,
+            .prompt({
-            confirmButtonText: t('prompt.change_world_preview.ok'),
+                title: t('prompt.change_world_preview.header'),
-            cancelButtonText: t('prompt.change_world_preview.cancel'),
+                description: t('prompt.change_world_preview.description'),
-            inputValue: world.ref.previewYoutubeId,
+                confirmText: t('prompt.change_world_preview.ok'),
-            inputErrorMessage: t('prompt.change_world_preview.input_error')
+                cancelText: t('prompt.change_world_preview.cancel'),
-        })
+                inputValue: world.ref.previewYoutubeId,
-            .then(({ value }) => {
+                errorMessage: t('prompt.change_world_preview.input_error')
+            })
+            .then(({ ok, value }) => {
+                if (!ok) return;
                 if (value && value !== world.ref.previewYoutubeId) {
                     let processedValue = value;
                     if (value.length > 11) {

src/components/ui/dialog/DialogContent.vue

@@ -40,7 +40,7 @@
             v-bind="{ ...$attrs, ...forwarded }"
             :class="
                 cn(
-                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+                    'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-10000 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
                     props.class
                 )
             ">

src/components/ui/dialog/DialogOverlay.vue

@@ -19,7 +19,7 @@
         v-bind="delegatedProps"
         :class="
             cn(
-                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-10000 bg-black/80',
                 props.class
             )
         ">

src/components/ui/dialog/DialogScrollContent.vue

@@ -32,11 +32,11 @@
 <template>
     <DialogPortal>
         <DialogOverlay
-            class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
+            class="fixed inset-0 z-10000 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
             <DialogContent
                 :class="
                     cn(
-                        'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+                        'relative z-10000 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
                         props.class
                     )
                 "

src/components/ui/dialog/PromptDialogModal.vue

@@ -7,7 +7,7 @@
         DialogHeader,
         DialogTitle
     } from '@/components/ui/dialog';
-    import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+    import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
     import { Button } from '@/components/ui/button';
     import { Input } from '@/components/ui/input';
     import { storeToRefs } from 'pinia';
@@ -61,7 +61,7 @@
             event.preventDefault();
             return;
         }
-        modalStore.handlePromptDismiss(values.value.value ?? '');
+        modalStore.handlePromptDismiss(values.value ?? '');
     }
 
     function onPointerDownOutside(event) {
@@ -69,7 +69,7 @@
             event.preventDefault();
             return;
         }
-        modalStore.handlePromptDismiss(values.value.value ?? '');
+        modalStore.handlePromptDismiss(values.value ?? '');
     }
 
     function onInteractOutside(event) {
@@ -77,20 +77,21 @@
             event.preventDefault();
             return;
         }
-        modalStore.handlePromptDismiss(values.value.value ?? '');
+        modalStore.handlePromptDismiss(values.value ?? '');
     }
 
     function handleCancel() {
-        modalStore.handlePromptCancel(values.value.value ?? '');
+        modalStore.handlePromptCancel(values.value ?? '');
     }
 
     watch(
-        promptOpen,
+        [promptOpen, promptInputValue],
-        (open) => {
+        ([open, inputValue]) => {
             if (open) {
-                setValues({ value: promptInputValue.value ?? '' });
+                setValues({ value: inputValue ?? '' });
                 return;
             }
+
             resetForm({
                 values: {
                     value: ''
@@ -108,7 +109,7 @@
             @escapeKeyDown="onEscapeKeyDown"
             @pointerDownOutside="onPointerDownOutside"
             @interactOutside="onInteractOutside">
-            <Form @submit="onSubmit">
+            <form @submit="onSubmit">
                 <DialogHeader>
                     <DialogTitle>{{ promptTitle }}</DialogTitle>
                     <DialogDescription>{{ promptDescription }}</DialogDescription>
@@ -132,7 +133,7 @@
                         {{ promptOkText }}
                     </Button>
                 </DialogFooter>
-            </Form>
+            </form>
         </DialogContent>
     </Dialog>
 </template>

src/components/ui/hover-card/HoverCardContent.vue

@@ -43,7 +43,7 @@
             v-bind="{ ...$attrs, ...forwardedProps }"
             :class="
                 cn(
-                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden',
+                    'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10000 w-64 rounded-md border p-4 shadow-md outline-hidden',
                     props.class
                 )
             ">

src/components/ui/input/Input.vue

@@ -11,7 +11,6 @@
     const emits = defineEmits(['update:modelValue']);
 
     const modelValue = useVModel(props, 'modelValue', emits, {
-        passive: true,
         defaultValue: props.defaultValue
     });
 </script>

src/stores/auth.js

@@ -1,5 +1,4 @@
 import { reactive, ref, watch } from 'vue';
-import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
@@ -255,15 +254,21 @@ export const useAuthStore = defineStore('Auth', () => {
         if (advancedSettingsStore.enablePrimaryPassword) {
             enablePrimaryPasswordDialog.value.visible = true;
         } else {
-            ElMessageBox.prompt(
+            modalStore
-                t('prompt.primary_password.description'),
+                .prompt({
-                t('prompt.primary_password.header'),
+                    title: t('prompt.primary_password.header'),
-                {
+                    description: t('prompt.primary_password.description'),
-                    inputType: 'password',
+                    pattern: /[\s\S]{1,32}/
-                    inputPattern: /[\s\S]{1,32}/
+                })
-                }
+                .then(async ({ ok, value }) => {
-            )
+                    if (!ok) {
-                .then(async ({ value }) => {
+                        advancedSettingsStore.enablePrimaryPassword = true;
+                        advancedSettingsStore.setEnablePrimaryPasswordConfigRepository(
+                            true
+                        );
+                        return;
+                    }
+
                     const savedCredentials = JSON.parse(
                         await configRepository.getString(
                             'savedCredentials',
@@ -299,7 +304,8 @@ export const useAuthStore = defineStore('Auth', () => {
                             });
                     }
                 })
-                .catch(async () => {
+                .catch((err) => {
+                    console.error(err);
                     advancedSettingsStore.enablePrimaryPassword = true;
                     advancedSettingsStore.setEnablePrimaryPasswordConfigRepository(
                         true
@@ -378,16 +384,19 @@ export const useAuthStore = defineStore('Auth', () => {
         return new Promise((resolve, reject) => {
             if (!advancedSettingsStore.enablePrimaryPassword) {
                 resolve(args.password);
+                return;
             }
-            ElMessageBox.prompt(
+            modalStore
-                t('prompt.primary_password.description'),
+                .prompt({
-                t('prompt.primary_password.header'),
+                    title: t('prompt.primary_password.header'),
-                {
+                    description: t('prompt.primary_password.description'),
-                    inputType: 'password',
+                    pattern: /[\s\S]{1,32}/
-                    inputPattern: /[\s\S]{1,32}/
+                })
-                }
+                .then(({ ok, value }) => {
-            )
+                    if (!ok) {
-                .then(({ value }) => {
+                        reject(new Error('primary password prompt cancelled'));
+                        return;
+                    }
                     security
                         .decrypt(args.password, value)
                         .then(resolve)
@@ -536,15 +545,16 @@ export const useAuthStore = defineStore('Auth', () => {
                         loginForm.value.saveCredentials &&
                         advancedSettingsStore.enablePrimaryPassword
                     ) {
-                        ElMessageBox.prompt(
+                        modalStore
-                            t('prompt.primary_password.description'),
+                            .prompt({
-                            t('prompt.primary_password.header'),
+                                title: t('prompt.primary_password.header'),
-                            {
+                                description: t(
-                                inputType: 'password',
+                                    'prompt.primary_password.description'
-                                inputPattern: /[\s\S]{1,32}/
+                                ),
-                            }
+                                pattern: /[\s\S]{1,32}/
-                        )
+                            })
-                            .then(async ({ value }) => {
+                            .then(async ({ ok, value }) => {
+                                if (!ok) return;
                                 const savedCredentials = JSON.parse(
                                     await configRepository.getString(
                                         'savedCredentials'
@@ -613,41 +623,39 @@ export const useAuthStore = defineStore('Auth', () => {
         }
         AppApi.FlashWindow();
         twoFactorAuthDialogVisible.value = true;
-        ElMessageBox.prompt(
+        modalStore
-            t('prompt.totp.description'),
+            .prompt({
-            t('prompt.totp.header'),
+                title: t('prompt.totp.header'),
-            {
+                description: t('prompt.totp.description'),
-                distinguishCancelAndClose: true,
+                cancelText: t('prompt.totp.use_otp'),
-                cancelButtonText: t('prompt.totp.use_otp'),
+                confirmText: t('prompt.totp.verify'),
-                confirmButtonText: t('prompt.totp.verify'),
+                pattern: /^[0-9]{6}$/,
-                inputPlaceholder: t('prompt.totp.input_placeholder'),
+                errorMessage: t('prompt.totp.input_error')
-                inputPattern: /^[0-9]{6}$/,
-                inputErrorMessage: t('prompt.totp.input_error'),
-                beforeClose: (action, instance, done) => {
-                    twoFactorAuthDialogVisible.value = false;
-                    if (action === 'cancel') {
-                        promptOTP();
-                    }
-                    done();
-                }
-            }
-        )
-            .then(({ value, action }) => {
-                if (action === 'confirm') {
-                    authRequest
-                        .verifyTOTP({
-                            code: value.trim()
-                        })
-                        .catch((err) => {
-                            console.error(err);
-                            clearCookiesTryLogin();
-                        })
-                        .then(() => {
-                            userStore.getCurrentUser();
-                        });
-                }
             })
-            .catch(() => {});
+            .then(({ ok, reason, value }) => {
+                twoFactorAuthDialogVisible.value = false;
+
+                if (reason === 'cancel') {
+                    promptOTP();
+                    return;
+                }
+                if (!ok) return;
+
+                authRequest
+                    .verifyTOTP({
+                        code: value.trim()
+                    })
+                    .catch((err) => {
+                        console.error(err);
+                        clearCookiesTryLogin();
+                    })
+                    .then(() => {
+                        userStore.getCurrentUser();
+                    });
+            })
+            .catch(() => {
+                twoFactorAuthDialogVisible.value = false;
+            });
     }
 
     function promptOTP() {
@@ -655,41 +663,39 @@ export const useAuthStore = defineStore('Auth', () => {
             return;
         }
         twoFactorAuthDialogVisible.value = true;
-        ElMessageBox.prompt(
+        modalStore
-            t('prompt.otp.description'),
+            .prompt({
-            t('prompt.otp.header'),
+                title: t('prompt.otp.header'),
-            {
+                description: t('prompt.otp.description'),
-                distinguishCancelAndClose: true,
+                cancelText: t('prompt.otp.use_totp'),
-                cancelButtonText: t('prompt.otp.use_totp'),
+                confirmText: t('prompt.otp.verify'),
-                confirmButtonText: t('prompt.otp.verify'),
+                pattern: /^[a-z0-9]{4}-[a-z0-9]{4}$/,
-                inputPlaceholder: t('prompt.otp.input_placeholder'),
+                errorMessage: t('prompt.otp.input_error')
-                inputPattern: /^[a-z0-9]{4}-[a-z0-9]{4}$/,
-                inputErrorMessage: t('prompt.otp.input_error'),
-                beforeClose: (action, instance, done) => {
-                    twoFactorAuthDialogVisible.value = false;
-                    if (action === 'cancel') {
-                        promptTOTP();
-                    }
-                    done();
-                }
-            }
-        )
-            .then(({ value, action }) => {
-                if (action === 'confirm') {
-                    authRequest
-                        .verifyOTP({
-                            code: value.trim()
-                        })
-                        .catch((err) => {
-                            console.error(err);
-                            clearCookiesTryLogin();
-                        })
-                        .then(() => {
-                            userStore.getCurrentUser();
-                        });
-                }
             })
-            .catch(() => {});
+            .then(({ ok, reason, value }) => {
+                twoFactorAuthDialogVisible.value = false;
+
+                if (reason === 'cancel') {
+                    promptTOTP();
+                    return;
+                }
+                if (!ok) return;
+
+                authRequest
+                    .verifyOTP({
+                        code: value.trim()
+                    })
+                    .catch((err) => {
+                        console.error(err);
+                        clearCookiesTryLogin();
+                    })
+                    .then(() => {
+                        userStore.getCurrentUser();
+                    });
+            })
+            .catch(() => {
+                twoFactorAuthDialogVisible.value = false;
+            });
     }
 
     function promptEmailOTP() {
@@ -698,42 +704,39 @@ export const useAuthStore = defineStore('Auth', () => {
         }
         AppApi.FlashWindow();
         twoFactorAuthDialogVisible.value = true;
-        ElMessageBox.prompt(
+        modalStore
-            t('prompt.email_otp.description'),
+            .prompt({
-            t('prompt.email_otp.header'),
+                title: t('prompt.email_otp.header'),
-            {
+                description: t('prompt.email_otp.description'),
-                distinguishCancelAndClose: true,
+                cancelText: t('prompt.email_otp.resend'),
-                cancelButtonText: t('prompt.email_otp.resend'),
+                confirmText: t('prompt.email_otp.verify'),
-                confirmButtonText: t('prompt.email_otp.verify'),
+                pattern: /^[0-9]{6}$/,
-                inputPlaceholder: t('prompt.email_otp.input_placeholder'),
+                errorMessage: t('prompt.email_otp.input_error')
-                inputPattern: /^[0-9]{6}$/,
-                inputErrorMessage: t('prompt.email_otp.input_error'),
-                beforeClose: (action, instance, done) => {
-                    twoFactorAuthDialogVisible.value = false;
-                    if (action === 'cancel') {
-                        resendEmail2fa();
-                        return;
-                    }
-                    done();
-                }
-            }
-        )
-            .then(({ value, action }) => {
-                if (action === 'confirm') {
-                    authRequest
-                        .verifyEmailOTP({
-                            code: value.trim()
-                        })
-                        .catch((err) => {
-                            console.error(err);
-                            promptEmailOTP();
-                        })
-                        .then(() => {
-                            userStore.getCurrentUser();
-                        });
-                }
             })
-            .catch(() => {});
+            .then(({ ok, reason, value }) => {
+                twoFactorAuthDialogVisible.value = false;
+
+                if (reason === 'cancel') {
+                    resendEmail2fa();
+                    return;
+                }
+                if (!ok) return;
+
+                authRequest
+                    .verifyEmailOTP({
+                        code: value.trim()
+                    })
+                    .catch((err) => {
+                        console.error(err);
+                        promptEmailOTP();
+                    })
+                    .then(() => {
+                        userStore.getCurrentUser();
+                    });
+            })
+            .catch(() => {
+                twoFactorAuthDialogVisible.value = false;
+            });
     }
 
     /**

src/stores/photon.js

@@ -1,5 +1,4 @@
 import { computed, reactive, ref } from 'vue';
-import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
@@ -24,6 +23,7 @@ import { useFriendStore } from './friend';
 import { useGameLogStore } from './gameLog';
 import { useInstanceStore } from './instance';
 import { useLocationStore } from './location';
+import { useModalStore } from './modal';
 import { useNotificationStore } from './notification';
 import { useSharedFeedStore } from './sharedFeed';
 import { useUserStore } from './user';
@@ -39,6 +39,7 @@ export const usePhotonStore = defineStore('Photon', () => {
     const friendStore = useFriendStore();
     const instanceStore = useInstanceStore();
     const gameLogStore = useGameLogStore();
+    const modalStore = useModalStore();
     const notificationStore = useNotificationStore();
     const locationStore = useLocationStore();
     const sharedFeedStore = useSharedFeedStore();
@@ -440,24 +441,21 @@ export const usePhotonStore = defineStore('Photon', () => {
     }
 
     function promptPhotonOverlayMessageTimeout() {
-        ElMessageBox.prompt(
+        modalStore
-            t('prompt.overlay_message_timeout.description'),
+            .prompt({
-            t('prompt.overlay_message_timeout.header'),
+                title: t('prompt.overlay_message_timeout.header'),
-            {
+                description: t('prompt.overlay_message_timeout.description'),
-                distinguishCancelAndClose: true,
+                confirmText: t('prompt.overlay_message_timeout.ok'),
-                confirmButtonText: t('prompt.overlay_message_timeout.ok'),
+                cancelText: t('prompt.overlay_message_timeout.cancel'),
-                cancelButtonText: t('prompt.overlay_message_timeout.cancel'),
                 inputValue: (
                     state.photonOverlayMessageTimeout / 1000
                 ).toString(),
-                inputPattern: /\d+$/,
+                pattern: /\d+$/,
-                inputErrorMessage: t(
+                errorMessage: t('prompt.overlay_message_timeout.input_error')
-                    'prompt.overlay_message_timeout.input_error'
+            })
-                )
+            .then(({ ok, value }) => {
-            }
+                if (!ok) return;
-        )
+                if (value && !isNaN(Number(value))) {
-            .then(({ value, action }) => {
-                if (action === 'confirm' && value && !isNaN(Number(value))) {
                     state.photonOverlayMessageTimeout = Math.trunc(
                         Number(value) * 1000
                     );
@@ -468,22 +466,21 @@ export const usePhotonStore = defineStore('Photon', () => {
     }
 
     function promptPhotonLobbyTimeoutThreshold() {
-        ElMessageBox.prompt(
+        modalStore
-            t('prompt.photon_lobby_timeout.description'),
+            .prompt({
-            t('prompt.photon_lobby_timeout.header'),
+                title: t('prompt.photon_lobby_timeout.header'),
-            {
+                description: t('prompt.photon_lobby_timeout.description'),
-                distinguishCancelAndClose: true,
+                confirmText: t('prompt.photon_lobby_timeout.ok'),
-                confirmButtonText: t('prompt.photon_lobby_timeout.ok'),
+                cancelText: t('prompt.photon_lobby_timeout.cancel'),
-                cancelButtonText: t('prompt.photon_lobby_timeout.cancel'),
                 inputValue: (
                     state.photonLobbyTimeoutThreshold / 1000
                 ).toString(),
-                inputPattern: /\d+$/,
+                pattern: /\d+$/,
-                inputErrorMessage: t('prompt.photon_lobby_timeout.input_error')
+                errorMessage: t('prompt.photon_lobby_timeout.input_error')
-            }
+            })
-        )
+            .then(({ ok, value }) => {
-            .then(({ value, action }) => {
+                if (!ok) return;
-                if (action === 'confirm' && value && !isNaN(Number(value))) {
+                if (value && !isNaN(Number(value))) {
                     state.photonLobbyTimeoutThreshold = Math.trunc(
                         Number(value) * 1000
                     );

src/stores/search.js

@@ -1,5 +1,4 @@
 import { computed, ref, watch } from 'vue';
-import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
@@ -13,6 +12,7 @@ import { useAppearanceSettingsStore } from './settings/appearance';
 import { useAvatarStore } from './avatar';
 import { useFriendStore } from './friend';
 import { useGroupStore } from './group';
+import { useModalStore } from './modal';
 import { useUserStore } from './user';
 import { useWorldStore } from './world';
 import { watchState } from '../service/watchState';
@@ -25,6 +25,7 @@ export const useSearchStore = defineStore('Search', () => {
     const worldStore = useWorldStore();
     const avatarStore = useAvatarStore();
     const groupStore = useGroupStore();
+    const modalStore = useModalStore();
     const { t } = useI18n();
 
     const searchText = ref('');
@@ -350,22 +351,20 @@ export const useSearchStore = defineStore('Search', () => {
     async function promptOmniDirectDialog() {
         if (directAccessPrompt.value) return;
 
-        directAccessPrompt.value = ElMessageBox.prompt(
+        // Element Plus: prompt(message, title, options)
-            t('prompt.direct_access_omni.description'),
+        directAccessPrompt.value = modalStore.prompt({
-            t('prompt.direct_access_omni.header'),
+            title: t('prompt.direct_access_omni.header'),
-            {
+            description: t('prompt.direct_access_omni.description'),
-                distinguishCancelAndClose: true,
+            confirmText: t('prompt.direct_access_omni.ok'),
-                confirmButtonText: t('prompt.direct_access_omni.ok'),
+            cancelText: t('prompt.direct_access_omni.cancel'),
-                cancelButtonText: t('prompt.direct_access_omni.cancel'),
+            pattern: /\S+/,
-                inputPattern: /\S+/,
+            errorMessage: t('prompt.direct_access_omni.input_error')
-                inputErrorMessage: t('prompt.direct_access_omni.input_error')
+        });
-            }
-        );
 
         try {
-            const { value, action } = await directAccessPrompt.value;
+            const { ok, value } = await directAccessPrompt.value;
 
-            if (action === 'confirm' && value) {
+            if (ok && value) {
                 const input = value.trim();
                 if (!directAccessParse(input)) {
                     toast.error(t('prompt.direct_access_omni.message.error'));

src/stores/settings/advanced.js

@@ -1,5 +1,4 @@
 import { reactive, ref, watch } from 'vue';
-import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
@@ -855,23 +854,22 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
     }
 
     function promptAutoClearVRCXCacheFrequency() {
-        ElMessageBox.prompt(
+        modalStore
-            t('prompt.auto_clear_cache.description'),
+            .prompt({
-            t('prompt.auto_clear_cache.header'),
+                title: t('prompt.auto_clear_cache.header'),
-            {
+                description: t('prompt.auto_clear_cache.description'),
-                distinguishCancelAndClose: true,
+                confirmText: t('prompt.auto_clear_cache.ok'),
-                confirmButtonText: t('prompt.auto_clear_cache.ok'),
+                cancelText: t('prompt.auto_clear_cache.cancel'),
-                cancelButtonText: t('prompt.auto_clear_cache.cancel'),
                 inputValue: (
                     vrcxStore.clearVRCXCacheFrequency /
                     3600 /
                     2
                 ).toString(),
-                inputPattern: /\d+$/,
+                pattern: /\d+$/,
-                inputErrorMessage: t('prompt.auto_clear_cache.input_error')
+                errorMessage: t('prompt.auto_clear_cache.input_error')
-            }
+            })
-        )
+            .then(async ({ ok, value }) => {
-            .then(async ({ value }) => {
+                if (!ok) return;
                 if (value && !isNaN(parseInt(value, 10))) {
                     vrcxStore.clearVRCXCacheFrequency = Math.trunc(
                         parseInt(value, 10) * 3600 * 2

src/stores/settings/appearance.js

@@ -1,5 +1,4 @@
 import { computed, ref, watch } from 'vue';
-import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -17,6 +16,7 @@ import { loadLocalizedStrings } from '../../plugin';
 import { useElementTheme } from '../../composables/useElementTheme';
 import { useFeedStore } from '../feed';
 import { useGameLogStore } from '../gameLog';
+import { useModalStore } from '../modal';
 import { useUiStore } from '../ui';
 import { useUserStore } from '../user';
 import { useVrStore } from '../vr';
@@ -36,6 +36,7 @@ export const useAppearanceSettingsStore = defineStore(
         const userStore = useUserStore();
         const router = useRouter();
         const uiStore = useUiStore();
+        const modalStore = useModalStore();
 
         const { t, locale } = useI18n();
 
@@ -746,19 +747,18 @@ export const useAppearanceSettingsStore = defineStore(
         }
 
         function promptMaxTableSizeDialog() {
-            ElMessageBox.prompt(
+            modalStore
-                t('prompt.change_table_size.description'),
+                .prompt({
-                t('prompt.change_table_size.header'),
+                    title: t('prompt.change_table_size.header'),
-                {
+                    description: t('prompt.change_table_size.description'),
-                    distinguishCancelAndClose: true,
+                    confirmText: t('prompt.change_table_size.save'),
-                    confirmButtonText: t('prompt.change_table_size.save'),
+                    cancelText: t('prompt.change_table_size.cancel'),
-                    cancelButtonText: t('prompt.change_table_size.cancel'),
                     inputValue: vrcxStore.maxTableSize.toString(),
-                    inputPattern: /\d+$/,
+                    pattern: /\d+$/,
-                    inputErrorMessage: t('prompt.change_table_size.input_error')
+                    errorMessage: t('prompt.change_table_size.input_error')
-                }
+                })
-            )
+                .then(async ({ ok, value }) => {
-                .then(async ({ value }) => {
+                    if (!ok) return;
                     if (value) {
                         let processedValue = Number(value);
                         if (processedValue > 10000) {

src/stores/settings/general.js

@@ -1,9 +1,9 @@
-import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { useFriendStore } from '../friend';
+import { useModalStore } from '../modal';
 import { useVRCXUpdaterStore } from '../vrcxUpdater';
 import { useVrcxStore } from '../vrcx';
 
@@ -15,6 +15,7 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
     const vrcxStore = useVrcxStore();
     const VRCXUpdaterStore = useVRCXUpdaterStore();
     const friendStore = useFriendStore();
+    const modalStore = useModalStore();
 
     const { t } = useI18n();
 
@@ -231,32 +232,32 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
     }
 
     function promptProxySettings() {
-        ElMessageBox.prompt(
+        // Element Plus: prompt(message, title, options)
-            t('prompt.proxy_settings.description'),
+        modalStore
-            t('prompt.proxy_settings.header'),
+            .prompt({
-            {
+                title: t('prompt.proxy_settings.header'),
-                distinguishCancelAndClose: true,
+                description: t('prompt.proxy_settings.description'),
-                confirmButtonText: t('prompt.proxy_settings.restart'),
+                confirmText: t('prompt.proxy_settings.restart'),
-                cancelButtonText: t('prompt.proxy_settings.close'),
+                cancelText: t('prompt.proxy_settings.close'),
-                inputValue: vrcxStore.proxyServer,
+                inputValue: vrcxStore.proxyServer
-                inputPlaceholder: t('prompt.proxy_settings.placeholder')
-            }
-        )
-            .then(async ({ value }) => {
-                vrcxStore.proxyServer = value;
-                await VRCXStorage.Set(
-                    'VRCX_ProxyServer',
-                    vrcxStore.proxyServer
-                );
-                await VRCXStorage.Save();
-                await new Promise((resolve) => {
-                    workerTimers.setTimeout(resolve, 100);
-                });
-                const { restartVRCX } = VRCXUpdaterStore;
-                const isUpgrade = false;
-                restartVRCX(isUpgrade);
             })
-            .catch(async () => {
+            .then(async ({ ok, value }) => {
+                if (ok) {
+                    vrcxStore.proxyServer = value;
+                    await VRCXStorage.Set(
+                        'VRCX_ProxyServer',
+                        vrcxStore.proxyServer
+                    );
+                    await VRCXStorage.Save();
+                    await new Promise((resolve) => {
+                        workerTimers.setTimeout(resolve, 100);
+                    });
+                    const { restartVRCX } = VRCXUpdaterStore;
+                    const isUpgrade = false;
+                    restartVRCX(isUpgrade);
+                    return;
+                }
+
                 // User clicked close/cancel, still save the value but don't restart
                 if (vrcxStore.proxyServer !== undefined) {
                     await VRCXStorage.Set(
@@ -268,6 +269,9 @@ export const useGeneralSettingsStore = defineStore('GeneralSettings', () => {
                         workerTimers.setTimeout(resolve, 100);
                     });
                 }
+            })
+            .catch((err) => {
+                console.error(err);
             });
     }
 

src/stores/settings/notifications.js

@@ -1,9 +1,9 @@
-import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { sharedFeedFiltersDefaults } from '../../shared/constants';
+import { useModalStore } from '../modal';
 import { useVrStore } from '../vr';
 
 import configRepository from '../../service/config';
@@ -12,6 +12,7 @@ export const useNotificationsSettingsStore = defineStore(
     'NotificationsSettings',
     () => {
         const vrStore = useVrStore();
+        const modalStore = useModalStore();
 
         const { t } = useI18n();
 
@@ -410,21 +411,18 @@ export const useNotificationsSettingsStore = defineStore(
         }
 
         function promptNotificationTimeout() {
-            ElMessageBox.prompt(
+            modalStore
-                t('prompt.notification_timeout.description'),
+                .prompt({
-                t('prompt.notification_timeout.header'),
+                    title: t('prompt.notification_timeout.header'),
-                {
+                    description: t('prompt.notification_timeout.description'),
-                    distinguishCancelAndClose: true,
+                    confirmText: t('prompt.notification_timeout.ok'),
-                    confirmButtonText: t('prompt.notification_timeout.ok'),
+                    cancelText: t('prompt.notification_timeout.cancel'),
-                    cancelButtonText: t('prompt.notification_timeout.cancel'),
                     inputValue: notificationTimeout.value / 1000,
-                    inputPattern: /\d+$/,
+                    pattern: /\d+$/,
-                    inputErrorMessage: t(
+                    errorMessage: t('prompt.notification_timeout.input_error')
-                        'prompt.notification_timeout.input_error'
+                })
-                    )
+                .then(async ({ ok, value }) => {
-                }
+                    if (!ok) return;
-            )
-                .then(async ({ value }) => {
                     if (value && !isNaN(value)) {
                         notificationTimeout.value = Math.trunc(
                             Number(value) * 1000

src/views/Favorites/FavoritesAvatar.vue

@@ -529,7 +529,6 @@
     import { ArrowUpDown, Check, Ellipsis, Loader, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
     import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
     import { Button } from '@/components/ui/button';
-    import { ElMessageBox } from 'element-plus';
     import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -1344,19 +1343,18 @@
 
     function changeFavoriteGroupName(group) {
         const currentName = group.displayName || group.name;
-        ElMessageBox.prompt(
+        modalStore
-            t('prompt.change_favorite_group_name.description'),
+            .prompt({
-            t('prompt.change_favorite_group_name.header'),
+                title: t('prompt.change_favorite_group_name.header'),
-            {
+                description: t('prompt.change_favorite_group_name.description'),
-                confirmButtonText: t('prompt.change_favorite_group_name.change'),
+                confirmText: t('prompt.change_favorite_group_name.change'),
-                cancelButtonText: t('prompt.change_favorite_group_name.cancel'),
+                cancelText: t('prompt.change_favorite_group_name.cancel'),
-                inputPlaceholder: t('prompt.change_favorite_group_name.input_placeholder'),
+                pattern: /\S+/,
-                inputPattern: /\S+/,
                 inputValue: currentName,
-                inputErrorMessage: t('prompt.change_favorite_group_name.input_error')
+                errorMessage: t('prompt.change_favorite_group_name.input_error')
-            }
+            })
-        )
+            .then(({ ok, value }) => {
-            .then(({ value }) => {
+                if (!ok) return;
                 const newName = value.trim();
                 if (!newName || newName === currentName) {
                     return;
@@ -1419,19 +1417,18 @@
     }
 
     function promptLocalAvatarFavoriteGroupRename(group) {
-        ElMessageBox.prompt(
+        modalStore
-            t('prompt.local_favorite_group_rename.description'),
+            .prompt({
-            t('prompt.local_favorite_group_rename.header'),
+                title: t('prompt.local_favorite_group_rename.header'),
-            {
+                description: t('prompt.local_favorite_group_rename.description'),
-                distinguishCancelAndClose: true,
+                confirmText: t('prompt.local_favorite_group_rename.save'),
-                confirmButtonText: t('prompt.local_favorite_group_rename.save'),
+                cancelText: t('prompt.local_favorite_group_rename.cancel'),
-                cancelButtonText: t('prompt.local_favorite_group_rename.cancel'),
+                pattern: /\S+/,
-                inputPattern: /\S+/,
+                errorMessage: t('prompt.local_favorite_group_rename.input_error'),
-                inputErrorMessage: t('prompt.local_favorite_group_rename.input_error'),
                 inputValue: group
-            }
+            })
-        )
+            .then(({ ok, value }) => {
-            .then(({ value }) => {
+                if (!ok) return;
                 if (value) {
                     renameLocalAvatarFavoriteGroup(value, group);
                     nextTick(() => {

src/views/Favorites/FavoritesFriend.vue

@@ -312,7 +312,6 @@
     import { computed, nextTick, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue';
     import { ArrowUpDown, Check, Ellipsis, MoreHorizontal, RefreshCw } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
-    import { ElMessageBox } from 'element-plus';
     import { InputGroupSearch } from '@/components/ui/input-group';
     import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
@@ -809,19 +808,18 @@
 
     function changeFavoriteGroupName(group) {
         const currentName = group.displayName || group.name;
-        ElMessageBox.prompt(
+        modalStore
-            t('prompt.change_favorite_group_name.description'),
+            .prompt({
-            t('prompt.change_favorite_group_name.header'),
+                title: t('prompt.change_favorite_group_name.header'),
-            {
+                description: t('prompt.change_favorite_group_name.description'),
-                confirmButtonText: t('prompt.change_favorite_group_name.change'),
+                confirmText: t('prompt.change_favorite_group_name.change'),
-                cancelButtonText: t('prompt.change_favorite_group_name.cancel'),
+                cancelText: t('prompt.change_favorite_group_name.cancel'),
-                inputPlaceholder: t('prompt.change_favorite_group_name.input_placeholder'),
+                pattern: /\S+/,
-                inputPattern: /\S+/,
                 inputValue: currentName,
-                inputErrorMessage: t('prompt.change_favorite_group_name.input_error')
+                errorMessage: t('prompt.change_favorite_group_name.input_error')
-            }
+            })
-        )
+            .then(({ ok, value }) => {
-            .then(({ value }) => {
+                if (!ok) return;
                 const newName = value.trim();
                 if (!newName || newName === currentName) {
                     return;

src/views/Favorites/FavoritesWorld.vue

@@ -440,7 +440,6 @@
     import { ArrowUpDown, Ellipsis, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
     import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
     import { Button } from '@/components/ui/button';
-    import { ElMessageBox } from 'element-plus';
     import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -1145,19 +1144,18 @@
     }
 
     function promptLocalWorldFavoriteGroupRename(group) {
-        ElMessageBox.prompt(
+        modalStore
-            t('prompt.local_favorite_group_rename.description'),
+            .prompt({
-            t('prompt.local_favorite_group_rename.header'),
+                title: t('prompt.local_favorite_group_rename.header'),
-            {
+                description: t('prompt.local_favorite_group_rename.description'),
-                distinguishCancelAndClose: true,
+                confirmText: t('prompt.local_favorite_group_rename.save'),
-                confirmButtonText: t('prompt.local_favorite_group_rename.save'),
+                cancelText: t('prompt.local_favorite_group_rename.cancel'),
-                cancelButtonText: t('prompt.local_favorite_group_rename.cancel'),
+                pattern: /\S+/,
-                inputPattern: /\S+/,
+                errorMessage: t('prompt.local_favorite_group_rename.input_error'),
-                inputErrorMessage: t('prompt.local_favorite_group_rename.input_error'),
                 inputValue: group
-            }
+            })
-        )
+            .then(({ ok, value }) => {
-            .then(({ value }) => {
+                if (!ok) return;
                 if (value) {
                     renameLocalWorldFavoriteGroup(value, group);
                     nextTick(() => {
@@ -1238,19 +1236,18 @@
 
     function changeFavoriteGroupName(group) {
         const currentName = group.displayName || group.name;
-        ElMessageBox.prompt(
+        modalStore
-            t('prompt.change_favorite_group_name.description'),
+            .prompt({
-            t('prompt.change_favorite_group_name.header'),
+                title: t('prompt.change_favorite_group_name.header'),
-            {
+                description: t('prompt.change_favorite_group_name.description'),
-                confirmButtonText: t('prompt.change_favorite_group_name.change'),
+                confirmText: t('prompt.change_favorite_group_name.change'),
-                cancelButtonText: t('prompt.change_favorite_group_name.cancel'),
+                cancelText: t('prompt.change_favorite_group_name.cancel'),
-                inputPlaceholder: t('prompt.change_favorite_group_name.input_placeholder'),
+                pattern: /\S+/,
-                inputPattern: /\S+/,
                 inputValue: currentName,
-                inputErrorMessage: t('prompt.change_favorite_group_name.input_error')
+                errorMessage: t('prompt.change_favorite_group_name.input_error')
-            }
+            })
-        )
+            .then(({ ok, value }) => {
-            .then(({ value }) => {
+                if (!ok) return;
                 const newName = value.trim();
                 if (!newName || newName === currentName) {
                     return;

src/views/PlayerList/components/photonEventColumns.jsx

@@ -88,7 +88,7 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
                             ></i>
                         </TooltipWrapper>
                         <span>
-                            <ArrowRight / />
+                            <ArrowRight />
                         </span>
                         <TooltipWrapper
                             side="top"
@@ -126,7 +126,7 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
                     {r.previousGroupName || r.previousGroupId}
                 </span>
                 <span>
-                    <ArrowRight / />
+                    <ArrowRight />
                 </span>
                 <span
                     class="x-link"
@@ -179,7 +179,6 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
                         Android&nbsp;
                     </span>
                 ) : null}
-
                 <span
                     class="x-link"
                     onClick={(e) => {
@@ -192,7 +191,7 @@ function DetailCell({ row, isPrevious, onShowAvatar, onShowGroup, onShowWorld, o
                 &nbsp;
                 {!r.inCache ? (
                     <span style="color: #aaa">
-                        <Download / />
+                        <Download />
                         &nbsp;
                     </span>
                 ) : null}

src/views/Settings/dialogs/RegistryBackupDialog.vue

@@ -50,7 +50,6 @@
     import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { DataTableLayout } from '@/components/ui/data-table';
-    import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
@@ -178,12 +177,16 @@
     }
 
     function promptVrcRegistryBackupName() {
-        ElMessageBox.prompt('Enter a name for the backup', 'Backup Name', {
+        modalStore
-            inputPattern: /\S+/,
+            .prompt({
-            inputErrorMessage: 'Name is required',
+                title: 'Backup Name',
-            inputValue: 'Backup'
+                description: 'Enter a name for the backup',
-        })
+                inputValue: 'Backup',
-            .then(({ value }) => {
+                pattern: /\S+/,
+                errorMessage: 'Name is required'
+            })
+            .then(({ ok, value }) => {
+                if (!ok) return;
                 handleBackupVrcRegistry(value);
             })
             .catch(() => {});

src/views/Tools/Gallery.vue

@@ -580,7 +580,6 @@
     import { Button } from '@/components/ui/button';
     import { ButtonGroup } from '@/components/ui/button-group';
     import { Checkbox } from '@/components/ui/checkbox';
-    import { ElMessageBox } from 'element-plus';
     import { InputGroupTextareaField } from '@/components/ui/input-group';
     import { TabsUnderline } from '@/components/ui/tabs';
     import { VirtualCombobox } from '@/components/ui/virtual-combobox';
@@ -597,7 +596,7 @@
         openExternalLink
     } from '../../shared/utils';
     import { inventoryRequest, miscRequest, userRequest, vrcPlusIconRequest, vrcPlusImageRequest } from '../../api';
-    import { useAdvancedSettingsStore, useAuthStore, useGalleryStore, useUserStore } from '../../stores';
+    import { useAdvancedSettingsStore, useAuthStore, useGalleryStore, useModalStore, useUserStore } from '../../stores';
     import { emojiAnimationStyleList, emojiAnimationStyleUrl } from '../../shared/constants';
     import { AppDebug } from '../../service/appConfig';
     import { handleImageUploadInput } from '../../shared/utils/imageUpload';
@@ -606,6 +605,7 @@
 
     const { t } = useI18n();
     const router = useRouter();
+    const modalStore = useModalStore();
 
     const {
         galleryTable,
@@ -1161,11 +1161,15 @@
     }
 
     async function redeemReward() {
-        ElMessageBox.prompt(t('prompt.redeem.description'), t('prompt.redeem.header'), {
+        modalStore
-            confirmButtonText: t('prompt.redeem.redeem'),
+            .prompt({
-            cancelButtonText: t('prompt.redeem.cancel')
+                title: t('prompt.redeem.header'),
-        })
+                description: t('prompt.redeem.description'),
-            .then(({ value }) => {
+                confirmText: t('prompt.redeem.redeem'),
+                cancelText: t('prompt.redeem.cancel')
+            })
+            .then(({ ok, value }) => {
+                if (!ok) return;
                 if (value) {
                     inventoryRequest
                         .redeemReward({