feat: following and followers routes (#4)

components/account/AccountCard.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { Account } from 'masto'
+
+defineProps<{
+  account: Account
+}>()
+</script>
+
+<template>
+  <div flex justify-between>
+    <AccountInfo :account="account" p3 />
+    <div h-full p5>
+      <!-- TODO is following logic and actions -->
+      <div v-if="false" color-purple hover:color-gray hover:cursor-pointer i-ri:user-unfollow-fill />
+      <div v-else color-gray hover:color-purple hover:cursor-pointer i-ri:user-follow-fill />
+    </div>
+  </div>
+</template>

components/account/AccountHeader.vue

@@ -71,9 +71,15 @@ const createdAt = $computed(() => {
         </div>
       </div>
       <div flex gap-5>
-        <div><span font-bold>{{ account.statusesCount }}</span> Posts</div>
-        <div><span font-bold>{{ account.followingCount }}</span> Following</div>
-        <div><span font-bold>{{ account.followersCount }}</span> Followers</div>
+        <NuxtLink :to="`/@${account.acct}/`">
+          <span font-bold>{{ account.statusesCount }}</span> Posts
+        </NuxtLink>
+        <NuxtLink :to="`/@${account.acct}/following`">
+          <span font-bold>{{ account.followingCount }}</span> Following
+        </NuxtLink>
+        <NuxtLink :to="`/@${account.acct}/followers`">
+          <span font-bold>{{ account.followersCount }}</span> Followers
+        </NuxtLink>
       </div>
     </div>
   </div>

components/account/AccountPaginator.client.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Account, Paginator } from 'masto'
+
+const { paginator } = defineProps<{
+  paginator: Paginator<any, Account[]>
+}>()
+
+const { items: accounts, isLoading, isDone, endAnchor } = usePaginator(paginator)
+</script>
+
+<template>
+  <template v-for="account of accounts" :key="account.id">
+    <AccountCard :account="account" border="t border" pt-4 />
+  </template>
+  <div ref="endAnchor" />
+  <div v-if="isLoading">
+    Loading...
+  </div>
+  <div v-if="isDone">
+    End of list
+  </div>
+</template>