Show date for notifications

dashboard/src/components/Headerbar.vue

@@ -8,6 +8,7 @@ import { onMounted, ref, useTemplateRef, inject } from 'vue';
 import { marked } from 'marked';
 import { eachLimit } from 'async';
 import { Button, Popover, Icon } from 'pankow';
+import { prettyDate, prettyLongDate } from 'pankow/utils';
 import NotificationsModel from '../models/NotificationsModel.js';
 
 const props = defineProps(['config', 'profile', 'subscription']);
@@ -88,7 +89,10 @@ const description = marked.parse(t('support.help.description', {
         <div v-if="notifications.length" style="overflow: auto; margin-bottom: 10px">
           <div class="notification-item" v-for="notification in notifications" :key="notification.id">
             <div class="notification-item-title" @click="notification.isCollapsed = !notification.isCollapsed">
-              {{ notification.title }}
+              <div>
+                {{ notification.title }}<br/>
+                <span class="notification-item-date" v-tooltip="prettyLongDate(notification.creationTime)">{{ prettyDate(notification.creationTime) }}</span>
+              </div>
               <Button plain small tool :loading="notification.busy" :disabled="notification.busy" class="notification-read-button" @click.stop="onMarkNotificationRead(notification)">{{ $t('notifications.dismissTooltip') }}</Button>
             </div>
             <div class="notification-item-body" v-if="!notification.isCollapsed">
@@ -179,6 +183,10 @@ const description = marked.parse(t('support.help.description', {
   gap: 6px;
 }
 
+.notification-item-date {
+  font-size: 10px;
+}
+
 .notification-read-button {
   visibility: hidden;
   margin-right: 10px;