feat(ui): hide device management behind ⚙ MANAGE toggle — form and remove buttons only shown when active

lightsync/frontend/app.js

@@ -115,11 +115,18 @@ 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;
     const data = {
-        name: form.name.value.trim(),
+        name: form.elements["name"].value.trim(),
         strip_type: form.strip_type.value,
         led_count: parseInt(form.led_count.value, 10),
         ip: form.ip.value.trim(),

lightsync/frontend/index.html

@@ -21,7 +21,7 @@
 
         <aside class="sidebar">
             <div class="panel" id="devices-panel" style="flex: 1; min-height: 0;">
-                <div class="panel-header">DEVICES</div>
+                <div class="panel-header">DEVICES <button class="panel-manage-btn" id="devices-manage-toggle" title="Manage devices">⚙ MANAGE</button></div>
                 <div class="panel-content" id="device-list">
                     <span class="text-dim">loading...</span>
                 </div>

lightsync/frontend/style.css

@@ -87,8 +87,41 @@ body {
     color: var(--text-accent);
     text-transform: uppercase;
     flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
+.panel-manage-btn {
+    background: none;
+    border: 1px solid transparent;
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    cursor: pointer;
+    padding: 1px 6px;
+    text-transform: uppercase;
+}
+
+.panel-manage-btn:hover {
+    border-color: var(--border-dim);
+    color: var(--text-accent);
+}
+
+.panel-manage-btn.active {
+    border-color: var(--accent);
+    color: var(--text-accent);
+}
+
+/* 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; }
+
 .panel-content {
     flex: 1;
     padding: 8px 12px;