fix: link to original instance for older unavailable posts (#767)

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>
+    <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 }}

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) } }) }}

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",