Improved alert notifications.

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>