feat: use masto client

components/status/StatusActions.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { Status } from 'masto'
+
+defineProps<{
+  status: Status
+}>()
+</script>
+
+<template>
+  <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>{{ 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>{{ 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>{{ 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 />
+    </button>
+  </div>
+</template>

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>