fix: make notification timestamp gray and use <time> tag (#3223)

components/notification/NotificationCard.vue

@@ -51,7 +51,10 @@ const timeAgo = useTimeAgo(() => notification.createdAt, timeAgoOptions)
           <div i-ri-user-3-line text-xl me-3 color-blue />
           <AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all />
           <span ws-nowrap>
-            {{ $t('notification.followed_you') }}・{{ timeAgo }}
+            {{ $t('notification.followed_you') }}
+            <time text-secondary :datetime="notification.createdAt">
+              ・{{ timeAgo }}
+            </time>
           </span>
         </div>
         <AccountBigCard
@@ -68,7 +71,11 @@ const timeAgo = useTimeAgo(() => notification.createdAt, timeAgoOptions)
             :account="notification.account"
             text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
           />
-          <span>{{ $t("notification.signed_up") }}・{{ timeAgo }}</span>
+          <span>{{ $t("notification.signed_up") }}
+            <time text-secondary :datetime="notification.createdAt">
+              ・{{ timeAgo }}
+            </time>
+          </span>
         </div>
       </NuxtLink>
     </template>
@@ -97,7 +104,10 @@ const timeAgo = useTimeAgo(() => notification.createdAt, timeAgoOptions)
           text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
         />
         <span me-1 ws-nowrap>
-          {{ $t('notification.request_to_follow') }}・{{ timeAgo }}
+          {{ $t('notification.request_to_follow') }}
+          <time text-secondary :datetime="notification.createdAt">
+            ・{{ timeAgo }}
+          </time>
         </span>
       </div>
       <AccountCard p="s-2 e-4 b-2" hover-card :account="notification.account">
@@ -111,7 +121,10 @@ const timeAgo = useTimeAgo(() => notification.createdAt, timeAgoOptions)
             <div i-ri:edit-2-fill text-xl me-1 text-secondary />
             <AccountInlineInfo :account="notification.account" me1 />
             <span ws-nowrap>
-              {{ $t('notification.update_status') }}・{{ timeAgo }}
+              {{ $t('notification.update_status') }}
+              <time text-secondary :datetime="notification.createdAt">
+                ・{{ timeAgo }}
+              </time>
             </span>
           </div>
         </template>

components/notification/NotificationGroupedFollow.vue

@@ -16,7 +16,8 @@ const lang = computed(() => {
 })
 
 const timeAgoOptions = useTimeAgoOptions(true)
-const timeAgo = useTimeAgo(() => follows.value[0].createdAt, timeAgoOptions)
+const timeAgoCreatedAt = computed(() => follows.value[0].createdAt)
+const timeAgo = useTimeAgo(() => timeAgoCreatedAt.value, timeAgoOptions)
 </script>
 
 <template>
@@ -40,7 +41,10 @@ const timeAgo = useTimeAgo(() => follows.value[0].createdAt, timeAgoOptions)
           :count="count - 1"
           text-primary font-bold line-clamp-1 ws-pre-wrap break-all
         />
-        &nbsp;{{ $t('notification.followed_you') }}・{{ timeAgo }}
+        &nbsp;{{ $t('notification.followed_you') }}
+        <time text-secondary :datetime="timeAgoCreatedAt">
+          ・{{ timeAgo }}
+        </time>
       </template>
       <template v-else-if="count === 1">
         <NuxtLink :to="getAccountRoute(follows[0].account)">
@@ -50,7 +54,10 @@ const timeAgo = useTimeAgo(() => follows.value[0].createdAt, timeAgoOptions)
           />
         </NuxtLink>
         <span me-1 ws-nowrap>
-          {{ $t('notification.followed_you') }}・{{ timeAgo }}
+          {{ $t('notification.followed_you') }}
+          <time text-secondary :datetime="timeAgoCreatedAt">
+            ・{{ timeAgo }}
+          </time>
         </span>
       </template>
     </div>

components/notification/NotificationGroupedLikes.vue

@@ -10,8 +10,10 @@ const reblogs = computed(() => group.likes.filter(i => i.reblog))
 const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
 
 const timeAgoOptions = useTimeAgoOptions(true)
-const reblogsTimeAgo = useTimeAgo(() => reblogs.value[0].reblog?.createdAt ?? '', timeAgoOptions)
+const reblogsTimeAgoCreatedAt = computed(() => reblogs.value[0].reblog?.createdAt)
-const likesTimeAgo = useTimeAgo(() => likes.value[0].favourite?.createdAt ?? '', timeAgoOptions)
+const reblogsTimeAgo = useTimeAgo(() => reblogsTimeAgoCreatedAt.value ?? '', timeAgoOptions)
+const likesTimeAgoCreatedAt = computed(() => likes.value[0].favourite?.createdAt)
+const likesTimeAgo = useTimeAgo(() => likesTimeAgoCreatedAt.value ?? '', timeAgoOptions)
 </script>
 
 <template>
@@ -28,7 +30,10 @@ const likesTimeAgo = useTimeAgo(() => likes.value[0].favourite?.createdAt ?? '',
             </AccountHoverWrapper>
           </template>
           <div ml1>
-            {{ $t('notification.reblogged_post') }}・{{ reblogsTimeAgo }}
+            {{ $t('notification.reblogged_post') }}
+            <time text-secondary :datetime="reblogsTimeAgoCreatedAt">
+              ・{{ reblogsTimeAgo }}
+            </time>
           </div>
         </div>
         <div v-if="likes.length" flex="~ gap-1 wrap">
@@ -41,7 +46,10 @@ const likesTimeAgo = useTimeAgo(() => likes.value[0].favourite?.createdAt ?? '',
             </AccountHoverWrapper>
           </template>
           <div ms-4>
-            {{ $t('notification.favourited_post') }} ・{{ likesTimeAgo }}
+            {{ $t('notification.favourited_post') }}
+            <time text-secondary :datetime="likesTimeAgoCreatedAt">
+              ・{{ likesTimeAgo }}
+            </time>
           </div>
         </div>
       </div>