feat(account): predict relationship from context

components/account/AccountCard.vue

@@ -4,6 +4,7 @@ import type { mastodon } from 'masto'
 const { account } = defineProps<{
   account: mastodon.v1.Account
   hoverCard?: boolean
+  relationshipContext?: 'followedBy' | 'following'
 }>()
 
 cacheAccount(account)
@@ -19,7 +20,7 @@ cacheAccount(account)
       :to="getAccountRoute(account)"
     />
     <div h-full p1 shrink-0>
-      <AccountFollowButton :account="account" />
+      <AccountFollowButton :account="account" :context="relationshipContext" />
     </div>
   </div>
 </template>

components/account/AccountFollowButton.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { account, command, ...props } = defineProps<{
+const { account, command, context, ...props } = defineProps<{
   account: mastodon.v1.Account
   relationship?: mastodon.v1.Relationship
+  context?: 'followedBy' | 'following'
   command?: boolean
 }>()
 
@@ -67,8 +68,8 @@ const buttonStyle = $computed(() => {
     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'}`
+  if (relationship ? relationship.following : context === 'following')
+    return `text-base ${relationship?.followedBy ? 'border-strong' : 'border-base'}`
 
   // If not following, use a button style
   return 'text-inverted bg-primary border-primary'
@@ -94,14 +95,14 @@ const buttonStyle = $computed(() => {
       <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>
+    <template v-else-if="relationship ? relationship.following : context === 'following'">
+      <span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
       <span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
     </template>
     <template v-else-if="relationship?.requested">
       <span>{{ $t('account.follow_requested') }}</span>
     </template>
-    <template v-else-if="relationship?.followedBy">
+    <template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
       <span group-hover="hidden">{{ $t('account.follows_you') }}</span>
       <span hidden group-hover="inline">{{ $t('account.follow_back') }}</span>
     </template>

components/account/AccountPaginator.vue

@@ -3,6 +3,7 @@ import type { Paginator, mastodon } from 'masto'
 
 const { paginator } = defineProps<{
   paginator: Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams>
+  relationshipContext?: 'followedBy' | 'following'
 }>()
 </script>
 
@@ -11,6 +12,7 @@ const { paginator } = defineProps<{
     <template #default="{ item }">
       <AccountCard
         :account="item"
+        :relationship-context="relationshipContext"
         hover-card
         border="b base" py2 px4
       />