fix: rework tip for unavailable posts

refactor #767

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>

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>

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>

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>

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>