elk/components/status/StatusReplyingTo.vue

<script setup lang="ts">
import type { mastodon } from 'masto'

const {
  status,
  isSelfReply = false,
} = defineProps<{
  status: mastodon.v1.Status
  isSelfReply: boolean
}>()

const isSelf = $computed(() => status.inReplyToAccountId === status.account.id)
const account = isSelf ? computed(() => status.account) : useAccountById(status.inReplyToAccountId)
</script>

<template>
  <NuxtLink
    v-if="status.inReplyToId"
    flex="~ gap2" items-center h-auto text-sm text-secondary
    :to="getStatusInReplyToRoute(status)"
    :title="$t('status_replying_to', { username: account ? getDisplayName(account) : $ta('status_replying_to').unknown })"
    text-blue saturate-50 hover:saturate-100
  >
    <template v-if="isSelfReply">
      <div i-ri-discuss-line text-blue />
      <span>{{ $t('status_show_full_thread') }}</span>
    </template>
    <template v-else>
      <div i-ri-chat-1-line text-blue />
      <i18n path="status_replying_to" flex gap-x-1>
        <template #username="{ unknown }">
          <AccountInlineInfo v-if="account" :account="account" :link="false" />
          <template v-else>
            {{ unknown }}
          </template>
        </template>
      </i18n>
    </template>
  </NuxtLink>
</template>