From e3dd78bee2d2e26cc70029f8c7d92324c1b7b847 Mon Sep 17 00:00:00 2001
From: Claude <claude@groll.cloud>
Date: Sun, 5 Apr 2026 21:38:48 +0000
Subject: [PATCH] fix(ui): replace JS toggle with native <details> for device
 manage section

---
 lightsync/frontend/app.js     |  7 ------
 lightsync/frontend/index.html | 29 ++++++++++++----------
 lightsync/frontend/style.css  | 45 +++++++++++++++++++----------------
 3 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/lightsync/frontend/app.js b/lightsync/frontend/app.js
index c999f60..19e211b 100644
--- a/lightsync/frontend/app.js
+++ b/lightsync/frontend/app.js
@@ -115,13 +115,6 @@ function escapeHtml(str) {
 
 loadDevices();
 
-document.getElementById("devices-manage-toggle").addEventListener("click", () => {
-    const panel = document.getElementById("devices-panel");
-    const btn = document.getElementById("devices-manage-toggle");
-    const active = panel.classList.toggle("manage-active");
-    btn.classList.toggle("active", active);
-});
-
 document.getElementById("add-device-form").addEventListener("submit", async (e) => {
     e.preventDefault();
     const form = e.target;
diff --git a/lightsync/frontend/index.html b/lightsync/frontend/index.html
index b3ea4fb..eb8f2e6 100644
--- a/lightsync/frontend/index.html
+++ b/lightsync/frontend/index.html
@@ -21,22 +21,25 @@
 
         <aside class="sidebar">
             <div class="panel" id="devices-panel" style="flex: 0 0 auto;">
-                <div class="panel-header">DEVICES <button type="button" class="panel-manage-btn" id="devices-manage-toggle" title="Manage devices">⚙ MANAGE</button></div>
+                <div class="panel-header">DEVICES</div>
                 <div class="panel-content" id="device-list">
                     <span class="text-dim">loading...</span>
                 </div>
-                <form id="add-device-form" class="device-form">
-                    <input type="text" name="name" placeholder="Device name" required>
-                    <select name="strip_type" required>
-                        <option value="sk6812">SK6812</option>
-                        <option value="ws2801">WS2801</option>
-                        <option value="generic">Generic</option>
-                    </select>
-                    <input type="number" name="led_count" placeholder="LED count" min="1" max="1000" required>
-                    <input type="text" name="ip" placeholder="IP address" required>
-                    <input type="number" name="port" placeholder="Port" min="1" max="65535" value="21324" required>
-                    <button type="submit">+ ADD DEVICE</button>
-                </form>
+                <details class="device-manage-section">
+                    <summary>⚙ MANAGE DEVICES</summary>
+                    <form id="add-device-form" class="device-form">
+                        <input type="text" name="name" placeholder="Device name" required>
+                        <select name="strip_type" required>
+                            <option value="sk6812">SK6812</option>
+                            <option value="ws2801">WS2801</option>
+                            <option value="generic">Generic</option>
+                        </select>
+                        <input type="number" name="led_count" placeholder="LED count" min="1" max="1000" required>
+                        <input type="text" name="ip" placeholder="IP address" required>
+                        <input type="number" name="port" placeholder="Port" min="1" max="65535" value="21324" required>
+                        <button type="submit">+ ADD DEVICE</button>
+                    </form>
+                </details>
             </div>
             <div class="panel" id="animations-panel" style="flex: 1; min-height: 0;">
                 <div class="panel-header">ANIMATIONS</div>
diff --git a/lightsync/frontend/style.css b/lightsync/frontend/style.css
index 1db3c1e..c19e239 100644
--- a/lightsync/frontend/style.css
+++ b/lightsync/frontend/style.css
@@ -92,35 +92,40 @@ body {
     justify-content: space-between;
 }
 
-.panel-manage-btn {
-    background: none;
-    border: 1px solid transparent;
-    color: var(--text-dim);
-    font-family: var(--font-mono);
+/* Device manage section — collapsible via <details> */
+.device-manage-section {
+    border-top: 1px solid var(--border-dim);
+}
+
+.device-manage-section > summary {
+    padding: 5px 12px;
     font-size: 10px;
-    letter-spacing: 0.08em;
-    cursor: pointer;
-    padding: 1px 6px;
+    letter-spacing: 0.1em;
     text-transform: uppercase;
+    color: var(--text-dim);
+    cursor: pointer;
+    user-select: none;
+    list-style: none;
 }
 
-.panel-manage-btn:hover {
-    border-color: var(--border-dim);
+.device-manage-section > summary::-webkit-details-marker { display: none; }
+
+.device-manage-section > summary::before {
+    content: "▶ ";
+    font-size: 8px;
+}
+
+.device-manage-section[open] > summary {
     color: var(--text-accent);
 }
 
-.panel-manage-btn.active {
-    border-color: var(--accent);
-    color: var(--text-accent);
+.device-manage-section[open] > summary::before {
+    content: "▼ ";
 }
 
-/* Management controls hidden by default */
-#devices-panel .device-remove { display: none; }
-#devices-panel .device-form   { display: none; }
-
-/* Shown when manage mode active */
-#devices-panel.manage-active .device-remove { display: block; }
-#devices-panel.manage-active .device-form   { display: flex; }
+.device-manage-section > summary:hover {
+    color: var(--text-accent);
+}
 
 .panel-content {
     flex: 1;