Added dedicated notifications page.

assets/components/notifications/notifications.vue

@@ -0,0 +1,76 @@
+<template>
+	<div
+		ref="page"
+		class="notifications-container"
+	>
+		<h1 class="heading">Notifications</h1>
+
+		<ul class="notifications nolist">
+			<li
+				v-for="notification in notifications"
+				:key="notification.id"
+			>
+				<SceneTile :release="notification.scene" />
+			</li>
+		</ul>
+
+		<Pagination
+			:items-total="totalCount"
+			:items-per-page="10"
+		/>
+	</div>
+</template>
+
+<script>
+import Pagination from '../pagination/pagination.vue';
+import SceneTile from '../releases/scene-tile.vue';
+
+async function fetchNotifications() {
+	const { notifications, totalCount, unseenCount } = await this.$store.dispatch('fetchNotifications', {
+		page: this.$route.params.pageNumber,
+		limit: this.limit,
+	});
+
+	this.notifications = notifications;
+	this.unseenNotificationsCount = unseenCount;
+	this.totalCount = totalCount;
+
+	this.$emit('scroll');
+}
+
+export default {
+	components: {
+		Pagination,
+		SceneTile,
+	},
+	data() {
+		return {
+			notifications: [],
+			limit: 10,
+			totalCount: 0,
+			unseenNotificationsCount: 0,
+		};
+	},
+	emits: ['scroll'],
+	watch: {
+		$route: fetchNotifications,
+	},
+	mounted: fetchNotifications,
+};
+</script>
+
+<style lang="scss" scoped>
+.notifications-container {
+	padding: 1rem;
+}
+
+.notifications {
+	display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
+	grid-gap: .5rem;
+}
+
+.pagination {
+	margin: 1rem 0 0 0;
+}
+</style>