feat: stream tags, home, and public timelines (#190)

components/common/CommonPaginator.vue

@@ -2,12 +2,13 @@
 // @ts-expect-error missing types
 import { DynamicScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
-import type { Paginator } from 'masto'
+import type { Paginator, WsEvents } from 'masto'
 
-const { paginator, keyProp = 'id', virtualScroller = false } = defineProps<{
+const { paginator, stream, keyProp = 'id', virtualScroller = false } = defineProps<{
   paginator: Paginator<any, any[]>
   keyProp?: string
   virtualScroller: boolean
+  stream?: WsEvents
 }>()
 
 defineSlots<{
@@ -15,14 +16,19 @@ defineSlots<{
     item: any
     active?: boolean
   }
+  updater: {
+    number: number
+    update: () => void
+  }
   loading: {}
 }>()
 
-const { items, state, endAnchor, error } = usePaginator(paginator)
+const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, stream)
 </script>
 
 <template>
   <div>
+    <slot v-if="prevItems.length" name="updater" v-bind="{ number: prevItems.length, update }" />
     <template v-if="virtualScroller">
       <DynamicScroller
         v-slot="{ item, active }"

components/timeline/TimelinePaginator.vue

@@ -1,15 +1,21 @@
 <script setup lang="ts">
 // @ts-expect-error missing types
 import { DynamicScrollerItem } from 'vue-virtual-scroller'
-import type { Paginator, Status } from 'masto'
+import type { Paginator, Status, WsEvents } from 'masto'
 
-const { paginator } = defineProps<{
+const { paginator, stream } = defineProps<{
   paginator: Paginator<any, Status[]>
+  stream?: WsEvents
 }>()
 </script>
 
 <template>
-  <CommonPaginator :paginator="paginator" virtual-scroller>
+  <CommonPaginator v-bind="{ paginator, stream }" virtual-scroller>
+    <template #updater="{ number, update }">
+      <button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="update">
+        Show {{ number }} new items
+      </button>
+    </template>
     <template #default="{ item, active }">
       <DynamicScrollerItem :item="item" :active="active" tag="article">
         <StatusCard