feat: make NotificationList component 'stupid'

src/components/home/TheNavigation.vue

@@ -27,14 +27,18 @@
 		<div class="navbar-end">
 			<update/>
 			<NavbarTriggerButton
-				@click="openQuickActions"
+				@click="baseStore.setQuickActionsActive(true)"
 				v-shortcut="'Control+k'"
-				:pressed="quickActionsActive"
+				:pressed="baseStore.quickActionsActive"
 				:title="$t('keyboardShortcuts.quickSearch')"
 			>
 				<icon icon="search"/>
 			</NavbarTriggerButton>
-			<notifications/>
+			<NotificationList
+				:notifications="notifications"
+				:hasUnreadNotifications="hasUnreadNotifications"
+				@mark-notification-as-read="markNotificationAsRead"
+			/>
 			<div class="user">
 				<dropdown class="is-right" ref="usernameDropdown">
 					<template #trigger="{toggleOpen}">
@@ -99,7 +103,7 @@ import Update from '@/components/home/update.vue'
 import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
-import Notifications from '@/components/notifications/notifications.vue'
+import NotificationList from '@/components/notifications/NotificationList.vue'
 import Logo from '@/components/home/Logo.vue'
 import NavbarTriggerButton from '@/components/home/NavbarTriggerButton.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -110,6 +114,7 @@ import {getListTitle} from '@/helpers/getListTitle'
 import {useBaseStore} from '@/stores/base'
 import {useConfigStore} from '@/stores/config'
 import {useAuthStore} from '@/stores/auth'
+import {useNotificationStore} from '@/stores/notifications'
 
 const baseStore = useBaseStore()
 const currentList = computed(() => baseStore.currentList)
@@ -135,11 +140,15 @@ onMounted(async () => {
 	listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
 })
 
-const quickActionsActive = computed(() => baseStore.quickActionsActive)
+const {
+	notifications,
+	hasUnreadNotifications,
 
-function openQuickActions() {
-	baseStore.setQuickActionsActive(true)
-}
+	markNotificationAsRead,
+	startNotificationPulling,
+} = useNotificationStore()
+
+startNotificationPulling()
 </script>
 
 <style lang="scss" scoped>

src/components/notifications/NotificationList.vue

@@ -19,7 +19,7 @@
 					:key="n.id"
 					class="notification-item"
 					:notification="n"
-					@markNotificationAsRead="markNotificationAsRead(n)"
+					@markNotificationAsRead="emit('markNotificationAsRead', n)"
 				/>
 				<p class="nothing" v-if="notifications.length === 0">
 					{{ $t('notification.none') }}<br/>
@@ -34,12 +34,22 @@
 
 <script lang="ts" setup>
 import {ref} from 'vue'
-import {onClickOutside, tryOnUnmounted} from '@vueuse/core'
+import {onClickOutside} from '@vueuse/core'
+
+import type {INotification} from '@/modelTypes/INotification'
 
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 import NavbarTriggerButton from '@/components/home/NavbarTriggerButton.vue'
 import NotificationItem from '@/components/notifications/NotificationItem.vue'
-import {useNotificationStore} from '@/stores/notifications'
+
+defineProps<{
+	notifications: INotification[],
+	hasUnreadNotifications: boolean,
+}>()
+
+const emit = defineEmits<{
+	(e: 'markNotificationAsRead', notification: INotification): void
+}>()
 
 const modalIsOpen = ref(false)
 const popup = ref(null)
@@ -57,19 +67,8 @@ onClickOutside(
 		}
 		modalIsOpen.value = false
 	},
-	{ ignore: [toggleButton]},
+	{ignore: [toggleButton]},
 )
-
-const {
-	notifications,
-	hasUnreadNotifications,
-
-	startNotificationPulling,
-	markNotificationAsRead,
-} = useNotificationStore()
-
-const stopNotificationPulling = startNotificationPulling()
-tryOnUnmounted(stopNotificationPulling)
 </script>
 
 <style lang="scss" scoped>

src/stores/notifications.ts

@@ -1,7 +1,9 @@
+import {acceptHMRUpdate, defineStore} from 'pinia'
 import {computed, ref} from 'vue'
+import {tryOnUnmounted} from '@vueuse/core'
+
 import type {INotification} from '@/modelTypes/INotification'
 import NotificationService from '@/services/notification'
-import {acceptHMRUpdate, defineStore} from 'pinia'
 import {findIndexById} from '@/helpers/utils'
 
 const NOTIFICATIONS_PULL_INTERVAL = 10000
@@ -22,7 +24,7 @@ export const useNotificationStore = defineStore('notification', () => {
 	const notificationService = new NotificationService()
 
 	async function loadNotifications() {
-		allNotifications.value = await notificationService.getAll()
+		allNotifications.value = await notificationService.getAll() as INotification[]
 	}
 
 	function startNotificationPulling() {
@@ -35,7 +37,7 @@ export const useNotificationStore = defineStore('notification', () => {
 		clearInterval(interval)
 	}
 
-	async function markNotificationAsRead(notificationItem: INotification) {
+	async function markNotificationAsRead(notificationItem: INotification): Promise<INotification | undefined> {
 		const index = findIndexById(allNotifications.value, notificationItem.id)
 		if (index === -1) {
 			return
@@ -49,6 +51,8 @@ export const useNotificationStore = defineStore('notification', () => {
 		await notificationService.update(allNotifications.value[index])
 	}
 
+	tryOnUnmounted(stopNotificationPulling)
+
 	return {
 		notifications,
 		unreadNotifications,