50 lines
1.5 KiB
Vue
50 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { mastodon } from 'masto'
|
|
import { formatTimeAgo } from '@vueuse/core'
|
|
|
|
const { status } = defineProps<{
|
|
status: mastodon.v1.Status
|
|
}>()
|
|
|
|
const paginator = useMastoClient().v1.statuses.listHistory(status.id)
|
|
|
|
const showHistory = (edit: mastodon.v1.StatusEdit) => {
|
|
openEditHistoryDialog(edit)
|
|
}
|
|
const timeAgoOptions = useTimeAgoOptions()
|
|
|
|
// TODO: rework, this is only reversing the first page of edits
|
|
const reverseHistory = (items: mastodon.v1.StatusEdit[]) =>
|
|
[...items].reverse()
|
|
</script>
|
|
|
|
<template>
|
|
<CommonPaginator :paginator="paginator" key-prop="createdAt" :preprocess="reverseHistory" :buffer="0">
|
|
<template #default="{ items, item, index }">
|
|
<CommonDropdownItem
|
|
px="0.5"
|
|
@click="showHistory(item)"
|
|
>
|
|
{{ getDisplayName(item.account) }}
|
|
|
|
<template v-if="index === items.length - 1">
|
|
<i18n-t keypath="status_history.created">
|
|
{{ formatTimeAgo(new Date(item.createdAt), timeAgoOptions) }}
|
|
</i18n-t>
|
|
</template>
|
|
<i18n-t v-else keypath="status_history.edited">
|
|
{{ formatTimeAgo(new Date(item.createdAt), timeAgoOptions) }}
|
|
</i18n-t>
|
|
</CommonDropdownItem>
|
|
</template>
|
|
<template #loading>
|
|
<StatusEditHistorySkeleton />
|
|
<StatusEditHistorySkeleton op50 />
|
|
<StatusEditHistorySkeleton op25 />
|
|
</template>
|
|
<template #done>
|
|
<span />
|
|
</template>
|
|
</CommonPaginator>
|
|
</template>
|