elk/components/status/edit/StatusEditHistory.vue

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

const { status } = defineProps<{
  status: Status
}>()

const masto = useMasto()
const { data: statusEdits } = useAsyncData(`status:history:${status.id}`, () => masto.statuses.fetchHistory(status.id).then(res => res.reverse()))

const showHistory = (edit: StatusEdit) => {
  openEditHistoryDialog(edit)
}
const timeAgoOptions = useTimeAgoOptions()
</script>

<template>
  <template v-if="statusEdits">
    <CommonDropdownItem
      v-for="(edit, idx) in statusEdits"
      :key="idx"
      px="0.5"
      @click="showHistory(edit)"
    >
      {{ getDisplayName(edit.account) }}
      <i18n-t :keypath="`status_history.${idx === statusEdits.length - 1 ? 'created' : 'edited'}`">
        {{ useTimeAgo(edit.createdAt, timeAgoOptions).value }}
      </i18n-t>
    </CommonDropdownItem>
  </template>
  <template v-else>
    <div i-ri:loader-2-fill animate-spin text-2xl ma />
  </template>
</template>