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">
-    <template v-for="account of accounts" :key="account.id">
-      <AccountCard :account="account" border="t border" pt-4 />
+  <CommonPaginator
+    :paginator="paginator"
+    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<{
-  state: PaginatorState
+const { paginator, keyProp = 'id' } = defineProps<{
+  paginator: Paginator<any, any[]>
+  keyProp?: string
 }>()
+
+const { items, state, endAnchor, error } = usePaginator(paginator)
 </script>
 
 <template>
-  <slot />
-  <div v-if="state === 'loading'" p5 color-gray-5>
-    Loading...
-  </div>
-  <div v-if="state === 'done'" p5 color-gray>
-    End of list
+  <div>
+    <slot
+      v-for="item of items"
+      :key="item[keyProp]"
+      :item="item"
+    />
+    <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">
-    <template v-for="notification of notifications" :key="notification.id">
-      <NotificationCard :notification="notification" border="t border" pt-4 />
+  <CommonPaginator
+    :paginator="paginator"
+    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">
-    <template v-for="status of statuses" :key="status.id">
-      <StatusCard :status="status" border="t border" pt-4 />
+  <CommonPaginator
+    :paginator="paginator"
+    border="t border"
+  >
+    <template #default="{ item }">
+      <StatusCard
+        :status="item"
+        border="b border" py-3
+      />
     </template>
-    <div ref="endAnchor" />
   </CommonPaginator>
 </template>