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 1/2] 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>

From 15d17ed35e3131ed977139c65b4c875647fcbc2d Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Wed, 10 Jun 2026 18:08:27 +0900
Subject: [PATCH 2/2] app: Show pulsing loading dots until first status fetch

Default the status badges to a pulsing "loading" dot instead of the
static offline state, signalling that the data is not yet fetched. The
dots are replaced with their real state on the first /api/status update.

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

diff --git a/cmd/repeater/static/index.html b/cmd/repeater/static/index.html
index d7de994..dd89abb 100644
--- a/cmd/repeater/static/index.html
+++ b/cmd/repeater/static/index.html
@@ -22,16 +22,16 @@
                 </div>
                 <div class="connection-info">
                     <div class="status-badge" id="wifiStatus">
-                        <span class="status-dot offline"></span>
-                        <span class="status-text">Disconnected</span>
+                        <span class="status-dot loading"></span>
+                        <span class="status-text">Chargement…</span>
                     </div>
                     <div class="status-badge" id="ethernetStatus" hidden>
-                        <span class="status-dot offline"></span>
+                        <span class="status-dot loading"></span>
                         <span class="status-text">Ethernet</span>
                     </div>
                     <div class="status-badge" id="hotspotStatus">
-                        <span class="status-dot offline"></span>
-                        <span class="status-text">Hotspot actif</span>
+                        <span class="status-dot loading"></span>
+                        <span class="status-text">Chargement…</span>
                     </div>
                 </div>
             </div>
diff --git a/cmd/repeater/static/style.css b/cmd/repeater/static/style.css
index dbad213..5967985 100644
--- a/cmd/repeater/static/style.css
+++ b/cmd/repeater/static/style.css
@@ -131,6 +131,11 @@ body {
     animation: blink 1.2s ease-in-out infinite;
 }
 
+.status-dot.loading {
+    background: var(--text-tertiary);
+    animation: pulse 1.5s ease-in-out infinite;
+}
+
 @keyframes blink {
     0%, 100% { opacity: 1; }
     50% { opacity: 0.3; }