Improved alerts overview.

components/header/notifications.vue

@@ -19,7 +19,10 @@
 			</div>
 		</div>
 
-		<ul class="notifs nolist">
+		<ul
+			v-if="done"
+			class="notifs nolist"
+		>
 			<li
 				v-for="notif in notifications"
 				:key="notif.id"
@@ -32,30 +35,34 @@
 					target="_blank"
 					class="notif-body notif-link nolink"
 				>
-					<span class="notif-details">
-						New
+					<span class="notif-trigger">
+						<span class="notif-details">
+							New
+
+							<template
+								v-if="notif.matchedTags.length > 0"
+							>{{ notif.matchedTags.map((tag) => tag.name).join(', ') }}</template>
+
+							scene
+
+							<template
+								v-if="notif.matchedActors.length > 0"
+							>with {{ notif.matchedActors.map((actor) => actor.name).join(', ') }}&nbsp;</template>
+
+							<template
+								v-if="notif.matchedEntity"
+							>for {{ notif.matchedEntity.name }}&nbsp;</template>
+
+							<template
+								v-if="notif.matchedExpressions.length > 0"
+							>matching {{ notif.matchedExpressions.map((match) => match.expression).join(', ') }}</template>
+						</span>
 
 						<span
-							v-if="notif.matchedTags.length > 0"
-							class="notif-tags"
-						>{{ notif.matchedTags.map((tag) => tag.name).join(', ') }}</span>
-
-						scene
-
-						<span
-							v-if="notif.matchedActors.length > 0"
-							class="notif-actors"
-						>with {{ notif.matchedActors.map((actor) => actor.name).join(', ') }}&nbsp;</span>
-
-						<span
-							v-if="notif.matchedEntity"
-							class="notif-entities"
-						>for {{ notif.matchedEntity.name }}&nbsp;</span>
-
-						<span
-							v-if="notif.matchedExpressions.length > 0"
-							class="notif-entities"
-						>matching {{ notif.matchedExpressions.map((match) => match.expression).join(', ') }}</span>
+							v-if="notif.alertId"
+							class="notif-id"
+							title="Alert ID"
+						>#{{ notif.alertId }}</span>
 					</span>
 
 					<span class="notif-scene">
@@ -65,6 +72,11 @@
 				</a>
 			</li>
 		</ul>
+
+		<Ellipsis
+			v-else
+			class="notifs loading"
+		/>
 	</div>
 </template>
 
@@ -79,6 +91,8 @@ import {
 import { get, patch } from '#/src/api.js';
 import { formatDate } from '#/utils/format.js';
 
+import Ellipsis from '#/components/loading/ellipsis.vue';
+
 const pageContext = inject('pageContext');
 const user = pageContext.user;
 
@@ -88,10 +102,13 @@ const done = ref(true);
 const emit = defineEmits(['unseen', 'addAlert']);
 
 async function fetchNotifications() {
-	const res = await get(`/users/${user?.id}/notifications`);
+	done.value = false;
 
+	const res = await get(`/users/${user?.id}/notifications`);
 	notifications.value = res.notifications;
 
+	done.value = true;
+
 	emit('unseen', res.unseen);
 }
 
@@ -131,13 +148,18 @@ onMounted(async () => {
 <style scoped>
 .notifs {
 	width: 30rem;
-	height: 20rem;
+	max-height: 20rem;
 	max-width: 100%;
-	max-height: 100%;
+	height: 100%;
 	overflow-y: auto;
 	overflow-x: hidden;
 }
 
+.loading {
+	display: flex;
+	justify-content: center;
+}
+
 .notifs-header {
 	display: flex;
 	justify-content: space-between;
@@ -209,13 +231,19 @@ onMounted(async () => {
 	font-size: .9rem;
 }
 
-.notif-details {
-	padding: .5rem 0 .15rem 0;
+.notif-trigger {
+	display: flex;
+	justify-content: space-between;
+	padding: .5rem 0 .1rem 0;
 	box-sizing: border-box;
 	color: var(--shadow-strong);
 	font-weight: bold;
 }
 
+.notif-details {
+	line-height: 1.25;
+}
+
 .notif-link {
 	overflow: hidden;
 }
@@ -242,4 +270,10 @@ onMounted(async () => {
 	object-fit: cover;
 }
 
+.notif-id {
+	padding:  0 .5rem;
+	color: var(--shadow-weak-10);
+	font-size: .9rem;
+	font-weight: normal;
+}
 </style>