feat: show notification timestamp (#3215)

Author: shuuji3

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>

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>

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>