From b80c0428c96e92795f583c5eaa9ffcc6790286cd Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Tue, 7 Oct 2025 20:42:21 +0000
Subject: [PATCH] Add alert count badge to Alerts tab with green checkmark

- Show red badge with count of unacknowledged alerts on Alerts tab
- Display green checkmark when no unacknowledged alerts exist
- Sync activeAlerts array to state for reactive badge updates
- Filter badge count to only show unacknowledged alerts

The badge provides immediate visibility of pending alerts without
needing to navigate to the Alerts page.
---
 frontend-modern/src/App.tsx             | 25 ++++++++++++++++++-------
 frontend-modern/src/stores/websocket.ts |  3 ++-
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend-modern/src/App.tsx b/frontend-modern/src/App.tsx
index 7f6687212..e8ac58cfd 100644
--- a/frontend-modern/src/App.tsx
+++ b/frontend-modern/src/App.tsx
@@ -702,7 +702,8 @@ function AppLayout(props: {
   });
 
   const utilityTabs = createMemo(() => {
-    const activeAlertCount = props.state().activeAlerts?.length ?? 0;
+    const allAlerts = props.state().activeAlerts || [];
+    const activeAlertCount = allAlerts.filter((a: any) => !a.acknowledged).length;
     return [
       {
         id: 'alerts' as const,
@@ -922,12 +923,22 @@ function AppLayout(props: {
                     title={tab.tooltip}
                   >
                     {tab.icon}
-                    <span>{tab.label}</span>
-                    <Show when={tab.count !== undefined && tab.count > 0}>
-                      <span class="ml-1 px-1.5 py-0.5 min-w-[1.25rem] text-[10px] font-semibold leading-none text-center bg-red-500 text-white rounded-full">
-                        {tab.count}
-                      </span>
-                    </Show>
+                    <span class="flex items-center gap-1.5">
+                      <span>{tab.label}</span>
+                      {tab.id === 'alerts' && (
+                        <>
+                          {(tab.count !== undefined && tab.count > 0) ? (
+                            <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-bold bg-red-500 text-white rounded-full">
+                              {tab.count}
+                            </span>
+                          ) : (
+                            <svg class="w-4 h-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
+                              <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                            </svg>
+                          )}
+                        </>
+                      )}
+                    </span>
                     <Show when={tab.badge === 'update'}>
                       <span class="ml-1 w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
                     </Show>
diff --git a/frontend-modern/src/stores/websocket.ts b/frontend-modern/src/stores/websocket.ts
index 6e7f4b2ff..b7999c876 100644
--- a/frontend-modern/src/stores/websocket.ts
+++ b/frontend-modern/src/stores/websocket.ts
@@ -351,7 +351,8 @@ export function createWebSocketStore(url: string) {
                 setActiveAlerts(id, alert);
               });
 
-              // Updated activeAlerts
+              // Updated activeAlerts - also sync to state for badge count
+              setState('activeAlerts', message.data.activeAlerts);
             }
             // Sync recently resolved alerts
             if (message.data.recentlyResolved !== undefined) {