feat: connected replies in home (#572)

components/common/CommonPaginator.vue

@@ -4,18 +4,21 @@ import { DynamicScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import type { Paginator, WsEvents } from 'masto'
 
-const { paginator, stream, keyProp = 'id', virtualScroller = false, eventType = 'update' } = defineProps<{
+const { paginator, stream, keyProp = 'id', virtualScroller = false, eventType = 'update', preprocess } = defineProps<{
   paginator: Paginator<any, any[]>
   keyProp?: string
   virtualScroller?: boolean
   stream?: WsEvents
   eventType?: 'notification' | 'update'
+  preprocess?: (items: any[]) => any[]
 }>()
 
 defineSlots<{
   default: {
     item: any
     active?: boolean
+    older?: any
+    newer?: any
   }
   updater: {
     number: number
@@ -24,7 +27,7 @@ defineSlots<{
   loading: {}
 }>()
 
-const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream, eventType)
+const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream, eventType, preprocess)
 </script>
 
 <template>
@@ -44,9 +47,11 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
       </template>
       <template v-else>
         <slot
-          v-for="item of items"
+          v-for="item, i of items"
           :key="item[keyProp]"
           :item="item"
+          :older="items[i + 1]"
+          :newer="items[i - 1]"
         />
       </template>
     </slot>

components/timeline/TimelineHome.vue

@@ -1,12 +1,29 @@
 <script setup lang="ts">
+import type { Status } from 'masto'
 const paginator = useMasto().timelines.iterateHome()
 const stream = await useMasto().stream.streamUser()
 onBeforeUnmount(() => stream.disconnect())
+
+const maxDistance = 10
+function preprocess(items: Status[]) {
+  const newItems = [...items]
+  // TODO: Basic reordering, we should get something more efficient and robust
+  for (let i = items.length - 1; i > 0; i--) {
+    for (let k = 1; k <= maxDistance && i - k >= 0; k++) {
+      if (newItems[i - k].inReplyToId === newItems[i].id) {
+        const item = newItems.splice(i, 1)[0]
+        newItems.splice(i - k, 0, item)
+        k = 1
+      }
+    }
+  }
+  return newItems
+}
 </script>
 
 <template>
   <div>
     <PublishWidget draft-key="home" border="b base" />
-    <TimelinePaginator v-bind="{ paginator, stream }" context="home" />
+    <TimelinePaginator v-bind="{ paginator, stream, preprocess }" context="home" />
   </div>
 </template>

components/timeline/TimelinePaginator.vue

@@ -8,26 +8,37 @@ const { paginator, stream } = defineProps<{
   paginator: Paginator<any, Status[]>
   stream?: WsEvents
   context?: FilterContext
+  preprocess?: (items: any[]) => any[]
 }>()
 
 const virtualScroller = $(computedEager(() => useFeatureFlags().experimentalVirtualScroll))
 </script>
 
 <template>
-  <CommonPaginator v-bind="{ paginator, stream }" :virtual-scroller="virtualScroller">
+  <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) }}
       </button>
     </template>
-    <template #default="{ item, active }">
+    <template #default="{ item, older, newer, active }">
       <template v-if="virtualScroller">
         <DynamicScrollerItem :item="item" :active="active" tag="article">
-          <StatusCard :status="item" border="b base" :context="context" />
+          <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) }"
+          />
         </DynamicScrollerItem>
       </template>
       <template v-else>
-        <StatusCard :status="item" border="b base" :context="context" />
+        <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) }"
+        />
       </template>
     </template>
     <template #loading>

composables/paginator.ts

@@ -2,7 +2,12 @@ import type { Paginator, WsEvents } from 'masto'
 import { useDeactivated } from './lifecycle'
 import type { PaginatorState } from '~/types'
 
-export function usePaginator<T>(paginator: Paginator<any, T[]>, stream?: WsEvents, eventType: 'notification' | 'update' = 'update') {
+export function usePaginator<T>(
+  paginator: Paginator<any, T[]>,
+  stream?: WsEvents,
+  eventType: 'notification' | 'update' = 'update',
+  preprocess: (items: T[]) => T[] = (items: T[]) => items,
+) {
   const state = ref<PaginatorState>(isMastoInitialised.value ? 'idle' : 'loading')
   const items = ref<T[]>([])
   const nextItems = ref<T[]>([])
@@ -52,7 +57,7 @@ export function usePaginator<T>(paginator: Paginator<any, T[]>, stream?: WsEvent
       const result = await paginator.next()
 
       if (result.value?.length) {
-        nextItems.value = result.value
+        nextItems.value = preprocess(result.value) as any
         items.value.push(...nextItems.value)
         state.value = 'idle'
       }