feat: improve ux and security

app/components/ConfirmModal.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  description?: string;
+}>();
+
+const emit = defineEmits<{ close: [confirmed: boolean] }>();
+</script>
+
+<template>
+  <UModal :title="title">
+    <template #body>
+      <p v-if="description" class="text-sm text-muted">{{ description }}</p>
+    </template>
+    <template #footer>
+      <div class="flex gap-2 justify-end w-full">
+        <UButton variant="ghost" color="neutral" @click="emit('close', false)">Cancel</UButton>
+        <UButton color="error" @click="emit('close', true)">Delete</UButton>
+      </div>
+    </template>
+  </UModal>
+</template>