From c5aa51a7e609bfd804601565ae6bdc9e1f50f3bc Mon Sep 17 00:00:00 2001
From: Kaushal Shriwas <64089478+kaulith@users.noreply.github.com>
Date: Wed, 8 Apr 2026 20:15:29 +0530
Subject: [PATCH] fix: show notification badge on desktop bell icon

---
 frappe/desk/page/desktop/desktop.html         |  2 +-
 .../frappe/ui/notifications/notifications.js  | 23 +++++++++++++++----
 frappe/public/scss/desk/notification.scss     | 21 +++++++++++++++++
 3 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/frappe/desk/page/desktop/desktop.html b/frappe/desk/page/desktop/desktop.html
index 320f808f91..2ea4827995 100644
--- a/frappe/desk/page/desktop/desktop.html
+++ b/frappe/desk/page/desktop/desktop.html
@@ -26,7 +26,7 @@
         <div class="flex" style="gap:16px; align-items: center;">
             <div class="desktop-notifications">
                 <div class="dropdown dropdown-notifications">
-                    <button class="btn-reset nav-link text-muted" data-toggle="dropdown" aria-label="{{ _("Notifications") }}" aria-haspopup="true">
+                    <button class="btn-reset nav-link text-muted desktop-notification-icon" data-toggle="dropdown" aria-label="{{ _("Notifications") }}" aria-haspopup="true">
                         <svg
                             class="icon icon-md" aria-hidden="true"
                         >
diff --git a/frappe/public/js/frappe/ui/notifications/notifications.js b/frappe/public/js/frappe/ui/notifications/notifications.js
index a7d40e0cf9..b68cc9950d 100644
--- a/frappe/public/js/frappe/ui/notifications/notifications.js
+++ b/frappe/public/js/frappe/ui/notifications/notifications.js
@@ -383,8 +383,21 @@ class NotificationsView extends BaseNotificationsView {
 	}
 
 	toggle_notification_icon(seen) {
-		this.notifications_icon.find(".notifications-seen").toggle(seen);
-		this.notifications_icon.find(".notifications-unseen").toggle(!seen);
+		let sidebar_bell = $(".sidebar-notification");
+		let desktop_bell = $(".desktop-notification-icon");
+		if (seen) {
+			sidebar_bell.find(".notification-badge").remove();
+			desktop_bell.find(".notification-badge").remove();
+		} else {
+			if (sidebar_bell.find(".notification-badge").length === 0) {
+				sidebar_bell
+					.find(".sidebar-item-icon")
+					.append('<span class="notification-badge"></span>');
+			}
+			if (desktop_bell.find(".notification-badge").length === 0) {
+				desktop_bell.append('<span class="notification-badge"></span>');
+			}
+		}
 	}
 
 	toggle_seen(flag) {
@@ -407,10 +420,10 @@ class NotificationsView extends BaseNotificationsView {
 			this.toggle_notification_icon(true);
 		});
 
-		this.parent.on("show.bs.dropdown", () => {
-			this.toggle_seen(true);
-			if (this.notifications_icon.find(".notifications-unseen").is(":visible")) {
+		$(document).on("click", ".sidebar-notification, .desktop-notification-icon", () => {
+			if ($(".notification-badge").length > 0) {
 				this.toggle_notification_icon(true);
+				this.toggle_seen(true);
 				frappe.call(
 					"frappe.desk.doctype.notification_log.notification_log.trigger_indicator_hide"
 				);
diff --git a/frappe/public/scss/desk/notification.scss b/frappe/public/scss/desk/notification.scss
index c5ef9ea68f..4e45aabf94 100644
--- a/frappe/public/scss/desk/notification.scss
+++ b/frappe/public/scss/desk/notification.scss
@@ -44,6 +44,27 @@
 	display: none;
 }
 
+.sidebar-notification .sidebar-item-icon,
+.desktop-notification-icon {
+	position: relative;
+}
+
+.notification-badge {
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	width: 8px;
+	height: 8px;
+	background-color: var(--red-500);
+	border-radius: 50%;
+	pointer-events: none;
+}
+
+.desktop-notification-icon > .notification-badge {
+	top: 2px;
+	right: 0;
+}
+
 .mark-read {
 	display: none;
 	margin-left: 10px;