From d94b14ae539d9da16aadab5e6b63d89f7f2b9dc8 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Mon, 3 Mar 2025 01:54:35 +0900
Subject: [PATCH] feat: show notification timestamp (#3215)

---
 components/notification/NotificationCard.vue          | 11 +++++++----
 components/notification/NotificationGroupedFollow.vue |  7 +++++--
 components/notification/NotificationGroupedLikes.vue  |  8 ++++++--
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/components/notification/NotificationCard.vue b/components/notification/NotificationCard.vue
index d919942d..9b7b720e 100644
--- a/components/notification/NotificationCard.vue
+++ b/components/notification/NotificationCard.vue
@@ -33,6 +33,9 @@ const unsupportedEmojiReactionTypes = ['pleroma:emoji_reaction', 'reaction']
 if (unsupportedEmojiReactionTypes.includes(notification.type) || !supportedNotificationTypes.includes(notification.type)) {
   console.warn(`[DEV] ${t('notification.missing_type')} '${notification.type}' (notification.id: ${notification.id})`)
 }
+
+const timeAgoOptions = useTimeAgoOptions(true)
+const timeAgo = useTimeAgo(() => notification.createdAt, timeAgoOptions)
 </script>
 
 <template>
@@ -48,7 +51,7 @@ if (unsupportedEmojiReactionTypes.includes(notification.type) || !supportedNotif
           <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') }}
+            {{ $t('notification.followed_you') }}・{{ timeAgo }}
           </span>
         </div>
         <AccountBigCard
@@ -65,7 +68,7 @@ if (unsupportedEmojiReactionTypes.includes(notification.type) || !supportedNotif
             :account="notification.account"
             text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
           />
-          <span>{{ $t("notification.signed_up") }}</span>
+          <span>{{ $t("notification.signed_up") }}・{{ timeAgo }}</span>
         </div>
       </NuxtLink>
     </template>
@@ -94,7 +97,7 @@ if (unsupportedEmojiReactionTypes.includes(notification.type) || !supportedNotif
           text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
         />
         <span me-1 ws-nowrap>
-          {{ $t('notification.request_to_follow') }}
+          {{ $t('notification.request_to_follow') }}・{{ timeAgo }}
         </span>
       </div>
       <AccountCard p="s-2 e-4 b-2" hover-card :account="notification.account">
@@ -108,7 +111,7 @@ if (unsupportedEmojiReactionTypes.includes(notification.type) || !supportedNotif
             <div i-ri:edit-2-fill text-xl me-1 text-secondary />
             <AccountInlineInfo :account="notification.account" me1 />
             <span ws-nowrap>
-              {{ $t('notification.update_status') }}
+              {{ $t('notification.update_status') }}・{{ timeAgo }}
             </span>
           </div>
         </template>
diff --git a/components/notification/NotificationGroupedFollow.vue b/components/notification/NotificationGroupedFollow.vue
index d0cfa4c5..59f7f912 100644
--- a/components/notification/NotificationGroupedFollow.vue
+++ b/components/notification/NotificationGroupedFollow.vue
@@ -14,6 +14,9 @@ const isExpanded = ref(false)
 const lang = computed(() => {
   return (count.value > 1 || count.value === 0) ? undefined : items.items[0].status?.language
 })
+
+const timeAgoOptions = useTimeAgoOptions(true)
+const timeAgo = useTimeAgo(() => follows.value[0].createdAt, timeAgoOptions)
 </script>
 
 <template>
@@ -37,7 +40,7 @@ const lang = computed(() => {
           :count="count - 1"
           text-primary font-bold line-clamp-1 ws-pre-wrap break-all
         />
-        &nbsp;{{ $t('notification.followed_you') }}
+        &nbsp;{{ $t('notification.followed_you') }}・{{ timeAgo }}
       </template>
       <template v-else-if="count === 1">
         <NuxtLink :to="getAccountRoute(follows[0].account)">
@@ -47,7 +50,7 @@ const lang = computed(() => {
           />
         </NuxtLink>
         <span me-1 ws-nowrap>
-          {{ $t('notification.followed_you') }}
+          {{ $t('notification.followed_you') }}・{{ timeAgo }}
         </span>
       </template>
     </div>
diff --git a/components/notification/NotificationGroupedLikes.vue b/components/notification/NotificationGroupedLikes.vue
index a3855150..c29692df 100644
--- a/components/notification/NotificationGroupedLikes.vue
+++ b/components/notification/NotificationGroupedLikes.vue
@@ -8,6 +8,10 @@ const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
 
 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 likesTimeAgo = useTimeAgo(() => likes.value[0].favourite?.createdAt ?? '', timeAgoOptions)
 </script>
 
 <template>
@@ -24,7 +28,7 @@ const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
             </AccountHoverWrapper>
           </template>
           <div ml1>
-            {{ $t('notification.reblogged_post') }}
+            {{ $t('notification.reblogged_post') }}・{{ reblogsTimeAgo }}
           </div>
         </div>
         <div v-if="likes.length" flex="~ gap-1 wrap">
@@ -37,7 +41,7 @@ const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
             </AccountHoverWrapper>
           </template>
           <div ms-4>
-            {{ $t('notification.favourited_post') }}
+            {{ $t('notification.favourited_post') }} ・{{ likesTimeAgo }}
           </div>
         </div>
       </div>