elk/components/status/StatusReplyingTo.vue

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

const { status, collapsed = false, simplified = false } = defineProps<{
  status: Status
  collapsed?: boolean
  simplified?: boolean
}>()

const isSelf = $computed(() => status.inReplyToAccountId === status.account.id)
const account = isSelf ? computed(() => status.account) : useAccountById(status.inReplyToAccountId)
</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 mr-0.5 />
        <template v-if="!isSelf">
          <AccountAvatar v-if="simplified || status.inReplyToAccountId === currentUser?.account.id" :account="account" :link="false" w-5 h-5 />
          <AccountInlineInfo v-else :account="account" :link="false" />
        </template>
        <span v-else-if="!collapsed" ws-nowrap>{{ $t('status.thread') }}</span>
      </template>
      <div i-ph:chats-fill text-primary text-lg ml-0.5 />
    </NuxtLink>
  </div>
</template>