replace ElMessageBox(alert, confirm) with alert dialog

2026-04-24 09:13:50 +02:00 · 2026-01-13 22:40:13 +09:00
parent 870c7a4938
commit fc5afe9e69
53 changed files with 1250 additions and 862 deletions
--- a/src/views/Charts/components/MutualFriends.vue
+++ b/src/views/Charts/components/MutualFriends.vue
@@ -142,16 +142,21 @@
    import { Field, FieldContent, FieldDescription, FieldGroup, FieldLabel } from '@/components/ui/field';
    import { NumberField, NumberFieldContent, NumberFieldInput } from '@/components/ui/number-field';
    import { Button } from '@/components/ui/button';
-    import { ElMessageBox } from 'element-plus';
-    import { Settings } from 'lucide-vue-next';
    import { Progress } from '@/components/ui/progress';
+    import { Settings } from 'lucide-vue-next';
    import { Spinner } from '@/components/ui/spinner';
    import { onBeforeRouteLeave } from 'vue-router';
    import { storeToRefs } from 'pinia';
    import { toast } from 'vue-sonner';
    import { useI18n } from 'vue-i18n';

-    import { useAppearanceSettingsStore, useChartsStore, useFriendStore, useUserStore } from '../../../stores';
+    import {
+        useAppearanceSettingsStore,
+        useChartsStore,
+        useFriendStore,
+        useModalStore,
+        useUserStore
+    } from '../../../stores';
    import { applyForceOverrides, computeForceOptions, useMutualGraphChart } from '../composables/useMutualGraphChart';
    import { createRateLimiter, executeWithBackoff } from '../../../shared/utils';
    import { database } from '../../../service/database';
@@ -164,6 +169,7 @@
    const { t } = useI18n();
    const friendStore = useFriendStore();
    const userStore = useUserStore();
+    const modalStore = useModalStore();
    const chartsStore = useChartsStore();
    const appearanceStore = useAppearanceSettingsStore();
    const { friends } = storeToRefs(friendStore);
@@ -396,39 +402,35 @@
        if (isFetching.value || hasFetched.value || !totalFriends.value) {
            return;
        }
-        try {
-            await ElMessageBox.confirm(
-                t('view.charts.mutual_friend.prompt.message'),
-                t('view.charts.mutual_friend.prompt.title'),
-                {
-                    confirmButtonText: t('view.charts.mutual_friend.prompt.confirm'),
-                    cancelButtonText: t('view.charts.mutual_friend.prompt.cancel'),
-                    type: 'warning'
-                }
-            );
-            await startFetch();
-        } catch {
-            // cancelled
-        }
+
+        modalStore
+            .confirm({
+                description: t('view.charts.mutual_friend.prompt.message'),
+                title: t('view.charts.mutual_friend.prompt.title'),
+                confirmText: t('view.charts.mutual_friend.prompt.confirm'),
+                cancelText: t('view.charts.mutual_friend.prompt.cancel')
+            })
+            .then(async ({ ok }) => {
+                if (!ok) return;
+
+                await startFetch();
+            });
    }

    function promptEnableMutualFriendsSharing() {
-        ElMessageBox.confirm(
-            t('view.charts.mutual_friend.enable_sharing_prompt.message'),
-            t('view.charts.mutual_friend.enable_sharing_prompt.title'),
-            {
-                confirmButtonText: t('view.charts.mutual_friend.enable_sharing_prompt.confirm'),
-                cancelButtonText: t('view.charts.mutual_friend.enable_sharing_prompt.cancel'),
-                type: 'info'
-            }
-        )
-            .then(() => {
+        modalStore
+            .confirm({
+                description: t('view.charts.mutual_friend.enable_sharing_prompt.message'),
+                title: t('view.charts.mutual_friend.enable_sharing_prompt.title'),
+                confirmText: t('view.charts.mutual_friend.enable_sharing_prompt.confirm'),
+                cancelText: t('view.charts.mutual_friend.enable_sharing_prompt.cancel')
+            })
+            .then(({ ok }) => {
+                if (!ok) return;
                userStore.toggleSharedConnectionsOptOut();
                promptInitialFetch();
            })
-            .catch(() => {
-                // cancelled
-            });
+            .catch(() => {});
    }

    function cancelFetch() {
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -521,18 +521,7 @@
 </template>

 <script setup>
-    import {
-        computed,
-        h,
-        markRaw,
-        nextTick,
-        onBeforeMount,
-        onBeforeUnmount,
-        onMounted,
-        reactive,
-        ref,
-        watch
-    } from 'vue';
+    import { computed, markRaw, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
    import { Ellipsis, Loader, RefreshCcw } from 'lucide-vue-next';
    import { MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
    import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
@@ -558,7 +547,13 @@
        DropdownMenuSeparator,
        DropdownMenuTrigger
    } from '../../components/ui/dropdown-menu';
-    import { useAppearanceSettingsStore, useAvatarStore, useFavoriteStore, useUserStore } from '../../stores';
+    import {
+        useAppearanceSettingsStore,
+        useAvatarStore,
+        useFavoriteStore,
+        useModalStore,
+        useUserStore
+    } from '../../stores';
    import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
    import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
    import { avatarRequest, favoriteRequest } from '../../api';
@@ -597,6 +592,7 @@
    const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
    const { setSortFavorites } = useAppearanceSettingsStore();
    const favoriteStore = useFavoriteStore();
+    const modalStore = useModalStore();
    const {
        favoriteAvatars,
        favoriteAvatarGroups,
@@ -1183,26 +1179,22 @@
        showAvatarImportDialog();
    }

-    function showAvatarBulkUnfavoriteSelectionConfirm() {
+    async function showAvatarBulkUnfavoriteSelectionConfirm() {
        if (!selectedFavoriteAvatars.value.length) {
            return;
        }
        const total = selectedFavoriteAvatars.value.length;
-        ElMessageBox.confirm(
-            `Are you sure you want to unfavorite ${total} favorites?\n            This action cannot be undone.`,
-            `Delete ${total} favorites?`,
-            {
-                confirmButtonText: 'Confirm',
-                cancelButtonText: 'Cancel',
-                type: 'info'
-            }
-        )
-            .then((action) => {
-                if (action === 'confirm') {
-                    bulkUnfavoriteSelectedAvatars([...selectedFavoriteAvatars.value]);
-                }
-            })
-            .catch(() => {});
+
+        const result = await modalStore.confirm({
+            description: `Are you sure you want to unfavorite ${total} favorites?\nThis action cannot be undone.`,
+            title: `Delete ${total} favorites?`
+        });
+
+        if (!result.ok) {
+            return;
+        }
+
+        bulkUnfavoriteSelectedAvatars([...selectedFavoriteAvatars.value]);
    }

    function bulkUnfavoriteSelectedAvatars(ids) {
@@ -1252,17 +1244,14 @@
    async function handleCheckInvalidAvatars(groupName) {
        handleGroupMenuVisible(localGroupMenuKey(groupName), false);

-        try {
-            await ElMessageBox.confirm(
-                t('view.favorite.avatars.check_description'),
-                t('view.favorite.avatars.check_invalid'),
-                {
-                    confirmButtonText: t('confirm.confirm_button'),
-                    cancelButtonText: t('confirm.cancel_button'),
-                    type: 'info'
-                }
-            );
-        } catch {
+        const startCheckResult = await modalStore.confirm({
+            description: t('view.favorite.avatars.check_description'),
+            title: t('view.favorite.avatars.check_invalid'),
+            confirmText: t('confirm.confirm_button'),
+            cancelText: t('confirm.cancel_button')
+        });
+
+        if (!startCheckResult.ok) {
            return;
        }

@@ -1299,54 +1288,29 @@
                return;
            }

-            const confirmDelete = await ElMessageBox.confirm(
-                h('div', [
-                    h(
-                        'p',
-                        { style: 'margin-bottom: 12px;' },
-                        t('view.favorite.avatars.confirm_delete_description', { count: result.invalid })
-                    ),
-                    h(
-                        'div',
-                        { style: 'margin-top: 12px; margin-bottom: 8px; font-weight: 600;' },
-                        t('view.favorite.avatars.removed_list_header')
-                    ),
-                    h(
-                        'div',
-                        {
-                            style: 'max-height: 200px; overflow-y: auto; background: var(--el-fill-color-lighter); padding: 8px; border-radius: 4px;'
-                        },
-                        result.invalidIds.map((id) =>
-                            h('div', { style: 'font-family: monospace; font-size: 12px; padding: 2px 0;' }, id)
-                        )
-                    )
-                ]),
-                t('view.favorite.avatars.confirm_delete_invalid'),
-                {
-                    confirmButtonText: t('confirm.confirm_button'),
-                    cancelButtonText: t('view.favorite.avatars.copy_removed_ids'),
-                    distinguishCancelAndClose: true,
-                    type: 'warning',
-                    beforeClose: (action, instance, done) => {
-                        if (action === 'cancel') {
-                            navigator.clipboard
-                                .writeText(result.invalidIds.join('\n'))
-                                .then(() => {
-                                    toast.success(t('view.favorite.avatars.copied_ids'));
-                                })
-                                .catch(() => {
-                                    toast.error(t('view.favorite.avatars.copy_failed'));
-                                });
-                            return;
-                        }
-                        done();
-                    }
-                }
-            )
-                .then(() => true)
-                .catch(() => false);
+            const invalidIdsText = result.invalidIds.join('\n');

-            if (!confirmDelete) {
+            const confirmDeleteResult = await modalStore.confirm({
+                description:
+                    `${t('view.favorite.avatars.confirm_delete_description', { count: result.invalid })}` +
+                    `\n\n${t('view.favorite.avatars.removed_list_header')}\n` +
+                    invalidIdsText,
+                title: t('view.favorite.avatars.confirm_delete_invalid'),
+                confirmText: t('confirm.confirm_button'),
+                cancelText: t('view.favorite.avatars.copy_removed_ids')
+            });
+
+            if (!confirmDeleteResult.ok) {
+                if (confirmDeleteResult.reason === 'cancel') {
+                    navigator.clipboard
+                        .writeText(invalidIdsText)
+                        .then(() => {
+                            toast.success(t('view.favorite.avatars.copied_ids'));
+                        })
+                        .catch(() => {
+                            toast.error(t('view.favorite.avatars.copy_failed'));
+                        });
+                }
                toast.info(t('view.favorite.avatars.delete_cancelled'));
                return;
            }
@@ -1434,18 +1398,16 @@
    }

    function clearFavoriteGroup(ctx) {
-        ElMessageBox.confirm('Continue? Clear Group', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    favoriteRequest.clearFavoriteGroup({
-                        type: ctx.type,
-                        group: ctx.name
-                    });
-                }
+        modalStore
+            .confirm({
+                description: 'Continue? Clear Group',
+                title: 'Confirm'
+            })
+            .then(() => {
+                favoriteRequest.clearFavoriteGroup({
+                    type: ctx.type,
+                    group: ctx.name
+                });
            })
            .catch(() => {});
    }
@@ -1477,16 +1439,12 @@
    }

    function promptLocalAvatarFavoriteGroupDelete(group) {
-        ElMessageBox.confirm(`Delete Group? ${group}`, 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    deleteLocalAvatarFavoriteGroup(group);
-                }
+        modalStore
+            .confirm({
+                description: `Delete Group? ${group}`,
+                title: 'Confirm'
            })
+            .then(() => deleteLocalAvatarFavoriteGroup(group))
            .catch(() => {});
    }

--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -331,9 +331,9 @@
        DropdownMenuSeparator,
        DropdownMenuTrigger
    } from '../../components/ui/dropdown-menu';
+    import { useAppearanceSettingsStore, useFavoriteStore, useModalStore, useUserStore } from '../../stores';
    import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
    import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
-    import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores';
    import { Badge } from '../../components/ui/badge';
    import { Slider } from '../../components/ui/slider';
    import { Switch } from '../../components/ui/switch';
@@ -358,6 +358,7 @@
    const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
    const { setSortFavorites } = useAppearanceSettingsStore();
    const favoriteStore = useFavoriteStore();
+    const modalStore = useModalStore();
    const {
        favoriteFriends,
        favoriteFriendGroups,
@@ -751,20 +752,12 @@
            return;
        }
        const total = selectedFavoriteFriends.value.length;
-        ElMessageBox.confirm(
-            `Are you sure you want to unfavorite ${total} favorites?\n            This action cannot be undone.`,
-            `Delete ${total} favorites?`,
-            {
-                confirmButtonText: 'Confirm',
-                cancelButtonText: 'Cancel',
-                type: 'info'
-            }
-        )
-            .then((action) => {
-                if (action === 'confirm') {
-                    bulkUnfavoriteSelectedFriends([...selectedFavoriteFriends.value]);
-                }
+        modalStore
+            .confirm({
+                description: `Are you sure you want to unfavorite ${total} favorites?\n            This action cannot be undone.`,
+                title: `Delete ${total} favorites?`
            })
+            .then(({ ok }) => ok && bulkUnfavoriteSelectedFriends([...selectedFavoriteFriends.value]))
            .catch(() => {});
    }

@@ -779,18 +772,16 @@
    }

    function clearFavoriteGroup(ctx) {
-        ElMessageBox.confirm('Continue? Clear Group', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    favoriteRequest.clearFavoriteGroup({
-                        type: ctx.type,
-                        group: ctx.name
-                    });
-                }
+        modalStore
+            .confirm({
+                description: 'Continue? Clear Group',
+                title: 'Confirm'
+            })
+            .then(() => {
+                favoriteRequest.clearFavoriteGroup({
+                    type: ctx.type,
+                    group: ctx.name
+                });
            })
            .catch(() => {});
    }
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -461,9 +461,9 @@
        DropdownMenuSeparator,
        DropdownMenuTrigger
    } from '../../components/ui/dropdown-menu';
+    import { useAppearanceSettingsStore, useFavoriteStore, useModalStore, useWorldStore } from '../../stores';
    import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
    import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
-    import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../stores';
    import { favoriteRequest, worldRequest } from '../../api';
    import { Badge } from '../../components/ui/badge';
    import { Slider } from '../../components/ui/slider';
@@ -490,6 +490,7 @@
    const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
    const { setSortFavorites } = useAppearanceSettingsStore();
    const favoriteStore = useFavoriteStore();
+    const modalStore = useModalStore();
    const {
        favoriteWorlds,
        favoriteWorldGroups,
@@ -1054,21 +1055,13 @@
            return;
        }
        const total = selectedFavoriteWorlds.value.length;
-        ElMessageBox.confirm(
-            `Are you sure you want to unfavorite ${total} favorites?
+        modalStore
+            .confirm({
+                description: `Are you sure you want to unfavorite ${total} favorites?
            This action cannot be undone.`,
-            `Delete ${total} favorites?`,
-            {
-                confirmButtonText: 'Confirm',
-                cancelButtonText: 'Cancel',
-                type: 'info'
-            }
-        )
-            .then((action) => {
-                if (action === 'confirm') {
-                    bulkUnfavoriteSelectedWorlds([...selectedFavoriteWorlds.value]);
-                }
+                title: `Delete ${total} favorites?`
            })
+            .then(() => bulkUnfavoriteSelectedWorlds([...selectedFavoriteWorlds.value]))
            .catch(() => {});
    }

@@ -1175,32 +1168,26 @@
    }

    function promptLocalWorldFavoriteGroupDelete(group) {
-        ElMessageBox.confirm(`Delete Group? ${group}`, 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    deleteLocalWorldFavoriteGroup(group);
-                }
+        modalStore
+            .confirm({
+                description: `Delete Group? ${group}`,
+                title: 'Confirm'
            })
+            .then(() => deleteLocalWorldFavoriteGroup(group))
            .catch(() => {});
    }

    function clearFavoriteGroup(ctx) {
-        ElMessageBox.confirm('Continue? Clear Group', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    favoriteRequest.clearFavoriteGroup({
-                        type: ctx.type,
-                        group: ctx.name
-                    });
-                }
+        modalStore
+            .confirm({
+                description: 'Continue? Clear Group',
+                title: 'Confirm'
+            })
+            .then(() => {
+                favoriteRequest.clearFavoriteGroup({
+                    type: ctx.type,
+                    group: ctx.name
+                });
            })
            .catch(() => {});
    }
--- a/src/views/FriendList/FriendList.vue
+++ b/src/views/FriendList/FriendList.vue
@@ -108,7 +108,6 @@
    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
    import { computed, nextTick, ref, watch } from 'vue';
    import { Button } from '@/components/ui/button';
-    import { ElMessageBox } from 'element-plus';
    import { InputGroupField } from '@/components/ui/input-group';
    import { Progress } from '@/components/ui/progress';
    import { storeToRefs } from 'pinia';
@@ -119,6 +118,7 @@
    import {
        useAppearanceSettingsStore,
        useFriendStore,
+        useModalStore,
        useSearchStore,
        useUserStore,
        useVrcxStore
@@ -138,6 +138,7 @@
    const emit = defineEmits(['lookup-user']);

    const { friends } = storeToRefs(useFriendStore());
+    const modalStore = useModalStore();
    const { getAllUserStats, getAllUserMutualCount, confirmDeleteFriend, handleFriendDelete } = useFriendStore();
    const { randomUserColours } = storeToRefs(useAppearanceSettingsStore());
    const vrcxStore = useVrcxStore();
@@ -324,25 +325,18 @@
            .filter((item) => selectedFriends.value.has(item.id))
            .map((item) => item.displayName);
        if (!pending.length) return;
-        ElMessageBox.confirm(
-            `Are you sure you want to delete ${pending.length} friends?
-            This can negatively affect your trust rank,
-            This action cannot be undone.`,
-            `Delete ${pending.length} friends?`,
-            {
-                confirmButtonText: 'Confirm',
-                cancelButtonText: 'Cancel',
-                type: 'info',
-                showInput: true,
-                inputType: 'textarea',
-                inputValue: pending.join('\r\n')
-            }
-        )
-            .then(({ action }) => {
-                if (action === 'confirm') {
-                    bulkUnfriendSelection();
-                }
+        const description =
+            `Are you sure you want to delete ${pending.length} friends?\n` +
+            'This can negatively affect your trust rank,\n' +
+            'This action cannot be undone.\n\n' +
+            pending.join('\n');
+
+        modalStore
+            .confirm({
+                description,
+                title: `Delete ${pending.length} friends?`
            })
+            .then(({ ok }) => ok && bulkUnfriendSelection())
            .catch(() => {});
    }

@@ -355,9 +349,9 @@
                selectedFriends.value.delete(item.id);
            }
        }
-        ElMessageBox.alert(`Unfriended ${selectedFriends.value.size} friends.`, 'Bulk Unfriend Complete', {
-            confirmButtonText: 'OK',
-            type: 'success'
+        modalStore.alert({
+            description: `Unfriended ${selectedFriends.value.size} friends.`,
+            title: 'Bulk Unfriend Complete'
        });
        selectedFriends.value.clear();
    }
--- a/src/views/FriendLog/FriendLog.vue
+++ b/src/views/FriendLog/FriendLog.vue
@@ -47,7 +47,6 @@

 <script setup>
    import { computed, ref, watch } from 'vue';
-    import { ElMessageBox } from 'element-plus';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';

@@ -61,7 +60,7 @@
        SelectTrigger,
        SelectValue
    } from '../../components/ui/select';
-    import { useAppearanceSettingsStore, useFriendStore, useVrcxStore } from '../../stores';
+    import { useAppearanceSettingsStore, useFriendStore, useModalStore, useVrcxStore } from '../../stores';
    import { DataTableLayout } from '../../components/ui/data-table';
    import { InputGroupField } from '../../components/ui/input-group';
    import { createColumns } from './columns.jsx';
@@ -74,6 +73,7 @@

    const appearanceSettingsStore = useAppearanceSettingsStore();
    const vrcxStore = useVrcxStore();
+    const modalStore = useModalStore();
    const { hideUnfriends } = storeToRefs(appearanceSettingsStore);
    const { friendLogTable } = storeToRefs(useFriendStore());

@@ -149,16 +149,12 @@
        saveTableFilters();
    }
    function deleteFriendLogPrompt(row) {
-        ElMessageBox.confirm('Continue? Delete Log', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    deleteFriendLog(row);
-                }
+        modalStore
+            .confirm({
+                description: 'Continue? Delete Log',
+                title: 'Confirm'
            })
+            .then(({ ok }) => ok && deleteFriendLog(row))
            .catch(() => {});
    }
    function deleteFriendLog(row) {
--- a/src/views/GameLog/GameLog.vue
+++ b/src/views/GameLog/GameLog.vue
@@ -57,14 +57,13 @@
 <script setup>
    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
    import { computed, ref, watch } from 'vue';
-    import { ElMessageBox } from 'element-plus';
    import { Switch } from '@/components/ui/switch';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';

    import dayjs from 'dayjs';

-    import { useAppearanceSettingsStore, useGameLogStore, useVrcxStore } from '../../stores';
+    import { useAppearanceSettingsStore, useGameLogStore, useModalStore, useVrcxStore } from '../../stores';
    import { DataTableLayout } from '../../components/ui/data-table';
    import { InputGroupField } from '../../components/ui/input-group';
    import { createColumns } from './columns.jsx';
@@ -77,6 +76,7 @@
    const { gameLogTable } = storeToRefs(useGameLogStore());
    const appearanceSettingsStore = useAppearanceSettingsStore();
    const vrcxStore = useVrcxStore();
+    const modalStore = useModalStore();

    function getGameLogCreatedAt(row) {
        if (typeof row?.created_at === 'string' && row.created_at.length > 0) {
@@ -134,16 +134,12 @@
    });

    function deleteGameLogEntryPrompt(row) {
-        ElMessageBox.confirm('Continue? Delete Log', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    deleteGameLogEntry(row);
-                }
+        modalStore
+            .confirm({
+                description: 'Continue? Delete Log',
+                title: 'Confirm'
            })
+            .then(({ ok }) => ok && deleteGameLogEntry(row))
            .catch(() => {});
    }

--- a/src/views/Moderation/Moderation.vue
+++ b/src/views/Moderation/Moderation.vue
@@ -51,14 +51,13 @@
    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
    import { computed, ref, watch } from 'vue';
    import { Button } from '@/components/ui/button';
-    import { ElMessageBox } from 'element-plus';
    import { InputGroupField } from '@/components/ui/input-group';
    import { Refresh } from '@element-plus/icons-vue';
    import { Spinner } from '@/components/ui/spinner';
    import { storeToRefs } from 'pinia';
    import { useI18n } from 'vue-i18n';

-    import { useAppearanceSettingsStore, useModerationStore, useVrcxStore } from '../../stores';
+    import { useAppearanceSettingsStore, useModalStore, useModerationStore, useVrcxStore } from '../../stores';
    import { DataTableLayout } from '../../components/ui/data-table';
    import { createColumns } from './columns.jsx';
    import { moderationTypes } from '../../shared/constants';
@@ -73,6 +72,7 @@
    const { refreshPlayerModerations, handlePlayerModerationDelete } = useModerationStore();
    const appearanceSettingsStore = useAppearanceSettingsStore();
    const vrcxStore = useVrcxStore();
+    const modalStore = useModalStore();

    const moderationRef = ref(null);
    const { tableStyle: tableHeightStyle } = useDataTableScrollHeight(moderationRef, {
@@ -110,16 +110,12 @@
    }

    function deletePlayerModerationPrompt(row) {
-        ElMessageBox.confirm(`Continue? Delete Moderation ${row.type}`, 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    deletePlayerModeration(row);
-                }
+        modalStore
+            .confirm({
+                description: `Continue? Delete Moderation ${row.type}`,
+                title: 'Confirm'
            })
+            .then(({ ok }) => ok && deletePlayerModeration(row))
            .catch(() => {});
    }

--- a/src/views/Notifications/Notification.vue
+++ b/src/views/Notifications/Notification.vue
@@ -85,7 +85,6 @@
    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
    import { computed, ref, watch } from 'vue';
    import { Button } from '@/components/ui/button';
-    import { ElMessageBox } from 'element-plus';
    import { InputGroupField } from '@/components/ui/input-group';
    import { Refresh } from '@element-plus/icons-vue';
    import { Spinner } from '@/components/ui/spinner';
@@ -102,6 +101,7 @@
        useGroupStore,
        useInviteStore,
        useLocationStore,
+        useModalStore,
        useNotificationStore,
        useUserStore,
        useVrcxStore
@@ -129,6 +129,7 @@
    const { currentUser } = storeToRefs(useUserStore());
    const appearanceSettingsStore = useAppearanceSettingsStore();
    const vrcxStore = useVrcxStore();
+    const modalStore = useModalStore();

    const { t } = useI18n();

@@ -321,17 +322,18 @@

    function acceptFriendRequestNotification(row) {
        // FIXME: 메시지 수정
-        ElMessageBox.confirm('Continue? Accept Friend Request', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    notificationRequest.acceptFriendRequestNotification({
-                        notificationId: row.id
-                    });
+        modalStore
+            .confirm({
+                description: 'Continue? Accept Friend Request',
+                title: 'Confirm'
+            })
+            .then(({ ok }) => {
+                if (!ok) {
+                    return;
                }
+                notificationRequest.acceptFriendRequestNotification({
+                    notificationId: row.id
+                });
            })
            .catch(() => {});
    }
@@ -345,46 +347,47 @@
    }

    function acceptRequestInvite(row) {
-        ElMessageBox.confirm('Continue? Send Invite', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    let currentLocation = lastLocation.value.location;
-                    if (lastLocation.value.location === 'traveling') {
-                        currentLocation = lastLocationDestination.value;
-                    }
-                    if (!currentLocation) {
-                        // game log disabled, use API location
-                        currentLocation = currentUser.$locationTag;
-                    }
-                    const L = parseLocation(currentLocation);
-                    worldRequest
-                        .getCachedWorld({
-                            worldId: L.worldId
-                        })
-                        .then((args) => {
-                            notificationRequest
-                                .sendInvite(
-                                    {
-                                        instanceId: L.tag,
-                                        worldId: L.tag,
-                                        worldName: args.ref.name,
-                                        rsvp: true
-                                    },
-                                    row.senderUserId
-                                )
-                                .then((_args) => {
-                                    toast('Invite sent');
-                                    notificationRequest.hideNotification({
-                                        notificationId: row.id
-                                    });
-                                    return _args;
-                                });
-                        });
+        modalStore
+            .confirm({
+                description: 'Continue? Send Invite',
+                title: 'Confirm'
+            })
+            .then(({ ok }) => {
+                if (!ok) {
+                    return;
                }
+                let currentLocation = lastLocation.value.location;
+                if (lastLocation.value.location === 'traveling') {
+                    currentLocation = lastLocationDestination.value;
+                }
+                if (!currentLocation) {
+                    // game log disabled, use API location
+                    currentLocation = currentUser.$locationTag;
+                }
+                const L = parseLocation(currentLocation);
+                worldRequest
+                    .getCachedWorld({
+                        worldId: L.worldId
+                    })
+                    .then((args) => {
+                        notificationRequest
+                            .sendInvite(
+                                {
+                                    instanceId: L.tag,
+                                    worldId: L.tag,
+                                    worldName: args.ref.name,
+                                    rsvp: true
+                                },
+                                row.senderUserId
+                            )
+                            .then((_args) => {
+                                toast('Invite sent');
+                                notificationRequest.hideNotification({
+                                    notificationId: row.id
+                                });
+                                return _args;
+                            });
+                    });
            })
            .catch(() => {});
    }
@@ -454,13 +457,13 @@
    }

    function hideNotificationPrompt(row) {
-        ElMessageBox.confirm(`Continue? Decline ${row.type}`, 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
+        modalStore
+            .confirm({
+                description: `Continue? Decline ${row.type}`,
+                title: 'Confirm'
+            })
+            .then(({ ok }) => {
+                if (ok) {
                    hideNotification(row);
                }
            })
@@ -478,13 +481,13 @@
    }

    function deleteNotificationLogPrompt(row) {
-        ElMessageBox.confirm(`Continue? Delete ${row.type}`, 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
+        modalStore
+            .confirm({
+                description: `Continue? Delete ${row.type}`,
+                title: 'Confirm'
+            })
+            .then(({ ok }) => {
+                if (ok) {
                    deleteNotificationLog(row);
                }
            })
--- a/src/views/Settings/dialogs/RegistryBackupDialog.vue
+++ b/src/views/Settings/dialogs/RegistryBackupDialog.vue
@@ -55,8 +55,8 @@
    import { toast } from 'vue-sonner';
    import { useI18n } from 'vue-i18n';

+    import { useAdvancedSettingsStore, useModalStore, useVrcxStore } from '../../../stores';
    import { downloadAndSaveJson, removeFromArray } from '../../../shared/utils';
-    import { useAdvancedSettingsStore, useVrcxStore } from '../../../stores';
    import { Switch } from '../../../components/ui/switch';
    import { createColumns } from './registryBackupColumns.jsx';
    import { useVrcxVueTable } from '../../../lib/table/useVrcxVueTable';
@@ -67,6 +67,7 @@
    const { isRegistryBackupDialogVisible } = storeToRefs(useVrcxStore());
    const { vrcRegistryAutoBackup, vrcRegistryAskRestore } = storeToRefs(useAdvancedSettingsStore());
    const { setVrcRegistryAutoBackup, setVrcRegistryAskRestore } = useAdvancedSettingsStore();
+    const modalStore = useModalStore();

    const { t } = useI18n();

@@ -121,13 +122,13 @@
    }

    function restoreVrcRegistryBackup(row) {
-        ElMessageBox.confirm('Continue? Restore Backup', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'warning'
-        })
-            .then((action) => {
-                if (action !== 'confirm') {
+        modalStore
+            .confirm({
+                description: 'Continue? Restore Backup',
+                title: 'Confirm'
+            })
+            .then(({ ok }) => {
+                if (!ok) {
                    return;
                }
                const data = JSON.stringify(row.data);
@@ -155,13 +156,13 @@
    }

    function deleteVrcRegistry() {
-        ElMessageBox.confirm('Continue? Delete VRC Registry Settings', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'warning'
-        })
-            .then((action) => {
-                if (action !== 'confirm') {
+        modalStore
+            .confirm({
+                description: 'Continue? Delete VRC Registry Settings',
+                title: 'Confirm'
+            })
+            .then(({ ok }) => {
+                if (!ok) {
                    return;
                }
                AppApi.DeleteVRChatRegistryFolder().then(() => {
@@ -178,8 +179,6 @@

    function promptVrcRegistryBackupName() {
        ElMessageBox.prompt('Enter a name for the backup', 'Backup Name', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
            inputPattern: /\S+/,
            inputErrorMessage: 'Name is required',
            inputValue: 'Backup'
--- a/src/views/Settings/dialogs/VRChatConfigDialog.vue
+++ b/src/views/Settings/dialogs/VRChatConfigDialog.vue
@@ -173,23 +173,23 @@
    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
    import { computed, ref, watch } from 'vue';
    import { Button } from '@/components/ui/button';
-    import { InputGroupAction } from '@/components/ui/input-group';
    import { Checkbox } from '@/components/ui/checkbox';
-    import { ElMessageBox } from 'element-plus';
+    import { InputGroupAction } from '@/components/ui/input-group';
    import { Refresh } from '@element-plus/icons-vue';
    import { Spinner } from '@/components/ui/spinner';
    import { storeToRefs } from 'pinia';
    import { toast } from 'vue-sonner';
    import { useI18n } from 'vue-i18n';

+    import { useAdvancedSettingsStore, useGameStore, useModalStore } from '../../../stores';
    import { VRChatCameraResolutions, VRChatScreenshotResolutions } from '../../../shared/constants';
    import { getVRChatResolution, openExternalLink } from '../../../shared/utils';
-    import { useAdvancedSettingsStore, useGameStore } from '../../../stores';

    const { VRChatUsedCacheSize, VRChatTotalCacheSize, VRChatCacheSizeLoading } = storeToRefs(useGameStore());
    const { sweepVRChatCache, getVRChatCacheSize } = useGameStore();
    const { folderSelectorDialog } = useAdvancedSettingsStore();
    const { isVRChatConfigDialogVisible } = storeToRefs(useAdvancedSettingsStore());
+    const modalStore = useModalStore();

    const { t } = useI18n();

@@ -322,13 +322,13 @@
    });

    function showDeleteAllVRChatCacheConfirm() {
-        ElMessageBox.confirm(`Continue? Delete all VRChat cache`, 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
+        modalStore
+            .confirm({
+                description: 'Continue? Delete all VRChat cache',
+                title: 'Confirm'
+            })
+            .then(({ ok }) => {
+                if (ok) {
                    deleteAllVRChatCache();
                }
            })
--- a/src/views/Sidebar/components/FriendsSidebar.vue
+++ b/src/views/Sidebar/components/FriendsSidebar.vue
@@ -91,7 +91,7 @@
                <div v-for="friendArr in friendsInSameInstance" :key="friendArr[0].ref.$location.tag">
                    <div class="mb-1 flex items-center">
                        <Location
-                            class="extra text-neutral-300!"
+                            class="extra text-muted-foreground!"
                            :location="getFriendsLocations(friendArr)"
                            style="display: inline" />
                        <span class="extra" style="margin-left: 5px">{{ `(${friendArr.length})` }}</span>