Fix dashboard settings panel closing on auto-refresh

Replace full innerHTML re-render with incremental DOM updates:
- renderedDisks map tracks what's already in the DOM
- On refresh: only update diskProgress_KEY and diskBtns_KEY elements
- Full card re-render only on first appearance or state/disk_id change
- If an edited disk disconnects: toast error, panel removed cleanly
- openPanels Set persists panel open state across partial updates

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

web/templates/dashboard.html

@@ -11,29 +11,25 @@
 
 <script>
 let disks = [];
-const taskState = new Map();
+const taskState   = new Map(); // taskID -> task
-const taskPollers = new Map();
+const taskPollers = new Map(); // taskID -> intervalID
+const openPanels  = new Set(); // disk key -> panel is open
+const renderedDisks = new Map(); // disk key -> { state, disk_id } — what we last fully rendered
 
-function escapeHTML(value) {
+// ─── helpers ────────────────────────────────────────────────────────────────
-  return String(value || '').replace(/[&<>"']/g, (char) => ({
+
-    '&': '&amp;',
+function escapeHTML(v) {
-    '<': '&lt;',
+  return String(v || '').replace(/[&<>"']/g, c =>
-    '>': '&gt;',
+    ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c]));
-    '"': '&quot;',
-    "'": '&#39;'
-  }[char]));
 }
 
-function diskKey(disk) {
+function diskKey(disk) { return disk.disk_id || disk.mount_path; }
-  return disk.disk_id || disk.mount_path;
-}
 
-function badgeClass(state) {
+function badgeClass(s) {
-  return ({ absent: 'badge-unknown', foreign: 'badge-warn', known: 'badge-ok' })[state] || 'badge-unknown';
+  return ({ absent:'badge-unknown', foreign:'badge-warn', known:'badge-ok' })[s] || 'badge-unknown';
 }
-
+function badgeLabel(s) {
-function badgeLabel(state) {
+  return ({ absent:'Not connected', foreign:'Uninitialized disk', known:'Ready' })[s] || '—';
-  return ({ absent: 'Not connected', foreign: 'Uninitialized disk', known: 'Ready' })[state] || '—';
 }
 
 function fmtSpeed(bps) {
@@ -43,55 +39,120 @@ function fmtSpeed(bps) {
   if (bps >= 1e3) return (bps/1e3).toFixed(0)+' KB/s';
   return bps+' B/s';
 }
-
 function fmtETA(sec) {
   if (!sec || sec <= 0) return '';
   if (sec >= 3600) return Math.floor(sec/3600)+' h '+Math.floor((sec%3600)/60)+' min';
   if (sec >= 60)   return Math.floor(sec/60)+' min';
   return sec+' s';
 }
-
+function fmtBytes(b) {
-function fmtBytes(bytes) {
+  if (!b) return '—';
-  if (!bytes) return '—';
+  if (b >= 1e12) return (b/1e12).toFixed(1)+' TB';
-  if (bytes >= 1e12) return (bytes / 1e12).toFixed(1) + ' TB';
+  if (b >= 1e9)  return (b/1e9).toFixed(1)+' GB';
-  if (bytes >= 1e9) return (bytes / 1e9).toFixed(1) + ' GB';
+  if (b >= 1e6)  return (b/1e6).toFixed(1)+' MB';
-  if (bytes >= 1e6) return (bytes / 1e6).toFixed(1) + ' MB';
+  return b+' B';
-  return bytes + ' B';
+}
+function fmtDateTime(v) {
+  if (!v) return 'Never';
+  const d = new Date(v);
+  if (isNaN(d)) return v;
+  return d.toLocaleString('en-US', { year:'numeric', month:'short', day:'2-digit', hour:'2-digit', minute:'2-digit' });
+}
+function taskMeta(t) {
+  if (!t) return '';
+  return [fmtSpeed(t.speed_bps), t.eta_sec ? 'ETA: '+fmtETA(t.eta_sec) : ''].filter(Boolean).join(' · ');
 }
 
-function fmtDateTime(value) {
+// ─── progress section (dynamic) ─────────────────────────────────────────────
-  if (!value) return 'Never';
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return value;
-  return date.toLocaleString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit'
-  });
-}
 
-function taskMeta(task) {
+function progressHTML(disk) {
+  const task = disk.active_task_id ? taskState.get(disk.active_task_id) : null;
   if (!task) return '';
-  return [fmtSpeed(task.speed_bps), task.eta_sec ? 'ETA: ' + fmtETA(task.eta_sec) : ''].filter(Boolean).join(' · ');
+  const pct     = task.progress || 0;
+  const message = task.message  || 'Preparing...';
+  const meta    = taskMeta(task);
+  return `
+    <div class="panel-body progress-wrap">
+      <div class="progress-bar-bg">
+        <div class="progress-bar-fill" style="width:${pct}%"></div>
+      </div>
+      <div class="progress-label">${escapeHTML(message)}</div>
+      ${meta ? `<div class="progress-label">${escapeHTML(meta)}</div>` : ''}
+    </div>`;
 }
 
+function btnsHTML(disk) {
+  const task    = disk.active_task_id ? taskState.get(disk.active_task_id) : null;
+  const key     = escapeHTML(diskKey(disk));
+  const busy    = !!task;
+  const isKnown   = disk.state === 'known';
+  const isForeign = disk.state === 'foreign';
+  return `
+    ${isKnown ? `
+      <button class="button-danger"  data-action="start-copy" data-mode="replace" data-disk-id="${key}" ${busy?'disabled':''}>Replace media</button>
+      <button class="button-primary" data-action="start-copy" data-mode="add"     data-disk-id="${key}" ${busy?'disabled':''}>Add media</button>
+      <button class="button-danger ${busy?'':'hidden'}" data-action="cancel-copy" data-disk-id="${key}">Cancel</button>
+      <button class="button-secondary" data-action="disk-settings" data-disk-key="${key}" style="margin-left:auto">⚙ Settings${openPanels.has(diskKey(disk))?' ✕':''}</button>
+    ` : ''}
+    ${isForeign ? `
+      <button class="button-secondary" data-action="init-disk" data-mount-path="${escapeHTML(disk.mount_path)}">Initialize disk</button>
+    ` : ''}`;
+}
+
+// ─── full card render (only on first appearance or state change) ─────────────
+
 function renderProfile(disk) {
   const p  = disk.profile || {};
   const t  = p.transcode  || null;
-  const transcodeEnabled = !!t;
+  const te = !!t;
-  const key = escapeHTML(diskKey(disk));
+  const k  = escapeHTML(diskKey(disk));
 
-  const sel = (name, value, options) => {
+  const sel = (name, value, opts) => {
-    const opts = options.map(([v, label]) =>
+    const o = opts.map(([v,l]) =>
-      `<option value="${v}" ${v === value ? 'selected' : ''}>${escapeHTML(label)}</option>`
+      `<option value="${v}" ${v===value?'selected':''}>${escapeHTML(l)}</option>`
     ).join('');
-    return `<select class="form-input" id="prof_${name}_${key}">${opts}</select>`;
+    return `<select class="form-input" id="prof_${name}_${k}">${o}</select>`;
   };
 
-  const transcodeSection = `
+  return `
-    <div id="transcodeFields_${key}" style="${transcodeEnabled ? '' : 'display:none'}">
+    <section class="panel" id="profilePanel_${k}" style="display:${openPanels.has(diskKey(disk))?'':'none'}">
+      <h2>Профиль диска</h2>
+      <div class="panel-body">
+        <h3>Параметры копирования</h3>
+        <div class="form-group">
+          <label>Папка назначения</label>
+          <input class="form-input" type="text" id="prof_dest_folder_${k}" value="${escapeHTML(p.dest_folder||'media')}">
+        </div>
+        <div class="form-group">
+          <label>Режим перезаписи</label>
+          ${sel('overwrite_mode', p.overwrite_mode||'skip', [['skip','Пропускать существующие'],['delete','Заменять всё']])}
+        </div>
+        <div class="form-group">
+          <label>Выбор файлов</label>
+          ${sel('file_select_mode', p.file_select_mode||'new', [['new','Только новые'],['all','Все подходящие']])}
+        </div>
+        <div class="form-group">
+          <label>Порядок копирования</label>
+          ${sel('shuffle_depth', String(p.shuffle_depth??-1), [['-1','По порядку (без перемешивания)'],['0','Случайный порядок файлов'],['1','Случайная папка 1-го уровня (жанр)'],['2','Случайная папка 2-го уровня (сериал)'],['3','Случайная папка 3-го уровня (сезон)']])}
+          <span class="form-hint">Уровень задаёт глубину вложения: все файлы выбранной папки копируются целиком.</span>
+        </div>
+        <div class="form-group">
+          <label>Резерв свободного места (ГБ)</label>
+          <input class="form-input" type="number" id="prof_reserve_free_gb_${k}" value="${p.reserve_free_gb??2}" min="0" step="0.5">
+        </div>
+        <div class="form-group">
+          <label><input type="checkbox" id="prof_auto_copy_${k}" ${p.auto_copy?'checked':''}> Автокопирование при подключении</label>
+        </div>
+
+        <h3 style="margin-top:1.5em">Транскодирование видео</h3>
+        <div class="form-group">
+          <label>
+            <input type="checkbox" id="prof_transcode_enabled_${k}" ${te?'checked':''}
+              onchange="document.getElementById('transcodeFields_${k}').style.display=this.checked?'':'none'">
+            Ограничить видео под устройство
+          </label>
+        </div>
+        <div id="transcodeFields_${k}" style="${te?'':'display:none'}">
           <div class="form-group">
             <label>Видеокодек</label>
             ${sel('video_codec', t?.video_codec||'h264', [['h264','H.264 (AVC)'],['h265','H.265 (HEVC)'],['mpeg4','MPEG-4']])}
@@ -127,135 +188,100 @@ function renderProfile(disk) {
             ${sel('output_format', t?.output_format||'mp4', [['mp4','MP4'],['mkv','MKV'],['avi','AVI']])}
           </div>
         </div>
-  `;
-
-  return `
-    <section class="panel" id="profilePanel_${key}" style="display:none">
-      <h2>Профиль диска</h2>
-      <div class="panel-body">
-        <h3>Параметры копирования</h3>
-        <div class="form-group">
-          <label>Папка назначения</label>
-          <input class="form-input" type="text" id="prof_dest_folder_${key}" value="${escapeHTML(p.dest_folder || 'media')}">
-        </div>
-        <div class="form-group">
-          <label>Режим перезаписи</label>
-          ${sel('overwrite_mode', p.overwrite_mode || 'skip', [['skip','Пропускать существующие'],['delete','Заменять всё']])}
-        </div>
-        <div class="form-group">
-          <label>Выбор файлов</label>
-          ${sel('file_select_mode', p.file_select_mode || 'new', [['new','Только новые'],['all','Все подходящие']])}
-        </div>
-        <div class="form-group">
-          <label>Порядок копирования</label>
-          ${sel('shuffle_depth', String(p.shuffle_depth ?? -1), [['-1','По порядку (без перемешивания)'],['0','Случайный порядок файлов'],['1','Случайная папка 1-го уровня (жанр)'],['2','Случайная папка 2-го уровня (сериал)'],['3','Случайная папка 3-го уровня (сезон)']])}
-          <span class="form-hint">Уровень задаёт глубину вложения: все файлы выбранной папки копируются целиком.</span>
-        </div>
-        <div class="form-group">
-          <label>Резерв свободного места (ГБ)</label>
-          <input class="form-input" type="number" id="prof_reserve_free_gb_${key}" value="${p.reserve_free_gb ?? 2}" min="0" step="0.5">
-        </div>
-        <div class="form-group">
-          <label><input type="checkbox" id="prof_auto_copy_${key}" ${p.auto_copy ? 'checked' : ''}> Автокопирование при подключении</label>
-        </div>
-
-        <h3 style="margin-top:1.5em">Транскодирование видео</h3>
-        <div class="form-group">
-          <label>
-            <input type="checkbox" id="prof_transcode_enabled_${key}" ${transcodeEnabled ? 'checked' : ''}
-              onchange="document.getElementById('transcodeFields_${key}').style.display=this.checked?'':'none'">
-            Ограничить видео под устройство
-          </label>
-        </div>
-        ${transcodeSection}
 
         <div class="btn-row" style="margin-top:1em">
-          <button class="button-primary" onclick="saveProfile('${escapeHTML(disk.mount_path)}','${key}')">Сохранить профиль</button>
+          <button class="button-primary" onclick="saveProfile('${escapeHTML(disk.mount_path)}','${k}')">Сохранить профиль</button>
         </div>
       </div>
-    </section>
+    </section>`;
-  `;
 }
 
+function diskCardHTML(disk) {
+  const key = escapeHTML(diskKey(disk));
+  const hasCapacity = disk.state !== 'absent';
+  return `
+    <section class="panel disk-card" id="diskCard_${key}">
+      <h2>${escapeHTML(disk.mount_path)}</h2>
+      <table class="kv-table"><tbody>
+        <tr><th>Status</th><td><span class="badge ${badgeClass(disk.state)}">${badgeLabel(disk.state)}</span></td></tr>
+        <tr><th>Disk ID</th><td>${disk.disk_id ? `<span class="mono">${escapeHTML(disk.disk_id)}</span>` : '<span class="text-muted">not initialized yet</span>'}</td></tr>
+        <tr><th>Total capacity</th><td>${hasCapacity ? fmtBytes(disk.total_bytes) : '—'}</td></tr>
+        <tr><th>Free space</th><td>${hasCapacity ? fmtBytes(disk.free_bytes) : '—'}</td></tr>
+        <tr><th>Last copied</th><td>${fmtDateTime(disk.last_copied_at)}</td></tr>
+      </tbody></table>
+      <div id="diskProgress_${key}">${progressHTML(disk)}</div>
+      <div class="btn-row" id="diskBtns_${key}">${btnsHTML(disk)}</div>
+    </section>
+    ${disk.state === 'known' ? renderProfile(disk) : ''}`;
+}
+
+// ─── incremental DOM update ──────────────────────────────────────────────────
+
 function renderDisks() {
   const grid    = document.getElementById('diskGrid');
   const summary = document.getElementById('diskSummary');
 
-  if (!disks.length) {
+  const knownCount = disks.filter(d => d.state === 'known').length;
-    summary.textContent = 'No disks found.';
+  summary.textContent = disks.length
-    grid.innerHTML = '';
+    ? `Disks found: ${disks.length}. Ready to copy: ${knownCount}.`
-    return;
+    : 'No disks found.';
+
+  const incoming = new Map(disks.map(d => [diskKey(d), d]));
+
+  // Remove disappeared disks
+  for (const [key] of renderedDisks) {
+    if (!incoming.has(key)) {
+      if (openPanels.has(key)) {
+        toast('Диск отключён — несохранённые изменения потеряны', 'error');
+        openPanels.delete(key);
+      }
+      document.getElementById('diskCard_' + key)?.remove();
+      document.getElementById('profilePanel_' + key)?.remove();
+      renderedDisks.delete(key);
+    }
   }
 
-  const knownCount = disks.filter((d) => d.state === 'known').length;
+  // Add or update disks
-  summary.textContent = `Disks found: ${disks.length}. Ready to copy: ${knownCount}.`;
+  for (const disk of disks) {
+    const key  = diskKey(disk);
+    const prev = renderedDisks.get(key);
 
-  grid.innerHTML = disks.map((disk) => {
+    // Need full re-render: first appearance OR state / disk_id changed
-    const activeTask = disk.active_task_id ? taskState.get(disk.active_task_id) : null;
+    const needFull = !prev || prev.state !== disk.state || prev.disk_id !== disk.disk_id;
-    const progress = activeTask ? activeTask.progress : 0;
-    const message = activeTask ? (activeTask.message || 'Preparing...') : '';
-    const meta = activeTask ? taskMeta(activeTask) : '';
-    const isKnown = disk.state === 'known';
-    const isForeign = disk.state === 'foreign';
-    const hasCapacity = disk.state !== 'absent';
-    const key = escapeHTML(diskKey(disk));
 
-    return `
+    if (needFull) {
-      <section class="panel disk-card">
+      const existing = document.getElementById('diskCard_' + key);
-        <h2>${escapeHTML(disk.mount_path)}</h2>
+      const tmp = document.createElement('div');
-        <table class="kv-table">
+      tmp.innerHTML = diskCardHTML(disk);
-          <tbody>
+
-            <tr>
+      if (existing) {
-              <th>Status</th>
+        // Replace in-place (profile panel follows immediately after)
-              <td><span class="badge ${badgeClass(disk.state)}">${badgeLabel(disk.state)}</span></td>
+        const panel = document.getElementById('profilePanel_' + key);
-            </tr>
+        existing.replaceWith(...tmp.childNodes);
-            <tr>
+        panel?.remove();
-              <th>Disk ID</th>
+        // Profile panel was re-rendered inside tmp; it's already inserted
-              <td>${disk.disk_id ? `<span class="mono">${escapeHTML(disk.disk_id)}</span>` : '<span class="text-muted">not initialized yet</span>'}</td>
+      } else {
-            </tr>
+        // Append new
-            <tr>
+        while (tmp.firstChild) grid.appendChild(tmp.firstChild);
-              <th>Total capacity</th>
-              <td>${hasCapacity ? fmtBytes(disk.total_bytes) : '—'}</td>
-            </tr>
-            <tr>
-              <th>Free space</th>
-              <td>${hasCapacity ? fmtBytes(disk.free_bytes) : '—'}</td>
-            </tr>
-            <tr>
-              <th>Last copied</th>
-              <td>${fmtDateTime(disk.last_copied_at)}</td>
-            </tr>
-          </tbody>
-        </table>
-        ${activeTask ? `
-          <div class="panel-body progress-wrap">
-            <div class="progress-bar-bg">
-              <div class="progress-bar-fill" style="width:${progress}%"></div>
-            </div>
-            <div class="progress-label">${escapeHTML(message)}</div>
-            ${meta ? `<div class="progress-label">${escapeHTML(meta)}</div>` : ''}
-          </div>
-        ` : ''}
-        <div class="btn-row">
-          ${isKnown ? `
-            <button class="button-danger" data-action="start-copy" data-mode="replace" data-disk-id="${key}" ${activeTask ? 'disabled' : ''}>Replace media</button>
-            <button class="button-primary" data-action="start-copy" data-mode="add" data-disk-id="${key}" ${activeTask ? 'disabled' : ''}>Add media</button>
-            <button class="button-danger ${activeTask ? '' : 'hidden'}" data-action="cancel-copy" data-disk-id="${key}">Cancel</button>
-            <button class="button-secondary" data-action="disk-settings" data-disk-key="${key}" style="margin-left:auto">⚙ Settings</button>
-          ` : ''}
-          ${isForeign ? `
-            <button class="button-secondary" data-action="init-disk" data-mount-path="${escapeHTML(disk.mount_path)}">Initialize disk</button>
-          ` : ''}
-        </div>
-      </section>
-      ${isKnown ? renderProfile(disk) : ''}
-    `;
-  }).join('');
       }
+    } else {
+      // Partial update: only progress and buttons
+      const progEl = document.getElementById('diskProgress_' + key);
+      if (progEl) progEl.innerHTML = progressHTML(disk);
+
+      const btnsEl = document.getElementById('diskBtns_' + key);
+      if (btnsEl) btnsEl.innerHTML = btnsHTML(disk);
+    }
+
+    renderedDisks.set(key, { state: disk.state, disk_id: disk.disk_id });
+  }
+}
+
+// ─── profile save ────────────────────────────────────────────────────────────
 
 async function saveProfile(mountPath, key) {
   const g = id => document.getElementById(id);
-  const transcodeEnabled = g(`prof_transcode_enabled_${key}`)?.checked;
+  const te = g(`prof_transcode_enabled_${key}`)?.checked;
 
   const profile = {
     dest_folder:      g(`prof_dest_folder_${key}`)?.value.trim() || 'media',
@@ -265,8 +291,7 @@ async function saveProfile(mountPath, key) {
     auto_copy:        g(`prof_auto_copy_${key}`)?.checked       || false,
     shuffle_depth:    parseInt(g(`prof_shuffle_depth_${key}`)?.value ?? '-1', 10),
   };
-
+  if (te) {
-  if (transcodeEnabled) {
     profile.transcode = {
       video_codec:        g(`prof_video_codec_${key}`)?.value        || 'h264',
       max_resolution:     g(`prof_max_resolution_${key}`)?.value     || '720p',
@@ -280,67 +305,37 @@ async function saveProfile(mountPath, key) {
   }
 
   try {
-    const response = await fetch('/api/disks/profile?mount_path=' + encodeURIComponent(mountPath), {
+    const r = await fetch('/api/disks/profile?mount_path=' + encodeURIComponent(mountPath), {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(profile)
+      body: JSON.stringify(profile),
     });
-    const payload = await response.json();
+    const payload = await r.json();
-    if (!response.ok) {
+    if (!r.ok) { toast(payload.error || 'Ошибка сохранения профиля', 'error'); return; }
-      toast(payload.error || 'Ошибка сохранения профиля', 'error');
-      return;
-    }
     toast('Профиль сохранён', 'ok');
-    refreshDisks();
+  } catch { toast('Ошибка сети', 'error'); }
-  } catch (error) {
-    toast('Ошибка сети', 'error');
-  }
 }
 
-function stopTaskPoll(taskID) {
+// ─── task polling ─────────────────────────────────────────────────────────────
-  if (!taskPollers.has(taskID)) return;
-  clearInterval(taskPollers.get(taskID));
-  taskPollers.delete(taskID);
-}
 
-function startTaskPoll(taskID) {
+function stopTaskPoll(id) {
-  if (!taskID || taskPollers.has(taskID)) return;
+  if (!taskPollers.has(id)) return;
-  taskPollers.set(taskID, setInterval(() => pollTask(taskID), 1500));
+  clearInterval(taskPollers.get(id));
-  pollTask(taskID);
+  taskPollers.delete(id);
 }
-
+function startTaskPoll(id) {
-async function refreshDisks() {
+  if (!id || taskPollers.has(id)) return;
-  try {
+  taskPollers.set(id, setInterval(() => pollTask(id), 1500));
-    const response = await fetch('/api/disks');
+  pollTask(id);
-    if (!response.ok) return;
-    const payload = await response.json();
-    disks = payload.items || [];
-    renderDisks();
-
-    const activeTasks = new Set();
-    for (const disk of disks) {
-      if (disk.active_task_id) {
-        activeTasks.add(disk.active_task_id);
-        startTaskPoll(disk.active_task_id);
-      }
-    }
-    for (const taskID of Array.from(taskPollers.keys())) {
-      if (!activeTasks.has(taskID)) {
-        stopTaskPoll(taskID);
-        taskState.delete(taskID);
-      }
-    }
-  } catch (error) {}
 }
 
 async function pollTask(taskID) {
   try {
-    const response = await fetch('/api/tasks/' + taskID);
+    const r = await fetch('/api/tasks/' + taskID);
-    if (!response.ok) return;
+    if (!r.ok) return;
-    const task = await response.json();
+    const task = await r.json();
     taskState.set(taskID, task);
     renderDisks();
-
     if (['success','failed','canceled'].includes(task.status)) {
       stopTaskPoll(taskID);
       taskState.delete(taskID);
@@ -349,74 +344,86 @@ async function pollTask(taskID) {
       if (task.status === 'canceled') toast('Copy canceled', 'error');
       refreshDisks();
     }
-  } catch (error) {}
+  } catch {}
 }
 
+// ─── disk list refresh ────────────────────────────────────────────────────────
+
+async function refreshDisks() {
+  try {
+    const r = await fetch('/api/disks');
+    if (!r.ok) return;
+    const payload = await r.json();
+    disks = payload.items || [];
+    renderDisks();
+
+    const active = new Set(disks.map(d => d.active_task_id).filter(Boolean));
+    for (const id of taskPollers.keys()) {
+      if (!active.has(id)) { stopTaskPoll(id); taskState.delete(id); }
+    }
+    for (const id of active) startTaskPoll(id);
+  } catch {}
+}
+
+// ─── copy / init actions ─────────────────────────────────────────────────────
+
 async function startCopy(diskID, mode) {
   try {
-    const response = await fetch('/api/disks/' + encodeURIComponent(diskID) + '/copy/start', {
+    const r = await fetch('/api/disks/' + encodeURIComponent(diskID) + '/copy/start', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ mode })
+      body: JSON.stringify({ mode }),
     });
-    const payload = await response.json();
+    const p = await r.json();
-    if (!response.ok) {
+    if (!r.ok) { toast(p.error || 'Failed to start copy', 'error'); return; }
-      toast(payload.error || 'Failed to start copy', 'error');
+    startTaskPoll(p.task_id);
-      return;
-    }
-    startTaskPoll(payload.task_id);
     refreshDisks();
-  } catch (error) {
+  } catch { toast('Network error', 'error'); }
-    toast('Network error', 'error');
-  }
 }
 
 async function cancelCopy(diskID) {
   try {
     await fetch('/api/disks/' + encodeURIComponent(diskID) + '/copy/cancel', { method: 'POST' });
     toast('Canceling...', 'ok');
-  } catch (error) {
+  } catch { toast('Network error', 'error'); }
-    toast('Network error', 'error');
-  }
 }
 
 async function initDisk(mountPath) {
   try {
-    const response = await fetch('/api/disks/init', {
+    const r = await fetch('/api/disks/init', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ mount_path: mountPath })
+      body: JSON.stringify({ mount_path: mountPath }),
     });
-    const payload = await response.json();
+    const p = await r.json();
-    if (!response.ok) {
+    if (!r.ok) { toast(p.error || 'Failed to initialize disk', 'error'); return; }
-      toast(payload.error || 'Failed to initialize disk', 'error');
-      return;
-    }
     toast('Disk initialized', 'ok');
     refreshDisks();
-  } catch (error) {
+  } catch { toast('Network error', 'error'); }
-    toast('Network error', 'error');
-  }
 }
 
+// ─── event delegation ─────────────────────────────────────────────────────────
+
 document.getElementById('diskGrid').addEventListener('click', (event) => {
-  const button = event.target.closest('button[data-action]');
+  const btn = event.target.closest('button[data-action]');
-  if (!button) return;
+  if (!btn) return;
-
+  const action = btn.dataset.action;
-  const action = button.dataset.action;
+  if (action === 'start-copy')   startCopy(btn.dataset.diskId, btn.dataset.mode || 'add');
-  if (action === 'start-copy') startCopy(button.dataset.diskId, button.dataset.mode || 'add');
+  if (action === 'cancel-copy')  cancelCopy(btn.dataset.diskId);
-  if (action === 'cancel-copy') cancelCopy(button.dataset.diskId);
+  if (action === 'init-disk')    initDisk(btn.dataset.mountPath);
-  if (action === 'init-disk') initDisk(button.dataset.mountPath);
   if (action === 'disk-settings') {
-    const key = button.dataset.diskKey;
+    const key   = btn.dataset.diskKey;
     const panel = document.getElementById('profilePanel_' + key);
     if (!panel) return;
     const open = panel.style.display !== 'none';
     panel.style.display = open ? 'none' : '';
-    button.textContent = open ? '⚙ Settings' : '⚙ Settings ✕';
+    if (open) openPanels.delete(key); else openPanels.add(key);
+    btn.textContent = open ? '⚙ Settings' : '⚙ Settings ✕';
   }
 });
 
+// ─── init ─────────────────────────────────────────────────────────────────────
+
 refreshDisks();
 setInterval(refreshDisks, 5000);
 </script>