From fd662b8864ac2205dc1cb2775dae889f1d935920 Mon Sep 17 00:00:00 2001
From: Jeff Sikes <jeffsikes@users.noreply.github.com>
Date: Tue, 17 Jan 2023 06:57:24 -0600
Subject: [PATCH] feat: enhancements to profile account notifications (#1127)

---
 components/account/AccountHeader.vue | 27 ++++++++++++++++-----------
 locales/en-US.json                   |  3 ++-
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index aaed93b2..cc69486e 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -25,6 +25,10 @@ function getFieldIconTitle(fieldName: string) {
   return fieldName === 'Joined' ? t('account.joined') : fieldName
 }
 
+function getNotificationIconTitle() {
+  return relationship?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` })
+}
+
 function previewHeader() {
   openMediaPreview([{
     id: `${account.acct}:header`,
@@ -100,17 +104,18 @@ const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
         </div>
         <div absolute top-18 inset-ie-0 flex gap-2 items-center>
           <AccountMoreButton :account="account" :command="command" />
-          <button
-            v-if="!isSelf && relationship?.following"
-            :aria-pressed="isNotifiedOnPost"
-            :aria-label="t('account.notify_on_post', { username: `@${account.username}` })"
-            rounded-full p2 border-1 transition-colors
-            :class="isNotifiedOnPost ? 'text-primary border-primary hover:bg-red/20 hover:text-red hover:border-red' : 'border-base hover:text-primary'"
-            @click="toggleNotifications"
-          >
-            <span v-if="isNotifiedOnPost" i-ri:bell-fill block text-current />
-            <span v-else i-ri-bell-line block text-current />
-          </button>
+          <CommonTooltip v-if="!isSelf && relationship?.following" :content="getNotificationIconTitle()">
+            <button
+              :aria-pressed="isNotifiedOnPost"
+              :aria-label="t('account.notifications_on_post_enable', { username: `@${account.username}` })"
+              rounded-full p2 border-1 transition-colors
+              :class="isNotifiedOnPost ? 'text-primary border-primary hover:bg-red/20 hover:text-red hover:border-red' : 'border-base hover:text-primary'"
+              @click="toggleNotifications"
+            >
+              <span v-if="isNotifiedOnPost" i-ri:notification-4-fill block text-current />
+              <span v-else i-ri-notification-4-line block text-current />
+            </button>
+          </CommonTooltip>
           <AccountFollowButton :account="account" :command="command" />
           <!-- Edit profile -->
           <NuxtLink
diff --git a/locales/en-US.json b/locales/en-US.json
index cd819112..0b991c02 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -28,7 +28,8 @@
     "muted_users": "Muted users",
     "muting": "Muted",
     "mutuals": "Mutuals",
-    "notify_on_post": "Notify me when {username} posts",
+    "notifications_on_post_disable": "Stop notifying me when {username} posts",
+    "notifications_on_post_enable": "Notify me when {username} posts",
     "pinned": "Pinned",
     "posts": "Posts",
     "posts_count": "{0} Posts|{0} Post|{0} Posts",