Display time and sender better

aleksis/core/assets/components/notifications/NotificationItem.vue

@@ -9,9 +9,20 @@
         <v-list-item-content>
           <v-list-item-title>{{ notification.title }}</v-list-item-title>
 
-          <v-list-item-subtitle>
-            <v-icon>mdi-clock-outline</v-icon>
-            {{ notification.created }}
+          <v-list-item-subtitle class="caption">
+            <v-chip color="primary" label x-small outlined>{{ notification.sender }}</v-chip>
+
+            <v-icon>mdi-circle-small</v-icon>
+
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on, attrs }">
+                <span
+                  v-bind="attrs"
+                  v-on="on"
+                >{{ $d(new Date(notification.created), dateFormat(new Date(notification.created))) }}</span>
+              </template>
+              <span>{{ $d(new Date(notification.created), "long") }}</span>
+            </v-tooltip>
           </v-list-item-subtitle>
 
           <v-list-item-subtitle>
@@ -52,10 +63,6 @@
             <span>{{ $t("notifications.more_information") }}</span>
           </v-tooltip>
         </v-list-item-action>
-
-        <v-list-item-icon>
-          <v-chip color="primary">{{ notification.sender }}</v-chip>
-        </v-list-item-icon>
       </v-list-item>
     </template>
   </ApolloMutation>
@@ -69,5 +76,15 @@ export default {
       required: true,
     },
   },
+  methods: {
+    dateFormat(date) {
+      let now = new Date();
+      if (now.getFullYear() === date.getFullYear() && now.getMonth() === date.getMonth() && now.getDate() === date.getDate()) {
+        return "timeOnly"
+      } else {
+        return "short"
+      }
+    }
+  }
 };
 </script>