From def270bd08e3a597602b11aefc6f847fedd7cb05 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 11 Nov 2022 20:28:41 +0100
Subject: [PATCH 1/6] feat: abstract NotificationItem in dedicated component

---
 src/components/home/NavbarTriggerButton.vue   |  32 ++
 src/components/home/TheNavigation.vue         |  26 +-
 .../notifications/NotificationItem.vue        | 165 ++++++++++
 .../notifications/notifications.vue           | 295 ++++++------------
 src/modelTypes/INotification.ts               |   2 +-
 src/models/notification.ts                    |  34 +-
 src/models/task.ts                            |  14 +-
 7 files changed, 314 insertions(+), 254 deletions(-)
 create mode 100644 src/components/home/NavbarTriggerButton.vue
 create mode 100644 src/components/notifications/NotificationItem.vue

diff --git a/src/components/home/NavbarTriggerButton.vue b/src/components/home/NavbarTriggerButton.vue
new file mode 100644
index 000000000..07011511f
--- /dev/null
+++ b/src/components/home/NavbarTriggerButton.vue
@@ -0,0 +1,32 @@
+<template>
+	<BaseButton
+		class="trigger-button"
+		:aria-pressed="pressed || undefined"
+	>
+		<slot />
+	</BaseButton>
+</template>
+
+<script setup lang="ts">
+import BaseButton from '@/components/base/BaseButton.vue'
+
+defineProps<{
+	pressed?: boolean
+}>()
+</script>
+
+<style scoped lang="scss">
+.trigger-button {
+	cursor: pointer;
+	color: var(--grey-400);
+	transition: $transition;
+	padding: .5rem;
+	font-size: 1.25rem;
+	position: relative;
+	width: $navbar-icon-width;
+}
+
+[aria-pressed] {
+	color: var(--primary);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue
index 77d0b6e0e..7fff1df0a 100644
--- a/src/components/home/TheNavigation.vue
+++ b/src/components/home/TheNavigation.vue
@@ -26,14 +26,14 @@
 
 		<div class="navbar-end">
 			<update/>
-			<BaseButton
+			<NavbarTriggerButton
 				@click="openQuickActions"
-				class="trigger-button pr-0"
 				v-shortcut="'Control+k'"
+				:pressed="quickActionsActive"
 				:title="$t('keyboardShortcuts.quickSearch')"
 			>
 				<icon icon="search"/>
-			</BaseButton>
+			</NavbarTriggerButton>
 			<notifications/>
 			<div class="user">
 				<dropdown class="is-right" ref="usernameDropdown">
@@ -101,6 +101,7 @@ import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 import Notifications from '@/components/notifications/notifications.vue'
 import Logo from '@/components/home/Logo.vue'
+import NavbarTriggerButton from '@/components/home/NavbarTriggerButton.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 import MenuButton from '@/components/home/MenuButton.vue'
 
@@ -134,6 +135,8 @@ onMounted(async () => {
 	listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
 })
 
+const quickActionsActive = computed(() => baseStore.quickActionsActive)
+
 function openQuickActions() {
 	baseStore.setQuickActionsActive(true)
 }
@@ -218,26 +221,11 @@ $hamburger-menu-icon-width: 28px;
 }
 
 .navbar {
-	// FIXME: notifications should provide a slot for the icon instead, so that we can style it as we want
-	:deep() {
-		.trigger-button {
-			cursor: pointer;
-			color: var(--grey-400);
-			padding: .5rem;
-			font-size: 1.25rem;
-			position: relative;
-		}
-
-		> * > .trigger-button {
-			width: $navbar-icon-width;
-		}
-	}
-
 	.user {
 		display: flex;
 		align-items: center;
 
-		span {
+		.username {
 			font-family: $vikunja-font;
 		}
 
diff --git a/src/components/notifications/NotificationItem.vue b/src/components/notifications/NotificationItem.vue
new file mode 100644
index 000000000..c6240a563
--- /dev/null
+++ b/src/components/notifications/NotificationItem.vue
@@ -0,0 +1,165 @@
+<template>
+	<div class="single-notification">
+		<div class="read-indicator" :class="{'read': notification.readAt !== null}" />
+		<user
+			class="user"
+			v-if="notification.notification.doer"
+			:user="notification.notification.doer"
+			:show-username="false"
+			:avatar-size="16"
+		/>
+		<div class="detail">
+			<div>
+				<span class="has-text-weight-bold mr-1" v-if="notification.notification.doer">
+					{{ getDisplayName(notification.notification.doer) }}
+				</span>
+				<BaseButton :to="to" @click="emit('markNotificationAsRead')">
+					{{ notificationText }}
+				</BaseButton>
+			</div>
+			<span class="created" v-tooltip="formatDateLong(notification.created)">
+				{{ formatDateSince(notification.created) }}
+			</span>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+
+import {useAuthStore} from '@/stores/auth'
+
+import {NOTIFICATION_NAMES, type INotification} from '@/modelTypes/INotification'
+import BaseButton from '@/components/base/BaseButton.vue'
+import User from '@/components/misc/user.vue'
+
+import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
+import {getDisplayName} from '@/models/user'
+import {getTextIdentifier} from '@/models/task'
+
+const props = defineProps<{
+	notification: INotification
+}>()
+
+const emit = defineEmits<{
+  (e: 'markNotificationAsRead'): void
+}>()
+
+const authStore = useAuthStore()
+const userInfo = computed(() => authStore.info)
+
+const to = computed(() => {
+	const to = {
+		name: '',
+		params: {},
+	}
+
+	switch (props.notification.name) {
+		case NOTIFICATION_NAMES.TASK_COMMENT:
+		case NOTIFICATION_NAMES.TASK_ASSIGNED:
+			to.name = 'task.detail'
+			to.params.id = props.notification.notification.task.id
+			break
+		case NOTIFICATION_NAMES.TASK_DELETED:
+			// Nothing
+			break
+		case NOTIFICATION_NAMES.LIST_CREATED:
+			to.name = 'task.index'
+			to.params.listId = props.notification.notification.list.id
+			break
+		case NOTIFICATION_NAMES.TEAM_MEMBER_ADDED:
+			to.name = 'teams.edit'
+			to.params.id = props.notification.notification.team.id
+			break
+		default:
+	}
+
+	return to
+})
+
+const notificationText = computed(() => {
+	const notification = props.notification.notification
+	let who = ''
+
+	switch (props.notification.name) {
+		case NOTIFICATION_NAMES.TASK_COMMENT:
+			return `commented on ${getTextIdentifier(notification.task)}`
+		case NOTIFICATION_NAMES.TASK_ASSIGNED:
+			if (userInfo.value !== null && userInfo.value.id === notification.assignee.id) {
+				who = 'you'
+			} else {
+				who = `${getDisplayName(notification.assignee)}`
+			}
+
+			return `assigned ${who} to ${getTextIdentifier(notification.task)}`
+		case NOTIFICATION_NAMES.TASK_DELETED:
+			return `deleted ${getTextIdentifier(notification.task)}`
+		case NOTIFICATION_NAMES.LIST_CREATED:
+			return `created ${notification.list.title}`
+		case NOTIFICATION_NAMES.TEAM_MEMBER_ADDED:
+			if (userInfo.value !== null && userInfo.value.id === notification.member.id) {
+				who = 'you'
+			} else {
+				who = `${getDisplayName(notification.member)}`
+			}
+
+			return `added ${who} to the ${notification.team.name} team`
+	}
+
+	return ''
+})
+</script>
+
+<style scoped lang="scss">
+.single-notification {
+	display: flex;
+	align-items: center;
+	padding: 0.25rem 0;
+	transition: background-color $transition;
+
+	&:hover {
+		background: var(--grey-100);
+		border-radius: $radius;
+	}
+}
+
+.read-indicator {
+	width: .35rem;
+	height: .35rem;
+	background: var(--primary);
+	border-radius: 100%;
+	margin-left: .5rem;
+
+	&.read {
+		background: transparent;
+	}
+}
+
+// FIXME: this deep styling of user should not be in here
+.user {
+	display: inline-flex;
+	align-items: center;
+	width: auto;
+	margin: 0 .5rem;
+
+	span {
+		font-family: $family-sans-serif;
+	}
+
+	.avatar {
+		height: 16px;
+	}
+
+	img {
+		margin-right: 0;
+	}
+}
+
+.created {
+	color: var(--grey-400);
+}
+
+a {
+	color: var(--grey-800);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 0e76249e1..01e64d099 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,40 +1,28 @@
 <template>
 	<div class="notifications">
-		<div class="is-flex is-justify-content-center">
-			<BaseButton @click.stop="showNotifications = !showNotifications" class="trigger-button">
-				<span class="unread-indicator" v-if="unreadNotifications > 0"></span>
-				<icon icon="bell"/>
-			</BaseButton>
-		</div>
+		<!-- FIXME: add label -->
+		<slot :togglePopup="togglePopup" :hasUnreadNotifications="hasUnreadNotifications">
+			<NavbarTriggerButton
+				:pressed="showNotifications"
+				ref="toggleButton"
+				@click="togglePopup"
+			>
+					<span v-if="hasUnreadNotifications" class="unread-indicator" />
+					<icon icon="bell"/>
+			</NavbarTriggerButton>
+		</slot>
 
+		<!-- FIXME: create dedicated dropdown menu -->
 		<CustomTransition name="fade">
 			<div class="notifications-list" v-if="showNotifications" ref="popup">
-				<span class="head">{{ $t('notification.title') }}</span>
-				<div
+				<h3 class="head">{{ $t('notification.title') }}</h3>
+				<NotificationItem
 					v-for="(n, index) in notifications"
 					:key="n.id"
-					class="single-notification"
-				>
-					<div class="read-indicator" :class="{'read': n.readAt !== null}"></div>
-					<user
-						:user="n.notification.doer"
-						:show-username="false"
-						:avatar-size="16"
-						v-if="n.notification.doer"/>
-					<div class="detail">
-						<div>
-							<span class="has-text-weight-bold mr-1" v-if="n.notification.doer">
-								{{ getDisplayName(n.notification.doer) }}
-							</span>
-							<BaseButton @click="() => to(n, index)()">
-								{{ n.toText(userInfo) }}
-							</BaseButton>
-						</div>
-						<span class="created" v-tooltip="formatDateLong(n.created)">
-							{{ formatDateSince(n.created) }}
-						</span>
-					</div>
-				</div>
+					class="notification-item"
+					:notification="n"
+					@markNotificationAsRead="markNotificationAsRead(index, n)"
+				/>
 				<p class="nothing" v-if="notifications.length === 0">
 					{{ $t('notification.none') }}<br/>
 					<span class="explainer">
@@ -48,203 +36,118 @@
 
 <script lang="ts" setup>
 import {computed, onMounted, onUnmounted, ref} from 'vue'
-import {useRouter} from 'vue-router'
+import {onClickOutside} from '@vueuse/core'
 
 import NotificationService from '@/services/notification'
-import BaseButton from '@/components/base/BaseButton.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
-import User from '@/components/misc/user.vue'
-import { NOTIFICATION_NAMES as names, type INotification} from '@/modelTypes/INotification'
-import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
-import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
-import {getDisplayName} from '@/models/user'
-import {useAuthStore} from '@/stores/auth'
+import type {INotification} from '@/modelTypes/INotification'
 
-const LOAD_NOTIFICATIONS_INTERVAL = 10000
+import NavbarTriggerButton from '@/components/home/NavbarTriggerButton.vue'
+import NotificationItem from '@/components/notifications/NotificationItem.vue'
 
-const authStore = useAuthStore()
-const router = useRouter()
+const NOTIFICATIONS_PULL_INTERVAL = 10000
 
 const allNotifications = ref<INotification[]>([])
 const showNotifications = ref(false)
 const popup = ref(null)
+const toggleButton = ref(null)
+
+function togglePopup() {
+	showNotifications.value = !showNotifications.value
+}
+
+onClickOutside(
+	popup,
+	() => {
+		if (!showNotifications.value) {
+			return
+		}
+		showNotifications.value = false
+	},
+	{ ignore: [toggleButton]},
+)
 
-const unreadNotifications = computed(() => {
-	return notifications.value.filter(n => n.readAt === null).length
-})
 const notifications = computed(() => {
 	return allNotifications.value ? allNotifications.value.filter(n => n.name !== '') : []
 })
-const userInfo = computed(() => authStore.info)
+const unreadNotifications = computed(() => {
+	return notifications.value.filter(n => n.readAt === null).length
+})
+
+const hasUnreadNotifications = computed(() => unreadNotifications.value > 0)
 
 let interval: ReturnType<typeof setInterval>
-
 onMounted(() => {
-	loadNotifications()
-	document.addEventListener('click', hidePopup)
-	interval = setInterval(loadNotifications, LOAD_NOTIFICATIONS_INTERVAL)
+	interval = setInterval(loadNotifications, NOTIFICATIONS_PULL_INTERVAL)
 })
 
-onUnmounted(() => {
-	document.removeEventListener('click', hidePopup)
-	clearInterval(interval)
-})
+onUnmounted(() => clearInterval(interval))
 
+const notificationService = new NotificationService()
+
+loadNotifications()
 async function loadNotifications() {
-	// We're recreating the notification service here to make sure it uses the latest api user token
-	const notificationService = new NotificationService()
 	allNotifications.value = await notificationService.getAll()
 }
 
-function hidePopup(e) {
-	if (showNotifications.value) {
-		closeWhenClickedOutside(e, popup.value, () => showNotifications.value = false)
-	}
-}
-
-function to(n, index) {
-	const to = {
-		name: '',
-		params: {},
-	}
-
-	switch (n.name) {
-		case names.TASK_COMMENT:
-		case names.TASK_ASSIGNED:
-			to.name = 'task.detail'
-			to.params.id = n.notification.task.id
-			break
-		case names.TASK_DELETED:
-			// Nothing
-			break
-		case names.LIST_CREATED:
-			to.name = 'task.index'
-			to.params.listId = n.notification.list.id
-			break
-		case names.TEAM_MEMBER_ADDED:
-			to.name = 'teams.edit'
-			to.params.id = n.notification.team.id
-			break
-	}
-
-	return async () => {
-		if (to.name !== '') {
-			router.push(to)
-		}
-
-		n.read = true
-		const notificationService = new NotificationService()
-		allNotifications.value[index] = await notificationService.update(n)
-	}
+async function markNotificationAsRead(index: number, notification: INotification) {
+	allNotifications.value[index] = await notificationService.update({
+		...notification,
+		read: true,
+	})
 }
 </script>
 
 <style lang="scss" scoped>
-.notifications {
-	width: $navbar-icon-width;
+.unread-indicator {
+	position: absolute;
+	top: .75rem;
+	right: 1.15rem;
+	width: .75rem;
+	height: .75rem;
 
-	.unread-indicator {
-		position: absolute;
-		top: .75rem;
-		right: 1.15rem;
-		width: .75rem;
-		height: .75rem;
+	background: var(--primary);
+	border-radius: 100%;
+	border: 2px solid var(--white);
+}
 
-		background: var(--primary);
-		border-radius: 100%;
-		border: 2px solid var(--white);
-	}
+.notifications-list {
+	position: fixed;
+	right: 1rem;
+	margin-top: 1rem;
+	max-height: 400px;
+	overflow-y: auto;
 
-	.notifications-list {
-		position: fixed;
-		right: 1rem;
-		margin-top: 1rem;
-		max-height: 400px;
-		overflow-y: auto;
+	background: var(--white);
+	width: 350px;
+	max-width: calc(100vw - 2rem);
+	padding: .75rem .25rem;
+	border-radius: $radius;
+	box-shadow: var(--shadow-sm);
+	font-size: .85rem;
 
-		background: var(--white);
-		width: 350px;
-		max-width: calc(100vw - 2rem);
-		padding: .75rem .25rem;
-		border-radius: $radius;
-		box-shadow: var(--shadow-sm);
-		font-size: .85rem;
-
-		@media screen and (max-width: $tablet) {
-			max-height: calc(100vh - 1rem - #{$navbar-height});
-		}
-
-		.head {
-			font-family: $vikunja-font;
-			font-size: 1rem;
-			padding: .5rem;
-		}
-
-		.single-notification {
-			display: flex;
-			align-items: center;
-			padding: 0.25rem 0;
-
-			transition: background-color $transition;
-
-			&:hover {
-				background: var(--grey-100);
-				border-radius: $radius;
-			}
-
-			.read-indicator {
-				width: .35rem;
-				height: .35rem;
-				background: var(--primary);
-				border-radius: 100%;
-				margin-left: .5rem;
-
-				&.read {
-					background: transparent;
-				}
-			}
-
-			.user {
-				display: inline-flex;
-				align-items: center;
-				width: auto;
-				margin: 0 .5rem;
-
-				span {
-					font-family: $family-sans-serif;
-				}
-
-				.avatar {
-					height: 16px;
-				}
-
-				img {
-					margin-right: 0;
-				}
-			}
-
-			.created {
-				color: var(--grey-400);
-			}
-
-			&:last-child {
-				margin-bottom: .25rem;
-			}
-
-			a {
-				color: var(--grey-800);
-			}
-		}
-
-		.nothing {
-			text-align: center;
-			padding: 1rem 0;
-			color: var(--grey-500);
-
-			.explainer {
-				font-size: .75rem;
-			}
-		}
+	@media screen and (max-width: $tablet) {
+		max-height: calc(100vh - 1rem - #{$navbar-height});
 	}
 }
+
+.head {
+	font-family: $vikunja-font;
+	font-size: 1rem;
+	padding: .5rem;
+}
+
+.notification-item:last-child {
+	margin-bottom: .25rem;
+}
+
+.nothing {
+	text-align: center;
+	padding: 1rem 0;
+	color: var(--grey-500);
+}
+
+.explainer {
+	font-size: .75rem;
+}
 </style>
\ No newline at end of file
diff --git a/src/modelTypes/INotification.ts b/src/modelTypes/INotification.ts
index 52d6dc2a9..804748792 100644
--- a/src/modelTypes/INotification.ts
+++ b/src/modelTypes/INotification.ts
@@ -3,7 +3,7 @@ import type {IUser} from './IUser'
 import type {ITask} from './ITask'
 import type {ITaskComment} from './ITaskComment'
 import type {ITeam} from './ITeam'
-import type { IList } from './IList'
+import type {IList} from './IList'
 
 export const NOTIFICATION_NAMES = {
 	'TASK_COMMENT': 'task.comment',
diff --git a/src/models/notification.ts b/src/models/notification.ts
index 4645bb04c..e4ad3a0c8 100644
--- a/src/models/notification.ts
+++ b/src/models/notification.ts
@@ -1,13 +1,12 @@
 import AbstractModel from './abstractModel'
 import {parseDateOrNull} from '@/helpers/parseDateOrNull'
-import UserModel, {getDisplayName} from '@/models/user'
+import UserModel from '@/models/user'
 import TaskModel from '@/models/task'
 import TaskCommentModel from '@/models/taskComment'
 import ListModel from '@/models/list'
 import TeamModel from '@/models/team'
 
 import {NOTIFICATION_NAMES, type INotification} from '@/modelTypes/INotification'
-import type { IUser } from '@/modelTypes/IUser'
 
 export default class NotificationModel extends AbstractModel<INotification> implements INotification {
 	id = 0
@@ -61,35 +60,4 @@ export default class NotificationModel extends AbstractModel<INotification> impl
 		this.created = new Date(this.created)
 		this.readAt = parseDateOrNull(this.readAt)
 	}
-
-	toText(user: IUser | null = null) {
-		let who = ''
-
-		switch (this.name) {
-			case NOTIFICATION_NAMES.TASK_COMMENT:
-				return `commented on ${this.notification.task.getTextIdentifier()}`
-			case NOTIFICATION_NAMES.TASK_ASSIGNED:
-				who = `${getDisplayName(this.notification.assignee)}`
-
-				if (user !== null && user.id === this.notification.assignee.id) {
-					who = 'you'
-				}
-
-				return `assigned ${who} to ${this.notification.task.getTextIdentifier()}`
-			case NOTIFICATION_NAMES.TASK_DELETED:
-				return `deleted ${this.notification.task.getTextIdentifier()}`
-			case NOTIFICATION_NAMES.LIST_CREATED:
-				return `created ${this.notification.list.title}`
-			case NOTIFICATION_NAMES.TEAM_MEMBER_ADDED:
-				who = `${getDisplayName(this.notification.member)}`
-
-				if (user !== null && user.id === this.notification.member.id) {
-					who = 'you'
-				}
-
-				return `added ${who} to the ${this.notification.team.name} team`
-		}
-
-		return ''
-	}
 }
diff --git a/src/models/task.ts b/src/models/task.ts
index 2499f9778..213cd12b3 100644
--- a/src/models/task.ts
+++ b/src/models/task.ts
@@ -36,6 +36,14 @@ export function	getHexColor(hexColor: string): string {
 	return hexColor
 }
 
+export function getTextIdentifier(task: ITask) {
+	if (task.identifier === '') {
+		return `#${task.index}`
+	}
+
+	return task.identifier
+}
+
 /**
  * Parses `repeatAfterSeconds` into a usable js object.
  */
@@ -159,11 +167,7 @@ export default class TaskModel extends AbstractModel<ITask> implements ITask {
 	}
 
 	getTextIdentifier() {
-		if (this.identifier === '') {
-			return `#${this.index}`
-		}
-
-		return this.identifier
+		return getTextIdentifier(this)
 	}
 
 	getHexColor() {
-- 
2.40.1


From 7075ab83cb4e62e29b86f8dddbaf2fdd118f0f7a Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 14 Nov 2022 14:57:41 +0100
Subject: [PATCH 2/6] feat: move notification helper to store and add
 translation support

---
 .../notifications/NotificationItem.vue        | 78 +++----------------
 .../notifications/notifications.vue           | 16 +++-
 src/i18n/lang/en.json                         | 21 ++++-
 src/services/notification.ts                  | 74 +++++++++++++++++-
 4 files changed, 114 insertions(+), 75 deletions(-)

diff --git a/src/components/notifications/NotificationItem.vue b/src/components/notifications/NotificationItem.vue
index c6240a563..5b0cb2588 100644
--- a/src/components/notifications/NotificationItem.vue
+++ b/src/components/notifications/NotificationItem.vue
@@ -2,19 +2,19 @@
 	<div class="single-notification">
 		<div class="read-indicator" :class="{'read': notification.readAt !== null}" />
 		<user
-			class="user"
 			v-if="notification.notification.doer"
+			class="user"
 			:user="notification.notification.doer"
 			:show-username="false"
 			:avatar-size="16"
 		/>
 		<div class="detail">
 			<div>
-				<span class="has-text-weight-bold mr-1" v-if="notification.notification.doer">
+				<span v-if="notification.notification.doer" class="has-text-weight-bold mr-1">
 					{{ getDisplayName(notification.notification.doer) }}
 				</span>
-				<BaseButton :to="to" @click="emit('markNotificationAsRead')">
-					{{ notificationText }}
+				<BaseButton :to="getNotificationRoute(notification)" @click="emit('markNotificationAsRead')">
+					{{ getNotificationTitle(notification, userInfo) }}
 				</BaseButton>
 			</div>
 			<span class="created" v-tooltip="formatDateLong(notification.created)">
@@ -27,17 +27,18 @@
 <script setup lang="ts">
 import {computed} from 'vue'
 
-import {useAuthStore} from '@/stores/auth'
+import type {INotification} from '@/modelTypes/INotification'
 
-import {NOTIFICATION_NAMES, type INotification} from '@/modelTypes/INotification'
 import BaseButton from '@/components/base/BaseButton.vue'
 import User from '@/components/misc/user.vue'
 
+import {useAuthStore} from '@/stores/auth'
+
 import {formatDateLong, formatDateSince} from '@/helpers/time/formatDate'
 import {getDisplayName} from '@/models/user'
-import {getTextIdentifier} from '@/models/task'
+import {getNotificationRoute, getNotificationTitle} from '@/services/notification'
 
-const props = defineProps<{
+defineProps<{
 	notification: INotification
 }>()
 
@@ -47,67 +48,6 @@ const emit = defineEmits<{
 
 const authStore = useAuthStore()
 const userInfo = computed(() => authStore.info)
-
-const to = computed(() => {
-	const to = {
-		name: '',
-		params: {},
-	}
-
-	switch (props.notification.name) {
-		case NOTIFICATION_NAMES.TASK_COMMENT:
-		case NOTIFICATION_NAMES.TASK_ASSIGNED:
-			to.name = 'task.detail'
-			to.params.id = props.notification.notification.task.id
-			break
-		case NOTIFICATION_NAMES.TASK_DELETED:
-			// Nothing
-			break
-		case NOTIFICATION_NAMES.LIST_CREATED:
-			to.name = 'task.index'
-			to.params.listId = props.notification.notification.list.id
-			break
-		case NOTIFICATION_NAMES.TEAM_MEMBER_ADDED:
-			to.name = 'teams.edit'
-			to.params.id = props.notification.notification.team.id
-			break
-		default:
-	}
-
-	return to
-})
-
-const notificationText = computed(() => {
-	const notification = props.notification.notification
-	let who = ''
-
-	switch (props.notification.name) {
-		case NOTIFICATION_NAMES.TASK_COMMENT:
-			return `commented on ${getTextIdentifier(notification.task)}`
-		case NOTIFICATION_NAMES.TASK_ASSIGNED:
-			if (userInfo.value !== null && userInfo.value.id === notification.assignee.id) {
-				who = 'you'
-			} else {
-				who = `${getDisplayName(notification.assignee)}`
-			}
-
-			return `assigned ${who} to ${getTextIdentifier(notification.task)}`
-		case NOTIFICATION_NAMES.TASK_DELETED:
-			return `deleted ${getTextIdentifier(notification.task)}`
-		case NOTIFICATION_NAMES.LIST_CREATED:
-			return `created ${notification.list.title}`
-		case NOTIFICATION_NAMES.TEAM_MEMBER_ADDED:
-			if (userInfo.value !== null && userInfo.value.id === notification.member.id) {
-				who = 'you'
-			} else {
-				who = `${getDisplayName(notification.member)}`
-			}
-
-			return `added ${who} to the ${notification.team.name} team`
-	}
-
-	return ''
-})
 </script>
 
 <style scoped lang="scss">
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 01e64d099..38eb1bf2f 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -45,6 +45,8 @@ import type {INotification} from '@/modelTypes/INotification'
 import NavbarTriggerButton from '@/components/home/NavbarTriggerButton.vue'
 import NotificationItem from '@/components/notifications/NotificationItem.vue'
 
+import {findIndexById} from '@/helpers/utils'
+
 const NOTIFICATIONS_PULL_INTERVAL = 10000
 
 const allNotifications = ref<INotification[]>([])
@@ -90,11 +92,18 @@ async function loadNotifications() {
 	allNotifications.value = await notificationService.getAll()
 }
 
-async function markNotificationAsRead(index: number, notification: INotification) {
-	allNotifications.value[index] = await notificationService.update({
+async function markNotificationAsRead(notification: INotification) {
+	const index = findIndexById(allNotifications.value, notification.id)
+	if (index === -1) {
+		return
+	}
+
+	allNotifications.value[index] = {
 		...notification,
 		read: true,
-	})
+	}
+
+	await notificationService.update(allNotifications.value[index])
 }
 </script>
 
@@ -134,7 +143,6 @@ async function markNotificationAsRead(index: number, notification: INotification
 .head {
 	font-family: $vikunja-font;
 	font-size: 1rem;
-	padding: .5rem;
 }
 
 .notification-item:last-child {
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 012d48f74..ad15f9dee 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -945,7 +945,26 @@
   "notification": {
     "title": "Notifications",
     "none": "You don't have any notifications. Have a nice day!",
-    "explainer": "Notifications will appear here when actions on namespaces, lists or tasks you subscribed to happen."
+    "explainer": "Notifications will appear here when actions on namespaces, lists or tasks you subscribed to happen.",
+    "items": {
+      "taskComment": {
+        "message": "commented on {taskIdentifier}"
+      },
+      "taskAssigned": {
+        "message": "assigned {user} to {taskIdentifier}",
+        "userYou": "you"
+      },
+      "taskDeleted": {
+        "message": "deleted {taskIdentifier}"
+      },
+      "listCreated": {
+        "message": "created {listTitle}"
+      },
+      "teamMemberAdded": {
+        "message": "added ${user} to the {teamName} team",
+        "userYou": "you"
+      }
+    }
   },
   "quickActions": {
     "commands": "Commands",
diff --git a/src/services/notification.ts b/src/services/notification.ts
index 6ac783f75..f188f8706 100644
--- a/src/services/notification.ts
+++ b/src/services/notification.ts
@@ -1,6 +1,78 @@
 import AbstractService from '@/services/abstractService'
 import NotificationModel from '@/models/notification'
-import type {INotification} from '@/modelTypes/INotification'
+import {NOTIFICATION_NAMES, type INotification} from '@/modelTypes/INotification'
+import type {IUser} from '@/modelTypes/IUser'
+import {getTextIdentifier} from '@/models/task'
+import {getDisplayName} from '@/models/user'
+import {i18n} from '@/i18n'
+
+export function getNotificationTitle(notificationItem: INotification, user: IUser | null) {
+	const notification = notificationItem.notification
+	let who: string
+
+	switch (notificationItem.name) {
+		case NOTIFICATION_NAMES.TASK_COMMENT:
+			return i18n.global.t('notification.items.taskComment.message', { taskIdentifier: getTextIdentifier(notification.task)})
+		case NOTIFICATION_NAMES.TASK_ASSIGNED:
+			who = (user !== null && user.id === notification.assignee.id)
+				? i18n.global.t('notification.items.taskAssigned.userYou')
+				: `${getDisplayName(notification.assignee)}`
+
+			return i18n.global.t('notification.items.taskAssigned.message', {
+				user: who,
+				taskIdentifier: getTextIdentifier(notification.task),
+			}) 
+		case NOTIFICATION_NAMES.TASK_DELETED:
+			// TODO: add user to title
+			return i18n.global.t('notification.items.taskDeleted.message', {
+				taskIdentifier: getTextIdentifier(notification.task),
+			}) 
+		case NOTIFICATION_NAMES.LIST_CREATED:
+			return i18n.global.t('notification.items.listCreated.message', {
+				listTitle: notification.list.title,
+			})
+			
+		case NOTIFICATION_NAMES.TEAM_MEMBER_ADDED:
+			who = (user !== null && user.id === notification.member.id)
+				? i18n.global.t('notification.items.teamMemberAdded.userYou')
+				: `${getDisplayName(notification.member)}`
+
+			return i18n.global.t('notification.items.teamMemberAdded.message', {
+				user: who,
+				teamName: notification.team.name,
+			})
+	}
+}
+
+export function getNotificationRoute(notificationItem: INotification) {
+	const to = {
+		name: '',
+		params: {},
+	}
+
+	switch (notificationItem.name) {
+		case NOTIFICATION_NAMES.TASK_COMMENT:
+		case NOTIFICATION_NAMES.TASK_ASSIGNED:
+			to.name = 'task.detail'
+			to.params.id = notificationItem.notification.task.id
+			break
+		case NOTIFICATION_NAMES.TASK_DELETED:
+			// Nothing
+			break
+		case NOTIFICATION_NAMES.LIST_CREATED:
+			to.name = 'task.index'
+			to.params.listId = notificationItem.notification.list.id
+			break
+		case NOTIFICATION_NAMES.TEAM_MEMBER_ADDED:
+			to.name = 'teams.edit'
+			to.params.id = notificationItem.notification.team.id
+			break
+		default:
+			return undefined
+	}
+
+	return to
+}
 
 export default class NotificationService extends AbstractService<INotification> {
 	constructor() {
-- 
2.40.1


From 0f940e91835b8c0f8da429b7b9a3a62125850907 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 14 Nov 2022 15:31:58 +0100
Subject: [PATCH 3/6] feat: add notification store, add label

---
 .../notifications/notifications.vue           | 89 ++++++-------------
 src/i18n/lang/en.json                         |  2 +
 src/services/notification.ts                  |  6 +-
 src/stores/notifications.ts                   | 66 ++++++++++++++
 4 files changed, 99 insertions(+), 64 deletions(-)
 create mode 100644 src/stores/notifications.ts

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 38eb1bf2f..f62c06b27 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,27 +1,25 @@
 <template>
 	<div class="notifications">
-		<!-- FIXME: add label -->
-		<slot :togglePopup="togglePopup" :hasUnreadNotifications="hasUnreadNotifications">
-			<NavbarTriggerButton
-				:pressed="showNotifications"
-				ref="toggleButton"
-				@click="togglePopup"
-			>
-					<span v-if="hasUnreadNotifications" class="unread-indicator" />
-					<icon icon="bell"/>
-			</NavbarTriggerButton>
-		</slot>
+		<NavbarTriggerButton
+			:pressed="modalIsOpen"
+			ref="toggleButton"
+			:aria-label="modalIsOpen ? $t('notification.hideNotifications') : $t('notification.showNotifications')"
+			@click="togglePopup"
+		>
+				<span v-if="hasUnreadNotifications" class="unread-indicator" />
+				<icon icon="bell"/>
+		</NavbarTriggerButton>
 
 		<!-- FIXME: create dedicated dropdown menu -->
 		<CustomTransition name="fade">
-			<div class="notifications-list" v-if="showNotifications" ref="popup">
+			<div class="notifications-list" v-if="modalIsOpen" ref="popup">
 				<h3 class="head">{{ $t('notification.title') }}</h3>
 				<NotificationItem
-					v-for="(n, index) in notifications"
+					v-for="n in notifications"
 					:key="n.id"
 					class="notification-item"
 					:notification="n"
-					@markNotificationAsRead="markNotificationAsRead(index, n)"
+					@markNotificationAsRead="markNotificationAsRead(n)"
 				/>
 				<p class="nothing" v-if="notifications.length === 0">
 					{{ $t('notification.none') }}<br/>
@@ -35,76 +33,43 @@
 </template>
 
 <script lang="ts" setup>
-import {computed, onMounted, onUnmounted, ref} from 'vue'
-import {onClickOutside} from '@vueuse/core'
+import {ref} from 'vue'
+import {onClickOutside, tryOnUnmounted} from '@vueuse/core'
 
-import NotificationService from '@/services/notification'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
-import type {INotification} from '@/modelTypes/INotification'
-
 import NavbarTriggerButton from '@/components/home/NavbarTriggerButton.vue'
 import NotificationItem from '@/components/notifications/NotificationItem.vue'
+import {useNotificationStore} from '@/stores/notifications'
 
-import {findIndexById} from '@/helpers/utils'
-
-const NOTIFICATIONS_PULL_INTERVAL = 10000
-
-const allNotifications = ref<INotification[]>([])
-const showNotifications = ref(false)
+const modalIsOpen = ref(false)
 const popup = ref(null)
 const toggleButton = ref(null)
 
 function togglePopup() {
-	showNotifications.value = !showNotifications.value
+	modalIsOpen.value = !modalIsOpen.value
 }
 
 onClickOutside(
 	popup,
 	() => {
-		if (!showNotifications.value) {
+		if (!modalIsOpen.value) {
 			return
 		}
-		showNotifications.value = false
+		modalIsOpen.value = false
 	},
 	{ ignore: [toggleButton]},
 )
 
-const notifications = computed(() => {
-	return allNotifications.value ? allNotifications.value.filter(n => n.name !== '') : []
-})
-const unreadNotifications = computed(() => {
-	return notifications.value.filter(n => n.readAt === null).length
-})
+const {
+	notifications,
+	hasUnreadNotifications,
 
-const hasUnreadNotifications = computed(() => unreadNotifications.value > 0)
+	startNotificationPulling,
+	markNotificationAsRead,
+} = useNotificationStore()
 
-let interval: ReturnType<typeof setInterval>
-onMounted(() => {
-	interval = setInterval(loadNotifications, NOTIFICATIONS_PULL_INTERVAL)
-})
-
-onUnmounted(() => clearInterval(interval))
-
-const notificationService = new NotificationService()
-
-loadNotifications()
-async function loadNotifications() {
-	allNotifications.value = await notificationService.getAll()
-}
-
-async function markNotificationAsRead(notification: INotification) {
-	const index = findIndexById(allNotifications.value, notification.id)
-	if (index === -1) {
-		return
-	}
-
-	allNotifications.value[index] = {
-		...notification,
-		read: true,
-	}
-
-	await notificationService.update(allNotifications.value[index])
-}
+const stopNotificationPulling = startNotificationPulling()
+tryOnUnmounted(stopNotificationPulling)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index ad15f9dee..bb3e08a5a 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -943,6 +943,8 @@
     "contact": "contact us"
   },
   "notification": {
+    "showNotifications": "show Notifications",
+    "hideNotifications": "hide Notifications",
     "title": "Notifications",
     "none": "You don't have any notifications. Have a nice day!",
     "explainer": "Notifications will appear here when actions on namespaces, lists or tasks you subscribed to happen.",
diff --git a/src/services/notification.ts b/src/services/notification.ts
index f188f8706..8bd687092 100644
--- a/src/services/notification.ts
+++ b/src/services/notification.ts
@@ -1,9 +1,11 @@
+import type {IUser} from '@/modelTypes/IUser'
+import {NOTIFICATION_NAMES, type INotification} from '@/modelTypes/INotification'
+
 import AbstractService from '@/services/abstractService'
 import NotificationModel from '@/models/notification'
-import {NOTIFICATION_NAMES, type INotification} from '@/modelTypes/INotification'
-import type {IUser} from '@/modelTypes/IUser'
 import {getTextIdentifier} from '@/models/task'
 import {getDisplayName} from '@/models/user'
+
 import {i18n} from '@/i18n'
 
 export function getNotificationTitle(notificationItem: INotification, user: IUser | null) {
diff --git a/src/stores/notifications.ts b/src/stores/notifications.ts
new file mode 100644
index 000000000..7f8a35698
--- /dev/null
+++ b/src/stores/notifications.ts
@@ -0,0 +1,66 @@
+import {computed, ref} from 'vue'
+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
+
+export const useNotificationStore = defineStore('notification', () => {
+	const allNotifications = ref<INotification[]>([])
+
+	const notifications = computed(() => {
+		return allNotifications.value ? allNotifications.value.filter(n => n.name !== '') : []
+	})
+	const unreadNotifications = computed(() => {
+		return notifications.value.filter(n => n.readAt === null).length
+	})
+	const hasUnreadNotifications = computed(() => unreadNotifications.value > 0)
+
+	let interval: ReturnType<typeof setInterval>
+
+	const notificationService = new NotificationService()
+
+	async function loadNotifications() {
+		allNotifications.value = await notificationService.getAll()
+	}
+
+	function startNotificationPulling() {
+		loadNotifications()
+		interval = setInterval(loadNotifications, NOTIFICATIONS_PULL_INTERVAL)
+		return stopNotificationPulling
+	}
+
+	function stopNotificationPulling() {
+		clearInterval(interval)
+	}
+
+	async function markNotificationAsRead(notificationItem: INotification) {
+		const index = findIndexById(allNotifications.value, notificationItem.id)
+		if (index === -1) {
+			return
+		}
+	
+		allNotifications.value[index] = {
+			...notificationItem,
+			read: true,
+		}
+	
+		await notificationService.update(allNotifications.value[index])
+	}
+
+	return {
+		notifications,
+		unreadNotifications,
+		hasUnreadNotifications,
+
+		startNotificationPulling,
+		stopNotificationPulling,
+		markNotificationAsRead,
+	}
+})
+
+// support hot reloading
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useNotificationStore, import.meta.hot))
+}
\ No newline at end of file
-- 
2.40.1


From e2ae7005fcdc6b00bd38839c61702ba948fc8b07 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 21 Nov 2022 14:31:16 +0100
Subject: [PATCH 4/6] feat: make NotificationList component 'stupid'

---
 src/components/home/TheNavigation.vue         | 25 +++++++++++-----
 ...notifications.vue => NotificationList.vue} | 29 +++++++++----------
 src/stores/notifications.ts                   | 10 +++++--
 3 files changed, 38 insertions(+), 26 deletions(-)
 rename src/components/notifications/{notifications.vue => NotificationList.vue} (84%)

diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue
index 7fff1df0a..d4409be54 100644
--- a/src/components/home/TheNavigation.vue
+++ b/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>
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/NotificationList.vue
similarity index 84%
rename from src/components/notifications/notifications.vue
rename to src/components/notifications/NotificationList.vue
index f62c06b27..eb8784d77 100644
--- a/src/components/notifications/notifications.vue
+++ b/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>
diff --git a/src/stores/notifications.ts b/src/stores/notifications.ts
index 7f8a35698..1b1f204ee 100644
--- a/src/stores/notifications.ts
+++ b/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,
-- 
2.40.1


From 9109c25d3d1e33bdd4a263c487258a33a54850e0 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 21 Nov 2022 15:41:18 +0100
Subject: [PATCH 5/6] wip: add NotificationList story

---
 .../notifications/NotificationList.story.vue  | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/components/notifications/NotificationList.story.vue

diff --git a/src/components/notifications/NotificationList.story.vue b/src/components/notifications/NotificationList.story.vue
new file mode 100644
index 000000000..f79b57521
--- /dev/null
+++ b/src/components/notifications/NotificationList.story.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import {reactive} from 'vue'
+import type {INotification} from '@/modelTypes/INotification'
+import NotificationList from './NotificationList.vue'
+
+const state = reactive({
+	notifications: [] as INotification[],
+	hasUnreadNotifications: true,
+})
+
+function markNotificationAsRead(notificatioItem: INotification) {
+	console.log(notificatioItem)
+}
+</script>
+
+<template>
+  <Story>
+		<NotificationList
+			:notifications="state.notifications"
+			:hasUnreadNotifications="state.hasUnreadNotifications"
+			@mark-notification-as-read="markNotificationAsRead"
+		/>
+  </Story>
+</template>
\ No newline at end of file
-- 
2.40.1


From c0ca76fccf8d85686c2a8065c22bf139d0fedefa Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 22 Nov 2022 19:01:40 +0100
Subject: [PATCH 6/6] feat: use timeout instead of interval for pulling

---
 src/stores/notifications.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/stores/notifications.ts b/src/stores/notifications.ts
index 1b1f204ee..0f62e510a 100644
--- a/src/stores/notifications.ts
+++ b/src/stores/notifications.ts
@@ -19,7 +19,7 @@ export const useNotificationStore = defineStore('notification', () => {
 	})
 	const hasUnreadNotifications = computed(() => unreadNotifications.value > 0)
 
-	let interval: ReturnType<typeof setInterval>
+	let timeout: ReturnType<typeof setTimeout>
 
 	const notificationService = new NotificationService()
 
@@ -27,14 +27,18 @@ export const useNotificationStore = defineStore('notification', () => {
 		allNotifications.value = await notificationService.getAll() as INotification[]
 	}
 
+	async function pullNotifications() {
+		await loadNotifications()
+		timeout = setTimeout(pullNotifications, NOTIFICATIONS_PULL_INTERVAL)
+	}
+
 	function startNotificationPulling() {
-		loadNotifications()
-		interval = setInterval(loadNotifications, NOTIFICATIONS_PULL_INTERVAL)
+		pullNotifications()
 		return stopNotificationPulling
 	}
 
 	function stopNotificationPulling() {
-		clearInterval(interval)
+		clearTimeout(timeout)
 	}
 
 	async function markNotificationAsRead(notificationItem: INotification): Promise<INotification | undefined> {
-- 
2.40.1