fix: improve notifications management

layouts/default.vue

@@ -85,8 +85,8 @@
 			</div>
 			<Popover ref="notificationsPanel">
 				<Accordion v-if="reverseNotifications.length" class="box-border w-96 max-w-[calc(100vw-16px)]" expand-icon="pi pi-chevron-right">
-					<AccordionPanel v-for="notification in reverseNotifications" :key="notification.id" :value="notification.id">
-						<AccordionHeader>{{ notification.subject }}</AccordionHeader>
+					<AccordionPanel v-for="notification in reverseNotifications" :key="notification.id" :value="notification.id" @click="markNotificationAsRead(notification.id)">
+						<AccordionHeader :class="{ '!font-normal': notification.status !== 'inbox' }">{{ notification.subject }}</AccordionHeader>
 						<AccordionContent>
 							<!-- eslint-disable-next-line vue/no-v-html -->
 							<span v-if="notification.message" class="notification" v-html="notification.message"/>
@@ -132,10 +132,16 @@
 	const notificationsPanel = ref();
 	const toggleNotifications = async (event: Event) => {
 		notificationsPanel.value.toggle(event);
+	};
+	const markNotificationAsRead = async (id: string) => {
+		const notification = notifications.value.find(notification => notification.id === id);
 
-		if (newNotifications.value.length) {
-			await $directus.request(updateNotifications(newNotifications.value.map(notification => notification.id), { status: 'archived' }));
+		if (!notification) {
+			return;
 		}
+
+		notification.status = 'archived';
+		await $directus.request(updateNotifications([ notification.id ], { status: notification.status }));
 	};
 
 	const { data: notifications } = await useAsyncData('directus_notifications', async () => {