refactor: migrate to nuxt compatibilityVersion: 4 (#3298)

app/components/status/edit/StatusEditHistory.vue

@@ -0,0 +1,50 @@
+<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.$select(status.id).history.list()
+
+function showHistory(edit: mastodon.v1.StatusEdit) {
+  openEditHistoryDialog(edit)
+}
+const timeAgoOptions = useTimeAgoOptions()
+
+// TODO: rework, this is only reversing the first page of edits
+function reverseHistory(items: mastodon.v1.StatusEdit[]) {
+  return [...items].reverse()
+}
+</script>
+
+<template>
+  <CommonPaginator :paginator="paginator" key-prop="createdAt" :preprocess="reverseHistory">
+    <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>

app/components/status/edit/StatusEditHistorySkeleton.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="skeleton-loading-bg" h-5 w-full rounded my2 />
+</template>

app/components/status/edit/StatusEditIndicator.vue

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

app/components/status/edit/StatusEditPreview.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+defineProps<{
+  edit: mastodon.v1.StatusEdit
+}>()
+</script>
+
+<template>
+  <div px3 py-4 flex="~ col">
+    <div text-center flex="~ row gap-1 wrap">
+      <AccountInlineInfo :account="edit.account" />
+      <span>
+        {{ $t('status_history.edited', [useFormattedDateTime(edit.createdAt).value]) }}
+      </span>
+    </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>