Added dedicated notifications page.

assets/components/header/header.vue

@@ -96,7 +96,11 @@
 				</div>
 
 				<template v-slot:tooltip>
-					<Notifications />
+					<Notifications
+						:notifications="notifications"
+						:unseen-count="unseenNotificationsCount"
+						@check="fetchNotifications"
+					/>
 				</template>
 			</Tooltip>
 
@@ -154,8 +158,11 @@ function me() {
 	return this.$store.state.auth.user;
 }
 
-function unseenNotificationsCount() {
-	return this.$store.state.ui.unseenNotificationsCount;
+async function fetchNotifications() {
+	const { notifications, unseenCount } = await this.$store.dispatch('fetchNotifications');
+
+	this.notifications = notifications;
+	this.unseenNotificationsCount = unseenCount;
 }
 
 export default {
@@ -170,11 +177,19 @@ export default {
 			logo,
 			searching: false,
 			showFilters: false,
+			notifications: [],
+			unseenNotificationsCount: 0,
 		};
 	},
 	computed: {
 		me,
-		unseenNotificationsCount,
+	},
+	watch: {
+		me: fetchNotifications,
+	},
+	mounted: fetchNotifications,
+	methods: {
+		fetchNotifications,
 	},
 };
 </script>