Added notification clear, improved notification styling.

assets/components/header/header.vue

@@ -85,14 +85,14 @@
 			<Tooltip v-if="me">
 				<div
 					class="header-button header-notifications"
-					:class="{ unseen: notifications.length > 0 }"
+					:class="{ unseen: unseenNotifications.length > 0 }"
 				>
 					<Icon icon="bell2" />
 
 					<span
-						v-if="notifications.length > 0"
+						v-if="unseenNotifications.length > 0"
 						class="notifications-count"
-					>{{ notifications.length }}</span>
+					>{{ unseenNotifications.length }}</span>
 				</div>
 
 				<template v-slot:tooltip>
@@ -158,6 +158,10 @@ function notifications() {
 	return this.$store.state.ui.notifications;
 }
 
+function unseenNotifications() {
+	return this.$store.state.ui.notifications.filter(notification => !notification.seen);
+}
+
 export default {
 	components: {
 		Menu,
@@ -175,6 +179,7 @@ export default {
 	computed: {
 		me,
 		notifications,
+		unseenNotifications,
 	},
 };
 </script>
@@ -324,14 +329,13 @@ export default {
 
 .notifications-count {
 	width: 100%;
-	height: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	position: absolute;
-	bottom: .05rem;
+	bottom: .3rem;
 	left: .1rem;
-	color: var(--text-light);
+	color: var(--primary);
 	font-size: .6rem;
 	font-weight: bold;
 }

assets/components/header/notifications.vue

@@ -7,8 +7,10 @@
 
 			<div class="notifications-actions">
 				<Icon
+					v-if="unseenNotifications.length > 0"
+					v-tooltip="'Mark all as seen'"
 					icon="checkmark"
-					@click="clearNotifications"
+					@click="checkNotifications"
 				/>
 
 				<Icon
@@ -26,7 +28,7 @@
 		<div class="notifications-body">
 			<span
 				v-if="notifications.length === 0"
-				class="notification"
+				class="notifications-empty"
 			>No notifications</span>
 
 			<ul
@@ -36,7 +38,9 @@
 				<li
 					v-for="notification in notifications"
 					:key="`notification-${notification.id}`"
+					:class="{ unseen: !notification.seen }"
 					class="notification"
+					@click="checkNotification(notification.id)"
 				>
 					<router-link
 						:to="`/scene/${notification.scene.id}/${notification.scene.slug}`"
@@ -48,11 +52,52 @@
 						>
 
 						<div class="notification-body">
-							New<span
-								v-if="notification.alert.tags?.length > 0"
-								class="notification-tidbit"
-							>&nbsp;{{ notification.alert.tags.map(tag => tag.name).join(', ') }}</span> scene<template v-if="notification.alert.actors?.length > 0">&nbsp;with <span class="notification-tidbit">{{ notification.alert.actors.map(actor => actor.name).join(', ') }}</span></template>
+							<div class="notification-row notification-title">
+								<img
+									v-if="notification.scene.entity.type === 'network' || notification.scene.entity.independent"
+									:src="`/img/logos/${notification.scene.entity.slug}/favicon_dark.png`"
+									class="notification-favicon"
+								>
+
+								<img
+									v-else
+									:src="`/img/logos/${notification.scene.entity.parent.slug}/favicon_dark.png`"
+									class="notification-favicon"
+								>
+
+								New&nbsp;<ul
+									v-if="notification.alert.tags.length > 0"
+									class="nolist notification-tags"
+								>
+									<li
+										v-for="tag in notification.alert.tags"
+										:key="`notification-tag-${tag.slug}`"
+										class="notification-tag"
+									>{{ tag.name }}</li>&nbsp;
+								</ul>scene
+							</div>
+
+							<div class="notification-row">
+								<ul
+									v-if="notification.scene.actors.length > 0"
+									class="nolist notification-actors"
+								>
+									<li
+										v-for="actor in notification.scene.actors"
+										:key="`notification-actor-${actor.slug}`"
+										class="notification-actor"
+									>{{ actor.name }}</li>
+								</ul>
+							</div>
 						</div>
+
+						<Icon
+							v-if="!notification.seen"
+							v-tooltip="'Mark as seen'"
+							icon="checkmark"
+							class="notification-check"
+							@click.prevent="checkNotification(notification.id)"
+						/>
 					</router-link>
 				</li>
 			</ul>
@@ -67,8 +112,18 @@ function notifications() {
 	return this.$store.state.ui.notifications;
 }
 
-async function clearNotifications() {
+function unseenNotifications() {
+	return this.notifications.filter(notification => !notification.seen);
+}
 
+async function checkNotifications() {
+	await this.$store.dispatch('checkNotifications');
+	await this.$store.dispatch('fetchNotifications');
+}
+
+async function checkNotification(notificationId) {
+	await this.$store.dispatch('checkNotification', notificationId);
+	await this.$store.dispatch('fetchNotifications');
 }
 
 export default {
@@ -82,9 +137,11 @@ export default {
 	},
 	computed: {
 		notifications,
+		unseenNotifications,
 	},
 	methods: {
-		clearNotifications,
+		checkNotifications,
+		checkNotification,
 	},
 };
 </script>
@@ -122,11 +179,23 @@ export default {
 	box-shadow: 0 0 3px var(--shadow-weak);
 }
 
+.notifications-empty {
+	padding: 1rem;
+}
+
 .notification {
 	display: block;
+	margin: 0 0 -1px 0;
+
+	&.unseen {
+		border-right: solid .5rem var(--primary);
+	}
 
 	&:not(:last-child) {
-		border-bottom: solid 1px var(--shadow-hint);
+		.notification-body,
+		.notification-check {
+			border-bottom: solid 1px var(--shadow-hint);
+		}
 	}
 
 	&:hover {
@@ -136,18 +205,67 @@ export default {
 
 .notification-link {
 	display: flex;
+	align-items: stretch;
 	color: inherit;
 	text-decoration: none;
 }
 
 .notification-body {
-	padding: .5rem 1rem;
+	flex-grow: 1;
+	padding: .4rem 1rem .25rem .5rem;
+}
+
+.notification-row {
+	display: flex;
+	align-items: center;
+
+	&:not(:last-child) {
+		margin: 0 0 .1rem 0;
+	}
 }
 
 .notification-tidbit {
 	font-weight: bold;
 }
 
+.notification-favicon {
+	width: 1rem;
+	height: 1rem;
+	margin: 0 .5rem 0 0;
+}
+
+.notification-actors {
+	height: 1.1rem;
+	display: inline-block;
+	overflow: hidden;
+}
+
+.notification-actor,
+.notification-tag {
+	&:not(:last-child)::after {
+		content: ',';
+		padding: 0 .1rem 0 0;
+	}
+}
+
+.notification-actor {
+	color: var(--shadow-strong);
+	font-size: .9rem;
+}
+
+.notification-tag {
+	font-weight: bold;
+}
+
+.notification-check {
+	padding: 1rem;
+	fill: var(--shadow-weak);
+
+	&:hover {
+		fill: var(--primary);
+	}
+}
+
 .poster {
 	width: 5rem;
 	height: 3rem;