add destructive variant to alert dialogs for destructive actions

2026-04-18 22:33:50 +02:00 · 2026-03-13 23:10:29 +09:00
parent 9b6ca42d9d
commit 1f5acd546d
17 changed files with 77 additions and 40 deletions
--- a/src/components/dialogs/AvatarDialog/useAvatarDialogCommands.js
+++ b/src/components/dialogs/AvatarDialog/useAvatarDialogCommands.js
@@ -287,7 +287,8 @@ export function useAvatarDialogCommands(
                    title: t('confirm.title'),
                    description: t('confirm.command_question', {
                        command: t('dialog.avatar.actions.block')
-                    })
+                    }),
+                    destructive: true
                }),
                handler: (id) => {
                    avatarModerationRequest
@@ -369,7 +370,8 @@ export function useAvatarDialogCommands(
                    title: t('confirm.title'),
                    description: t('confirm.command_question', {
                        command: t('dialog.avatar.actions.delete')
-                    })
+                    }),
+                    destructive: true
                }),
                handler: (id) => {
                    avatarRequest
@@ -399,7 +401,8 @@ export function useAvatarDialogCommands(
                    title: t('confirm.title'),
                    description: t('confirm.command_question', {
                        command: t('dialog.avatar.actions.delete_impostor')
-                    })
+                    }),
+                    destructive: true
                }),
                handler: (id) => {
                    avatarRequest
@@ -432,7 +435,8 @@ export function useAvatarDialogCommands(
                    title: t('confirm.title'),
                    description: t('confirm.command_question', {
                        command: t('dialog.avatar.actions.regenerate_impostor')
-                    })
+                    }),
+                    destructive: true
                }),
                handler: (id) => {
                    avatarRequest
--- a/src/components/dialogs/CustomNavDialog.vue
+++ b/src/components/dialogs/CustomNavDialog.vue
@@ -770,7 +770,8 @@
        const dashboardId = String(dashboardKey || '').replace(DASHBOARD_NAV_KEY_PREFIX, '');
        const { ok } = await modalStore.confirm({
            title: t('dashboard.confirmations.delete_title'),
-            description: t('dashboard.confirmations.delete_description')
+            description: t('dashboard.confirmations.delete_description'),
+            destructive: true
        });
        if (!ok) {
            return;
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -561,7 +561,8 @@
        modalStore
            .confirm({
                description: t('confirm.delete_post'),
-                title: t('confirm.title')
+                title: t('confirm.title'),
+                destructive: true
            })
            .then(({ ok }) => {
                if (!ok) return;
--- a/src/components/dialogs/GroupDialog/useGroupDialogCommands.js
+++ b/src/components/dialogs/GroupDialog/useGroupDialogCommands.js
@@ -84,7 +84,8 @@ export function useGroupDialogCommands(
            'Block Group': {
                confirm: () => ({
                    title: t('confirm.title'),
-                    description: t('confirm.block_group')
+                    description: t('confirm.block_group'),
+                    destructive: true
                }),
                handler: (id) => {
                    groupRequest.blockGroup({ groupId: id }).then((args) => {
--- a/src/components/dialogs/UserDialog/useUserDialogCommands.js
+++ b/src/components/dialogs/UserDialog/useUserDialogCommands.js
@@ -486,7 +486,8 @@ export function useUserDialogCommands(
                    title: t('confirm.title'),
                    description: t('confirm.command_question', {
                        command: t('dialog.user.actions.moderation_block')
-                    })
+                    }),
+                    destructive: true
                }),
                handler: async (userId) => {
                    const args =
@@ -518,7 +519,8 @@ export function useUserDialogCommands(
                    title: t('confirm.title'),
                    description: t('confirm.command_question', {
                        command: t('dialog.user.actions.moderation_mute')
-                    })
+                    }),
+                    destructive: true
                }),
                handler: async (userId) => {
                    const args =
@@ -554,7 +556,8 @@ export function useUserDialogCommands(
                        command: t(
                            'dialog.user.actions.moderation_disable_avatar_interaction'
                        )
-                    })
+                    }),
+                    destructive: true
                }),
                handler: async (userId) => {
                    const args =
@@ -590,7 +593,8 @@ export function useUserDialogCommands(
                        command: t(
                            'dialog.user.actions.moderation_disable_chatbox'
                        )
-                    })
+                    }),
+                    destructive: true
                }),
                handler: async (userId) => {
                    const args =
@@ -622,7 +626,8 @@ export function useUserDialogCommands(
                    title: t('confirm.title'),
                    description: t('confirm.command_question', {
                        command: t('dialog.user.actions.unfriend')
-                    })
+                    }),
+                    destructive: true
                }),
                handler: async (userId) => {
                    const args = await friendRequest.deleteFriend(
--- a/src/components/dialogs/WorldDialog/useWorldDialogCommands.js
+++ b/src/components/dialogs/WorldDialog/useWorldDialogCommands.js
@@ -528,7 +528,8 @@ export function useWorldDialogCommands(
                    title: t('confirm.title'),
                    description: t('confirm.command_question', {
                        command: t('dialog.world.actions.delete')
-                    })
+                    }),
+                    destructive: true
                }),
                handler: (id) => {
                    worldRequest.deleteWorld({ worldId: id }).then((args) => {
--- a/src/components/nav-menu/NavMenu.vue
+++ b/src/components/nav-menu/NavMenu.vue
@@ -50,11 +50,11 @@
                                            </ContextMenuTrigger>
                                            <ContextMenuContent>
                                                <ContextMenuItem
-                                                    :disabled="!hasNotifications"
+                                                    v-if="hasNotifications"
                                                    @click="clearAllNotifications">
                                                    {{ t('nav_menu.mark_all_read') }}
                                                </ContextMenuItem>
-                                                <ContextMenuSeparator />
+                                                <ContextMenuSeparator v-if="hasNotifications" />
                                                <template v-if="isDashboardItem(item)">
                                                    <ContextMenuItem @click="handleEditDashboard(item)">
                                                        {{ t('nav_menu.edit_dashboard') }}
@@ -101,10 +101,10 @@
                </SidebarContent>
            </ContextMenuTrigger>
            <ContextMenuContent>
-                <ContextMenuItem :disabled="!hasNotifications" @click="clearAllNotifications">
+                <ContextMenuItem v-if="hasNotifications" @click="clearAllNotifications">
                    {{ t('nav_menu.mark_all_read') }}
                </ContextMenuItem>
-                <ContextMenuSeparator />
+                <ContextMenuSeparator v-if="hasNotifications" />
                <ContextMenuItem @click="handleQuickCreateDashboard">
                    {{ t('dashboard.new_dashboard') }}
                </ContextMenuItem>
@@ -361,7 +361,8 @@
        }
        const { ok } = await modalStore.confirm({
            title: t('dashboard.confirmations.delete_title'),
-            description: t('dashboard.confirmations.delete_description')
+            description: t('dashboard.confirmations.delete_description'),
+            destructive: true
        });
        if (!ok) {
            return;
--- a/src/components/nav-menu/NavMenuFolderItem.vue
+++ b/src/components/nav-menu/NavMenuFolderItem.vue
@@ -94,11 +94,11 @@
                                            </ContextMenuTrigger>
                                            <ContextMenuContent>
                                                <ContextMenuItem
-                                                    :disabled="!hasNotifications"
+                                                    v-if="hasNotifications"
                                                    @click="emit('clear-notifications')">
                                                    {{ t('nav_menu.mark_all_read') }}
                                                </ContextMenuItem>
-                                                <ContextMenuSeparator />
+                                                <ContextMenuSeparator v-if="hasNotifications" />
                                                <template v-if="isDashboardItem(entry)">
                                                    <ContextMenuItem @click="emit('edit-dashboard', entry)">
                                                        {{ t('nav_menu.edit_dashboard') }}
@@ -126,10 +126,10 @@
                </div>
            </ContextMenuTrigger>
            <ContextMenuContent>
-                <ContextMenuItem :disabled="!hasNotifications" @click="emit('clear-notifications')">
+                <ContextMenuItem v-if="hasNotifications" @click="emit('clear-notifications')">
                    {{ t('nav_menu.mark_all_read') }}
                </ContextMenuItem>
-                <ContextMenuSeparator />
+                <ContextMenuSeparator v-if="hasNotifications" />
                <ContextMenuItem @click="emit('create-dashboard')">
                    {{ t('dashboard.new_dashboard') }}
                </ContextMenuItem>
--- a/src/components/ui/alert-dialog/AlertDialogAction.vue
+++ b/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -7,14 +7,15 @@
    const props = defineProps({
        asChild: { type: Boolean, required: false },
        as: { type: null, required: false },
+        variant: { type: String, required: false },
        class: { type: null, required: false }
    });

-    const delegatedProps = reactiveOmit(props, 'class');
+    const delegatedProps = reactiveOmit(props, 'class', 'variant');
 </script>

 <template>
-    <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants({ variant: props.variant }), props.class)">
        <slot />
    </AlertDialogAction>
 </template>
--- a/src/components/ui/alert-dialog/AlertDialogModal.vue
+++ b/src/components/ui/alert-dialog/AlertDialogModal.vue
@@ -14,7 +14,7 @@

    const modalStore = useModalStore();

-    const { alertOpen, alertMode, alertTitle, alertDescription, alertOkText, alertCancelText, alertDismissible } =
+    const { alertOpen, alertMode, alertTitle, alertDescription, alertOkText, alertCancelText, alertDismissible, alertDestructive } =
        storeToRefs(modalStore);

    function onEscapeKeyDown(event) {
@@ -60,7 +60,7 @@
                    {{ alertCancelText }}
                </AlertDialogCancel>

-                <AlertDialogAction @click="modalStore.handleOk">
+                <AlertDialogAction :variant="alertDestructive ? 'destructive' : undefined" @click="modalStore.handleOk">
                    {{ alertOkText }}
                </AlertDialogAction>
            </AlertDialogFooter>