feat: user timeline
parent
6ea4879190
commit
f3dd3fe8a5
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue