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)
+  if (relationship ? relationship.following : context === 'following')
-    return `text-base ${relationship.followedBy ? 'border-strong' : 'border-base'}`
+    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">
+    <template v-else-if="relationship ? relationship.following : context === 'following'">
-      <span group-hover="hidden">{{ relationship.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
+      <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
       />

composables/users.ts

@@ -1,7 +1,7 @@
 import { login as loginMasto } from 'masto'
 import type { WsEvents, mastodon } from 'masto'
 import type { Ref } from 'vue'
-import type { RemovableRef } from '@vueuse/core'
+import type { MaybeComputedRef, RemovableRef } from '@vueuse/core'
 import type { ElkMasto, UserLogin } from '~/types'
 import {
   DEFAULT_POST_CHARS_LIMIT,
@@ -96,6 +96,8 @@ export const currentUserHandle = computed(() => currentUser.value?.account.id
 )
 
 export const useUsers = () => users
+export const useSelfAccount = (user: MaybeComputedRef<mastodon.v1.Account | undefined>) =>
+  computed(() => currentUser.value && resolveUnref(user)?.id === currentUser.value.account.id)
 
 export const characterLimit = computed(() => currentInstance.value?.configuration.statuses.maxCharacters ?? DEFAULT_POST_CHARS_LIMIT)
 

pages/[[server]]/@[account]/index/followers.vue

@@ -8,6 +8,8 @@ definePageMeta({ name: 'account-followers' })
 const account = await fetchAccountByHandle(handle)
 const paginator = account ? useMasto().v1.accounts.listFollowers(account.id, {}) : null
 
+const isSelf = useSelfAccount(account)
+
 if (account) {
   useHeadFixed({
     title: () => `${t('account.followers')} | ${getDisplayName(account)} (@${account})`,
@@ -17,6 +19,6 @@ if (account) {
 
 <template>
   <template v-if="paginator">
-    <AccountPaginator :paginator="paginator" />
+    <AccountPaginator :paginator="paginator" :relationship-context="isSelf ? 'followedBy' : undefined" />
   </template>
 </template>

pages/[[server]]/@[account]/index/following.vue

@@ -8,6 +8,8 @@ definePageMeta({ name: 'account-following' })
 const account = await fetchAccountByHandle(handle)
 const paginator = account ? useMasto().v1.accounts.listFollowing(account.id, {}) : null
 
+const isSelf = useSelfAccount(account)
+
 if (account) {
   useHeadFixed({
     title: () => `${t('account.following')} | ${getDisplayName(account)} (@${account.acct})`,
@@ -17,6 +19,6 @@ if (account) {
 
 <template>
   <template v-if="paginator">
-    <AccountPaginator :paginator="paginator" />
+    <AccountPaginator :paginator="paginator" :relationship-context="isSelf ? 'following' : undefined" />
   </template>
 </template>