feat: replying to status

This commit is contained in:
Anthony Fu 2022-11-23 08:00:52 +08:00
parent 6d66bbbc5d
commit 9a77c7da2a
5 changed files with 37 additions and 7 deletions

View file

@ -19,6 +19,7 @@ const { link = true } = defineProps<{
<p op35 text-sm>
@{{ account.acct }}
</p>
<slot name="bottom" />
</NuxtLink>
<slot />
</div>

View file

@ -7,7 +7,7 @@ defineProps<{
</script>
<template>
<NuxtLink :href="`/@${account.acct}`" flex gap-2 font-bold items-center>
<NuxtLink :href="`/@${account.acct}`" flex gap-2 items-center>
<AccountAvatar :account="account" w-5 h-5 />
<CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" />
</NuxtLink>

View file

@ -67,16 +67,19 @@ const timeago = useTimeAgo(() => status.createdAt, {
<div v-if="rebloggedBy" pl8>
<div flex gap-1 items-center text-gray:75 text-sm>
<div i-ri:repeat-fill mr-1 />
<AccountInlineInfo :account="rebloggedBy" />
<AccountInlineInfo font-bold :account="rebloggedBy" />
reblogged
</div>
</div>
<AccountInfo :account="status.account">
<template>
<div flex-auto />
<div text-sm op50>
{{ timeago }}
</div>
</template>
</AccountInfo>
<StatusReplyingTo :status="status" />
<div pl14>
<StatusBody :status="status" />
<StatusMedia

View file

@ -18,7 +18,8 @@ const date = computed(() => formatter.format(new Date(status.createdAt)))
<template>
<div flex flex-col gap-2 my-4 px-4>
<AccountInfo :account="status.account" />
<StatusBody :status="status" text-xl />
<StatusReplyingTo :status="status" />
<StatusBody :status="status" text-2xl />
<StatusMedia
v-if="status.mediaAttachments?.length"
:status="status"

View file

@ -0,0 +1,25 @@
<script setup lang="ts">
import type { Status } from 'masto'
const { status } = defineProps<{
status: Status
}>()
const replyingTo = asyncComputed(async () => {
if (status.inReplyToAccountId)
return await masto.accounts.fetch(status.inReplyToAccountId)
return null
})
</script>
<template>
<template v-if="replyingTo">
<div
flex="~ gap-1.5" items-center text-sm text-gray:85
:title="`Replying to ${getDisplayName(replyingTo)}`"
>
<div i-ri:reply-fill rotate-180 op50 />
<AccountInlineInfo :account="replyingTo" />
</div>
</template>
</template>