feat: confirm before unfollow (#1208)

Closes https://github.com/elk-zone/elk/issues/35

components/account/AccountFollowButton.vue

@@ -8,12 +8,21 @@ const { account, command, context, ...props } = defineProps<{
   command?: boolean
 }>()
 
+const { t } = useI18n()
 const isSelf = $(useSelfAccount(() => account))
 const enable = $computed(() => !isSelf && currentUser.value)
 const relationship = $computed(() => props.relationship || useRelationship(account).value)
 
 const { client } = $(useMasto())
 async function toggleFollow() {
+  if (relationship!.following) {
+    if (await openConfirmDialog({
+      title: t('confirm.unfollow.title'),
+      confirm: t('confirm.unfollow.confirm'),
+      cancel: t('confirm.unfollow.cancel'),
+    }) !== 'confirm')
+      return
+  }
   relationship!.following = !relationship!.following
   try {
     const newRel = await client.v1.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
@@ -52,8 +61,6 @@ async function unmute() {
   }
 }
 
-const { t } = useI18n()
-
 useCommand({
   scope: 'Actions',
   order: -2,

locales/en-US.json

@@ -104,6 +104,13 @@
     "draft_title": "Draft {0}",
     "drafts": "Drafts ({v})"
   },
+  "confirm": {
+    "unfollow": {
+      "cancel": "Cancel",
+      "confirm": "Unfollow",
+      "title": "Are you sure you want to unfollow?"
+    }
+  },
   "conversation": {
     "with": "with"
   },

locales/zh-CN.json

@@ -100,6 +100,13 @@
     "draft_title": "草稿 {0}",
     "drafts": "草稿 ({v})"
   },
+  "confirm": {
+    "unfollow": {
+      "cancel": "取消",
+      "confirm": "取消关注",
+      "title": "你确定要取消关注吗？"
+    }
+  },
   "conversation": {
     "with": "与"
   },

locales/zh-TW.json

@@ -103,6 +103,13 @@
     "draft_title": "草稿 {0}",
     "drafts": "草稿 ({v})"
   },
+  "confirm": {
+    "unfollow": {
+      "cancel": "取消",
+      "confirm": "取消關注",
+      "title": "你確定要取消關注嗎？"
+    }
+  },
   "conversation": {
     "with": "與"
   },