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;