toggle button fixes

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) => {
+    // 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(() => {});
-    
-    // fetch brightness for dimmer devices
-    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);
-          if (slider && value && data.brightness !== undefined) {
-            slider.value = data.brightness;
-            value.textContent = Math.round(data.brightness) + '%';
-          }
+        });
+    } 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];