feat: use masto client

components/AccountInfo.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { Account } from '~/api-client/types'
+import type { Account } from 'masto'
 
-const props = defineProps<{
+defineProps<{
   account: Account
 }>()
 </script>
@@ -9,15 +9,17 @@ const props = defineProps<{
 <template>
   <div flex gap-2>
     <div p1>
-      <img :src="account.avatar" rounded w-10 h-10>
+      <NuxtLink :to="`/@${account.acct}`">
+        <img :src="account.avatar" rounded w-10 h-10>
+      </NuxtLink>
     </div>
-    <div flex flex-col>
+    <NuxtLink flex flex-col :to="`/@${account.acct}`">
       <h4 font-bold>
-        {{ account.display_name }}
+        {{ account.displayName }}
       </h4>
       <p op50>
         @{{ account.acct }}
       </p>
-    </div>
+    </NuxtLink>
   </div>
 </template>

components/PostBody.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { Post } from '~/api-client/types'
-
-const props = defineProps<{
-  post: Post
-}>()
-</script>
-
-<template>
-  <div class="post-body" v-html="sanitize(post.content)" />
-</template>
-
-<style>
-.post-body a {
-  --at-apply: text-primary hover:underline;
-}
-.post-body b {
-  --at-apply: font-bold;
-}
-.post-body p {
-  --at-apply: my-1;
-}
-.post-body a .invisible {
-  --at-apply: hidden;
-}
-.post-body a .ellipsis {
-  --at-apply: truncate overflow-hidden ws-nowrap;
-}
-</style>

components/PostCard.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { Post } from '~/api-client/types'
-
-const props = defineProps<{
-  post: Post
-}>()
-</script>
-
-<template>
-  <NuxtLink flex flex-col gap-2 my-4 :to="`/${post.account.acct}/${post.id}`">
-    <AccountInfo :account="post.account" />
-    <PostBody :post="post" />
-    <PostActions :post="post" />
-  </NuxtLink>
-</template>

components/status/StatusActions.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { Post } from '~/api-client/types'
+import type { Status } from 'masto'
 
-const props = defineProps<{
-  post: Post
+defineProps<{
+  status: Status
 }>()
 </script>
 
@@ -10,15 +10,15 @@ const props = defineProps<{
   <div flex justify-between gap-4>
     <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
       <div i-ri:chat-3-line />
-      <span>{{ post.replies_count }}</span>
+      <span>{{ status.repliesCount }}</span>
     </button>
     <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
       <div i-ri:repeat-fill />
-      <span>{{ post.reblogs_count }}</span>
+      <span>{{ status.reblogsCount }}</span>
     </button>
     <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
       <div i-ri:heart-3-line />
-      <span>{{ post.favourites_count }}</span>
+      <span>{{ status.favouritesCount }}</span>
     </button>
     <button flex gap-1 justify-center items-center p1 w-full rounded hover="bg-gray/10">
       <div i-ri:more-2-fill />

components/status/StatusBody.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { Status } from 'masto'
+
+defineProps<{
+  status: Status
+}>()
+
+// TODO: parse and interop content (link, emojis)
+</script>
+
+<template>
+  <div class="status-body" v-html="sanitize(status.content)" />
+</template>
+
+<style>
+.status-body a {
+  --at-apply: text-primary hover:underline;
+}
+.status-body b {
+  --at-apply: font-bold;
+}
+.status-body p {
+  --at-apply: my-1;
+}
+.status-body a .invisible {
+  --at-apply: hidden;
+}
+.status-body a .ellipsis {
+  --at-apply: truncate overflow-hidden ws-nowrap;
+}
+</style>

components/status/StatusCard.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Status } from 'masto'
+
+const { status } = defineProps<{
+  status: Status
+}>()
+const el = ref<HTMLElement>()
+
+const router = useRouter()
+function go(e: MouseEvent) {
+  if (e.target === el.value)
+    router.push(`/@${status.account.acct}/${status.id}`)
+}
+</script>
+
+<template>
+  <div ref="el" flex flex-col gap-2 my-4 @click="go">
+    <AccountInfo :account="status.account" />
+    <StatusBody :status="status" />
+    <StatusActions :status="status" />
+  </div>
+</template>