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>

components/status/StatusActionsMore.vue

@@ -22,6 +22,7 @@ const {
 const clipboard = useClipboard()
 const router = useRouter()
 const route = useRoute()
+const { t } = useI18n()
 
 const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
 
@@ -60,13 +61,12 @@ const shareLink = async (status: Status) => {
 }
 
 const deleteStatus = async () => {
-  // TODO confirm to delete
-  if (process.dev) {
-    // eslint-disable-next-line no-alert
-    const result = confirm('[DEV] Are you sure you want to delete this post?')
-    if (!result)
-      return
-  }
+  if (await openConfirmDialog({
+    title: t('menu.delete_confirm.title'),
+    confirm: t('menu.delete_confirm.confirm'),
+    cancel: t('menu.delete_confirm.cancel'),
+  }) !== 'confirm')
+    return
 
   removeCachedStatus(status.id)
   await masto.statuses.remove(status.id)