Loading notifications async.

components/header/header.vue

@@ -105,73 +105,10 @@
 					</button>
 
 					<template #popper>
-						<div class="menu">
+						<Notifications
-							<div class="notifs-header">
+							@unseen="(count) => unseen = count"
-								<h4 class="notifs-heading">Notifications</h4>
+							@add-alert="showAlertDialog = true"
-
-								<div
-									class="notifs-actions"
-								>
-									<Icon
-										icon="stack-check"
-										@click="markAllSeen"
 						/>
-
-									<Icon
-										v-close-popper
-										icon="plus3"
-										@click="showAlertDialog = true"
-									/>
-								</div>
-							</div>
-
-							<ul class="notifs nolist">
-								<li
-									v-for="notif in notifications"
-									:key="notif.id"
-									class="notif"
-									:class="{ unseen: !notif.isSeen }"
-									@click="markSeen(notif)"
-								>
-									<a
-										:href="`/scene/${notif.scene.id}/${notif.scene.slug}`"
-										target="_blank"
-										class="notif-body notif-link nolink"
-									>
-										<span class="notif-details">
-											New
-
-											<span
-												v-if="notif.matchedTags.length > 0"
-												class="notif-tags"
-											>{{ notif.matchedTags.map((tag) => tag.name).join(', ') }}</span>
-
-											scene
-
-											<span
-												v-if="notif.matchedActors.length > 0"
-												class="notif-actors"
-											>with {{ notif.matchedActors.map((actor) => actor.name).join(', ') }}&nbsp;</span>
-
-											<span
-												v-if="notif.matchedEntity"
-												class="notif-entities"
-											>for {{ notif.matchedEntity.name }}&nbsp;</span>
-
-											<span
-												v-if="notif.matchedExpressions.length > 0"
-												class="notif-entities"
-											>matching {{ notif.matchedExpressions.map((match) => match.expression).join(', ') }}</span>
-										</span>
-
-										<span class="notif-scene">
-											<span class="notif-date">{{ formatDate(notif.scene.effectiveDate, 'MMM d') }}</span>
-											<span class="notif-title ellipsis">{{ notif.scene.title }}</span>
-										</span>
-									</a>
-								</li>
-							</ul>
-						</div>
 					</template>
 				</VDropdown>
 
@@ -269,10 +206,10 @@ import {
 } from 'vue';
 
 import navigate from '#/src/navigate.js';
-import { get, patch, del } from '#/src/api.js';
+import { del } from '#/src/api.js';
-import { formatDate } from '#/utils/format.js';
 // import getPath from '#/src/get-path.js';
 
+import Notifications from '#/components/header/notifications.vue';
 import Settings from '#/components/settings/settings.vue';
 import AlertDialog from '#/components/alerts/create.vue';
 
@@ -281,9 +218,7 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
 const pageContext = inject('pageContext');
 
 const user = pageContext.user;
-const notifications = ref(pageContext.notifications.notifications);
+const unseen = ref(pageContext.meta.unseenNotifications);
-const unseen = ref(pageContext.notifications.unseen);
-const done = ref(true);
 const query = ref(pageContext.urlParsed.search.q || '');
 const allowLogin = pageContext.env.allowLogin;
 const searchFocused = ref(false);
@@ -297,41 +232,6 @@ function search() {
 	navigate('/search', { q: query.value }, { redirect: true });
 }
 
-async function fetchNotifications() {
-	const res = await get(`/users/${user?.id}/notifications`);
-
-	notifications.value = res.notifications;
-	unseen.value = res.unseen;
-}
-
-async function markSeen(notif) {
-	if (notif.isSeen || !done.value) {
-		return;
-	}
-
-	done.value = false;
-
-	await patch(`/users/${user?.id}/notifications/${notif.id}`, {
-		seen: true,
-	});
-
-	await fetchNotifications();
-
-	done.value = true;
-}
-
-async function markAllSeen() {
-	done.value = false;
-
-	await patch(`/users/${user?.id}/notifications`, {
-		seen: true,
-	});
-
-	await fetchNotifications();
-
-	done.value = true;
-}
-
 async function logout() {
 	await del('/session');
 	navigate('/login', null, { redirect: true });
@@ -514,119 +414,6 @@ function blurSearch(event) {
 	fill: var(--shadow);
 }
 
-.notifs {
-	width: 30rem;
-	height: 20rem;
-	max-width: 100%;
-	max-height: 100%;
-	overflow-y: auto;
-	overflow-x: hidden;
-}
-
-.notifs-header {
-	display: flex;
-	justify-content: space-between;
-	box-shadow: inset 0 0 3px var(--shadow-weak-30);
-
-	.icon {
-		fill: var(--shadow-strong-10);
-
-		&:hover {
-			fill: var(--primary);
-			cursor: pointer;
-		}
-	}
-}
-
-.notifs-heading {
-	font-size: 1rem;
-	padding: .75rem 1rem;
-	margin: 0;
-	font-weight: normal;
-}
-
-.notifs-actions {
-	align-items: stretch;
-
-	.icon {
-		height: 100%;
-		padding: 0 .75rem;
-
-		&:last-child {
-			padding-right: 1rem;
-		}
-	}
-}
-
-.notif {
-	display: flex;
-	align-items: center;
-	width: 100%;
-	overflow: hidden;
-
-	&:not(:last-child) {
-		border-bottom: solid 1px var(--shadow-weak-40);
-	}
-
-	&:before {
-		width: 2.5rem;
-		flex-shrink: 0;
-		content: '•';
-		color: var(--shadow-weak-20);
-		text-align: center;
-	}
-
-	&.unseen:before {
-		color: var(--primary);
-	}
-
-	&.unseen:hover:before {
-		content: '✓';
-	}
-}
-
-.notif-body {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-	overflow: hidden;
-	box-sizing: border-box;
-	font-size: .9rem;
-}
-
-.notif-details {
-	padding: .5rem 0 .15rem 0;
-	box-sizing: border-box;
-	color: var(--shadow-strong);
-	font-weight: bold;
-}
-
-.notif-link {
-	overflow: hidden;
-}
-
-.notif-scene {
-	display: flex;
-	padding: .15rem 0 .5rem 0;
-}
-
-.notif-date {
-	flex-shrink: 0;
-	color: var(--shadow-strong-10);
-
-	&:after {
-		content: '•';
-		padding: 0 .5rem;
-		color: var(--shadow-weak-20);
-	}
-}
-
-.notif-thumb {
-	width: 5rem;
-	height: 3rem;
-	object-fit: cover;
-}
-
 .login {
 	display: flex;
 	align-items: center;

components/header/notifications.vue

@@ -0,0 +1,245 @@
+<template>
+	<div class="menu">
+		<div class="notifs-header">
+			<h4 class="notifs-heading">Notifications</h4>
+
+			<div
+				class="notifs-actions"
+			>
+				<Icon
+					icon="stack-check"
+					@click="markAllSeen"
+				/>
+
+				<Icon
+					v-close-popper
+					icon="plus3"
+					@click="emit('addAlert')"
+				/>
+			</div>
+		</div>
+
+		<ul class="notifs nolist">
+			<li
+				v-for="notif in notifications"
+				:key="notif.id"
+				class="notif"
+				:class="{ unseen: !notif.isSeen }"
+				@click="markSeen(notif)"
+			>
+				<a
+					:href="`/scene/${notif.scene.id}/${notif.scene.slug}`"
+					target="_blank"
+					class="notif-body notif-link nolink"
+				>
+					<span class="notif-details">
+						New
+
+						<span
+							v-if="notif.matchedTags.length > 0"
+							class="notif-tags"
+						>{{ notif.matchedTags.map((tag) => tag.name).join(', ') }}</span>
+
+						scene
+
+						<span
+							v-if="notif.matchedActors.length > 0"
+							class="notif-actors"
+						>with {{ notif.matchedActors.map((actor) => actor.name).join(', ') }}&nbsp;</span>
+
+						<span
+							v-if="notif.matchedEntity"
+							class="notif-entities"
+						>for {{ notif.matchedEntity.name }}&nbsp;</span>
+
+						<span
+							v-if="notif.matchedExpressions.length > 0"
+							class="notif-entities"
+						>matching {{ notif.matchedExpressions.map((match) => match.expression).join(', ') }}</span>
+					</span>
+
+					<span class="notif-scene">
+						<span class="notif-date">{{ formatDate(notif.scene.effectiveDate, 'MMM d') }}</span>
+						<span class="notif-title ellipsis">{{ notif.scene.title }}</span>
+					</span>
+				</a>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script setup>
+import {
+	ref,
+	defineEmits,
+	onMounted,
+	inject,
+} from 'vue';
+
+import { get, patch } from '#/src/api.js';
+import { formatDate } from '#/utils/format.js';
+
+const pageContext = inject('pageContext');
+const user = pageContext.user;
+
+const notifications = ref([]);
+const done = ref(true);
+
+const emit = defineEmits(['unseen', 'addAlert']);
+
+async function fetchNotifications() {
+	const res = await get(`/users/${user?.id}/notifications`);
+
+	notifications.value = res.notifications;
+
+	emit('unseen', res.unseen);
+}
+
+async function markSeen(notif) {
+	if (notif.isSeen || !done.value) {
+		return;
+	}
+
+	done.value = false;
+
+	await patch(`/users/${user?.id}/notifications/${notif.id}`, {
+		seen: true,
+	});
+
+	await fetchNotifications();
+
+	done.value = true;
+}
+
+async function markAllSeen() {
+	done.value = false;
+
+	await patch(`/users/${user?.id}/notifications`, {
+		seen: true,
+	});
+
+	await fetchNotifications();
+
+	done.value = true;
+}
+
+onMounted(async () => {
+	await fetchNotifications();
+});
+</script>
+
+<style scoped>
+.notifs {
+	width: 30rem;
+	height: 20rem;
+	max-width: 100%;
+	max-height: 100%;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+.notifs-header {
+	display: flex;
+	justify-content: space-between;
+	box-shadow: inset 0 0 3px var(--shadow-weak-30);
+
+	.icon {
+		fill: var(--shadow-strong-10);
+
+		&:hover {
+			fill: var(--primary);
+			cursor: pointer;
+		}
+	}
+}
+
+.notifs-heading {
+	font-size: 1rem;
+	padding: .75rem 1rem;
+	margin: 0;
+	font-weight: normal;
+}
+
+.notifs-actions {
+	align-items: stretch;
+
+	.icon {
+		height: 100%;
+		padding: 0 .75rem;
+
+		&:last-child {
+			padding-right: 1rem;
+		}
+	}
+}
+
+.notif {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	overflow: hidden;
+
+	&:not(:last-child) {
+		border-bottom: solid 1px var(--shadow-weak-40);
+	}
+
+	&:before {
+		width: 2.5rem;
+		flex-shrink: 0;
+		content: '•';
+		color: var(--shadow-weak-20);
+		text-align: center;
+	}
+
+	&.unseen:before {
+		color: var(--primary);
+	}
+
+	&.unseen:hover:before {
+		content: '✓';
+	}
+}
+
+.notif-body {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow: hidden;
+	box-sizing: border-box;
+	font-size: .9rem;
+}
+
+.notif-details {
+	padding: .5rem 0 .15rem 0;
+	box-sizing: border-box;
+	color: var(--shadow-strong);
+	font-weight: bold;
+}
+
+.notif-link {
+	overflow: hidden;
+}
+
+.notif-scene {
+	display: flex;
+	padding: .15rem 0 .5rem 0;
+}
+
+.notif-date {
+	flex-shrink: 0;
+	color: var(--shadow-strong-10);
+
+	&:after {
+		content: '•';
+		padding: 0 .5rem;
+		color: var(--shadow-weak-20);
+	}
+}
+
+.notif-thumb {
+	width: 5rem;
+	height: 3rem;
+	object-fit: cover;
+}
+
+</style>

renderer/+config.h.js

@@ -6,6 +6,6 @@ export default {
 		'urlParsed',
 		'env',
 		'user',
-		'notifications',
+		'meta',
 	],
 };

src/alerts.js

@@ -145,12 +145,26 @@ export async function removeAlert(alertId, reqUser) {
 		.delete();
 }
 
+export async function fetchUnseenNotificationsCount(reqUser) {
+	if (!reqUser) {
+		return null;
+	}
+
+	const rawUnseen = await knex('notifications')
+		.select(knex.raw('count(id)'))
+		.where('user_id', reqUser.id)
+		.where('seen', false)
+		.first();
+
+	return Number(rawUnseen.count);
+}
+
 export async function fetchNotifications(reqUser, options = {}) {
 	if (!reqUser) {
 		return [];
 	}
 
-	const [notifications, rawUnseen] = await Promise.all([
+	const [notifications, unseen] = await Promise.all([
 		knex('notifications')
 			.select(
 				'notifications.*',
@@ -169,15 +183,10 @@ export async function fetchNotifications(reqUser, options = {}) {
 			.limit(options.limit)
 			.groupBy('notifications.id', 'alerts.id')
 			.orderBy('created_at', 'desc'),
-		knex('notifications')
+		fetchUnseenNotificationsCount(reqUser),
-			.select(knex.raw('count(id)'))
-			.where('user_id', reqUser.id)
-			.where('seen', false)
-			.first(),
 	]);
 
 	const scenes = await fetchScenesById(notifications.map((notification) => notification.scene_id));
-	const unseen = Number(rawUnseen.count);
 
 	const curatedNotifications = notifications.map((notification) => {
 		const scene = scenes.find((sceneX) => sceneX.id === notification.scene_id);

src/web/server.js

@@ -52,7 +52,7 @@ import {
 	updateNotificationsApi,
 } from './alerts.js';
 
-import { fetchNotifications } from '../alerts.js';
+import { fetchUnseenNotificationsCount } from '../alerts.js';
 
 import initLogger from '../logger.js';
 
@@ -168,7 +168,7 @@ export default async function initServer() {
 	router.get('/api/tags', fetchTagsApi);
 
 	router.get('*', async (req, res, next) => {
-		const notifications = await fetchNotifications(req.user, { limit: 20 });
+		const unseenNotifications = await fetchUnseenNotificationsCount(req.user);
 
 		const pageContextInit = {
 			urlOriginal: req.originalUrl,
@@ -191,7 +191,9 @@ export default async function initServer() {
 				maxAggregateSize: config.database.manticore.maxAggregateSize,
 				media: config.media,
 			},
-			notifications,
+			meta: {
+				unseenNotifications,
+			},
 		};
 
 		const pageContext = await renderPage(pageContextInit);