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