feat: format timestamps in message events

app/components/page/room/event/message.vue

@@ -104,12 +104,7 @@ const contentProps: PopoverContentProps = {
             >
               <span :class="cn(interactiveStyles.base, interactiveStyles.variant.link, 'text-sm')">{{ eventProfile?.displayname }}</span>
             </UProfilePopoverTrigger>
-            <NuxtTime
-              :datetime="event.getTs()"
-              hour="numeric"
-              minute="numeric"
-              class="text-xs text-muted-foreground"
-            />
+            <PageRoomEventMessageTimestamp :datetime="event.getTs()" />
           </template>
 
           <RenderMd

app/components/page/room/event/message/timestamp.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import type { NuxtTimeProps } from '#app'
+import type { PrimitiveProps } from 'reka-ui'
+
+const props = defineProps<PrimitiveProps & { datetime: number }>()
+
+const isOld = computed(() => {
+  const yesterday = Temporal.Now.plainDateISO().subtract({ days: 1 })
+  const eventDate = Temporal.Instant.fromEpochMilliseconds(props.datetime).toZonedDateTimeISO('UTC').toPlainDate()
+
+  return Temporal.PlainDate.compare(eventDate, yesterday) <= 0
+})
+
+const nuxtTimeProps = computed<NuxtTimeProps>(() => {
+  if (isOld.value) {
+    return {
+      datetime: props.datetime,
+    }
+  }
+
+  return {
+    datetime: props.datetime,
+    hour: 'numeric',
+    minute: 'numeric',
+  }
+})
+</script>
+
+<template>
+  <Primitive v-bind="$props" :class="cn('text-xs text-muted-foreground select-none', $attrs.class)">
+    <UTooltipRoot :delay-duration="1000">
+      <UTooltipTrigger as-child>
+        <NuxtTime v-bind="nuxtTimeProps" />
+      </UTooltipTrigger>
+      <UTooltipContent>
+        <NuxtTime
+          :datetime
+          weekday="long"
+          month="long"
+          day="numeric"
+          year="numeric"
+          hour="numeric"
+          minute="numeric"
+        />
+      </UTooltipContent>
+    </UTooltipRoot>
+  </Primitive>
+</template>

nuxt.config.ts

@@ -95,6 +95,10 @@ export default defineNuxtConfig({
         from: 'valibot',
         imports: [{ as: 'v', name: '*' }],
       },
+      {
+        from: 'temporal-polyfill',
+        imports: ['Temporal'],
+      },
     ],
   },
 

package.json

@@ -50,6 +50,7 @@
     "quick-lru": "^7.3.0",
     "reka-ui": "^2.9.6",
     "tailwind-merge": "^3.5.0",
+    "temporal-polyfill": "^0.3.2",
     "ufo": "^1.6.4",
     "unstorage": "^1.17.5",
     "valibot": "^1.3.1",