From 1881b74d922e7680775b4fbd4e09df31ae7ddc90 Mon Sep 17 00:00:00 2001
From: Jon <git@jonstarkey.co.uk>
Date: Fri, 5 Jun 2026 19:40:21 +0100
Subject: [PATCH] Notifications card: show unread count bubble via the shared
 poll

pollNotifications now updates every .notif-badge (sidebar nav + homepage card)
from the same /api/notifications source, so the card bubble shows the unread
count and clears in lockstep with the sidebar. Add a badge to the card; scope
the collapsed-only badge positioning to the sidebar.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 manager/templates/base.html | 12 +++++++-----
 manager/templates/home.html |  1 +
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/manager/templates/base.html b/manager/templates/base.html
index ed033cf..7f45577 100644
--- a/manager/templates/base.html
+++ b/manager/templates/base.html
@@ -120,7 +120,7 @@
       font-size: 11px; font-weight: 700;
       display: inline-flex; align-items: center; justify-content: center;
     }
-    html.collapsed .notif-badge {
+    html.collapsed .side-nav .notif-badge {
       position: absolute; top: 5px; right: 8px; margin: 0;
       min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px;
     }
@@ -336,10 +336,12 @@
       const r = await fetch('/api/notifications', { headers: { 'X-Token': t } });
       if (!r.ok) return;
       const d = await r.json();
-      const b = document.getElementById('notif-badge');
-      if (!b) return;
-      if (d.unread > 0) { b.textContent = d.unread > 99 ? '99+' : d.unread; b.style.display = 'inline-flex'; }
-      else { b.style.display = 'none'; }
+      const label = d.unread > 99 ? '99+' : d.unread;
+      // update every badge (sidebar nav + homepage card) from the one source
+      document.querySelectorAll('.notif-badge').forEach(b => {
+        if (d.unread > 0) { b.textContent = label; b.style.display = 'inline-flex'; }
+        else { b.style.display = 'none'; }
+      });
     } catch (e) {}
   }
   pollNotifications();
diff --git a/manager/templates/home.html b/manager/templates/home.html
index f9d2ea1..4cb2320 100644
--- a/manager/templates/home.html
+++ b/manager/templates/home.html
@@ -75,6 +75,7 @@
   <a class="tile" href="/notifications">
     <span class="t-ico">🔔</span>
     <span class="t-title">Notifications</span>
+    <span class="notif-badge" style="display:none;"></span>
   </a>
   <a class="tile" href="/settings">
     <span class="t-ico">⚙️</span>