Adding alerted scene to stashes.

assets/components/header/header.vue

@@ -85,14 +85,14 @@
 			<Tooltip v-if="me">
 				<div
 					class="header-button header-notifications"
-					:class="{ unseen: unseenNotifications.length > 0 }"
+					:class="{ unseen: unseenNotificationsCount > 0 }"
 				>
 					<Icon icon="bell2" />
 
 					<span
-						v-if="unseenNotifications.length > 0"
+						v-if="unseenNotificationsCount > 0"
 						class="notifications-count"
-					>{{ unseenNotifications.length }}</span>
+					>{{ unseenNotificationsCount }}</span>
 				</div>
 
 				<template v-slot:tooltip>
@@ -115,8 +115,6 @@
 				</template>
 			</Tooltip>
 
-			<Search class="search-full" />
-
 			<Tooltip
 				class="search-compact"
 				:open="searching"
@@ -139,6 +137,8 @@
 					/>
 				</template>
 			</Tooltip>
+
+			<Search class="search-full" />
 		</div>
 	</header>
 </template>
@@ -154,12 +154,8 @@ function me() {
 	return this.$store.state.auth.user;
 }
 
-function notifications() {
-	return this.$store.state.ui.notifications;
-}
-
-function unseenNotifications() {
-	return this.$store.state.ui.notifications.filter(notification => !notification.seen);
+function unseenNotificationsCount() {
+	return this.$store.state.ui.unseenNotificationsCount;
 }
 
 export default {
@@ -178,8 +174,7 @@ export default {
 	},
 	computed: {
 		me,
-		notifications,
-		unseenNotifications,
+		unseenNotificationsCount,
 	},
 };
 </script>
@@ -315,12 +310,12 @@ export default {
 }
 
 .header-account {
-	padding: 1rem 1rem 1rem .75rem;
+	padding: 1rem 1.25rem 1rem .75rem;
 }
 
 .header-notifications {
 	position: relative;
-	padding: 1rem .75rem 1rem 1rem;
+	padding: 1rem .75rem;
 
 	&.unseen .icon {
 		fill: var(--primary);
@@ -334,7 +329,7 @@ export default {
 	justify-content: center;
 	position: absolute;
 	bottom: .3rem;
-	left: .1rem;
+	left: 0;
 	color: var(--primary);
 	font-size: .6rem;
 	font-weight: bold;

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;
 }

assets/components/header/search.vue

@@ -51,6 +51,7 @@ export default {
 			query: this.$route.query ? this.$route.query.q : null,
 		};
 	},
+	emits: ['search'],
 	watch: {
 		$route: route,
 		searching,
@@ -71,8 +72,8 @@ export default {
     flex-grow: 1;
     align-items: center;
     justify-content: flex-end;
-    padding: 0 1rem 0 0;
     border-left: solid 1px var(--shadow-hint);
+	margin: 0 .25rem 0 0;
 
     &.compact {
         padding: 0;
@@ -92,7 +93,7 @@ export default {
 .search-input {
     height: 100%;
     width: 100%;
-    padding: .5rem 0 .5rem .5rem;
+    padding: .5rem 0 .5rem .75rem;
     border: none;
     color: var(--text);
     background: var(--background);
@@ -119,14 +120,20 @@ export default {
         }
     }
 
-    &:focus::placeholder {
-        color: var(--shadow-weak);
+    &:focus {
+		&::placeholder {
+			color: var(--shadow-weak);
+		}
+
+		& + .search-button:not(:hover) .icon {
+			fill: var(--shadow);
+		}
     }
 }
 
 .search-button {
     height: 100%;
-    padding: 0 1rem;
+    padding: 0 1.25rem 0 1rem;
     background: none;
     border: none;
     margin: .3rem 0 0 0;
@@ -140,7 +147,7 @@ export default {
         cursor: pointer;
 
         .icon {
-            fill: var(--shadow);
+            fill: var(--primary);
         }
     }
 }