replace ElMessageBox(alert, confirm) with alert dialog

src/stores/auth.js

@@ -13,6 +13,7 @@ import { database } from '../service/database';
 import { escapeTag } from '../shared/utils';
 import { request } from '../service/request';
 import { useAdvancedSettingsStore } from './settings/advanced';
+import { useModalStore } from './modal';
 import { useNotificationStore } from './notification';
 import { useUpdateLoopStore } from './updateLoop';
 import { useUserStore } from './user';
@@ -27,6 +28,7 @@ export const useAuthStore = defineStore('Auth', () => {
     const notificationStore = useNotificationStore();
     const userStore = useUserStore();
     const updateLoopStore = useUpdateLoopStore();
+    const modalStore = useModalStore();
 
     const { t } = useI18n();
     const state = reactive({
@@ -405,21 +407,20 @@ export const useAuthStore = defineStore('Auth', () => {
     }
 
     function logout() {
-        ElMessageBox.confirm('Continue? Logout', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    const existingStyle = document.getElementById(
-                        'login-container-style'
-                    );
-                    if (existingStyle) {
-                        existingStyle.parentNode.removeChild(existingStyle);
-                    }
-                    handleLogoutEvent();
+        modalStore
+            .confirm({
+                description: 'Continue? Logout',
+                title: 'Confirm'
+            })
+            .then(({ ok }) => {
+                if (!ok) return;
+                const existingStyle = document.getElementById(
+                    'login-container-style'
+                );
+                if (existingStyle) {
+                    existingStyle.parentNode.removeChild(existingStyle);
                 }
+                handleLogoutEvent();
             })
             .catch(() => {});
     }

src/stores/avatar.js

@@ -1,5 +1,4 @@
 import { nextTick, ref, watch } from 'vue';
-import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { toast } from 'vue-sonner';
 
@@ -18,6 +17,7 @@ import { database } from '../service/database';
 import { useAdvancedSettingsStore } from './settings/advanced';
 import { useAvatarProviderStore } from './avatarProvider';
 import { useFavoriteStore } from './favorite';
+import { useModalStore } from './modal';
 import { useUserStore } from './user';
 import { useVRCXUpdaterStore } from './vrcxUpdater';
 import { watchState } from '../service/watchState';
@@ -30,6 +30,7 @@ export const useAvatarStore = defineStore('Avatar', () => {
     const vrcxUpdaterStore = useVRCXUpdaterStore();
     const advancedSettingsStore = useAdvancedSettingsStore();
     const userStore = useUserStore();
+    const modalStore = useModalStore();
 
     let cachedAvatarModerations = new Map();
     let cachedAvatars = new Map();
@@ -389,12 +390,13 @@ export const useAvatarStore = defineStore('Avatar', () => {
     }
 
     function promptClearAvatarHistory() {
-        ElMessageBox.confirm('Continue? Clear Avatar History', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then(() => {
+        modalStore
+            .confirm({
+                description: 'Continue? Clear Avatar History',
+                title: 'Confirm'
+            })
+            .then(({ ok }) => {
+                if (!ok) return;
                 clearAvatarHistory();
             })
             .catch(() => {});
@@ -552,12 +554,13 @@ export const useAvatarStore = defineStore('Avatar', () => {
     }
 
     function selectAvatarWithConfirmation(id) {
-        ElMessageBox.confirm(`Continue? Select Avatar`, 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then(() => {
+        modalStore
+            .confirm({
+                description: 'Continue? Select Avatar',
+                title: 'Confirm'
+            })
+            .then(({ ok }) => {
+                if (!ok) return;
                 selectAvatarWithoutConfirmation(id);
             })
             .catch(() => {});

src/stores/friend.js

@@ -1,5 +1,4 @@
 import { computed, reactive, ref, watch } from 'vue';
-import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
@@ -27,6 +26,7 @@ import { useFeedStore } from './feed';
 import { useGeneralSettingsStore } from './settings/general';
 import { useGroupStore } from './group';
 import { useLocationStore } from './location';
+import { useModalStore } from './modal';
 import { useNotificationStore } from './notification';
 import { useSharedFeedStore } from './sharedFeed';
 import { useUiStore } from './ui';
@@ -51,6 +51,7 @@ export const useFriendStore = defineStore('Friend', () => {
     const authStore = useAuthStore();
     const locationStore = useLocationStore();
     const favoriteStore = useFavoriteStore();
+    const modalStore = useModalStore();
     const { t } = useI18n();
 
     const state = reactive({
@@ -1578,12 +1579,13 @@ export const useFriendStore = defineStore('Friend', () => {
     }
 
     function confirmDeleteFriend(id) {
-        ElMessageBox.confirm('Continue? Unfriend', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then(async () => {
+        modalStore
+            .confirm({
+                description: 'Continue? Unfriend',
+                title: 'Confirm'
+            })
+            .then(async ({ ok }) => {
+                if (!ok) return;
                 const args = await friendRequest.deleteFriend({
                     userId: id
                 });

src/stores/gallery.js

@@ -1,5 +1,4 @@
 import { reactive, ref, shallowReactive, watch } from 'vue';
-import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { useI18n } from 'vue-i18n';
 
@@ -19,9 +18,10 @@ import {
 } from '../api';
 import { AppDebug } from '../service/appConfig';
 import { handleImageUploadInput } from '../shared/utils/imageUpload';
-import { useAdvancedSettingsStore } from './settings/advanced';
-import { watchState } from '../service/watchState';
 import { router } from '../plugin/router';
+import { useAdvancedSettingsStore } from './settings/advanced';
+import { useModalStore } from './modal';
+import { watchState } from '../service/watchState';
 
 import miscReq from '../api/misc';
 
@@ -30,6 +30,7 @@ import * as workerTimers from 'worker-timers';
 export const useGalleryStore = defineStore('Gallery', () => {
     const advancedSettingsStore = useAdvancedSettingsStore();
     const { t } = useI18n();
+    const modalStore = useModalStore();
 
     const state = reactive({
         printCache: [],
@@ -515,17 +516,15 @@ export const useGalleryStore = defineStore('Gallery', () => {
             }
         } catch (e) {
             if (e.message.includes('Could not find file')) {
-                ElMessageBox.confirm(
-                    'Windows has blocked VRCX from creating files on your system. Please allow VRCX to create files to save emojis, would you like to see instructions on how to fix this?',
-                    'Failed to create emoji folder',
-                    {
-                        confirmButtonText: 'Confirm',
-                        cancelButtonText: 'Ignore',
-                        type: 'warning'
-                    }
-                )
-                    .then(async (action) => {
-                        if (action !== 'confirm') return;
+                modalStore
+                    .confirm({
+                        description:
+                            'Windows has blocked VRCX from creating files on your system. Please allow VRCX to create files to save emojis, would you like to see instructions on how to fix this?',
+                        title: 'Failed to create emoji folder',
+                        cancelText: 'Ignore'
+                    })
+                    .then(({ ok }) => {
+                        if (!ok) return;
                         openExternalLink(
                             'https://www.youtube.com/watch?v=1mwmmCdA4D8&t=213s'
                         );

src/stores/game.js

@@ -1,5 +1,4 @@
 import { reactive, ref } from 'vue';
-import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { toast } from 'vue-sonner';
 
@@ -14,6 +13,7 @@ import { useGameLogStore } from './gameLog';
 import { useInstanceStore } from './instance';
 import { useLaunchStore } from './launch';
 import { useLocationStore } from './location';
+import { useModalStore } from './modal';
 import { useNotificationStore } from './notification';
 import { useUpdateLoopStore } from './updateLoop';
 import { useUserStore } from './user';
@@ -36,6 +36,7 @@ export const useGameStore = defineStore('Game', () => {
     const vrStore = useVrStore();
     const userStore = useUserStore();
     const updateLoopStore = useUpdateLoopStore();
+    const modalStore = useModalStore();
 
     const state = reactive({
         lastCrashedTime: null
@@ -218,17 +219,19 @@ export const useGameStore = defineStore('Game', () => {
             );
             if (!result) {
                 // failed to set key
-                ElMessageBox.alert(
-                    'VRCX has noticed VRChat debug logging is disabled. VRCX requires debug logging in order to function correctly. Please enable debug logging in VRChat quick menu settings > debug > enable debug logging, then rejoin the instance or restart VRChat.',
-                    'Enable debug logging'
-                ).catch(() => {});
+                modalStore.alert({
+                    description:
+                        'VRCX has noticed VRChat debug logging is disabled. VRCX requires debug logging in order to function correctly. Please enable debug logging in VRChat quick menu settings > debug > enable debug logging, then rejoin the instance or restart VRChat.',
+                    title: 'Enable debug logging'
+                });
                 console.error('Failed to enable debug logging', result);
                 return;
             }
-            ElMessageBox.alert(
-                'VRCX has noticed VRChat debug logging is disabled and automatically re-enabled it. VRCX requires debug logging in order to function correctly.',
-                'Enabled debug logging'
-            ).catch(() => {});
+            modalStore.alert({
+                description:
+                    'VRCX has noticed VRChat debug logging is disabled and automatically re-enabled it. VRCX requires debug logging in order to function correctly.',
+                title: 'Enabled debug logging'
+            });
             console.log('Enabled debug logging');
         } catch (e) {
             console.error(e);

src/stores/gameLog.js

@@ -1,5 +1,4 @@
 import { reactive, ref, shallowReactive, watch } from 'vue';
-import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { toast } from 'vue-sonner';
 
@@ -23,6 +22,7 @@ import { useGameStore } from './game';
 import { useGeneralSettingsStore } from './settings/general';
 import { useInstanceStore } from './instance';
 import { useLocationStore } from './location';
+import { useModalStore } from './modal';
 import { useNotificationStore } from './notification';
 import { usePhotonStore } from './photon';
 import { useSharedFeedStore } from './sharedFeed';
@@ -54,6 +54,7 @@ export const useGameLogStore = defineStore('GameLog', () => {
     const galleryStore = useGalleryStore();
     const photonStore = usePhotonStore();
     const sharedFeedStore = useSharedFeedStore();
+    const modalStore = useModalStore();
 
     const state = reactive({
         lastLocationAvatarList: new Map()
@@ -1414,15 +1415,14 @@ export const useGameLogStore = defineStore('GameLog', () => {
             return;
         }
         if (!advancedSettingsStore.gameLogDisabled) {
-            ElMessageBox.confirm('Continue? Disable GameLog', 'Confirm', {
-                confirmButtonText: 'Confirm',
-                cancelButtonText: 'Cancel',
-                type: 'info'
-            })
-                .then(({ action }) => {
-                    if (action === 'confirm') {
-                        advancedSettingsStore.setGameLogDisabled();
-                    }
+            modalStore
+                .confirm({
+                    description: 'Continue? Disable GameLog',
+                    title: 'Confirm'
+                })
+                .then(({ ok }) => {
+                    if (!ok) return;
+                    advancedSettingsStore.setGameLogDisabled();
                 })
                 .catch(() => {});
         } else {

src/stores/group.js

@@ -1,5 +1,4 @@
 import { nextTick, reactive, ref, watch } from 'vue';
-import { ElMessageBox } from 'element-plus';
 import { defineStore } from 'pinia';
 import { toast } from 'vue-sonner';
 
@@ -18,6 +17,7 @@ import { database } from '../service/database.js';
 import { groupDialogFilterOptions } from '../shared/constants/';
 import { useGameStore } from './game';
 import { useInstanceStore } from './instance';
+import { useModalStore } from './modal';
 import { useNotificationStore } from './notification';
 import { useUserStore } from './user';
 import { watchState } from '../service/watchState';
@@ -31,6 +31,7 @@ export const useGroupStore = defineStore('Group', () => {
     const gameStore = useGameStore();
     const userStore = useUserStore();
     const notificationStore = useNotificationStore();
+    const modalStore = useModalStore();
 
     let cachedGroups = new Map();
 
@@ -555,16 +556,13 @@ export const useGroupStore = defineStore('Group', () => {
     }
 
     function leaveGroupPrompt(groupId) {
-        ElMessageBox.confirm(
-            'Are you sure you want to leave this group?',
-            'Confirm',
-            {
-                confirmButtonText: 'Confirm',
-                cancelButtonText: 'Cancel',
-                type: 'info'
-            }
-        )
-            .then(() => {
+        modalStore
+            .confirm({
+                description: 'Are you sure you want to leave this group?',
+                title: 'Confirm'
+            })
+            .then(({ ok }) => {
+                if (!ok) return;
                 leaveGroup(groupId);
             })
             .catch(() => {});

src/stores/index.js

@@ -21,6 +21,7 @@ import { useInstanceStore } from './instance';
 import { useInviteStore } from './invite';
 import { useLaunchStore } from './launch';
 import { useLocationStore } from './location';
+import { useModalStore } from './modal';
 import { useModerationStore } from './moderation';
 import { useNotificationStore } from './notification';
 import { useNotificationsSettingsStore } from './settings/notifications';
@@ -162,7 +163,8 @@ export function createGlobalStores() {
         updateLoop: useUpdateLoopStore(),
         auth: useAuthStore(),
         vrcStatus: useVrcStatusStore(),
-        charts: useChartsStore()
+        charts: useChartsStore(),
+        modal: useModalStore()
     };
 }
 
@@ -200,5 +202,6 @@ export {
     useWorldStore,
     useSharedFeedStore,
     useUpdateLoopStore,
-    useVrcStatusStore
+    useVrcStatusStore,
+    useModalStore
 };

src/stores/modal.js

@@ -0,0 +1,178 @@
+import { defineStore } from 'pinia';
+import { i18n } from '@/plugin';
+import { ref } from 'vue';
+
+function translate(key, fallback) {
+    try {
+        return i18n.global.t(key);
+    } catch {
+        return fallback;
+    }
+}
+
+/**
+ * @typedef {Object} ConfirmResult
+ * @property {boolean} ok
+ * @property {'ok' | 'cancel' | 'dismiss' | 'replaced'} reason
+ */
+
+/**
+ * @typedef {Object} ConfirmOptions
+ * @property {string} title
+ * @property {string} description
+ * @property {string=} confirmText
+ * @property {string=} cancelText
+ * @property {boolean=} dismissible  // true: allow esc/outside, false: block
+ */
+
+/**
+ * @typedef {Object} AlertOptions
+ * @property {string} title
+ * @property {string} description
+ * @property {string=} confirmText
+ * @property {boolean=} dismissible
+ */
+
+// TODO: Method chains for confirm
+
+export const useModalStore = defineStore('Modal', () => {
+    const alertOpen = ref(false);
+    const alertMode = ref('confirm'); // 'confirm' | 'alert'
+    const alertTitle = ref('');
+    const alertDescription = ref('');
+    const alertOkText = ref('');
+    const alertCancelText = ref('');
+    const alertDismissible = ref(true);
+
+    /** @type {{ resolve: ((result: ConfirmResult) => void) | null } | null} */
+    let pending = null;
+
+    function closeDialog() {
+        alertOpen.value = false;
+    }
+
+    /**
+     * @param {'ok' | 'cancel' | 'dismiss' | 'replaced'} reason
+     */
+    function finish(reason) {
+        const resolve = pending?.resolve;
+        pending = null;
+        closeDialog();
+        if (resolve) resolve({ ok: reason === 'ok', reason });
+    }
+
+    /**
+     * @param {'ok' | 'cancel' | 'dismiss' | 'replaced'} reason
+     */
+    function finishWithoutClosing(reason) {
+        const resolve = pending?.resolve;
+        pending = null;
+        if (resolve) resolve({ ok: reason === 'ok', reason });
+    }
+
+    /**
+     * @param {'confirm' | 'alert'} mode
+     * @param {any} options
+     */
+    function openBase(mode, options) {
+        if (pending) {
+            // old dialog is force-finished
+            // do not call closeDialog here because we are about to open a new one
+            finishWithoutClosing('replaced');
+        }
+
+        alertMode.value = mode;
+        alertTitle.value = options.title;
+        alertDescription.value = options.description;
+        alertDismissible.value = options.dismissible !== false;
+
+        if (mode === 'alert') {
+            alertOkText.value =
+                options.confirmText || translate('dialog.alertdialog.ok', 'OK');
+            alertCancelText.value = '';
+        } else {
+            alertOkText.value =
+                options.confirmText ||
+                translate('dialog.alertdialog.confirm', 'Confirm');
+            alertCancelText.value =
+                options.cancelText ||
+                translate('dialog.alertdialog.cancel', 'Cancel');
+        }
+
+        alertOpen.value = true;
+
+        return new Promise((resolve) => {
+            pending = { resolve };
+        });
+    }
+
+    /**
+     * confirm: always resolve({ok, reason})
+     * @param {ConfirmOptions} options
+     * @returns {Promise<ConfirmResult>}
+     */
+    function confirm(options) {
+        return openBase('confirm', options);
+    }
+
+    /**
+     * alert: always resolve({ok:true, reason:'ok'}) when closed
+     * @param {AlertOptions} options
+     * @returns {Promise<ConfirmResult>}
+     */
+    function alert(options) {
+        return openBase('alert', options);
+    }
+
+    function handleOk() {
+        if (!pending) return;
+        finish('ok');
+    }
+
+    function handleCancel() {
+        if (!pending) return;
+
+        // alert has no cancel semantics
+        if (alertMode.value === 'alert') {
+            finish('ok');
+            return;
+        }
+
+        finish('cancel');
+    }
+
+    function handleDismiss() {
+        if (!pending) return;
+        if (!alertDismissible.value) return;
+
+        // alert: dismiss also means done
+        if (alertMode.value === 'alert') {
+            finish('ok');
+            return;
+        }
+
+        finish('dismiss');
+    }
+
+    function setAlertOpen(open) {
+        alertOpen.value = !!open;
+    }
+
+    return {
+        alertOpen,
+        alertMode,
+        alertTitle,
+        alertDescription,
+        alertOkText,
+        alertCancelText,
+        alertDismissible,
+
+        confirm,
+        alert,
+
+        handleOk,
+        handleCancel,
+        handleDismiss,
+        setAlertOpen
+    };
+});

src/stores/settings/advanced.js

@@ -8,6 +8,7 @@ import { AppDebug } from '../../service/appConfig';
 import { database } from '../../service/database';
 import { languageCodes } from '../../localization';
 import { useGameStore } from '../game';
+import { useModalStore } from '../modal';
 import { useVRCXUpdaterStore } from '../vrcxUpdater';
 import { useVrcxStore } from '../vrcx';
 import { watchState } from '../../service/watchState';
@@ -19,6 +20,7 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
     const gameStore = useGameStore();
     const vrcxStore = useVrcxStore();
     const VRCXUpdaterStore = useVRCXUpdaterStore();
+    const modalStore = useModalStore();
 
     const { t } = useI18n();
 
@@ -466,68 +468,58 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
     }
 
     async function checkSentryConsent() {
-        const { action: consentAction } = await ElMessageBox.confirm(
-            'Help improve VRCX by allowing anonymous error reporting?</br></br>' +
-                '• Only collects crash and error information.</br>' +
-                '• No personal data or VRChat information is collected.</br>' +
-                '• Only enabled in nightly builds.</br>' +
-                '• Can be disabled at anytime in Advanced Settings.',
-            'Anonymous Error Reporting',
-            {
-                type: 'warning',
-                center: true,
-                dangerouslyUseHTMLString: true,
-                closeOnClickModal: false,
-                closeOnPressEscape: false,
-                distinguishCancelAndClose: true
-            }
-        ).catch(() => ({ action: 'cancel' }));
+        modalStore
+            .confirm({
+                description:
+                    'Help improve VRCX by allowing anonymous error reporting?</br></br>' +
+                    '• Only collects crash and error information.</br>' +
+                    '• No personal data or VRChat information is collected.</br>' +
+                    '• Only enabled in nightly builds.</br>' +
+                    '• Can be disabled at anytime in Advanced Settings.',
+                title: 'Anonymous Error Reporting'
+            })
+            .then(async ({ ok }) => {
+                if (!ok) return;
+                modalStore
+                    .confirm({
+                        description:
+                            'Error reporting setting has been enabled. Would you like to restart VRCX now for the change to take effect?',
+                        title: 'Restart Required',
+                        confirmText: 'Restart Now',
+                        cancelText: 'Later'
+                    })
+                    .then(async ({ ok }) => {
+                        if (!ok) return;
 
-        if (consentAction === 'cancel') return;
+                        sentryErrorReporting.value = true;
+                        configRepository.setBool('VRCX_SentryEnabled', true);
 
-        const { action: restartAction } = await ElMessageBox.confirm(
-            'Error reporting setting has been enabled. Would you like to restart VRCX now for the change to take effect?',
-            'Restart Required',
-            {
-                confirmButtonText: 'Restart Now',
-                cancelButtonText: 'Later',
-                type: 'warning',
-                center: true,
-                closeOnClickModal: false,
-                closeOnPressEscape: false
-            }
-        ).catch(() => ({ action: 'cancel' }));
-
-        if (restartAction === 'cancel') return;
-
-        sentryErrorReporting.value = true;
-        configRepository.setBool('VRCX_SentryEnabled', true);
-
-        VRCXUpdaterStore.restartVRCX(false);
+                        VRCXUpdaterStore.restartVRCX(false);
+                    });
+            });
     }
 
     async function setSentryErrorReporting() {
         if (VRCXUpdaterStore.branch !== 'Nightly') return;
 
-        const { action: restartAction } = await ElMessageBox.confirm(
-            'Error reporting setting has been disabled. Would you like to restart VRCX now for the change to take effect?',
-            'Restart Required',
-            {
-                confirmButtonText: 'Restart Now',
-                cancelButtonText: 'Later',
-                type: 'info',
-                center: true
-            }
-        ).catch(() => ({ action: 'cancel' }));
+        modalStore
+            .confirm({
+                description:
+                    'Error reporting setting has been disabled. Would you like to restart VRCX now for the change to take effect?',
+                title: 'Restart Required',
+                confirmText: 'Restart Now',
+                cancelText: 'Later'
+            })
+            .then(async ({ ok }) => {
+                if (!ok) return;
 
-        if (restartAction === 'cancel') return;
-
-        sentryErrorReporting.value = !sentryErrorReporting.value;
-        await configRepository.setBool(
-            'VRCX_SentryEnabled',
-            sentryErrorReporting.value
-        );
-        VRCXUpdaterStore.restartVRCX(false);
+                sentryErrorReporting.value = !sentryErrorReporting.value;
+                await configRepository.setBool(
+                    'VRCX_SentryEnabled',
+                    sentryErrorReporting.value
+                );
+                VRCXUpdaterStore.restartVRCX(false);
+            });
     }
 
     async function getSqliteTableSizes() {
@@ -735,96 +727,87 @@ export const useAdvancedSettingsStore = defineStore('AdvancedSettings', () => {
 
     function cropPrintsChanged() {
         if (!cropInstancePrints.value) return;
-        ElMessageBox.confirm(
-            t(
-                'view.settings.advanced.advanced.save_instance_prints_to_file.crop_convert_old'
-            ),
-            {
-                confirmButtonText: t(
+        modalStore
+            .confirm({
+                description: t(
+                    'view.settings.advanced.advanced.save_instance_prints_to_file.crop_convert_old'
+                ),
+                title: '',
+                confirmText: t(
                     'view.settings.advanced.advanced.save_instance_prints_to_file.crop_convert_old_confirm'
                 ),
-                cancelButtonText: t(
+                cancelText: t(
                     'view.settings.advanced.advanced.save_instance_prints_to_file.crop_convert_old_cancel'
-                ),
-                type: 'info',
-                showInput: false
-            }
-        )
-            .then(async ({ action }) => {
-                if (action === 'confirm') {
-                    const msgBox = toast.warning(
-                        'Batch print cropping in progress...',
-                        { duration: Infinity, position: 'bottom-right' }
-                    );
-                    try {
-                        await AppApi.CropAllPrints(ugcFolderPath.value);
-                        toast.success('Batch print cropping complete');
-                    } catch (err) {
-                        console.error(err);
-                        toast.error(`Batch print cropping failed: ${err}`);
-                    } finally {
-                        toast.dismiss(msgBox);
-                    }
+                )
+            })
+            .then(async ({ ok }) => {
+                if (!ok) return;
+                const msgBox = toast.warning(
+                    'Batch print cropping in progress...',
+                    { duration: Infinity, position: 'bottom-right' }
+                );
+                try {
+                    await AppApi.CropAllPrints(ugcFolderPath.value);
+                    toast.success('Batch print cropping complete');
+                } catch (err) {
+                    console.error(err);
+                    toast.error(`Batch print cropping failed: ${err}`);
+                } finally {
+                    toast.dismiss(msgBox);
                 }
             })
             .catch(() => {});
     }
 
     function askDeleteAllScreenshotMetadata() {
-        ElMessageBox.confirm(
-            t(
-                'view.settings.advanced.advanced.delete_all_screenshot_metadata.ask'
-            ),
-            {
-                confirmButtonText: t(
+        modalStore
+            .confirm({
+                description: t(
+                    'view.settings.advanced.advanced.delete_all_screenshot_metadata.ask'
+                ),
+                title: '',
+                confirmText: t(
                     'view.settings.advanced.advanced.delete_all_screenshot_metadata.confirm_yes'
                 ),
-                cancelButtonText: t(
+                cancelText: t(
                     'view.settings.advanced.advanced.delete_all_screenshot_metadata.confirm_no'
-                ),
-                type: 'warning',
-                showInput: false
-            }
-        )
-            .then(({ action }) => {
-                if (action === 'confirm') {
-                    deleteAllScreenshotMetadata();
-                }
+                )
+            })
+            .then(({ ok }) => {
+                if (!ok) return;
+                deleteAllScreenshotMetadata();
             })
             .catch(() => {});
     }
 
     function deleteAllScreenshotMetadata() {
-        ElMessageBox.confirm(
-            t(
-                'view.settings.advanced.advanced.delete_all_screenshot_metadata.confirm'
-            ),
-            {
-                confirmButtonText: t(
+        modalStore
+            .confirm({
+                description: t(
+                    'view.settings.advanced.advanced.delete_all_screenshot_metadata.confirm'
+                ),
+                title: '',
+                confirmText: t(
                     'view.settings.advanced.advanced.save_instance_prints_to_file.crop_convert_old_confirm'
                 ),
-                cancelButtonText: t(
+                cancelText: t(
                     'view.settings.advanced.advanced.save_instance_prints_to_file.crop_convert_old_cancel'
-                ),
-                type: 'warning',
-                showInput: false
-            }
-        )
-            .then(async ({ action }) => {
-                if (action === 'confirm') {
-                    const msgBox = toast.warning(
-                        'Batch metadata removal in progress...',
-                        { duration: Infinity, position: 'bottom-right' }
-                    );
-                    try {
-                        await AppApi.DeleteAllScreenshotMetadata();
-                        toast.success('Batch metadata removal complete');
-                    } catch (err) {
-                        console.error(err);
-                        toast.error(`Batch metadata removal failed: ${err}`);
-                    } finally {
-                        toast.dismiss(msgBox);
-                    }
+                )
+            })
+            .then(async ({ ok }) => {
+                if (!ok) return;
+                const msgBox = toast.warning(
+                    'Batch metadata removal in progress...',
+                    { duration: Infinity, position: 'bottom-right' }
+                );
+                try {
+                    await AppApi.DeleteAllScreenshotMetadata();
+                    toast.success('Batch metadata removal complete');
+                } catch (err) {
+                    console.error(err);
+                    toast.error(`Batch metadata removal failed: ${err}`);
+                } finally {
+                    toast.dismiss(msgBox);
                 }
             })
             .catch(() => {});

src/stores/vrcx.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';
@@ -26,6 +25,7 @@ import { useGameStore } from './game';
 import { useGroupStore } from './group';
 import { useInstanceStore } from './instance';
 import { useLocationStore } from './location';
+import { useModalStore } from './modal';
 import { useNotificationStore } from './notification';
 import { usePhotonStore } from './photon';
 import { useSearchStore } from './search';
@@ -58,6 +58,7 @@ export const useVrcxStore = defineStore('Vrcx', () => {
     const vrcStatusStore = useVrcStatusStore();
     const galleryStore = useGalleryStore();
     const { t } = useI18n();
+    const modalStore = useModalStore();
 
     const state = reactive({
         databaseVersion: 0,
@@ -711,10 +712,10 @@ export const useVrcxStore = defineStore('Vrcx', () => {
                 return;
             }
             // popup message about auto restore
-            ElMessageBox.alert(
-                t('dialog.registry_backup.restore_prompt'),
-                t('dialog.registry_backup.header')
-            ).catch(() => {});
+            modalStore.alert({
+                description: t('dialog.registry_backup.restore_prompt'),
+                title: t('dialog.registry_backup.header')
+            });
             showRegistryBackupDialog();
             await AppApi.FocusWindow();
             await configRepository.setString(