fix: rework tip for unavailable following/followers (#1110)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

components/account/AccountPaginator.vue

@@ -1,10 +1,19 @@
 <script setup lang="ts">
 import type { Paginator, mastodon } from 'masto'
 
-const { paginator } = defineProps<{
+const { paginator, account, context } = defineProps<{
   paginator: Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams>
+  context?: 'following' | 'followers'
+  account?: mastodon.v1.Account
   relationshipContext?: 'followedBy' | 'following'
 }>()
+
+const fallbackContext = $computed(() => {
+  return ['following', 'followers'].includes(context!)
+})
+const showOriginSite = $computed(() =>
+  account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
+)
 </script>
 
 <template>
@@ -17,5 +26,18 @@ const { paginator } = defineProps<{
         border="b base" py2 px4
       />
     </template>
+    <template v-if="fallbackContext && showOriginSite" #done>
+      <div p5 text-secondary text-center flex flex-col items-center gap1>
+        <span italic>{{ $t(`account.view_other_${context}`) }}</span>
+        <NuxtLink
+          :href="account!.url" target="_blank" external
+          flex="~ gap-1" items-center text-primary
+          hover="underline text-primary-active"
+        >
+          <div i-ri:external-link-fill />
+          {{ $t('menu.open_in_original_site') }}
+        </NuxtLink>
+      </div>
+    </template>
   </CommonPaginator>
 </template>

locales/en-US.json

@@ -35,7 +35,9 @@
     "profile_unavailable": "Profile unavailable",
     "unblock": "Unblock",
     "unfollow": "Unfollow",
-    "unmute": "Unmute"
+    "unmute": "Unmute",
+    "view_other_followers": "Followers from other instances may not be displayed.",
+    "view_other_following": "Following from other instances may not be displayed."
   },
   "action": {
     "apply": "Apply",

locales/zh-CN.json

@@ -35,7 +35,9 @@
     "profile_unavailable": "个人资料不可见",
     "unblock": "取消拉黑",
     "unfollow": "取消关注",
-    "unmute": "取消屏蔽"
+    "unmute": "取消屏蔽",
+    "view_other_followers": "其他站点上的关注者可能不会在这里显示。",
+    "view_other_following": "其他站点上正在关注的人可能不会在这里显示。"
   },
   "action": {
     "apply": "应用",

locales/zh-TW.json

@@ -35,7 +35,9 @@
     "profile_unavailable": "個人資料不可見",
     "unblock": "取消黑名單",
     "unfollow": "取消關注",
-    "unmute": "取消靜音"
+    "unmute": "取消靜音",
+    "view_other_followers": "其他站點上的關注者可能不會在這裡顯示。",
+    "view_other_following": "其他站點上正在關注的人可能不會在這裡顯示。"
   },
   "action": {
     "apply": "套用",

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

@@ -19,6 +19,6 @@ if (account) {
 
 <template>
   <template v-if="paginator">
-    <AccountPaginator :paginator="paginator" :relationship-context="isSelf ? 'followedBy' : undefined" />
+    <AccountPaginator :paginator="paginator" :relationship-context="isSelf ? 'followedBy' : undefined" context="followers" :account="account" />
   </template>
 </template>

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

@@ -19,6 +19,6 @@ if (account) {
 
 <template>
   <template v-if="paginator">
-    <AccountPaginator :paginator="paginator" :relationship-context="isSelf ? 'following' : undefined" />
+    <AccountPaginator :paginator="paginator" :relationship-context="isSelf ? 'following' : undefined" context="following" :account="account" />
   </template>
 </template>