Add date to notifications

Author: kadiryazici

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@tauri-apps/api": "^1.2.0",
     "@vueuse/core": "^9.12.0",
+    "dayjs": "^1.11.7",
     "pinia": "^2.0.29",
     "redaxios": "^0.5.1",
     "tauri-plugin-autostart-api": "github:tauri-apps/tauri-plugin-autostart",

pnpm-lock.yaml

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import dayjs from 'dayjs'
 import type { Thread } from '../api/notifications'
 import type { NotificationListData } from '../types'
 import { formatReason, notificationSubjectIcon } from '../utils/notification'
@@ -65,6 +66,8 @@ function handleRepoClick() {
 
         <div class="notification-item-content-subtitle">
           {{ formatReason(item.reason) }}
+          -
+          {{ dayjs(item.updatedAt).fromNow() }}
         </div>
       </div>
     </button>
@@ -130,9 +133,9 @@ function handleRepoClick() {
     @include focus-visible;
     @include text-outline($size: 1px);
 
-    &-read {
-      color: var(--white-faded) !important;
-    }
+    // &-read {
+    //   color: var(--white-faded) !important;
+    // }
 
     &:hover {
       background-color: var(--item-hover-bg)

src/components/NotificationList.vue

@@ -4,21 +4,24 @@ import 'focus-visible'
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import { isEnabled as isAutostartEnabled } from 'tauri-plugin-autostart-api'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
 import App from './App.vue'
 import { AppStorage, cacheStorageFromDisk } from './storage'
 import { useStore } from './stores/store'
 import { Page } from './constants'
 import { initDevtools } from './utils/initDevtools'
 import { useKey } from './composables/useKey'
 
-window.addEventListener('contextmenu', e => e.preventDefault())
+(async () => {
+  dayjs.extend(relativeTime)
+  window.addEventListener('contextmenu', e => e.preventDefault())
 
-const app = createApp(App)
-const pinia = createPinia()
+  const app = createApp(App)
+  const pinia = createPinia()
 
-app.use(pinia)
+  app.use(pinia)
 
-;(async () => {
   await cacheStorageFromDisk()
 
   const store = useStore(pinia)

src/main.ts

@@ -17,6 +17,7 @@ export interface NotificationListDataItem {
   title: Thread['subject']['title']
   reason: Thread['reason']
   type: Thread['subject']['type']
+  updatedAt: Thread['updated_at']
   raw: Raw<Thread>
 }
 

src/types.ts

@@ -20,6 +20,7 @@ function notificationListItemFromThread(thread: Thread): NotificationListDataIte
     title: thread.subject.title,
     type: thread.subject.type,
     unread: thread.unread,
+    updatedAt: thread.updated_at,
     raw: markRaw(thread),
   }
 }