feat(status): add edit indicator for detail

components/status/StatusCard.vue

@@ -90,7 +90,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
                 </time>
               </a>
             </CommonTooltip>
-            <StatusEditIndicator v-if="status.editedAt" :edited-at="status.editedAt" />
+            <StatusEditIndicator :status="status" />
           </div>
         </div>
         <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />

components/status/StatusDetails.vue

@@ -11,7 +11,7 @@ const status = $computed(() => {
   return props.status
 })
 
-const date = useFormattedDateTime(status.createdAt)
+const createdAt = useFormattedDateTime(status.createdAt)
 
 const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === status.visibility)!)
 </script>
@@ -31,7 +31,10 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
       />
     </StatusSpoiler>
     <div flex="~ gap-1" items-center op50 text-sm>
-      <div>{{ date }}</div>
+      <div flex>
+        <div>{{ createdAt }}</div>
+        <StatusEditIndicator :status="status" />
+      </div>
       <div>·</div>
       <CommonTooltip :content="visibility.label" placement="bottom">
         <div :class="visibility.icon" />

components/status/StatusEditIndicator.vue

@@ -1,11 +1,20 @@
 <script setup lang="ts">
-const props = defineProps<{ editedAt: string }>()
+import type { Status } from 'masto'
 
-const editedAt = useFormattedDateTime(props.editedAt)
+const { status } = defineProps<{
+  status: Status
+}>()
+
+const editedAt = $computed(() => status.editedAt)
+const formatted = useFormattedDateTime(status.editedAt)
 </script>
 
 <template>
-  <CommonTooltip :content="`Edited ${editedAt}`">
-    <time :title="props.editedAt" :datetime="props.editedAt" underline decoration-dashed>&nbsp;*</time>
+  <CommonTooltip v-if="editedAt" :content="`Edited ${formatted}`">
+    <time
+      :title="editedAt"
+      :datetime="editedAt"
+      font-bold underline decoration-dashed
+    >&nbsp;*</time>
   </CommonTooltip>
 </template>

composables/masto.ts

@@ -1,6 +1,12 @@
 import type { Ref } from 'vue'
 import type { Account, Relationship, Status } from 'masto'
 
+declare module 'masto' {
+  interface Status {
+    editedAt?: string
+  }
+}
+
 // @unocss-include
 export const STATUS_VISIBILITIES = [
   {

composables/time.ts

@@ -1,9 +1,12 @@
 import type { MaybeRef } from '@vueuse/core'
 
 export const useFormattedDateTime = (
-  value: MaybeRef<string | Date>,
+  value: MaybeRef<string | Date | undefined>,
   options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' },
 ) => {
   const formatter = Intl.DateTimeFormat(undefined, options)
-  return computed(() => formatter.format(new Date(resolveUnref(value))))
+  return computed(() => {
+    const v = resolveUnref(value)
+    return v ? formatter.format(new Date(v)) : ''
+  })
 }