toggle button state on load

apps/desktop/resources/web/index.html

@@ -709,30 +709,28 @@ 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
+    // For dimmer devices, fetch both brightness and state
     if (d.isDimmer) {
+      // Fetch brightness first
       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
+        .catch(() => {});
+      
+      // Also fetch the actual on/off state to set the toggle correctly
       api('GET', `/api/devices/${d.host}/${d.port}/state`)
         .then((on) => { 
-              const c = document.getElementById('dchk-'+i); 
-              if (c) c.checked = !!on; 
+          const checkbox = document.getElementById('dchk-'+i); 
+          if (checkbox) checkbox.checked = !!on; 
         })
         .catch(() => {});
-        });
     } else {
       // For non-dimmer devices, just fetch the binary state
       api('GET', `/api/devices/${d.host}/${d.port}/state`)