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

assets/js/auth/actions.js

@@ -1,6 +1,6 @@
 import { get, post, del } from '../api';
 
-function initAuthActions(_store, _router) {
+function initAuthActions(store, _router) {
 	async function fetchMe({ commit }) {
 		try {
 			const user = await get('/session');
@@ -18,6 +18,7 @@ function initAuthActions(_store, _router) {
 		const user = await post('/session', credentials);
 
 		commit('setUser', user);
+		await store.dispatch('fetchNotifications');
 
 		return user;
 	}

assets/js/ui/actions.js

@@ -34,7 +34,7 @@ function initUiActions(store, _router) {
 			return [];
 		}
 
-		const { notifications } = await graphql(`
+		const { notifications, unseenNotifications } = await graphql(`
             query Notifications(
 				$hasAuth: Boolean!
 				$userId: Int
@@ -76,6 +76,11 @@ function initUiActions(store, _router) {
 						}
 					}
                 }
+				unseenNotifications: notificationsConnection(
+					filter: { seen: { equalTo: false } }
+				) {
+					totalCount
+				}
             }
         `, {
 			hasAuth: !!store.state.auth.user,
@@ -85,7 +90,12 @@ function initUiActions(store, _router) {
 		const curatedNotifications = notifications.map(notification => curateNotification(notification));
 
 		commit('setNotifications', curatedNotifications);
-		return curatedNotifications;
+		commit('setUnseenNotificationsCount', unseenNotifications.totalCount);
+
+		return {
+			notifications: curatedNotifications,
+			unseenCount: unseenNotifications.totalCount,
+		};
 	}
 
 	async function checkNotification(context, notificationId) {
@@ -198,8 +208,8 @@ function initUiActions(store, _router) {
 		});
 
 		return {
-			releases: res.results.map(result => curateRelease(result.release)),
-			actors: res.actors.map(actor => curateActor(actor)),
+			releases: res?.results.map(result => curateRelease(result.release)) || [],
+			actors: res?.actors.map(actor => curateActor(actor)) || [],
 		};
 	}
 

assets/js/ui/mutations.js

@@ -2,6 +2,10 @@ function setNotifications(state, notifications) {
 	state.notifications = notifications;
 }
 
+function setUnseenNotificationsCount(state, count) {
+	state.unseenNotificationsCount = count;
+}
+
 function setTagFilter(state, tagFilter) {
 	state.tagFilter = tagFilter;
 }
@@ -24,6 +28,7 @@ function setTheme(state, theme) {
 
 export default {
 	setNotifications,
+	setUnseenNotificationsCount,
 	setTagFilter,
 	setRange,
 	setBatch,

assets/js/ui/state.js

@@ -12,4 +12,5 @@ export default {
 	sfw: storedSfw === 'true' || false,
 	theme: storedTheme || deviceTheme,
 	notifications: [],
+	unseenNotificationsCount: 0,
 };