From 0bb33980974fd675661c9d73c960100fd7c81702 Mon Sep 17 00:00:00 2001
From: Mike Johnston <mike@nervesocket.com>
Date: Mon, 30 Mar 2026 22:44:34 -0400
Subject: [PATCH] toggle button fixes

---
 apps/desktop/resources/web/index.html | 43 ++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/apps/desktop/resources/web/index.html b/apps/desktop/resources/web/index.html
index c14e510..39b8956 100644
--- a/apps/desktop/resources/web/index.html
+++ b/apps/desktop/resources/web/index.html
@@ -253,6 +253,7 @@
     <div class="toolbar">
       <h2>Devices</h2>
       <div style="flex:1"></div>
+      <button class="btn btn-ghost btn-sm" onclick="refreshDeviceStates()">⟳ Refresh</button>
       <button class="btn btn-ghost btn-sm" onclick="openAddDeviceModal()">＋ Add IP</button>
       <button class="btn btn-primary" id="btn-discover" onclick="discoverDevices()">⟳ Scan</button>
     </div>
@@ -708,29 +709,55 @@ function renderDevices() {
   
   // fetch current state for each device
   devices.forEach((d, i) => {
-    api('GET', `/api/devices/${d.host}/${d.port}/state`)
-      .then((on) => { 
-        const c = document.getElementById('dchk-'+i); 
-        if (c) c.checked = !!on; 
-      })
-      .catch(() => {});
-    
-    // fetch brightness for dimmer devices
+    // For dimmer devices, fetch brightness first and use it to set toggle state
     if (d.isDimmer) {
       api('GET', `/api/devices/${d.host}/${d.port}/brightness`)
         .then((data) => { 
           const slider = document.getElementById('bright-'+i); 
           const value = document.getElementById('bright-val-'+i);
+          const checkbox = document.getElementById('dchk-'+i);
+          
           if (slider && value && data.brightness !== undefined) {
             slider.value = data.brightness;
             value.textContent = Math.round(data.brightness) + '%';
+            // Set toggle state based on brightness (0 = off, >0 = on)
+            if (checkbox) checkbox.checked = data.brightness > 0;
           }
         })
+        .catch(() => {
+          // Fallback to regular state check if brightness fails
+          api('GET', `/api/devices/${d.host}/${d.port}/state`)
+            .then((on) => { 
+              const c = document.getElementById('dchk-'+i); 
+              if (c) c.checked = !!on; 
+            })
+            .catch(() => {});
+        });
+    } else {
+      // For non-dimmer devices, just fetch the binary state
+      api('GET', `/api/devices/${d.host}/${d.port}/state`)
+        .then((on) => { 
+          const c = document.getElementById('dchk-'+i); 
+          if (c) c.checked = !!on; 
+        })
         .catch(() => {});
     }
   });
 }
 
+// ── Refresh Device States ───────────────────────────────────────────────────
+async function refreshDeviceStates() {
+  if (!devices.length) return;
+  
+  // Show loading state
+  toast('Refreshing device states...', 'info');
+  
+  // Re-render devices to refresh their states
+  renderDevices();
+  
+  toast('Device states refreshed', 'success');
+}
+
 async function toggleDevice(i, e) {
   e.preventDefault();
   const dev = devices[i];