elk/components/status/StatusReplyingTo.vue

43 lines
1.2 KiB
Vue
Raw Normal View History

2022-11-23 00:00:52 +00:00
<script setup lang="ts">
2023-01-08 06:21:09 +00:00
import type { mastodon } from 'masto'
2022-11-23 00:00:52 +00:00
const {
status,
isSelfReply = false,
} = defineProps<{
2023-01-08 06:21:09 +00:00
status: mastodon.v1.Status
isSelfReply: boolean
2022-11-23 00:00:52 +00:00
}>()
const isSelf = computed(() => status.inReplyToAccountId === status.account.id)
2022-12-29 13:11:05 +00:00
const account = isSelf ? computed(() => status.account) : useAccountById(status.inReplyToAccountId)
2022-11-23 00:00:52 +00:00
</script>
<template>
<NuxtLink
v-if="status.inReplyToId"
flex="~ gap2" items-center h-auto text-sm text-secondary
:to="getStatusInReplyToRoute(status)"
2023-01-08 09:03:23 +00:00
:title="$t('status.replying_to', [account ? getDisplayName(account) : $t('status.someone')])"
text-blue saturate-50 hover:saturate-100
>
<template v-if="isSelfReply">
2023-01-08 09:03:23 +00:00
<div i-ri-discuss-line text-blue />
<span>{{ $t('status.show_full_thread') }}</span>
</template>
<template v-else>
2023-01-08 09:03:23 +00:00
<div i-ri-chat-1-line text-blue />
<div ws-nowrap flex>
<i18n-t keypath="status.replying_to">
<template v-if="account">
2023-03-19 22:36:09 +00:00
<AccountInlineInfo :account="account" :link="false" m-inline-2 />
</template>
<template v-else>
{{ $t('status.someone') }}
</template>
</i18n-t>
</div>
</template>
</NuxtLink>
2022-11-23 00:00:52 +00:00
</template>