From e656c79589bf305b59ae912258d72885864645a1 Mon Sep 17 00:00:00 2001
From: rouggy <legreg002@hotmail.com>
Date: Tue, 7 Jul 2026 22:43:02 +0200
Subject: [PATCH] fix: Hiding the alert bell if not active alerts

---
 frontend/src/App.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d615dee..7ce222f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -806,6 +806,8 @@ export default function App() {
     }, 20000);
     return () => window.clearInterval(id);
   }, []);
+  // Close the (now-hidden) dropdown when the last alert clears/expires.
+  useEffect(() => { if (recentAlerts.length === 0) setAlertsPanelOpen(false); }, [recentAlerts.length]);
 
   // NET Control tab — enabled from Tools (persisted; once on it's a tab like Cluster).
   const [netEnabled, setNetEnabled] = useState(() => localStorage.getItem('opslog.netEnabled') === '1');
@@ -2727,7 +2729,8 @@ export default function App() {
   // row instead of the intrusive floating cards. It lights + shows a count when
   // alerts are pending; click it to see the last 3 (each clickable to tune).
   const hasAlerts = recentAlerts.length > 0;
-  const alertLedBlock = (
+  // Only show the bell when there are pending alerts — hidden otherwise.
+  const alertLedBlock = !hasAlerts ? null : (
     <div className="relative self-end mb-0.5 shrink-0">
       <button type="button" onClick={() => setAlertsPanelOpen((o) => !o)}
         title={hasAlerts ? t('alert.pending', { n: recentAlerts.length }) : t('alert.noneShort')}