Adding alerted scene to stashes.

assets/components/header/notifications.vue

@@ -1,13 +1,11 @@
 <template>
-	<div
-		class="notifications"
-	>
+	<div class="notifications">
 		<div class="notifications-header">
 			<h4 class="notifications-title">Notifications</h4>
 
 			<div class="notifications-actions">
 				<Icon
-					v-if="unseenNotifications.length > 0"
+					v-if="unseenNotificationsCount > 0"
 					v-tooltip="'Mark all as seen'"
 					icon="checkmark"
 					@click="checkNotifications"
@@ -40,7 +38,7 @@
 					:key="`notification-${notification.id}`"
 					:class="{ unseen: !notification.seen }"
 					class="notification"
-					@click="checkNotification(notification.id)"
+					@click="checkNotification(notification.id, true)"
 				>
 					<router-link
 						:to="`/scene/${notification.scene.id}/${notification.scene.slug}`"
@@ -100,14 +98,14 @@
 							v-tooltip="'Mark as seen'"
 							icon="checkmark"
 							class="notification-check"
-							@click.prevent="checkNotification(notification.id)"
+							@click.prevent.stop="checkNotification(notification.id)"
 						/>
 
 						<Icon
 							v-if="notification.alert"
 							v-tooltip="`You set an alert for <strong>${notification.alert.tags.map(tag => tag.name).join(', ') || 'all'}</strong> scenes with <strong>${notification.alert.actors.map(actor => actor.name).join(', ') || 'any actor'}</strong> for <strong>${notification.alert.entity?.name || 'any channel'}</strong>`"
 							icon="question5"
-							@click.prevent
+							@click.prevent.stop
 						/>
 					</router-link>
 				</li>
@@ -123,8 +121,8 @@ function notifications() {
 	return this.$store.state.ui.notifications;
 }
 
-function unseenNotifications() {
-	return this.notifications.filter(notification => !notification.seen);
+function unseenNotificationsCount() {
+	return this.$store.state.ui.unseenNotificationsCount;
 }
 
 async function checkNotifications() {
@@ -132,9 +130,13 @@ async function checkNotifications() {
 	await this.$store.dispatch('fetchNotifications');
 }
 
-async function checkNotification(notificationId) {
+async function checkNotification(notificationId, blur) {
 	await this.$store.dispatch('checkNotification', notificationId);
 	await this.$store.dispatch('fetchNotifications');
+
+	if (blur) {
+		this.events.emit('blur');
+	}
 }
 
 export default {
@@ -148,7 +150,7 @@ export default {
 	},
 	computed: {
 		notifications,
-		unseenNotifications,
+		unseenNotificationsCount,
 	},
 	methods: {
 		checkNotifications,
@@ -307,6 +309,7 @@ export default {
 
 .poster {
 	width: 6rem;
+	height: 3.6rem;
 	object-fit: cover;
 	object-position: center;
 }