From 7305a01d5bb1c55dc419d67bab3696eb993b5cd5 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Wed, 28 Dec 2022 00:25:41 +0100
Subject: [PATCH] fix: connected replies for virtual scrolling

---
 components/common/CommonPaginator.vue     | 13 ++++++-------
 components/status/StatusCard.vue          | 17 +++++++++++++----
 components/timeline/TimelinePaginator.vue | 16 +++-------------
 pages/[[server]]/@[account]/[status].vue  |  6 ++----
 4 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/components/common/CommonPaginator.vue b/components/common/CommonPaginator.vue
index 0d96d501..11cd3f9b 100644
--- a/components/common/CommonPaginator.vue
+++ b/components/common/CommonPaginator.vue
@@ -25,8 +25,7 @@ defineSlots<{
     item: any
     active?: boolean
     older?: any
-    newer?: any
-    index?: number
+    newer?: any // newer is undefined when index === 0
   }
   updater: {
     number: number
@@ -53,18 +52,18 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
           <slot
             :item="item"
             :active="active"
-            :index="index"
+            :older="items[index + 1]"
+            :newer="items[index - 1]"
           />
         </DynamicScroller>
       </template>
       <template v-else>
         <slot
-          v-for="item, i of items"
+          v-for="item, index of items"
           :key="item[keyProp]"
           :item="item"
-          :older="items[i + 1]"
-          :newer="items[i - 1]"
-          :index="i"
+          :older="items[index + 1]"
+          :newer="items[index - 1]"
         />
       </template>
     </slot>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 088ed4be..8ea60adb 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -8,8 +8,13 @@ const props = withDefaults(
     context?: FilterContext
     hover?: boolean
     faded?: boolean
-    showReplyTo?: boolean
-    connectReply?: boolean
+
+    // If we know the prev and next status in the timeline, we can simplify the card
+    older?: Status
+    newer?: Status
+    // Manual overrides
+    hasOlder?: boolean
+    hasNewer?: boolean
   }>(),
   { actions: true, showReplyTo: true },
 )
@@ -20,6 +25,10 @@ const status = $computed(() => {
   return props.status
 })
 
+// Use original status, avoid connecting a reblog (review if we should relax this)
+const directReply = $computed(() => props.hasNewer || (!!props.status.inReplyToId && props.status.inReplyToId === props.newer?.id))
+const connectReply = $computed(() => props.hasOlder || props.status.id === props.older?.inReplyToId)
+
 const rebloggedBy = $computed(() => props.status.reblog ? props.status.account : null)
 
 const el = ref<HTMLElement>()
@@ -72,7 +81,7 @@ const isSelf = $computed(() => status.account.id === currentUser.value?.account.
     relative flex flex-col gap-1 px-4 pt-1
     class="pb-1.5"
     transition-100
-    :class="{ 'hover:bg-active': hover }"
+    :class="{ 'hover:bg-active': hover, 'border-t border-base': newer && !directReply }"
     tabindex="0"
     focus:outline-none focus-visible:ring="2 primary"
     :lang="status.language ?? undefined"
@@ -88,7 +97,7 @@ const isSelf = $computed(() => status.account.id === currentUser.value?.account.
         </div>
         <div v-else />
       </slot>
-      <StatusReplyingTo v-if="showReplyTo" :status="status" :class="faded ? 'text-secondary-light' : ''" py1 />
+      <StatusReplyingTo v-if="!directReply" :status="status" :class="faded ? 'text-secondary-light' : ''" py1 />
     </div>
     <div flex gap-3 :class="{ 'text-secondary': faded }">
       <div relative>
diff --git a/components/timeline/TimelinePaginator.vue b/components/timeline/TimelinePaginator.vue
index aba3bdf8..a6be7618 100644
--- a/components/timeline/TimelinePaginator.vue
+++ b/components/timeline/TimelinePaginator.vue
@@ -21,24 +21,14 @@ const virtualScroller = $(computedEager(() => useFeatureFlags().experimentalVirt
         {{ $t('timeline.show_new_items', number) }}
       </button>
     </template>
-    <template #default="{ item, older, newer, active, index }">
+    <template #default="{ item, older, newer, active }">
       <template v-if="virtualScroller">
         <DynamicScrollerItem :item="item" :active="active" tag="article">
-          <StatusCard
-            :status="item" :context="context"
-            :connect-reply="item.id === older?.inReplyToId"
-            :show-reply-to="!(item.inReplyToId && item.inReplyToId === newer?.id)"
-            :class="{ 'border-t border-base': index !== 0 && !(item.inReplyToId && item.inReplyToId === newer?.id) }"
-          />
+          <StatusCard :status="item" :context="context" :older="older" :newer="newer" />
         </DynamicScrollerItem>
       </template>
       <template v-else>
-        <StatusCard
-          :status="item" :context="context"
-          :connect-reply="item.id === older?.inReplyToId"
-          :show-reply-to="!(item.inReplyToId && item.inReplyToId === newer?.id)"
-          :class="{ 'border-t border-base': !(item.inReplyToId && item.inReplyToId === newer?.id) }"
-        />
+        <StatusCard :status="item" :context="context" :older="older" :newer="newer" />
       </template>
     </template>
     <template #loading>
diff --git a/pages/[[server]]/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue
index a2eb2c36..d883303e 100644
--- a/pages/[[server]]/@[account]/[status].vue
+++ b/pages/[[server]]/@[account]/[status].vue
@@ -63,7 +63,7 @@ onReactivated(() => {
         <template v-for="comment of context?.ancestors" :key="comment.id">
           <StatusCard
             :status="comment" :actions="comment.visibility !== 'direct'" context="account"
-            :show-reply-to="false" :connect-reply="true"
+            :has-older="true" :has-newer="true"
           />
         </template>
 
@@ -86,9 +86,7 @@ onReactivated(() => {
         <template v-for="(comment, di) of context?.descendants" :key="comment.id">
           <StatusCard
             :status="comment" :actions="comment.visibility !== 'direct'" context="account"
-            :connect-reply="comment.id === context?.descendants[di + 1]?.inReplyToId"
-            :show-reply-to="di !== 0 && comment.inReplyToId !== context?.descendants[di - 1]?.id"
-            :class="{ 'border-t border-base': di !== 0 && comment.inReplyToId !== context?.descendants[di - 1]?.id }"
+            :older="context?.descendants[di + 1]" :newer="context?.descendants[di - 1]" :has-newer="di === 0"
           />
         </template>