Improved alert notifications.

assets/components/header/header.vue

@@ -85,17 +85,18 @@
 			<Tooltip v-if="me">
 				<div
 					class="header-button header-notifications"
-					@click="showAddAlert = true"
+					:class="{ unseen: notifications.length > 0 }"
 				>
-					<Icon
-						icon="bell2"
-					/>
+					<Icon icon="bell2" />
+
+					<span
+						v-if="notifications.length > 0"
+						class="notifications-count"
+					>{{ notifications.length }}</span>
 				</div>
 
 				<template v-slot:tooltip>
-					<div
-						class="notifications"
-					>No notifications</div>
+					<Notifications />
 				</template>
 			</Tooltip>
 
@@ -138,19 +139,14 @@
 					/>
 				</template>
 			</Tooltip>
-
-			<AddAlert
-				v-if="showAddAlert"
-				@close="showAddAlert = false"
-			>Alert</AddAlert>
 		</div>
 	</header>
 </template>
 
 <script>
 import Menu from './menu.vue';
+import Notifications from './notifications.vue';
 import Search from './search.vue';
-import AddAlert from '../alerts/add.vue';
 
 import logo from '../../img/logo.svg';
 
@@ -158,11 +154,14 @@ function me() {
 	return this.$store.state.auth.user;
 }
 
+function notifications() {
+	return this.$store.state.ui.notifications;
+}
+
 export default {
-	AddAlert,
 	components: {
-		AddAlert,
 		Menu,
+		Notifications,
 		Search,
 	},
 	emits: ['toggleSidebar', 'showFilters'],
@@ -171,11 +170,11 @@ export default {
 			logo,
 			searching: false,
 			showFilters: false,
-			showAddAlert: false,
 		};
 	},
 	computed: {
 		me,
+		notifications,
 	},
 };
 </script>
@@ -315,7 +314,26 @@ export default {
 }
 
 .header-notifications {
+	position: relative;
 	padding: 1rem .75rem 1rem 1rem;
+
+	&.unseen .icon {
+		fill: var(--primary);
+	}
+}
+
+.notifications-count {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	bottom: .05rem;
+	left: .1rem;
+	color: var(--text-light);
+	font-size: .6rem;
+	font-weight: bold;
 }
 
 .account {
@@ -360,10 +378,6 @@ export default {
     }
 }
 
-.notifications {
-	padding: 1rem;
-}
-
 @media(max-width: $breakpoint-kilo) {
     .search-full {
         display: none;

assets/components/header/notifications.vue

@@ -0,0 +1,157 @@
+<template>
+	<div
+		class="notifications"
+	>
+		<div class="notifications-header">
+			<h4 class="notifications-title">Notifications</h4>
+
+			<div class="notifications-actions">
+				<Icon
+					icon="checkmark"
+					@click="clearNotifications"
+				/>
+
+				<Icon
+					icon="plus3"
+					@click="showAddAlert = true"
+				/>
+			</div>
+		</div>
+
+		<AddAlert
+			v-if="showAddAlert"
+			@close="showAddAlert = false"
+		>Alert</AddAlert>
+
+		<div class="notifications-body">
+			<span
+				v-if="notifications.length === 0"
+				class="notification"
+			>No notifications</span>
+
+			<ul
+				v-else
+				class="nolist"
+			>
+				<li
+					v-for="notification in notifications"
+					:key="`notification-${notification.id}`"
+					class="notification"
+				>
+					<router-link
+						:to="`/scene/${notification.scene.id}/${notification.scene.slug}`"
+						class="notification-link"
+					>
+						<img
+							:src="getPath(notification.scene.poster, 'thumbnail')"
+							class="poster"
+						>
+
+						<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>
+					</router-link>
+				</li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+import AddAlert from '../alerts/add.vue';
+
+function notifications() {
+	return this.$store.state.ui.notifications;
+}
+
+async function clearNotifications() {
+
+}
+
+export default {
+	components: {
+		AddAlert,
+	},
+	data() {
+		return {
+			showAddAlert: false,
+		};
+	},
+	computed: {
+		notifications,
+	},
+	methods: {
+		clearNotifications,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.notifications {
+	width: 30rem;
+}
+
+.notifications-header {
+	display: flex;
+	justify-content: space-between;
+
+	.icon {
+		padding: .5rem;
+		fill: var(--shadow);
+
+		:hover {
+			fill: var(--primary);
+			cursor: pointer;
+		}
+	}
+}
+
+.notifications-title {
+	display: inline-block;
+	padding: .5rem 1rem;
+	margin: 0;
+	color: var(--shadow);
+	font-size: 1rem;
+	font-weight: bold;
+}
+
+.notifications-body {
+	box-shadow: 0 0 3px var(--shadow-weak);
+}
+
+.notification {
+	display: block;
+
+	&:not(:last-child) {
+		border-bottom: solid 1px var(--shadow-hint);
+	}
+
+	&:hover {
+		color: var(--primary);
+	}
+}
+
+.notification-link {
+	display: flex;
+	color: inherit;
+	text-decoration: none;
+}
+
+.notification-body {
+	padding: .5rem 1rem;
+}
+
+.notification-tidbit {
+	font-weight: bold;
+}
+
+.poster {
+	width: 5rem;
+	height: 3rem;
+	object-fit: cover;
+	object-position: center;
+}
+</style>