From 3b77dd3c61fafce6553e6c6d773caee12792903c Mon Sep 17 00:00:00 2001
From: Frank Karlitschek <karlitschek@users.noreply.github.com>
Date: Tue, 28 Apr 2026 14:54:35 +0200
Subject: [PATCH] feat(ui): numeric count badge replaces dot indicator

The bell icon now shows a numeric badge (capped at "99+") when there
are notifications, instead of the previous solid dot. The dot is kept
for the warning and pending-permission states. The badge re-keys on
every count change so the pop animation re-fires whenever a new
notification arrives.

* IconNotification.vue: count prop with default 0; renders the dot
  SVG only when warning or pending-permission, the plain bell + badge
  otherwise
* NotificationsApp.vue: passes notifications.length as :count
* styles.scss: badge styling and badge-pop keyframe

Signed-off-by: Frank Karlitschek <frank@nextcloud.com>
---
 src/Components/IconNotification.vue | 20 +++++++++++++++++---
 src/NotificationsApp.vue            |  1 +
 src/styles/styles.scss              | 29 +++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/Components/IconNotification.vue b/src/Components/IconNotification.vue
index 57bed2ff7..6bf533adc 100644
--- a/src/Components/IconNotification.vue
+++ b/src/Components/IconNotification.vue
@@ -4,9 +4,10 @@
 -->
 
 <template>
-	<span v-if="showDot || showWarning" class="notifications-button__icon">
-		<!-- Modified IconBell from material design icons -->
+	<span class="notifications-button__icon">
+		<!-- Bell with SVG dot: warning state or pending-permission state (showDot but no count) -->
 		<svg
+			v-if="showWarning || (showDot && count === 0)"
 			xmlns="http://www.w3.org/2000/svg"
 			xmlns:xlink="http://www.w3.org/1999/xlink"
 			version="1.1"
@@ -23,8 +24,17 @@
 				}"
 				d="M 21,6.5 C 21,8.43 19.43,10 17.5,10 15.57,10 14,8.43 14,6.5 14,4.57 15.57,3 17.5,3 19.43,3 21,4.57 21,6.5" />
 		</svg>
+		<!-- Plain bell for all other states (count badge handles the indicator) -->
+		<IconBell v-else :size="size" />
+		<!-- Numeric count badge (replaces the dot when there are real notifications) -->
+		<span
+			v-if="count > 0 && !showWarning"
+			:key="count"
+			class="notification__badge"
+			aria-hidden="true">
+			{{ count > 99 ? '99+' : count }}
+		</span>
 	</span>
-	<IconBell v-else class="notifications-button__icon" :size="size" />
 </template>
 
 <script setup>
@@ -41,6 +51,10 @@ defineProps({
 		type: Boolean,
 		default: false,
 	},
+	count: {
+		type: Number,
+		default: 0,
+	},
 	size: {
 		type: Number,
 		default: 20,
diff --git a/src/NotificationsApp.vue b/src/NotificationsApp.vue
index d494e609a..342e060ee 100644
--- a/src/NotificationsApp.vue
+++ b/src/NotificationsApp.vue
@@ -15,6 +15,7 @@
 		<template #trigger>
 			<IconNotification
 				:size="20"
+				:count="notifications.length"
 				:showDot="notifications.length !== 0 || webNotificationsGranted === null"
 				:showWarning="hasThrottledPushNotifications" />
 		</template>
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 96524b4a9..4e7028e8b 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -5,6 +5,8 @@
 
 .notifications-button {
 	.notifications-button__icon {
+		position: relative;
+		display: inline-flex;
 		height: 20px;
 	}
 
@@ -18,6 +20,33 @@
 		}
 	}
 
+	// Numeric count badge — replaces the dot when count > 0
+	.notification__badge {
+		position: absolute;
+		top: -5px;
+		inset-inline-end: -8px;
+		min-width: 16px;
+		height: 16px;
+		padding: 0 3px;
+		border-radius: 8px;
+		background: #ff4402;
+		color: #fff;
+		font-size: 9px;
+		font-weight: 700;
+		line-height: 16px;
+		text-align: center;
+		pointer-events: none;
+		box-sizing: border-box;
+		// :key="count" forces remount on every change → animation re-fires automatically
+		animation: badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+	}
+
+	@keyframes badge-pop {
+		0% { transform: scale(0.5); }
+		70% { transform: scale(1.35); }
+		100% { transform: scale(1); }
+	}
+
 	&.hasNotifications {
 		animation-name: pulse;
 		animation-duration: 1600ms;