feat(status): edit history

components/status/edit/StatusEditHistory.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { Status, StatusEdit } from 'masto'
+
+const { status } = defineProps<{
+  status: Status
+}>()
+
+const { data: statusEdits } = useAsyncData(`status:history:${status.id}`, () => masto.statuses.fetchHistory(status.id).then(res => res.reverse()))
+
+const showHistory = (edit: StatusEdit) => {
+  openEditHistoryDialog(edit)
+}
+</script>
+
+<template>
+  <template v-if="statusEdits">
+    <CommonDropdownItem
+      v-for="(edit, idx) in statusEdits"
+      :key="idx"
+      px="0.5"
+      @click="showHistory(edit)"
+    >
+      {{ getDisplayName(edit.account) }}
+      {{ idx === statusEdits.length - 1 ? 'created' : 'edited' }}
+      {{ useTimeAgo(edit.createdAt, { showSecond: true }).value }}
+    </CommonDropdownItem>
+  </template>
+  <template v-else>
+    <div i-ri:loader-2-fill animate-spin text-2xl ma />
+  </template>
+</template>

components/status/edit/StatusEditIndicator.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { Status } from 'masto'
+
+const { status } = defineProps<{
+  status: Status
+  inline: boolean
+}>()
+
+const editedAt = $computed(() => status.editedAt)
+const formatted = useFormattedDateTime(status.editedAt)
+</script>
+
+<template>
+  <template v-if="editedAt">
+    <CommonTooltip v-if="inline" :content="`Edited ${formatted}`">
+      <time
+        :title="editedAt"
+        :datetime="editedAt"
+        font-bold underline decoration-dashed
+      >&nbsp;*</time>
+    </CommonTooltip>
+
+    <CommonDropdown v-else>
+      <slot />
+
+      <template #popper>
+        <div text-sm p2>
+          <div text-center mb1>
+            Edited {{ formatted }}
+          </div>
+          <StatusEditHistory :status="status" />
+        </div>
+      </template>
+    </CommonDropdown>
+  </template>
+</template>

components/status/edit/StatusEditPreview.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { StatusEdit } from 'masto'
+
+const { edit } = defineProps<{
+  edit: StatusEdit
+}>()
+</script>
+
+<template>
+  <div px3 py-4 flex="~ col">
+    <div text-center flex="~ row gap-1">
+      <AccountInlineInfo :account="edit.account" />
+      edited {{ useFormattedDateTime(edit.createdAt).value }}
+    </div>
+
+    <div h1px bg="gray/20" my2 />
+
+    <StatusSpoiler :enabled="edit.sensitive">
+      <template #spoiler>
+        {{ edit.spoilerText }}
+      </template>
+      <StatusBody :status="edit" />
+      <StatusMedia
+        v-if="edit.mediaAttachments.length"
+        :status="edit"
+      />
+    </StatusSpoiler>
+  </div>
+</template>