fix: connected replies for virtual scrolling

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>

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>

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>

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>