From 79e4841f8750eb12a3051156848446767ba3538b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Sat, 7 Jan 2023 02:29:44 +0800
Subject: [PATCH] fix: rework tip for unavailable posts

refactor #767
---
 components/common/CommonPaginator.vue         | 25 ++++---------------
 components/timeline/TimelinePaginator.vue     | 24 +++++++++++++++---
 pages/[[server]]/@[account]/index/index.vue   |  2 +-
 pages/[[server]]/@[account]/index/media.vue   |  2 +-
 .../@[account]/index/with_replies.vue         |  2 +-
 5 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/components/common/CommonPaginator.vue b/components/common/CommonPaginator.vue
index abb0f9f4..c1ef6893 100644
--- a/components/common/CommonPaginator.vue
+++ b/components/common/CommonPaginator.vue
@@ -11,7 +11,6 @@ const {
   virtualScroller = false,
   eventType = 'update',
   preprocess,
-  isAccountTimeline,
 } = defineProps<{
   paginator: Paginator<any, any[]>
   keyProp?: string
@@ -19,7 +18,6 @@ const {
   stream?: Promise<WsEvents>
   eventType?: 'notification' | 'update'
   preprocess?: (items: any[]) => any[]
-  isAccountTimeline?: boolean
 }>()
 
 defineSlots<{
@@ -34,18 +32,9 @@ defineSlots<{
     update: () => void
   }
   loading: {}
+  done: {}
 }>()
 
-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>
 
@@ -84,15 +73,11 @@ 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 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>
+    <slot v-else-if="state === 'done'" name="done">
+      <div p5 text-secondary italic text-center>
         {{ $t('common.end_of_list') }}
-      </template>
-    </div>
+      </div>
+    </slot>
     <div v-else-if="state === 'error'" p5 text-secondary>
       {{ $t('common.error') }}: {{ error }}
     </div>
diff --git a/components/timeline/TimelinePaginator.vue b/components/timeline/TimelinePaginator.vue
index 23a0454c..5570fc33 100644
--- a/components/timeline/TimelinePaginator.vue
+++ b/components/timeline/TimelinePaginator.vue
@@ -2,21 +2,26 @@
 // @ts-expect-error missing types
 import { DynamicScrollerItem } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-import type { FilterContext, Paginator, Status, WsEvents } from 'masto'
+import type { Account, FilterContext, Paginator, Status, WsEvents } from 'masto'
 
-const { paginator, stream } = defineProps<{
+const { paginator, stream, account } = defineProps<{
   paginator: Paginator<any, Status[]>
   stream?: Promise<WsEvents>
   context?: FilterContext
+  account?: Account
   preprocess?: (items: any[]) => any[]
 }>()
 
 const { formatNumber } = useHumanReadableNumber()
 const virtualScroller = $(useFeatureFlag('experimentalVirtualScroll'))
+
+const showOriginSite = $computed(() =>
+  account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
+)
 </script>
 
 <template>
-  <CommonPaginator v-bind="{ paginator, stream, preprocess }" :virtual-scroller="virtualScroller" :is-account-timeline="context === 'account'">
+  <CommonPaginator v-bind="{ paginator, stream, preprocess }" :virtual-scroller="virtualScroller">
     <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) } }) }}
@@ -32,5 +37,18 @@ const virtualScroller = $(useFeatureFlag('experimentalVirtualScroll'))
         <StatusCard :status="item" :context="context" :older="older" :newer="newer" />
       </template>
     </template>
+    <template v-if="context === 'account' && showOriginSite" #done>
+      <div p5 text-secondary text-center flex flex-col items-center gap1>
+        <span italic>{{ $t('timeline.view_older_posts') }}</span>
+        <a
+          :href="account!.url" target="_blank"
+          flex="~ gap-1" items-center text-primary
+          hover="underline text-primary-active"
+        >
+          <div i-ri:external-link-fill />
+          {{ $t('menu.open_in_original_site') }}
+        </a>
+      </div>
+    </template>
   </CommonPaginator>
 </template>
diff --git a/pages/[[server]]/@[account]/index/index.vue b/pages/[[server]]/@[account]/index/index.vue
index b477af42..a2469b20 100644
--- a/pages/[[server]]/@[account]/index/index.vue
+++ b/pages/[[server]]/@[account]/index/index.vue
@@ -23,6 +23,6 @@ if (account) {
 <template>
   <div>
     <AccountTabs />
-    <TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" />
+    <TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" :account="account" />
   </div>
 </template>
diff --git a/pages/[[server]]/@[account]/index/media.vue b/pages/[[server]]/@[account]/index/media.vue
index 4dce4f66..1ed179b1 100644
--- a/pages/[[server]]/@[account]/index/media.vue
+++ b/pages/[[server]]/@[account]/index/media.vue
@@ -21,6 +21,6 @@ if (account) {
 <template>
   <div>
     <AccountTabs />
-    <TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" />
+    <TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" :account="account" />
   </div>
 </template>
diff --git a/pages/[[server]]/@[account]/index/with_replies.vue b/pages/[[server]]/@[account]/index/with_replies.vue
index b4f48026..5b3569d5 100644
--- a/pages/[[server]]/@[account]/index/with_replies.vue
+++ b/pages/[[server]]/@[account]/index/with_replies.vue
@@ -21,6 +21,6 @@ if (account) {
 <template>
   <div>
     <AccountTabs />
-    <TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" />
+    <TimelinePaginator :paginator="paginator" :preprocess="reorderedTimeline" context="account" :account="account" />
   </div>
 </template>