feat: show relationship badge and remove hover-only label on follow button (elk-zone#2397)

Author: shuuji3

app/components/account/AccountFollowButton.vue

@@ -95,15 +95,15 @@ const buttonStyle = computed(() => {
         <span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
       </template>
       <template v-else-if="relationship ? relationship.following : context === 'following'">
-        <span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
+        <span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.unfollow') : $t('account.following') }}</span>
         <span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
       </template>
       <template v-else-if="relationship?.requested">
         <span elk-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
         <span hidden elk-group-hover="inline">{{ $t('account.withdraw_follow_request') }}</span>
       </template>
       <template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
-        <span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
+        <span elk-group-hover="hidden">{{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}</span>
         <span hidden elk-group-hover="inline">{{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}</span>
       </template>
       <template v-else>

app/components/account/AccountHeader.vue

@@ -191,6 +191,7 @@ async function copyAccountName() {
             <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
             <AccountLockIndicator v-if="account.locked" show-label />
             <AccountBotIndicator v-if="account.bot" show-label />
+            <AccountRelationshipIndicator v-if="relationship" :relationship="relationship" />
           </div>
 
           <div flex items-center gap-1>

app/components/account/AccountRelationshipIndicator.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+defineProps<{
+  relationship: mastodon.v1.Relationship
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <span
+    v-if="relationship.followedBy"
+    border border-base rounded-md px-2 text-secondary-light
+  >
+    {{ relationship.following ? t('account.mutuals') : t('account.follows_you') }}
+  </span>
+</template>