feat: global relationships batching (#24)

components/account/AccountCard.vue

@@ -1,25 +1,21 @@
 <script setup lang="ts">
 import type { Account } from 'masto'
 
-const { account, following } = defineProps<{
+const { account } = defineProps<{
   account: Account
-  following?: boolean
 }>()
 
 const masto = await useMasto()
 
-let isFollowing = $ref<boolean | undefined>(following)
-watch($$(following), () => {
-  isFollowing = following
-})
+const relationship = $(useRelationship(account))
 
 function unfollow() {
   masto.accounts.unfollow(account.id)
-  isFollowing = false
+  relationship!.following = false
 }
 function follow() {
   masto.accounts.follow(account.id)
-  isFollowing = true
+  relationship!.following = true
 }
 </script>
 
@@ -27,8 +23,8 @@ function follow() {
   <div flex justify-between>
     <AccountInfo :account="account" p3 />
     <div h-full p5>
-      <div v-if="isFollowing === true" color-purple hover:color-gray hover:cursor-pointer i-ri:user-unfollow-fill @click="unfollow" />
-      <div v-else-if="isFollowing === false" color-gray hover:color-purple hover:cursor-pointer i-ri:user-follow-fill @click="follow" />
+      <div v-if="relationship?.following === true" color-purple hover:color-gray hover:cursor-pointer i-ri:user-unfollow-fill @click="unfollow" />
+      <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>