From 9b1ac596d3814fcf95ebd49dcbb5b1b638aad65f Mon Sep 17 00:00:00 2001
From: Jeff Sikes <jeffsikes@users.noreply.github.com>
Date: Fri, 13 Jan 2023 08:53:40 -0600
Subject: [PATCH] feat: notification when followed account creates a new post
 (#1045)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
Fix https://github.com/elk-zone/elk/issues/538
---
 components/account/AccountHeader.vue | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index 9e9f9c7a..496327e6 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -6,6 +6,8 @@ const { account } = defineProps<{
   command?: boolean
 }>()
 
+const masto = useMasto()
+
 const { t } = useI18n()
 
 const createdAt = $(useFormattedDateTime(() => account.createdAt, {
@@ -14,6 +16,8 @@ const createdAt = $(useFormattedDateTime(() => account.createdAt, {
   year: 'numeric',
 }))
 
+const relationship = $(useRelationship(account))
+
 const namedFields = ref<mastodon.v1.AccountField[]>([])
 const iconFields = ref<mastodon.v1.AccountField[]>([])
 
@@ -39,6 +43,21 @@ function previewAvatar() {
   }])
 }
 
+async function toggleNotify() {
+  // @ts-expect-error: Masto.js only recently added this field. Can be removed when Elk updates Masto.js to 5.4.0 or higher.
+  relationship!.notifying = !relationship?.notifying
+  try {
+    // @ts-expect-error: Masto.js only recently added this field. Can be removed when Elk updates Masto.js to 5.4.0 or higher.
+    const newRel = await masto.v1.accounts.follow(account.id, { notify: relationship?.notifying })
+    Object.assign(relationship!, newRel)
+  }
+  catch {
+    // TODO error handling
+    // @ts-expect-error: Masto.js only recently added this field. Can be removed when Elk updates Masto.js to 5.4.0 or higher.
+    relationship!.notifying = !relationship?.notifying
+  }
+}
+
 watchEffect(() => {
   const named: mastodon.v1.AccountField[] = []
   const icons: mastodon.v1.AccountField[] = []
@@ -60,6 +79,8 @@ watchEffect(() => {
 })
 
 const isSelf = $computed(() => currentUser.value?.account.id === account.id)
+// @ts-expect-error: Masto.js only recently added this field. Can be removed when Elk updates Masto.js to 5.4.0 or higher.
+const isAlertedOnPost = $computed(() => relationship?.notifying)
 </script>
 
 <template>
@@ -93,11 +114,12 @@ const isSelf = $computed(() => currentUser.value?.account.id === account.id)
           >
             {{ $t('settings.profile.appearance.title') }}
           </NuxtLink>
-          <!-- <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
+          <button v-if="!isSelf && relationship?.following" flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group @click="toggleNotify()">
             <div rounded p2 group-hover="bg-rose/10">
-              <div i-ri:bell-line />
+              <div v-if="isAlertedOnPost" i-ri:bell-fill />
+              <div v-else i-ri-bell-line />
             </div>
-          </button> -->
+          </button>
         </div>
       </div>
       <div v-if="account.note" max-h-100 overflow-y-auto>