From 9d5dc1bc3d41db21e12895b3d63b0a135662405e Mon Sep 17 00:00:00 2001
From: Ryan Cao <70191398+ryanccn@users.noreply.github.com>
Date: Wed, 4 Jan 2023 21:21:03 +0800
Subject: [PATCH] fix: link to original instance for older unavailable posts
 (#767)

---
 components/common/CommonPaginator.vue     | 24 ++++++++++++++++++++---
 components/timeline/TimelinePaginator.vue |  2 +-
 locales/en-US.json                        |  3 ++-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/components/common/CommonPaginator.vue b/components/common/CommonPaginator.vue
index ec86a5fa..abb0f9f4 100644
--- a/components/common/CommonPaginator.vue
+++ b/components/common/CommonPaginator.vue
@@ -2,7 +2,7 @@
 // @ts-expect-error missing types
 import { DynamicScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-import type { Paginator, WsEvents } from 'masto'
+import type { Account, Paginator, WsEvents } from 'masto'
 
 const {
   paginator,
@@ -11,6 +11,7 @@ const {
   virtualScroller = false,
   eventType = 'update',
   preprocess,
+  isAccountTimeline,
 } = defineProps<{
   paginator: Paginator<any, any[]>
   keyProp?: string
@@ -18,6 +19,7 @@ const {
   stream?: Promise<WsEvents>
   eventType?: 'notification' | 'update'
   preprocess?: (items: any[]) => any[]
+  isAccountTimeline?: boolean
 }>()
 
 defineSlots<{
@@ -34,6 +36,16 @@ defineSlots<{
   loading: {}
 }>()
 
+let account: Account | null = null
+
+const { params } = useRoute()
+
+if (isAccountTimeline) {
+  const handle = $(computedEager(() => params.account as string))
+
+  account = await fetchAccountByHandle(handle)
+}
+
 const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream, eventType, preprocess)
 </script>
 
@@ -72,8 +84,14 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
     <slot v-if="state === 'loading'" name="loading">
       <TimelineSkeleton />
     </slot>
-    <div v-else-if="state === 'done'" p5 text-secondary italic text-center>
-      {{ $t('common.end_of_list') }}
+    <div v-else-if="state === 'done'" p5 text-secondary italic text-center flex flex-col items-center gap1>
+      <template v-if="isAccountTimeline">
+        <span>{{ $t('timeline.view_older_posts') }}</span>
+        <a :href="account!.url" not-italic text-primary hover="underline text-primary-active">{{ $t('menu.open_in_original_site') }}</a>
+      </template>
+      <template v-else>
+        {{ $t('common.end_of_list') }}
+      </template>
     </div>
     <div v-else-if="state === 'error'" p5 text-secondary>
       {{ $t('common.error') }}: {{ error }}
diff --git a/components/timeline/TimelinePaginator.vue b/components/timeline/TimelinePaginator.vue
index b651ff80..89fe3035 100644
--- a/components/timeline/TimelinePaginator.vue
+++ b/components/timeline/TimelinePaginator.vue
@@ -16,7 +16,7 @@ const virtualScroller = $(computedEager(() => useFeatureFlags().experimentalVirt
 </script>
 
 <template>
-  <CommonPaginator v-bind="{ paginator, stream, preprocess }" :virtual-scroller="virtualScroller">
+  <CommonPaginator v-bind="{ paginator, stream, preprocess }" :virtual-scroller="virtualScroller" :is-account-timeline="context === 'account'">
     <template #updater="{ number, update }">
       <button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update">
         {{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
diff --git a/locales/en-US.json b/locales/en-US.json
index 4c7eb38d..a6b15992 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -357,7 +357,8 @@
     "year_past": "0 years ago|last year|{n} years ago"
   },
   "timeline": {
-    "show_new_items": "Show {v} new items|Show {v} new item|Show {v} new items"
+    "show_new_items": "Show {v} new items|Show {v} new item|Show {v} new items",
+    "view_older_posts": "Older posts from other instances may not be displayed."
   },
   "title": {
     "federated_timeline": "Federated Timeline",