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

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

diff --git a/components/account/AccountFollowButton.vue b/components/account/AccountFollowButton.vue
index 8358b7a2..1822a197 100644
--- a/components/account/AccountFollowButton.vue
+++ b/components/account/AccountFollowButton.vue
@@ -35,6 +35,18 @@ async function unblock() {
   }
 }
 
+async function unmute() {
+  relationship!.muting = false
+  try {
+    const newRel = await useMasto().accounts.unmute(account.id)
+    Object.assign(relationship!, newRel)
+  }
+  catch {
+    // TODO error handling
+    relationship!.muting = true
+  }
+}
+
 const { t } = useI18n()
 
 useCommand({
@@ -54,6 +66,9 @@ const buttonStyle = $computed(() => {
   if (relationship.blocking)
     return 'text-inverted bg-red border-red'
 
+  if (relationship.muting)
+    return 'text-base bg-code border-base'
+
   // If following, use a label style with a strong border for Mutuals
   if (relationship.following)
     return `text-base ${relationship.followedBy ? 'border-strong' : 'border-base'}`
@@ -71,13 +86,17 @@ const buttonStyle = $computed(() => {
     border-1
     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()"
+    :hover="!relationship?.blocking && !relationship?.muting && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
+    @click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollow()"
   >
     <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-if="relationship?.muting">
+      <span group-hover="hidden">{{ $t('account.muting') }}</span>
+      <span hidden group-hover="inline">{{ $t('account.unmute') }}</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>
diff --git a/locales/en-US.json b/locales/en-US.json
index 3c4dbeed..c1e390f2 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -19,6 +19,7 @@
     "joined": "Joined",
     "moved_title": "has indicated that their new account is now:",
     "muted_users": "Muted users",
+    "muting": "Muted",
     "mutuals": "Mutuals",
     "pinned": "Pinned",
     "posts": "Posts",
@@ -26,7 +27,8 @@
     "profile_description": "{0}'s profile header",
     "profile_unavailable": "Profile unavailable",
     "unblock": "Unblock",
-    "unfollow": "Unfollow"
+    "unfollow": "Unfollow",
+    "unmute": "Unmute"
   },
   "action": {
     "bookmark": "Bookmark",
diff --git a/locales/es-ES.json b/locales/es-ES.json
index 14cd440d..beeef43a 100644
--- a/locales/es-ES.json
+++ b/locales/es-ES.json
@@ -18,6 +18,7 @@
     "joined": "Se unió",
     "moved_title": "ha indicado que su nueva cuenta ahora es:",
     "muted_users": "Usuarios silenciados",
+    "muting": "Muted",
     "mutuals": "Mutuo",
     "pinned": "Publicaciones fijadas",
     "posts": "Publicaciones",
@@ -25,7 +26,8 @@
     "profile_description": "Encabezado del perfil de {0}",
     "profile_unavailable": "Perfil no disponible",
     "unblock": "Unblock",
-    "unfollow": "Dejar de seguir"
+    "unfollow": "Dejar de seguir",
+    "unmute": "Unmute"
   },
   "action": {
     "bookmark": "Añadir marcador",
diff --git a/locales/fr-FR.json b/locales/fr-FR.json
index cd39be8f..6b4100f2 100644
--- a/locales/fr-FR.json
+++ b/locales/fr-FR.json
@@ -19,6 +19,7 @@
     "joined": "a rejoint",
     "moved_title": "a indiqué que son nouveau compte est désormais :",
     "muted_users": "Utilisateurs mis en sourdine",
+    "muting": "Muted",
     "mutuals": "@:account.following",
     "pinned": "Épinglés",
     "posts": "Messages",
@@ -26,7 +27,8 @@
     "profile_description": "En-tête du profil de {0}",
     "profile_unavailable": "Profil non accessible",
     "unblock": "Unblock",
-    "unfollow": "Ne plus suivre"
+    "unfollow": "Ne plus suivre",
+    "unmute": "Unmute"
   },
   "action": {
     "bookmark": "Ajouter aux marque-pages",
diff --git a/locales/ja-JP.json b/locales/ja-JP.json
index 7703db2c..ed919db3 100644
--- a/locales/ja-JP.json
+++ b/locales/ja-JP.json
@@ -11,10 +11,12 @@
     "following_count": "{0} フォロー中",
     "follows_you": "フォローされています",
     "muted_users": "ミュート済み",
+    "muting": "Muted",
     "pinned": "固定された投稿",
     "posts_count": "{0} 投稿",
     "unblock": "Unblock",
-    "unfollow": "フォロー解除"
+    "unfollow": "フォロー解除",
+    "unmute": "Unmute"
   },
   "action": {
     "compose": "今なにしてる？",
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index 7ca98278..2bf531c5 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -19,6 +19,7 @@
     "joined": "已加入",
     "moved_title": "的新账号是：",
     "muted_users": "已屏蔽的用户",
+    "muting": "Muted",
     "mutuals": "互相关注",
     "pinned": "置顶的帖文",
     "posts": "帖文",
@@ -26,7 +27,8 @@
     "profile_description": "{0}的个人资料头图",
     "profile_unavailable": "个人资料不可见",
     "unblock": "Unblock",
-    "unfollow": "取消关注"
+    "unfollow": "取消关注",
+    "unmute": "Unmute"
   },
   "action": {
     "bookmark": "收藏",