2022-11-14 02:20:07 +00:00
|
|
|
<script setup lang="ts">
|
2023-01-08 06:21:09 +00:00
|
|
|
import type { mastodon } from 'masto'
|
2022-11-14 02:20:07 +00:00
|
|
|
|
2023-01-07 09:31:48 +00:00
|
|
|
const {
|
|
|
|
status,
|
2023-01-18 15:59:37 +00:00
|
|
|
newer,
|
2023-01-07 09:31:48 +00:00
|
|
|
withAction = true,
|
|
|
|
} = defineProps<{
|
2023-01-08 06:21:09 +00:00
|
|
|
status: mastodon.v1.Status | mastodon.v1.StatusEdit
|
2023-01-18 15:59:37 +00:00
|
|
|
newer?: mastodon.v1.Status
|
2022-11-26 00:04:31 +00:00
|
|
|
withAction?: boolean
|
2022-11-14 02:20:07 +00:00
|
|
|
}>()
|
2023-01-05 16:48:20 +00:00
|
|
|
|
2023-01-17 21:41:26 +00:00
|
|
|
const { translation } = useTranslation(status, getLanguageCode())
|
2023-01-07 09:31:48 +00:00
|
|
|
|
|
|
|
const emojisObject = useEmojisFallback(() => status.emojis)
|
2024-02-21 15:20:08 +00:00
|
|
|
const vnode = computed(() => {
|
2023-01-07 09:31:48 +00:00
|
|
|
if (!status.content)
|
|
|
|
return null
|
2023-11-07 09:57:44 +00:00
|
|
|
return contentToVNode(status.content, {
|
2023-01-07 09:31:48 +00:00
|
|
|
emojis: emojisObject.value,
|
2023-01-11 17:18:06 +00:00
|
|
|
mentions: 'mentions' in status ? status.mentions : undefined,
|
2023-01-07 09:31:48 +00:00
|
|
|
markdown: true,
|
2023-01-13 00:08:56 +00:00
|
|
|
collapseMentionLink: !!('inReplyToId' in status && status.inReplyToId),
|
2023-01-18 15:59:37 +00:00
|
|
|
status: 'id' in status ? status : undefined,
|
|
|
|
inReplyToStatus: newer,
|
2023-01-07 09:31:48 +00:00
|
|
|
})
|
|
|
|
})
|
2022-11-14 02:20:07 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2023-01-18 15:59:37 +00:00
|
|
|
<div class="status-body" whitespace-pre-wrap break-words :class="{ 'with-action': withAction }" relative>
|
2023-01-07 09:31:48 +00:00
|
|
|
<span
|
2022-11-27 16:54:11 +00:00
|
|
|
v-if="status.content"
|
2023-01-07 09:31:48 +00:00
|
|
|
class="content-rich line-compact" dir="auto"
|
|
|
|
:lang="('language' in status && status.language) || undefined"
|
|
|
|
>
|
2023-05-29 08:16:34 +01:00
|
|
|
<component :is="vnode" v-if="vnode" />
|
2023-01-07 09:31:48 +00:00
|
|
|
</span>
|
2022-12-23 21:53:21 +00:00
|
|
|
<div v-else />
|
2022-11-27 16:54:11 +00:00
|
|
|
<template v-if="translation.visible">
|
|
|
|
<div my2 h-px border="b base" bg-base />
|
2023-01-16 09:55:00 +00:00
|
|
|
<ContentRich v-if="translation.success" class="line-compact" :content="translation.text" :emojis="status.emojis" />
|
|
|
|
<div v-else text-red-4>
|
|
|
|
Error: {{ translation.error }}
|
|
|
|
</div>
|
2022-11-27 16:54:11 +00:00
|
|
|
</template>
|
2022-11-20 21:21:53 +00:00
|
|
|
</div>
|
2022-11-14 02:20:07 +00:00
|
|
|
</template>
|
2022-11-26 00:04:31 +00:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.status-body.with-action p {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
</style>
|