feat: reusable dynamic confirmation modal

This commit is contained in:
idevakk
2026-03-04 09:57:45 +05:30
parent 996ae20bbb
commit 41c1e7ad54
2 changed files with 120 additions and 3 deletions

View File

@@ -22,6 +22,9 @@
}"
x-init="$watch('selectedId', value => { if(value && window.innerWidth < 1024) mobileView = 'detail' })"
@resize.window="if (window.innerWidth >= 1280) sidebarOpen = true">
<!-- Global Confirmation Modal -->
<x-bento.confirm-modal />
<!-- Mobile Sidebar Backdrop -->
<div x-show="sidebarOpen"
@@ -93,8 +96,13 @@
title="Copy Address">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
</button>
<button wire:click="deleteMailbox({{ $currentMailbox['id'] }})"
wire:confirm="Are you sure you want to delete this session? All emails will be lost."
<button @click="$dispatch('open-confirm-modal', {
title: 'Burn Mailbox?',
message: 'Are you sure you want to delete this mailbox? All emails will be permanently lost.',
confirmLabel: 'Burn Now',
type: 'danger',
action: () => $wire.deleteMailbox({{ $currentMailbox['id'] }})
})"
class="p-1.5 rounded-lg bg-rose-500/10 text-rose-500/60 hover:text-rose-500 hover:bg-rose-500/20 transition-all"
title="Delete Session">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
@@ -347,7 +355,13 @@
</button>
</div>
<div class="h-6 w-px bg-white/5"></div>
<button wire:click="deleteEmail({{ $selectedEmailId }})"
<button @click="$dispatch('open-confirm-modal', {
title: 'Burn Email?',
message: 'Are you sure you want to delete this email? This action is permanent.',
confirmLabel: 'Burn Now',
type: 'danger',
action: () => $wire.deleteEmail({{ $selectedEmailId }})
})"
class="p-2 rounded-xl bg-white/5 border border-white/5 text-zinc-400 hover:text-rose-500 hover:bg-rose-500/10 transition-all" title="Delete Email">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
</button>