From 0ebecb99ba449f5bf8bf1e98be471185b3f695c6 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 6 Jan 2026 18:36:29 +0100
Subject: [PATCH] feat: merge duplicate notifications (#2056)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use the `ignoreDuplicates` prop from vue3-notification to ignore duplicate notifications, show a count (×N) instead when notifications are merged.

Superseeds and closes https://github.com/go-vikunja/vikunja/pull/971

---------

Co-authored-by: Dominik Pschenitschni <6173598+dpschen@users.noreply.github.com>
---
 frontend/src/components/misc/Notification.vue | 22 ++++++++++----
 frontend/src/message/index.ts                 | 10 +++++--
 frontend/tests/e2e/misc/notifications.spec.ts | 30 +++++++++++++++++++
 3 files changed, 54 insertions(+), 8 deletions(-)
 create mode 100644 frontend/tests/e2e/misc/notifications.spec.ts

diff --git a/frontend/src/components/misc/Notification.vue b/frontend/src/components/misc/Notification.vue
index 9159c0aa3..b9c7d755f 100644
--- a/frontend/src/components/misc/Notification.vue
+++ b/frontend/src/components/misc/Notification.vue
@@ -2,6 +2,7 @@
 	<Notifications
 		position="bottom left"
 		:max="2"
+		:ignore-duplicates="true"
 		class="global-notification"
 	>
 		<template #body="{ item, close }">
@@ -20,12 +21,23 @@
 					{{ item.title }}
 				</div>
 				<div class="notification-content">
-					<template
-						v-for="(t, k) in item.text"
-						:key="k"
-					>
-						{{ t }}<br>
+					<template v-if="Array.isArray(item.text)">
+						<template
+							v-for="(t, k) in item.text"
+							:key="k"
+						>
+							{{ t }}<br>
+						</template>
 					</template>
+					<template v-else>
+						{{ item.text }}
+					</template>
+					<span
+						v-if="item.duplicates > 0"
+						class="tw-text-xs tw-font-bold tw-ml-1"
+					>
+						×{{ item.duplicates + 1 }}
+					</span>
 				</div>
 				<div
 					v-if="item.data?.actions?.length > 0"
diff --git a/frontend/src/message/index.ts b/frontend/src/message/index.ts
index 506a1203e..771b9c590 100644
--- a/frontend/src/message/index.ts
+++ b/frontend/src/message/index.ts
@@ -36,8 +36,11 @@ export function error(e, actions: Action[] = []) {
 	notify({
 		type: 'error',
 		title: i18n.global.t('error.error'),
-		text: [getErrorText(e)],
-		actions: actions,
+		text: getErrorText(e),
+		ignoreDuplicates: true,
+		data: {
+			actions: actions,
+		},
 	})
 }
 
@@ -45,7 +48,8 @@ export function success(e, actions: Action[] = []) {
 	notify({
 		type: 'success',
 		title: i18n.global.t('error.success'),
-		text: [getErrorText(e)],
+		text: getErrorText(e),
+		ignoreDuplicates: true,
 		data: {
 			actions: actions,
 		},
diff --git a/frontend/tests/e2e/misc/notifications.spec.ts b/frontend/tests/e2e/misc/notifications.spec.ts
new file mode 100644
index 000000000..76ed868ba
--- /dev/null
+++ b/frontend/tests/e2e/misc/notifications.spec.ts
@@ -0,0 +1,30 @@
+import {test, expect} from '../../support/fixtures'
+
+test.describe('Duplicate Notifications', () => {
+	test('Merges duplicate notifications and shows count', async ({authenticatedPage: page}) => {
+		await page.goto('/')
+		await page.waitForLoadState('networkidle')
+
+		// Trigger the same notification twice via the Vue app using $notify directly
+		await page.evaluate(() => {
+			const app = document.getElementById('app')
+			const vueApp = (app as any).__vue_app__
+			vueApp.config.globalProperties.$notify({
+				type: 'success',
+				title: 'Test',
+				text: 'Duplicate Test',
+			})
+			vueApp.config.globalProperties.$notify({
+				type: 'success',
+				title: 'Test',
+				text: 'Duplicate Test',
+			})
+		})
+
+		// Should only show one notification with a count of ×2
+		const notification = page.locator('.global-notification .vue-notification.success')
+		await expect(notification).toHaveCount(1)
+		await expect(notification.locator('.notification-content')).toContainText('Duplicate Test')
+		await expect(notification.locator('.notification-content')).toContainText('×2')
+	})
+})