From 59ec9136faded112ef449183af881a0709a451ef Mon Sep 17 00:00:00 2001
From: Jacky <me@jackyu.cn>
Date: Wed, 19 Feb 2025 02:34:43 +0000
Subject: [PATCH] feat(notification): Add relative time display and improve
 layout

---
 .../components/Notification/Notification.vue  | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/app/src/components/Notification/Notification.vue b/app/src/components/Notification/Notification.vue
index b3deecb4..b95be9c8 100644
--- a/app/src/components/Notification/Notification.vue
+++ b/app/src/components/Notification/Notification.vue
@@ -9,12 +9,16 @@ import { NotificationTypeT } from '@/constants'
 import { useUserStore } from '@/pinia'
 import { BellOutlined, CheckCircleOutlined, CloseCircleOutlined, DeleteOutlined, InfoCircleOutlined, WarningOutlined } from '@ant-design/icons-vue'
 import { message, notification } from 'ant-design-vue'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
 import { SSE } from 'sse.js'
 
 defineProps<{
   headerRef: HTMLElement
 }>()
 
+dayjs.extend(relativeTime)
+
 const loading = ref(false)
 
 const { token, unreadCount } = storeToRefs(useUserStore())
@@ -145,19 +149,7 @@ function viewAll() {
         >
           <template #renderItem="{ item }">
             <AListItem>
-              <template #actions>
-                <span
-                  key="list-loadmore-remove"
-                  class="cursor-pointer"
-                  @click="remove(item.id)"
-                >
-                  <DeleteOutlined />
-                </span>
-              </template>
-              <AListItemMeta
-                :title="$gettext(item.title)"
-                :description="detailRender({ text: item.details, record: item } as CustomRender)"
-              >
+              <AListItemMeta>
                 <template #avatar>
                   <div>
                     <CloseCircleOutlined
@@ -178,6 +170,28 @@ function viewAll() {
                     />
                   </div>
                 </template>
+                <template #title>
+                  <div class="flex justify-between items-center">
+                    {{ $gettext(item.title) }}
+                    <span class="text-xs text-trueGray-400 font-normal">
+                      {{ dayjs(item.created_at).fromNow() }}
+                    </span>
+                  </div>
+                </template>
+                <template #description>
+                  <div class="flex justify-between items-center">
+                    <div>
+                      {{ detailRender({ text: item.details, record: item } as CustomRender) }}
+                    </div>
+                    <span
+                      key="list-loadmore-remove"
+                      class="cursor-pointer"
+                      @click="remove(item.id)"
+                    >
+                      <DeleteOutlined />
+                    </span>
+                  </div>
+                </template>
               </AListItemMeta>
             </AListItem>
           </template>