From 974f4f16d7026764f766e6899778c63423c094a5 Mon Sep 17 00:00:00 2001
From: gitomarcourt <arcourt.tom@gmail.com>
Date: Fri, 3 Jul 2026 18:09:13 +0200
Subject: [PATCH] ui: remove connecting badge and redundant button alert badge

- Replaced connection status badge with a small colored dot in the header
  (green when connected, red when disconnected, gray while connecting)
- Removed the 'button' badge on device cards - it duplicated the info
  already shown when mode == Button and just added visual noise
---
 dashboard/static/index.html | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/dashboard/static/index.html b/dashboard/static/index.html
index ee93d1e..5f34ff8 100644
--- a/dashboard/static/index.html
+++ b/dashboard/static/index.html
@@ -26,10 +26,7 @@
       <h1 class="text-xl md:text-2xl font-semibold tracking-tight">SNEK Dashboard</h1>
       <p class="text-sm text-slate-500 mt-0.5">Live Sens'it uplink decoding</p>
     </div>
-    <div id="conn-badge" class="inline-flex items-center gap-2 text-xs px-2.5 py-1 rounded-md bg-slate-100 text-slate-600 border border-slate-200 w-fit">
-      <span id="conn-dot" class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>
-      <span id="conn-text">connecting</span>
-    </div>
+    <span id="conn-dot" class="w-2 h-2 rounded-full bg-slate-300" title="disconnected"></span>
   </header>
 
   <!-- Devices -->
@@ -156,7 +153,6 @@ function renderDevices() {
           <div class="mt-1 flex items-center gap-2 flex-wrap">
             ${badge(d.mode || 'Unknown', modeTone(d.mode))}
             ${d.format ? badge(d.format.replace('sensit_','').toUpperCase(), 'slate') : ''}
-            ${d.button_alert ? badge('button', 'blue') : ''}
           </div>
         </div>
         <div class="text-right shrink-0">
@@ -247,17 +243,14 @@ async function bootstrap() {
 
 function setConn(state) {
   const dot = document.getElementById('conn-dot');
-  const txt = document.getElementById('conn-text');
-  const bg  = document.getElementById('conn-badge');
   const map = {
-    live:  ['bg-emerald-500', 'live', 'bg-emerald-50 text-emerald-700 border-emerald-200'],
-    off:   ['bg-rose-500', 'reconnecting', 'bg-rose-50 text-rose-700 border-rose-200'],
-    idle:  ['bg-slate-400', 'connecting', 'bg-slate-100 text-slate-600 border-slate-200'],
+    live: ['bg-emerald-500', 'connected'],
+    off:  ['bg-rose-500', 'disconnected'],
+    idle: ['bg-slate-300', 'connecting'],
   };
-  const [d, t, b] = map[state] || map.idle;
-  dot.className = `w-1.5 h-1.5 rounded-full ${d}`;
-  txt.textContent = t;
-  bg.className = `inline-flex items-center gap-2 text-xs px-2.5 py-1 rounded-md border w-fit ${b}`;
+  const [color, title] = map[state] || map.idle;
+  dot.className = `w-2 h-2 rounded-full ${color}`;
+  dot.title = title;
 }
 
 function connectSSE() {