From e72d45a2089b6f5bd78651c32c43b43ff4d8b366 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Mon, 19 Dec 2022 15:01:41 +0100
Subject: [PATCH] feat: blocking feedback on follow button

---
 components/account/AccountFollowButton.vue | 26 ++++++++++++++++++++--
 locales/en-US.json                         |  2 ++
 locales/es-ES.json                         |  2 ++
 locales/fr-FR.json                         |  2 ++
 locales/ja-JP.json                         |  2 ++
 locales/zh-CN.json                         |  2 ++
 6 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 4e2458aa..8358b7a2 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -23,6 +23,18 @@ async function toggleFollow() {
   }
 }
 
+async function unblock() {
+  relationship!.blocking = false
+  try {
+    const newRel = await useMasto().accounts.unblock(account.id)
+    Object.assign(relationship!, newRel)
+  }
+  catch {
+    // TODO error handling
+    relationship!.blocking = true
+  }
+}
+
 const { t } = useI18n()
 
 useCommand({
@@ -39,6 +51,9 @@ const buttonStyle = $computed(() => {
   if (!relationship)
     return 'text-inverted'
 
+  if (relationship.blocking)
+    return 'text-inverted bg-red border-red'
+
   // If following, use a label style with a strong border for Mutuals
   if (relationship.following)
     return `text-base ${relationship.followedBy ? 'border-strong' : 'border-base'}`
@@ -54,9 +69,16 @@ const buttonStyle = $computed(() => {
     gap-1 items-center group
     :disabled="relationship?.requested"
     border-1
-    rounded-full flex="~ gap2 center" font-500 w-30 h-fit py1 :class="buttonStyle" :hover="relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'" @click="toggleFollow"
+    rounded-full flex="~ gap2 center" font-500 w-30 h-fit py1
+    :class="buttonStyle"
+    :hover="!relationship?.blocking && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
+    @click="relationship?.blocking ? unblock() : toggleFollow()"
   >
-    <template v-if="relationship?.following">
+    <template v-if="relationship?.blocking">
+      <span group-hover="hidden">{{ $t('account.blocking') }}</span>
+      <span hidden group-hover="inline">{{ $t('account.unblock') }}</span>
+    </template>
+    <template v-else-if="relationship?.following">
       <span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
       <span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
     </template>
diff --git a/locales/en-US.json b/locales/en-US.json
index f708e3ce..3c4dbeed 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -4,6 +4,7 @@
     "blocked_by": "You're blocked by this user.",
     "blocked_domains": "Blocked domains",
     "blocked_users": "Blocked users",
+    "blocking": "Blocked",
     "bot": "BOT",
     "favourites": "Favourites",
     "follow": "Follow",
@@ -24,6 +25,7 @@
     "posts_count": "{0} posts|{0} post|{0} posts",
     "profile_description": "{0}'s profile header",
     "profile_unavailable": "Profile unavailable",
+    "unblock": "Unblock",
     "unfollow": "Unfollow"
   },
   "action": {
diff --git a/locales/es-ES.json b/locales/es-ES.json
index 88bcc815..14cd440d 100644
--- a/locales/es-ES.json
+++ b/locales/es-ES.json
@@ -4,6 +4,7 @@
     "blocked_by": "Fuiste bloqueado por este usuario.",
     "blocked_domains": "Dominios bloqueados",
     "blocked_users": "Usuarios bloqueados",
+    "blocking": "Blocked",
     "favourites": "Favoritos",
     "follow": "Seguir",
     "follow_back": "Seguir de vuelta",
@@ -23,6 +24,7 @@
     "posts_count": "{0} publicaciones|{0} publicación|{0} publicaciones",
     "profile_description": "Encabezado del perfil de {0}",
     "profile_unavailable": "Perfil no disponible",
+    "unblock": "Unblock",
     "unfollow": "Dejar de seguir"
   },
   "action": {
diff --git a/locales/fr-FR.json b/locales/fr-FR.json
index 6858e85f..cd39be8f 100644
--- a/locales/fr-FR.json
+++ b/locales/fr-FR.json
@@ -4,6 +4,7 @@
     "blocked_by": "Vous êtes bloqué·e par cet·te utilisateur.",
     "blocked_domains": "Domaines bloqués",
     "blocked_users": "Utilisateurs bloqués",
+    "blocking": "Blocked",
     "bot": "Automatisé",
     "favourites": "Favoris",
     "follow": "Suivre",
@@ -24,6 +25,7 @@
     "posts_count": "{0} messages",
     "profile_description": "En-tête du profil de {0}",
     "profile_unavailable": "Profil non accessible",
+    "unblock": "Unblock",
     "unfollow": "Ne plus suivre"
   },
   "action": {
diff --git a/locales/ja-JP.json b/locales/ja-JP.json
index 8c524b64..7703db2c 100644
--- a/locales/ja-JP.json
+++ b/locales/ja-JP.json
@@ -2,6 +2,7 @@
   "account": {
     "blocked_domains": "ブロックしたドメイン",
     "blocked_users": "ブロックしたユーザー",
+    "blocking": "Blocked",
     "favourites": "お気に入り",
     "follow": "フォローする",
     "follow_back": "フォローバックする",
@@ -12,6 +13,7 @@
     "muted_users": "ミュート済み",
     "pinned": "固定された投稿",
     "posts_count": "{0} 投稿",
+    "unblock": "Unblock",
     "unfollow": "フォロー解除"
   },
   "action": {
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 2bbcd5ae..7ca98278 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -4,6 +4,7 @@
     "blocked_by": "您已被此用户拉黑",
     "blocked_domains": "已拉黑的域名",
     "blocked_users": "已拉黑的用户",
+    "blocking": "Blocked",
     "bot": "机器人",
     "favourites": "喜欢的帖文",
     "follow": "关注",
@@ -24,6 +25,7 @@
     "posts_count": "{0} 条帖文",
     "profile_description": "{0}的个人资料头图",
     "profile_unavailable": "个人资料不可见",
+    "unblock": "Unblock",
     "unfollow": "取消关注"
   },
   "action": {