elk/components/status/StatusReplyingTo.vue

33 lines
1.3 KiB
Vue
Raw Normal View History

2022-11-23 00:00:52 +00:00
<script setup lang="ts">
import type { Status } from 'masto'
const { status, collapsed = false, simplified = false } = defineProps<{
2022-11-23 00:00:52 +00:00
status: Status
2022-12-29 13:50:11 +00:00
collapsed?: boolean
simplified?: boolean
2022-11-23 00:00:52 +00:00
}>()
2022-12-29 13:11:05 +00:00
const isSelf = $computed(() => status.inReplyToAccountId === status.account.id)
const account = isSelf ? computed(() => status.account) : useAccountById(status.inReplyToAccountId)
2022-11-23 00:00:52 +00:00
</script>
<template>
<div v-if="status.inReplyToAccountId" flex="~ wrap" gap-1 items-end>
<NuxtLink
v-if="status.inReplyToId"
flex="~" items-center h-auto font-bold text-sm text-secondary gap-1
:to="getStatusInReplyToRoute(status)"
:title="account ? `Replying to ${getDisplayName(account)}` : 'Replying to someone'"
>
<template v-if="account">
<div i-ri:reply-fill :class="collapsed ? '' : 'scale-x-[-1]'" text-secondary-light />
<template v-if="!collapsed">
<AccountAvatar v-if="isSelf || simplified || status.inReplyToAccountId === currentUser?.account.id" :account="account" :link="false" w-5 h-5 mx-0.5 />
<AccountInlineInfo v-else :account="account" :link="false" mx-0.5 />
</template>
</template>
2023-01-05 22:56:28 +00:00
<div i-ri:question-answer-line text-secondary-light text-lg />
</NuxtLink>
</div>
2022-11-23 00:00:52 +00:00
</template>