mirrors/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk.git synced 2024-12-18 00:51:47 +03:00
Code Issues Projects Releases Packages Wiki Activity

feat: user timeline

Browse source
This commit is contained in:
Anthony Fu 2022-11-15 20:08:49 +08:00
parent 6ea4879190
commit f3dd3fe8a5
2 changed files with 27 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
components/status/StatusActions.vue
View file

@ -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>

5
pages/@[user]/index.vue
View file

@ -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>