feat: following and followers routes (#4)

components/timeline/TimelinePaginator.client.vue

@@ -5,42 +5,7 @@ const { paginator } = defineProps<{
   paginator: Paginator<any, Status[]>
 }>()
 
-let isLoading = $ref(false)
-let isDone = $ref(false)
-const statuses = $ref<Status[]>([])
-
-const endAnchor = ref<HTMLDivElement>()
-const bound = reactive(useElementBounding(endAnchor))
-const isInScreen = $computed(() => bound.top < window.innerHeight * 2)
-
-async function loadNext() {
-  if (isLoading || isDone)
-    return
-
-  // console.log('REQUEST')
-  isLoading = true
-  const result = await paginator.next()
-  if (result.done)
-    isDone = true
-  if (result.value?.length)
-    statuses.push(...result.value)
-  isLoading = false
-  await nextTick()
-  bound.update()
-}
-
-useIntervalFn(() => {
-  bound.update()
-}, 1000)
-
-watch(
-  () => isInScreen,
-  () => {
-    if (isInScreen && !isLoading)
-      loadNext()
-  },
-  { immediate: true },
-)
+const { items: statuses, isLoading, isDone, endAnchor } = usePaginator(paginator)
 </script>
 
 <template>