feat: add post deletion confirm dialog (#818)

Co-authored-by: 三咲智子 <sxzz@sxzz.moe>

components/modal/ModalConfirm.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ConfirmDialogChoice, ConfirmDialogLabel } from '~/types'
+
+defineProps<ConfirmDialogLabel>()
+
+const emit = defineEmits<{
+  (evt: 'choice', choice: ConfirmDialogChoice): void
+}>()
+</script>
+
+<template>
+  <div flex="~ col" gap-6>
+    <div font-bold text-lg text-center>
+      {{ title }}
+    </div>
+    <div v-if="description">
+      {{ description }}
+    </div>
+    <div flex justify-end gap-2>
+      <button btn-text @click="emit('choice', 'cancel')">
+        {{ cancel || $t('common.confirm_dialog.cancel') }}
+      </button>
+      <button btn-solid @click="emit('choice', 'confirm')">
+        {{ confirm || $t('common.confirm_dialog.confirm') }}
+      </button>
+    </div>
+  </div>
+</template>

components/modal/ModalContainer.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import type { Status } from 'masto'
+import type { ConfirmDialogChoice } from '~/types'
 import {
   isCommandPanelOpen,
+  isConfirmDialogOpen,
   isEditHistoryDialogOpen,
   isMediaPreviewOpen,
   isPreviewHelpOpen,
@@ -36,6 +38,11 @@ const handlePublished = (status: Status) => {
 const handlePublishClose = () => {
   lastPublishDialogStatus.value = null
 }
+
+const handleConfirmChoice = (choice: ConfirmDialogChoice) => {
+  confirmDialogChoice.value = choice
+  isConfirmDialogOpen.value = false
+}
 </script>
 
 <template>
@@ -71,5 +78,8 @@ const handlePublishClose = () => {
     <ModalDialog v-model="isCommandPanelOpen" max-w-fit flex>
       <CommandPanel @close="closeCommandPanel()" />
     </ModalDialog>
+    <ModalDialog v-model="isConfirmDialogOpen" py-4 px-8 max-w-125>
+      <ModalConfirm v-if="confirmDialogLabel" v-bind="confirmDialogLabel" @choice="handleConfirmChoice" />
+    </ModalDialog>
   </template>
 </template>