From 6c350faf7cbe98307663f940da906e24b47681fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Fri, 25 Nov 2022 16:57:34 +0800
Subject: [PATCH] feat: show full created time in tooltip

---
 components/status/StatusCard.vue    | 9 ++++++---
 components/status/StatusDetails.vue | 3 +--
 composables/time.ts                 | 9 +++++++++
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index bc509fb6..5dea456f 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -36,6 +36,7 @@ function go() {
   router.push(getStatusPath(status))
 }
 
+const createdAt = useFormattedDateTime(status.createdAt)
 const timeago = useTimeAgo(() => status.createdAt, {
   showSecond: true,
   messages: {
@@ -89,9 +90,11 @@ const timeago = useTimeAgo(() => status.createdAt, {
         <div flex>
           <StatusAccountDetails :account="status.account" />
           <div flex-auto />
-          <div text-sm op50 :title="status.createdAt">
-            {{ timeago }}
-          </div>
+          <CommonTooltip :content="createdAt">
+            <div text-sm op50 :title="status.createdAt">
+              {{ timeago }}
+            </div>
+          </CommonTooltip>
         </div>
         <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
         <div>
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index ad200c68..dc548e67 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -11,8 +11,7 @@ const status = $computed(() => {
   return props.status
 })
 
-const formatter = Intl.DateTimeFormat(undefined, { dateStyle: 'long' })
-const date = computed(() => formatter.format(new Date(status.createdAt)))
+const date = useFormattedDateTime(status.createdAt)
 </script>
 
 <template>
diff --git a/composables/time.ts b/composables/time.ts
index e69de29b..710b7928 100644
--- a/composables/time.ts
+++ b/composables/time.ts
@@ -0,0 +1,9 @@
+import type { MaybeRef } from '@vueuse/core'
+
+export const useFormattedDateTime = (
+  value: MaybeRef<string | Date>,
+  options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' },
+) => {
+  const formatter = Intl.DateTimeFormat(undefined, options)
+  return computed(() => formatter.format(new Date(resolveUnref(value))))
+}