feat: unify follow button (#25)

components/account/AccountCard.vue

@@ -4,27 +4,13 @@ import type { Account } from 'masto'
 const { account } = defineProps<{
   account: Account
 }>()
-
-const masto = await useMasto()
-
-const relationship = $(useRelationship(account))
-
-function unfollow() {
-  masto.accounts.unfollow(account.id)
-  relationship!.following = false
-}
-function follow() {
-  masto.accounts.follow(account.id)
-  relationship!.following = true
-}
 </script>
 
 <template>
   <div flex justify-between>
-    <AccountInfo :account="account" p3 />
+    <AccountInfo :account="account" p1 />
-    <div h-full p5>
+    <div h-full p1>
-      <div v-if="relationship?.following === true" color-purple hover:color-gray hover:cursor-pointer i-ri:user-unfollow-fill @click="unfollow" />
+      <AccountFollowButton :account="account" />
-      <div v-else-if="relationship?.following === false" color-gray hover:color-purple hover:cursor-pointer i-ri:user-follow-fill @click="follow" />
     </div>
   </div>
 </template>

components/account/AccountFollowButton.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { Account, MastoClient } from 'masto'
+
+const { account } = defineProps<{
+  account: Account
+}>()
+
+const relationship = $(useRelationship(account))
+
+let masto: MastoClient
+
+async function toggleFollow() {
+  relationship!.following = !relationship!.following
+  masto ??= await useMasto()
+  await masto.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
+}
+</script>
+
+<template>
+  <button v-if="relationship" flex gap-1 items-center w-full rounded hover="op100 text-white b-purple" group @click="toggleFollow">
+    <div rounded w-28 p2 :group-hover="relationship?.following ? 'bg-red/30' : 'bg-purple/30'" :class="!relationship?.following ? 'bg-cyan/10' : ' bg-purple/10'">
+      <template v-if="relationship?.following">
+        <span group-hover="hidden">Following</span>
+        <span hidden group-hover="inline">Unfollow</span>
+      </template>
+      <template v-else>
+        {{ relationship?.followedBy ? 'Follow back' : 'Follow' }}
+      </template>
+    </div>
+  </button>
+</template>

components/account/AccountHeader.vue

@@ -1,20 +1,10 @@
 <script setup lang="ts">
-import type { Account, MastoClient } from 'masto'
+import type { Account } from 'masto'
 
 const { account } = defineProps<{
   account: Account
 }>()
 
-const relationship = $(useRelationship(account))
-
-let masto: MastoClient
-
-async function toggleFollow() {
-  relationship!.following = !relationship!.following
-  masto ??= await useMasto()
-  await masto.accounts[relationship!.following ? 'follow' : 'unfollow'](account.id)
-}
-
 const createdAt = $computed(() => {
   const date = new Date(account.createdAt)
   return new Intl.DateTimeFormat('en-US', { month: 'long', day: 'numeric', year: 'numeric' }).format(date)
@@ -42,11 +32,7 @@ const createdAt = $computed(() => {
           </NuxtLink>
         </div>
         <div flex gap-2>
-          <button v-if="relationship" flex gap-1 items-center w-full rounded op75 hover="op100 text-white b-purple" group @click="toggleFollow">
+          <AccountFollowButton :account="account" />
-            <div rounded w-30 p2 group-hover="bg-rose/10">
-              {{ relationship?.following ? 'Unfollow' : relationship?.followedBy ? 'Follow back' : 'Follow' }}
-            </div>
-          </button>
           <!-- <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group>
             <div rounded p2 group-hover="bg-rose/10">
               <div i-ri:bell-line />