feat: user timeline

components/status/StatusActions.vue

@@ -1,13 +1,28 @@
 <script setup lang="ts">
 import type { Status } from 'masto'
 
-defineProps<{
+const { status } = defineProps<{
   status: Status
 }>()
+
+const masto = await useMasto()
+const isLoading = ref(false)
+async function toggleFavourite() {
+  try {
+    isLoading.value = true
+    if (status.favourited)
+      Object.assign(status, await masto.statuses.unfavourite(status.id))
+    else
+      Object.assign(status, await masto.statuses.favourite(status.id))
+  }
+  finally {
+    isLoading.value = false
+  }
+}
 </script>
 
 <template>
-  <div flex gap-8>
+  <div flex gap-8 :class="isLoading ? 'pointer-events-none' : ''">
     <RouterLink flex gap-1 items-center w-full rounded op75 hover="op100 text-blue" group :to="`/@${status.account.acct}/${status.id}`">
       <div rounded-full p2 group-hover="bg-blue/10">
         <div i-ri:chat-3-line />
@@ -20,9 +35,13 @@ defineProps<{
       </div>
       <span v-if="status.reblogsCount">{{ status.reblogsCount }}</span>
     </button>
-    <button flex gap-1 items-center w-full rounded op75 hover="op100 text-rose" group>
+    <button
+      flex gap-1 items-center w-full rounded hover="op100 text-rose" group
+      :class="status.favourited ? 'text-rose op100' : 'op75'"
+      @click="toggleFavourite()"
+    >
       <div rounded-full p2 group-hover="bg-rose/10">
-        <div i-ri:heart-3-line />
+        <div :class="status.favourited ? 'i-ri:heart-3-fill' : 'i-ri:heart-3-line'" />
       </div>
       <span v-if="status.favouritesCount">{{ status.favouritesCount }}</span>
     </button>

pages/@[user]/index.vue

@@ -4,12 +4,15 @@ const props = defineProps<{
 }>()
 
 const params = useRoute().params
+const user = $computed(() => params.user as string)
 const masto = await useMasto()
-const { data: account } = await useAsyncData('account', () => masto.accounts.lookup({ acct: params.user as string }))
+const { data: account } = await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user }))
+const { data: status } = await useAsyncData(`${user}:status`, () => masto.accounts.fetchStatuses(account.value!.id!))
 </script>
 
 <template>
   <div>
     <AccountHeader :account="account" />
   </div>
+  <TimelineList :timelines="status?.value" />
 </template>