refactor: paginator

components/account/AccountInfo.vue

@@ -10,7 +10,7 @@ defineProps<{
   <div flex gap-2>
     <div p1>
       <NuxtLink :to="`/@${account.acct}`">
-        <img :src="account.avatar" rounded w-10 h-10>
+        <img :src="account.avatar" rounded w-10 h-10 bg-gray:10>
       </NuxtLink>
     </div>
     <NuxtLink flex flex-col :to="`/@${account.acct}`">

components/account/AccountPaginator.client.vue

@@ -4,15 +4,18 @@ import type { Account, Paginator } from 'masto'
 const { paginator } = defineProps<{
   paginator: Paginator<any, Account[]>
 }>()
-
-const { items: accounts, state, endAnchor } = usePaginator(paginator)
 </script>
 
 <template>
-  <CommonPaginator :state="state">
+  <CommonPaginator
-    <template v-for="account of accounts" :key="account.id">
+    :paginator="paginator"
-      <AccountCard :account="account" border="t border" pt-4 />
+    border="t border"
+  >
+    <template #default="{ item }">
+      <AccountCard
+        :account="item"
+        border="b border" py-1
+      />
     </template>
-    <div ref="endAnchor" />
   </CommonPaginator>
 </template>

components/common/CommonPaginator.vue

@@ -1,17 +1,30 @@
 <script setup lang="ts">
-import type { PaginatorState } from '~/types'
+import type { Paginator } from 'masto'
 
-defineProps<{
+const { paginator, keyProp = 'id' } = defineProps<{
-  state: PaginatorState
+  paginator: Paginator<any, any[]>
+  keyProp?: string
 }>()
+
+const { items, state, endAnchor, error } = usePaginator(paginator)
 </script>
 
 <template>
-  <slot />
+  <div>
-  <div v-if="state === 'loading'" p5 color-gray-5>
+    <slot
-    Loading...
+      v-for="item of items"
-  </div>
+      :key="item[keyProp]"
-  <div v-if="state === 'done'" p5 color-gray>
+      :item="item"
-    End of list
+    />
+    <div ref="endAnchor" />
+    <div v-if="state === 'loading'" p5 color-gray-5>
+      Loading...
+    </div>
+    <div v-else-if="state === 'done'" p5 color-gray>
+      End of list
+    </div>
+    <div v-else-if="state === 'error'" p5 color-gray>
+      ERROR: {{ error }}
+    </div>
   </div>
 </template>

components/nav/NavSide.vue

@@ -4,43 +4,37 @@
 
 <template>
   <div px6 py2 flex="~ col gap6" text-lg>
-    <NuxtLink flex gap2 items-center to="/home">
+    <NuxtLink flex gap2 items-center to="/home" active-class="text-primary">
       <div i-ri:home-5-line />
       <span>Home</span>
     </NuxtLink>
-    <NuxtLink flex gap2 items-center to="/notifications">
+    <NuxtLink flex gap2 items-center to="/notifications" active-class="text-primary">
       <div i-ri:notification-4-line />
       <span>Notifications</span>
     </NuxtLink>
-    <NuxtLink flex gap2 items-center>
+    <NuxtLink flex gap2 items-center active-class="text-primary">
       <div i-ri:hashtag />
       <span>Explore</span>
     </NuxtLink>
-    <NuxtLink flex gap2 items-center to="/public/local">
+    <NuxtLink flex gap2 items-center to="/public/local" active-class="text-primary">
       <div i-ri:group-2-line />
       <span>Local</span>
     </NuxtLink>
-    <NuxtLink flex gap2 items-center to="/public">
+    <NuxtLink flex gap2 items-center to="/public" active-class="text-primary">
       <div i-ri:earth-line />
       <span>Federated</span>
     </NuxtLink>
-    <NuxtLink flex gap2 items-center>
+    <NuxtLink flex gap2 items-center active-class="text-primary">
       <div i-ri:at-line />
-      <span>Direct Messages</span>
+      <span>Messages</span>
     </NuxtLink>
-    <NuxtLink flex gap2 items-center to="/favourites">
+    <NuxtLink flex gap2 items-center to="/favourites" active-class="text-primary">
       <div i-ri:heart-3-line />
       <span>Favorites</span>
     </NuxtLink>
-    <NuxtLink flex gap2 items-center to="/bookmarks">
+    <NuxtLink flex gap2 items-center to="/bookmarks" active-class="text-primary">
       <div i-ri:bookmark-line />
       <span>Bookmarks</span>
     </NuxtLink>
   </div>
 </template>
-
-<style lang="postcss">
-.router-link-active {
-  --at-apply: color-primary;
-}
-</style>

components/notification/NotificationPaginator.client.vue

@@ -4,15 +4,18 @@ import type { Notification, Paginator } from 'masto'
 const { paginator } = defineProps<{
   paginator: Paginator<any, Notification[]>
 }>()
-
-const { items: notifications, state, endAnchor } = usePaginator(paginator)
 </script>
 
 <template>
-  <CommonPaginator :state="state">
+  <CommonPaginator
-    <template v-for="notification of notifications" :key="notification.id">
+    :paginator="paginator"
-      <NotificationCard :notification="notification" border="t border" pt-4 />
+    border="t border"
+  >
+    <template #default="{ item }">
+      <NotificationCard
+        :notification="item"
+        border="t border" pt-4
+      />
     </template>
-    <div ref="endAnchor" />
   </CommonPaginator>
 </template>

components/timeline/TimelinePaginator.client.vue

@@ -4,15 +4,18 @@ import type { Paginator, Status } from 'masto'
 const { paginator } = defineProps<{
   paginator: Paginator<any, Status[]>
 }>()
-
-const { items: statuses, state, endAnchor } = usePaginator(paginator)
 </script>
 
 <template>
-  <CommonPaginator :state="state">
+  <CommonPaginator
-    <template v-for="status of statuses" :key="status.id">
+    :paginator="paginator"
-      <StatusCard :status="status" border="t border" pt-4 />
+    border="t border"
+  >
+    <template #default="{ item }">
+      <StatusCard
+        :status="item"
+        border="b border" py-3
+      />
     </template>
-    <div ref="endAnchor" />
   </CommonPaginator>
 </template>

composables/paginator.ts

@@ -2,23 +2,34 @@ import type { Paginator } from 'masto'
 import type { PaginatorState } from '~/types'
 
 export function usePaginator<T>(paginator: Paginator<any, T[]>) {
-  let state = $ref('ready' as PaginatorState)
+  const state = ref<PaginatorState>('idle')
-  const items = $ref<T[]>([])
+  const items = ref<T[]>([])
 
   const endAnchor = ref<HTMLDivElement>()
   const bound = reactive(useElementBounding(endAnchor))
   const isInScreen = $computed(() => bound.top < window.innerHeight * 2)
+  const error = ref<unknown | undefined>()
 
   async function loadNext() {
-    if (state === 'loading' || state === 'done')
+    if (state.value !== 'idle')
       return
 
-    state = 'loading'
+    state.value = 'loading'
-    const result = await paginator.next()
+    try {
-    state = result.done ? 'done' : 'ready'
+      const result = await paginator.next()
 
-    if (result.value?.length)
+      if (result.value?.length) {
-      items.push(...result.value)
+        items.value.push(...result.value)
+        state.value = 'idle'
+      }
+      else {
+        state.value = 'done'
+      }
+    }
+    catch (e) {
+      error.value = e
+      state.value = 'error'
+    }
 
     await nextTick()
     bound.update()
@@ -31,11 +42,16 @@ export function usePaginator<T>(paginator: Paginator<any, T[]>) {
   watch(
     () => isInScreen,
     () => {
-      if (isInScreen && state !== 'loading')
+      if (isInScreen && state.value === 'idle')
         loadNext()
     },
     { immediate: true },
   )
 
-  return { items, state, endAnchor }
+  return {
+    items,
+    state,
+    error,
+    endAnchor,
+  }
 }

pages/public/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const masto = await useMasto()
-const { data: timelines } = await useAsyncData('timelines-public', () => masto.timelines.fetchPublic().then(r => r.value))
+const paginator = masto.timelines.getPublicIterable()
 </script>
 
 <template>
@@ -12,7 +12,7 @@ const { data: timelines } = await useAsyncData('timelines-public', () => masto.t
       <div color-gray i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
-      <TimelineList :timelines="timelines" />
+      <TimelinePaginator :paginator="paginator" />
     </slot>
   </MainContent>
 </template>

types/index.ts

@@ -16,4 +16,4 @@ export interface UserLogin {
   account?: AccountCredentials
 }
 
-export type PaginatorState = 'ready' | 'loading' | 'done'
+export type PaginatorState = 'idle' | 'loading' | 'done' | 'error'