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;