From 3e66ae200e0f02f52b5c0aeaefb72f48f7dbfc43 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Wed, 10 Jun 2026 18:05:54 +0900
Subject: [PATCH] app: Sync status dots with Ethernet uplink state

Default the Ethernet and hotspot badges to the offline dot and update
the Ethernet dot to active when the uplink is up, so its colour tracks
the actual connection state instead of the initial markup.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 cmd/repeater/static/app.js     | 3 +++
 cmd/repeater/static/index.html | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/cmd/repeater/static/app.js b/cmd/repeater/static/app.js
index 75240c1..3d0d7e0 100644
--- a/cmd/repeater/static/app.js
+++ b/cmd/repeater/static/app.js
@@ -286,11 +286,14 @@ function updateStatusDisplay(status) {
 
     // Update Ethernet uplink badge
     const ethernetStatus = document.getElementById('ethernetStatus');
+    const ethernetDot = ethernetStatus.querySelector('.status-dot');
     const ethernetText = ethernetStatus.querySelector('.status-text');
     if (status.ethernetStatus?.active) {
+        ethernetDot.className = 'status-dot active';
         ethernetText.textContent = `Ethernet · ${status.ethernetStatus.ipv4 || status.ethernetStatus.interface}`;
         ethernetStatus.hidden = false;
     } else {
+        ethernetDot.className = 'status-dot offline';
         ethernetStatus.hidden = true;
     }
 
diff --git a/cmd/repeater/static/index.html b/cmd/repeater/static/index.html
index b0f96b8..d7de994 100644
--- a/cmd/repeater/static/index.html
+++ b/cmd/repeater/static/index.html
@@ -26,11 +26,11 @@
                         <span class="status-text">Disconnected</span>
                     </div>
                     <div class="status-badge" id="ethernetStatus" hidden>
-                        <span class="status-dot active"></span>
+                        <span class="status-dot offline"></span>
                         <span class="status-text">Ethernet</span>
                     </div>
                     <div class="status-badge" id="hotspotStatus">
-                        <span class="status-dot active"></span>
+                        <span class="status-dot offline"></span>
                         <span class="status-text">Hotspot actif</span>
                     </div>
                 </div>