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>

cmd/jukebox/main.go

@@ -230,6 +230,7 @@ func triggerAutoCopy(cp *copier.Copier, cfg *config.Config, info disk.DiskInfo)
 		opts.ReserveFreeGB = p.ReserveFreeGB
 		opts.FileSelectMode = config.FileSelectMode(p.FileSelectMode)
 		opts.Transcode = p.Transcode
+		opts.ShuffleDepth = p.ShuffleDepth
 		if p.OverwriteMode != "" {
 			opts.OverwriteMode = config.OverwriteMode(p.OverwriteMode)
 		}

internal/api/handlers_copy.go

@@ -26,6 +26,7 @@ func (s *Server) copyOptions(cfg *config.Config, diskInfo disk.DiskInfo, overwri
 		opts.ReserveFreeGB = p.ReserveFreeGB
 		opts.FileSelectMode = config.FileSelectMode(p.FileSelectMode)
 		opts.Transcode = p.Transcode
+		opts.ShuffleDepth = p.ShuffleDepth
 	} else {
 		opts.DestFolder = cfg.DestFolder
 		opts.ReserveFreeGB = cfg.ReserveFreeGB

internal/api/handlers_sources.go

@@ -3,6 +3,7 @@ package api
 import (
 	"errors"
 	"net/http"
+	"net/url"
 	"os"
 	"path/filepath"
 	"sort"
@@ -10,19 +11,20 @@ import (
 )
 
 func (s *Server) handleSources(w http.ResponseWriter, r *http.Request) {
-	absPath, err := normalizeSourcePathQuery(r.URL.Query().Get("path"))
+	relPath, err := normalizeSourcePath(r.URL.Query().Get("path"))
 	if err != nil {
 		jsonErr(w, http.StatusBadRequest, err.Error())
 		return
 	}
-	if absPath == "" {
+
-		jsonOK(w, map[string]any{"path": "", "items": []map[string]string{}})
+	absPath := s.deps.Config.MediaPath
-		return
+	if relPath != "" {
+		absPath = filepath.Join(absPath, relPath)
 	}
 
 	entries, err := os.ReadDir(absPath)
 	if err != nil {
-		jsonOK(w, map[string]any{"path": absPath, "items": []map[string]string{}})
+		jsonOK(w, map[string]any{"path": relPath, "items": []map[string]string{}})
 		return
 	}
 
@@ -36,10 +38,13 @@ func (s *Server) handleSources(w http.ResponseWriter, r *http.Request) {
 		if !e.IsDir() || strings.HasPrefix(e.Name(), ".") {
 			continue
 		}
-		childPath := filepath.Join(absPath, e.Name())
+		childPath := e.Name()
+		if relPath != "" {
+			childPath = filepath.Join(relPath, childPath)
+		}
 		items = append(items, item{
 			Name: e.Name(),
-			Path: childPath,
+			Path: filepath.ToSlash(childPath),
 		})
 	}
 
@@ -48,18 +53,26 @@ func (s *Server) handleSources(w http.ResponseWriter, r *http.Request) {
 	})
 
 	jsonOK(w, map[string]any{
-		"path":  absPath,
+		"path":  relPath,
 		"items": items,
 	})
 }
 
-func normalizeSourcePathQuery(raw string) (string, error) {
+func normalizeSourcePath(raw string) (string, error) {
+	raw, _ = url.QueryUnescape(raw)
 	raw = strings.TrimSpace(raw)
+	raw = filepath.ToSlash(raw)
+	raw = strings.TrimPrefix(raw, "/")
 	if raw == "" || raw == "." {
 		return "", nil
 	}
+
 	clean := filepath.Clean(raw)
-	if !filepath.IsAbs(clean) {
+	clean = filepath.ToSlash(clean)
+	if clean == "." {
+		return "", nil
+	}
+	if clean == ".." || strings.HasPrefix(clean, "../") {
 		return "", errors.New("invalid source path")
 	}
 	return clean, nil

internal/config/config.go

@@ -116,25 +116,7 @@ func Save(path string, cfg *Config) error {
 
 func (c *Config) Validate() error {
 	c.MediaPath = NormalizeMediaPath(c.MediaPath)
-	if c.MediaPath != "" {
-		info, err := os.Stat(c.MediaPath)
-		if err != nil {
-			return errors.New("media_path is not accessible")
-		}
-		if !info.IsDir() {
-			return errors.New("media_path must be a directory")
-		}
-	}
 	c.Sources = NormalizeSources(c.Sources, c.MediaPath)
-	for _, source := range c.Sources {
-		info, err := os.Stat(source.Path)
-		if err != nil {
-			return errors.New("source path is not accessible: " + source.Path)
-		}
-		if !info.IsDir() {
-			return errors.New("source path must be a directory: " + source.Path)
-		}
-	}
 	if c.ReserveFreeGB < 0 {
 		return errors.New("reserve_free_gb must be >= 0")
 	}

internal/copier/copier.go

@@ -33,6 +33,8 @@ type Options struct {
 	OverwriteMode     config.OverwriteMode
 	FileSelectMode    config.FileSelectMode
 	Transcode         *disk.TranscodeProfile // nil = не транскодировать
+	// ShuffleDepth: -1=выкл, 0=файлы вразнобой, 1+=группировка по папке на глубине N
+	ShuffleDepth int
 }
 
 type Copier struct {
@@ -254,8 +256,7 @@ func (c *Copier) run(ctx context.Context, taskID string, opts Options, database
 		return
 	}
 
-	// случайный порядок — выбираем что копировать до начала копирования
+	files = applyShuffleDepth(files, opts.ShuffleDepth)
-	rand.Shuffle(len(files), func(i, j int) { files[i], files[j] = files[j], files[i] })
 
 	_, free, err := disk.DiskUsage(opts.MountPath)
 	if err != nil {
@@ -392,17 +393,26 @@ func (c *Copier) processVideo(ctx context.Context, taskID string, database *db.D
 	ext := transcoder.OutputExt(profile.OutputFormat)
 	dstTranscoded := strings.TrimSuffix(dst, filepath.Ext(dst)) + ext
 
+	srcInfo := fmt.Sprintf("%s/%dch/%.0ffps", info.Codec, info.AudioChannels, info.FPS)
+	dstInfo := fmt.Sprintf("%s/%s/%dfps %s", profile.VideoCodec, profile.AudioCodec, profile.MaxFPS, profile.OutputFormat)
+	baseMsg := fmt.Sprintf("Transcoding %s (%s → %s)", filepath.Base(src), srcInfo, dstInfo)
+
 	c.tasks.Update(taskID, func(t *task.Task) {
 		t.Phase = task.PhaseTranscoding
-		t.Message = "Transcoding " + filepath.Base(src)
+		t.Message = baseMsg
 	})
 	if t, ok := c.tasks.Get(taskID); ok {
 		_ = database.UpdateTask(*t)
 	}
 
-	progressFn := func(pct float64) {
+	progressFn := func(p transcoder.Progress) {
 		c.tasks.Update(taskID, func(t *task.Task) {
-			t.Progress = int(pct * 100)
+			t.Progress = int(p.Pct * 100)
+			t.SpeedBPS = 0
+			t.ETASec = 0
+			if p.EncodeFPS > 0 {
+				t.Message = fmt.Sprintf("%s @ %.1f fps", baseMsg, p.EncodeFPS)
+			}
 		})
 	}
 
@@ -717,3 +727,52 @@ func copyFile(ctx context.Context, src, dst string) error {
 	}
 	return nil
 }
+
+// applyShuffleDepth упорядочивает файлы по заданной глубине шафлера.
+// depth < 0  → оригинальный порядок (без шафла)
+// depth == 0 → все файлы перемешиваются случайно
+// depth >= 1 → файлы группируются по папке на уровне depth от корня /media,
+//              группы перемешиваются, внутри каждой группы порядок сохраняется.
+func applyShuffleDepth(files []fileEntry, depth int) []fileEntry {
+	if depth < 0 || len(files) == 0 {
+		return files
+	}
+	if depth == 0 {
+		rand.Shuffle(len(files), func(i, j int) { files[i], files[j] = files[j], files[i] })
+		return files
+	}
+
+	type group struct {
+		key   string
+		files []fileEntry
+	}
+	groupMap := make(map[string]*group, 64)
+	var order []string
+	for _, f := range files {
+		key := folderKeyAtDepth(f.relPath, depth)
+		if _, ok := groupMap[key]; !ok {
+			groupMap[key] = &group{key: key}
+			order = append(order, key)
+		}
+		groupMap[key].files = append(groupMap[key].files, f)
+	}
+	rand.Shuffle(len(order), func(i, j int) { order[i], order[j] = order[j], order[i] })
+
+	result := make([]fileEntry, 0, len(files))
+	for _, key := range order {
+		result = append(result, groupMap[key].files...)
+	}
+	return result
+}
+
+// folderKeyAtDepth возвращает путь к папке глубины depth из relPath.
+// relPath вида "anime/Naruto/Season1/ep01.mkv", depth=2 → "anime/Naruto"
+func folderKeyAtDepth(relPath string, depth int) string {
+	relPath = filepath.ToSlash(relPath)
+	parts := strings.Split(relPath, "/")
+	maxDepth := len(parts) - 1 // последний элемент — имя файла
+	if depth >= maxDepth {
+		depth = maxDepth
+	}
+	return strings.Join(parts[:depth], "/")
+}

internal/disk/profile.go

@@ -12,6 +12,8 @@ type DiskProfile struct {
 	FileSelectMode string  `json:"file_select_mode"`
 	ReserveFreeGB  float64 `json:"reserve_free_gb"`
 	AutoCopy       bool    `json:"auto_copy"`
+	// ShuffleDepth: -1=выкл, 0=файлы вразнобой, 1+=папки на глубине N от корня /media
+	ShuffleDepth int `json:"shuffle_depth"`
 
 	// nil = не транскодировать видео
 	Transcode *TranscodeProfile `json:"transcode,omitempty"`
@@ -66,5 +68,6 @@ func DefaultProfile() *DiskProfile {
 		FileSelectMode: "new",
 		ReserveFreeGB:  2.0,
 		AutoCopy:       false,
+		ShuffleDepth:   -1,
 	}
 }

internal/transcoder/detect.go

@@ -34,13 +34,14 @@ func ProbeVideo(path string) (VideoInfo, error) {
 
 	var raw struct {
 		Streams []struct {
-			CodecType  string `json:"codec_type"`
+			CodecType    string `json:"codec_type"`
-			CodecName  string `json:"codec_name"`
+			CodecName    string `json:"codec_name"`
-			Width      int    `json:"width"`
+			Width        int    `json:"width"`
-			Height     int    `json:"height"`
+			Height       int    `json:"height"`
-			RFrameRate string `json:"r_frame_rate"`
+			RFrameRate   string `json:"r_frame_rate"`
-			BitRate    string `json:"bit_rate"`
+			AvgFrameRate string `json:"avg_frame_rate"`
-			Channels   int    `json:"channels"`
+			BitRate      string `json:"bit_rate"`
+			Channels     int    `json:"channels"`
 		} `json:"streams"`
 		Format struct {
 			Duration string `json:"duration"`
@@ -58,7 +59,12 @@ func ProbeVideo(path string) (VideoInfo, error) {
 			info.Codec = s.CodecName
 			info.Width = s.Width
 			info.Height = s.Height
-			info.FPS = parseFraction(s.RFrameRate)
+			// avg_frame_rate надёжнее для MJPEG и кодеков с нестандартным таймбейсом
+			fps := parseFraction(s.RFrameRate)
+			if avg := parseFraction(s.AvgFrameRate); avg > 0 && (fps <= 0 || fps > 120) {
+				fps = avg
+			}
+			info.FPS = fps
 			if br, err := strconv.ParseInt(s.BitRate, 10, 64); err == nil {
 				info.VideoBitrate = br
 			}

internal/transcoder/transcoder.go

@@ -21,8 +21,13 @@ type Options struct {
 	SourceInfo VideoInfo
 }
 
-// Transcode запускает ffmpeg. progress вызывается с 0..1 по мере работы.
+type Progress struct {
-func Transcode(ctx context.Context, opts Options, progress func(float64)) error {
+	Pct        float64 // 0..1
+	EncodeFPS  float64 // текущая скорость кодирования, кадр/с
+}
+
+// Transcode запускает ffmpeg. progress вызывается при каждом обновлении прогресса.
+func Transcode(ctx context.Context, opts Options, progress func(Progress)) error {
 	if err := os.MkdirAll(filepath.Dir(opts.Output), 0o755); err != nil {
 		return err
 	}
@@ -42,20 +47,29 @@ func Transcode(ctx context.Context, opts Options, progress func(float64)) error
 	}
 
 	// Парсим прогресс из stdout (-progress pipe:1)
-	if opts.SourceInfo.DurationSec > 0 && progress != nil {
+	if progress != nil {
+		var cur Progress
 		scanner := bufio.NewScanner(stdout)
 		for scanner.Scan() {
 			line := scanner.Text()
-			if strings.HasPrefix(line, "out_time_us=") {
+			switch {
+			case strings.HasPrefix(line, "out_time_us="):
 				val := strings.TrimPrefix(line, "out_time_us=")
-				if us, err := strconv.ParseInt(val, 10, 64); err == nil && us > 0 {
+				if us, err := strconv.ParseInt(val, 10, 64); err == nil && us > 0 && opts.SourceInfo.DurationSec > 0 {
 					sec := float64(us) / 1e6
 					pct := sec / opts.SourceInfo.DurationSec
 					if pct > 1 {
 						pct = 1
 					}
-					progress(pct)
+					cur.Pct = pct
 				}
+			case strings.HasPrefix(line, "fps="):
+				val := strings.TrimPrefix(line, "fps=")
+				if fps, err := strconv.ParseFloat(strings.TrimSpace(val), 64); err == nil && fps > 0 {
+					cur.EncodeFPS = fps
+				}
+			case line == "progress=continue" || line == "progress=end":
+				progress(cur)
 			}
 		}
 	}
@@ -97,8 +111,14 @@ func buildArgs(opts Options) []string {
 	if maxH := maxHeight(p.MaxResolution); maxH > 0 {
 		filters = append(filters, fmt.Sprintf("scale=-2:min(%d\\,ih)", maxH))
 	}
-	if p.MaxFPS > 0 && src.FPS > float64(p.MaxFPS)+0.01 {
+	if p.MaxFPS > 0 {
-		filters = append(filters, fmt.Sprintf("fps=%d", p.MaxFPS))
+		targetFPS := p.MaxFPS
+		if src.FPS > 0 && src.FPS < float64(targetFPS) {
+			// Источник медленнее лимита — сохраняем исходный FPS
+			filters = append(filters, fmt.Sprintf("fps=%.3f", src.FPS))
+		} else {
+			filters = append(filters, fmt.Sprintf("fps=%d", targetFPS))
+		}
 	}
 	if len(filters) > 0 {
 		args = append(args, "-vf", strings.Join(filters, ","))

web/templates/dashboard.html

@@ -1,441 +1,430 @@
 {{define "content"}}
 
 <section class="panel">
-  <h2>Mounted Disk</h2>
+  <h2>Disks</h2>
   <div class="panel-body">
-    <div class="path-input-row">
+    <div id="diskSummary" class="text-muted">Loading disks...</div>
-      <input class="form-input" type="text" id="mountPath" placeholder="/Volumes/JUKEBOX or E:\\">
-      <button type="button" class="button-primary" onclick="pickMountPath()">+</button>
-      <button type="button" class="button-secondary" onclick="refreshSelectedDisk()">Refresh</button>
-    </div>
-    <div class="form-hint">Choose the directory where the removable disk is mounted. The app works with one selected disk at a time in standalone mode.</div>
   </div>
 </section>
 
-<div id="diskState"></div>
+<div class="disk-grid" id="diskGrid"></div>
 
 <script>
-const selectedDisk = { info: null };
+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 badgeClass(state) {
+function diskKey(disk) { return disk.disk_id || disk.mount_path; }
-  return ({ absent: 'badge-unknown', foreign: 'badge-warn', known: 'badge-ok' })[state] || 'badge-unknown';
-}
 
-function badgeLabel(state) {
+function badgeClass(s) {
-  return ({ absent: 'Directory unavailable', foreign: 'Uninitialized disk', known: 'Ready' })[state] || '—';
+  return ({ absent:'badge-unknown', foreign:'badge-warn', known:'badge-ok' })[s] || 'badge-unknown';
+}
+function badgeLabel(s) {
+  return ({ absent:'Not connected', foreign:'Uninitialized disk', known:'Ready' })[s] || '—';
 }
 
 function fmtSpeed(bps) {
   if (!bps) return '';
-  if (bps >= 1e9) return (bps / 1e9).toFixed(1) + ' GB/s';
+  if (bps >= 1e9) return (bps/1e9).toFixed(1)+' GB/s';
-  if (bps >= 1e6) return (bps / 1e6).toFixed(1) + ' MB/s';
+  if (bps >= 1e6) return (bps/1e6).toFixed(1)+' MB/s';
-  if (bps >= 1e3) return (bps / 1e3).toFixed(0) + ' KB/s';
+  if (bps >= 1e3) return (bps/1e3).toFixed(0)+' KB/s';
-  return bps + ' B/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 >= 3600) return Math.floor(sec/3600)+' h '+Math.floor((sec%3600)/60)+' min';
-  if (sec >= 60) return Math.floor(sec / 60) + ' min';
+  if (sec >= 60)   return Math.floor(sec/60)+' min';
-  return sec + ' s';
+  return sec+' s';
+}
+function fmtBytes(b) {
+  if (!b) return '—';
+  if (b >= 1e12) return (b/1e12).toFixed(1)+' TB';
+  if (b >= 1e9)  return (b/1e9).toFixed(1)+' GB';
+  if (b >= 1e6)  return (b/1e6).toFixed(1)+' MB';
+  return b+' 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);
-function renderDisk() {
+  return `
-  const root = document.getElementById('diskState');
+    <div class="panel-body progress-wrap">
-  const disk = selectedDisk.info;
+      <div class="progress-bar-bg">
-  if (!disk) {
+        <div class="progress-bar-fill" style="width:${pct}%"></div>
-    root.innerHTML = `
-      <section class="panel">
-        <div class="panel-body text-muted">Choose a mounted disk directory to inspect it.</div>
-      </section>
-    `;
-    return;
-  }
-
-  const activeTask = disk.active_task_id ? taskState.get(disk.active_task_id) : null;
-  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';
-
-  root.innerHTML = `
-    <section class="panel disk-card">
-      <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>
-      ${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>
-          <div class="progress-label">${escapeHTML(meta)}</div>
-        </div>
-      ` : ''}
-      <div class="btn-row">
-        ${isKnown ? `
-          <button class="button-danger" data-action="start-copy" data-mode="replace" ${activeTask ? 'disabled' : ''}>Replace media</button>
-          <button class="button-primary" data-action="start-copy" data-mode="add" ${activeTask ? 'disabled' : ''}>Add media</button>
-          <button class="button-danger ${activeTask ? '' : 'hidden'}" data-action="cancel-copy">Cancel</button>
-        ` : ''}
-        ${isForeign ? `
-          <button class="button-secondary" data-action="init-disk">Initialize disk</button>
-        ` : ''}
       </div>
-    </section>
+      <div class="progress-label">${escapeHTML(message)}</div>
-    ${isKnown ? renderProfile(disk) : ''}
+      ${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 p  = disk.profile || {};
-  const t = p.transcode || null;
+  const t  = p.transcode  || null;
-  const transcodeEnabled = !!t;
+  const te = !!t;
+  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}">${opts}</select>`;
+    return `<select class="form-input" id="prof_${name}_${k}">${o}</select>`;
   };
 
-  const transcodeSection = `
-    <div id="transcodeFields" style="${transcodeEnabled ? '' : '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']])}
-      </div>
-      <div class="form-group">
-        <label>Макс. разрешение</label>
-        ${sel('max_resolution', t?.max_resolution || '720p', [['480p','480p'],['720p','720p (HD)'],['1080p','1080p (Full HD)']])}
-      </div>
-      <div class="form-group">
-        <label>Макс. битрейт видео</label>
-        ${sel('max_video_bitrate', t?.max_video_bitrate || '2000k', [['','Без лимита'],['1000k','1000 кбит/с'],['2000k','2000 кбит/с'],['4000k','4000 кбит/с'],['8000k','8000 кбит/с']])}
-      </div>
-      <div class="form-group">
-        <label>Макс. FPS</label>
-        ${sel('max_fps', String(t?.max_fps ?? 0), [['0','Без лимита'],['24','24'],['25','25'],['30','30']])}
-      </div>
-      <hr>
-      <div class="form-group">
-        <label>Аудиокодек</label>
-        ${sel('audio_codec', t?.audio_codec || 'aac', [['aac','AAC'],['mp3','MP3']])}
-      </div>
-      <div class="form-group">
-        <label>Макс. битрейт аудио</label>
-        ${sel('max_audio_bitrate', t?.max_audio_bitrate || '192k', [['','Без лимита'],['128k','128 кбит/с'],['192k','192 кбит/с'],['320k','320 кбит/с']])}
-      </div>
-      <div class="form-group">
-        <label>Каналы</label>
-        ${sel('max_audio_channels', String(t?.max_audio_channels ?? 0), [['0','Копировать'],['2','Стерео (2.0)'],['6','5.1']])}
-      </div>
-      <hr>
-      <div class="form-group">
-        <label>Формат контейнера</label>
-        ${sel('output_format', t?.output_format || 'mp4', [['mp4','MP4'],['mkv','MKV'],['avi','AVI']])}
-      </div>
-    </div>
-  `;
-
   return `
-    <section class="panel" id="profilePanel">
+    <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" value="${escapeHTML(p.dest_folder || 'media')}">
+          <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','Заменять всё']])}
+          ${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','Все подходящие']])}
+          ${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" value="${p.reserve_free_gb ?? 2}" min="0" step="0.5">
+          <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" ${p.auto_copy ? 'checked' : ''}> Автокопирование при подключении</label>
+          <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" ${transcodeEnabled ? 'checked' : ''}
+            <input type="checkbox" id="prof_transcode_enabled_${k}" ${te?'checked':''}
-              onchange="document.getElementById('transcodeFields').style.display=this.checked?'':'none'">
+              onchange="document.getElementById('transcodeFields_${k}').style.display=this.checked?'':'none'">
             Ограничить видео под устройство
           </label>
         </div>
-        ${transcodeSection}
+        <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']])}
+          </div>
+          <div class="form-group">
+            <label>Макс. разрешение</label>
+            ${sel('max_resolution', t?.max_resolution||'720p', [['480p','480p'],['720p','720p (HD)'],['1080p','1080p (Full HD)']])}
+          </div>
+          <div class="form-group">
+            <label>Макс. битрейт видео</label>
+            ${sel('max_video_bitrate', t?.max_video_bitrate||'2000k', [['','Без лимита'],['1000k','1000 кбит/с'],['2000k','2000 кбит/с'],['4000k','4000 кбит/с'],['8000k','8000 кбит/с']])}
+          </div>
+          <div class="form-group">
+            <label>Макс. FPS</label>
+            ${sel('max_fps', String(t?.max_fps??0), [['0','Без лимита'],['24','24'],['25','25'],['30','30']])}
+          </div>
+          <hr>
+          <div class="form-group">
+            <label>Аудиокодек</label>
+            ${sel('audio_codec', t?.audio_codec||'aac', [['aac','AAC'],['mp3','MP3']])}
+          </div>
+          <div class="form-group">
+            <label>Макс. битрейт аудио</label>
+            ${sel('max_audio_bitrate', t?.max_audio_bitrate||'192k', [['','Без лимита'],['128k','128 кбит/с'],['192k','192 кбит/с'],['320k','320 кбит/с']])}
+          </div>
+          <div class="form-group">
+            <label>Каналы</label>
+            ${sel('max_audio_channels', String(t?.max_audio_channels??0), [['0','Копировать'],['2','Стерео (2.0)'],['6','5.1']])}
+          </div>
+          <hr>
+          <div class="form-group">
+            <label>Формат контейнера</label>
+            ${sel('output_format', t?.output_format||'mp4', [['mp4','MP4'],['mkv','MKV'],['avi','AVI']])}
+          </div>
+        </div>
 
         <div class="btn-row" style="margin-top:1em">
-          <button class="button-primary" onclick="saveProfile('${escapeHTML(disk.mount_path)}')">Сохранить профиль</button>
+          <button class="button-primary" onclick="saveProfile('${escapeHTML(disk.mount_path)}','${k}')">Сохранить профиль</button>
         </div>
       </div>
-    </section>
+    </section>`;
-  `;
 }
 
-async function saveProfile(mountPath) {
+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');
+
+  const knownCount = disks.filter(d => d.state === 'known').length;
+  summary.textContent = disks.length
+    ? `Disks found: ${disks.length}. Ready to copy: ${knownCount}.`
+    : '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);
+    }
+  }
+
+  // Add or update disks
+  for (const disk of disks) {
+    const key  = diskKey(disk);
+    const prev = renderedDisks.get(key);
+
+    // Need full re-render: first appearance OR state / disk_id changed
+    const needFull = !prev || prev.state !== disk.state || prev.disk_id !== disk.disk_id;
+
+    if (needFull) {
+      const existing = document.getElementById('diskCard_' + key);
+      const tmp = document.createElement('div');
+      tmp.innerHTML = diskCardHTML(disk);
+
+      if (existing) {
+        // Replace in-place (profile panel follows immediately after)
+        const panel = document.getElementById('profilePanel_' + key);
+        existing.replaceWith(...tmp.childNodes);
+        panel?.remove();
+        // Profile panel was re-rendered inside tmp; it's already inserted
+      } else {
+        // Append new
+        while (tmp.firstChild) grid.appendChild(tmp.firstChild);
+      }
+    } 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')?.checked;
+  const te = g(`prof_transcode_enabled_${key}`)?.checked;
 
   const profile = {
-    dest_folder:      g('prof_dest_folder')?.value.trim() || 'media',
+    dest_folder:      g(`prof_dest_folder_${key}`)?.value.trim() || 'media',
-    overwrite_mode:   g('prof_overwrite_mode')?.value || 'skip',
+    overwrite_mode:   g(`prof_overwrite_mode_${key}`)?.value    || 'skip',
-    file_select_mode: g('prof_file_select_mode')?.value || 'new',
+    file_select_mode: g(`prof_file_select_mode_${key}`)?.value  || 'new',
-    reserve_free_gb:  parseFloat(g('prof_reserve_free_gb')?.value || '2') || 0,
+    reserve_free_gb:  parseFloat(g(`prof_reserve_free_gb_${key}`)?.value || '2') || 0,
-    auto_copy:        g('prof_auto_copy')?.checked || false,
+    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')?.value || 'h264',
+      video_codec:        g(`prof_video_codec_${key}`)?.value        || 'h264',
-      max_resolution:     g('prof_max_resolution')?.value || '720p',
+      max_resolution:     g(`prof_max_resolution_${key}`)?.value     || '720p',
-      max_video_bitrate:  g('prof_max_video_bitrate')?.value || '',
+      max_video_bitrate:  g(`prof_max_video_bitrate_${key}`)?.value  || '',
-      max_fps:            parseInt(g('prof_max_fps')?.value || '0', 10),
+      max_fps:            parseInt(g(`prof_max_fps_${key}`)?.value   || '0', 10),
-      audio_codec:        g('prof_audio_codec')?.value || 'aac',
+      audio_codec:        g(`prof_audio_codec_${key}`)?.value        || 'aac',
-      max_audio_bitrate:  g('prof_max_audio_bitrate')?.value || '',
+      max_audio_bitrate:  g(`prof_max_audio_bitrate_${key}`)?.value  || '',
-      max_audio_channels: parseInt(g('prof_max_audio_channels')?.value || '0', 10),
+      max_audio_channels: parseInt(g(`prof_max_audio_channels_${key}`)?.value || '0', 10),
-      output_format:      g('prof_output_format')?.value || 'mp4',
+      output_format:      g(`prof_output_format_${key}`)?.value      || 'mp4',
     };
   }
 
   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');
-    refreshSelectedDisk();
+  } catch { toast('Ошибка сети', 'error'); }
-  } catch (error) {
-    toast('Ошибка сети', 'error');
-  }
 }
 
-function stopTaskPoll(taskID) {
+// ─── task polling ─────────────────────────────────────────────────────────────
-  if (!taskPollers.has(taskID)) return;
+
-  clearInterval(taskPollers.get(taskID));
+function stopTaskPoll(id) {
-  taskPollers.delete(taskID);
+  if (!taskPollers.has(id)) return;
+  clearInterval(taskPollers.get(id));
+  taskPollers.delete(id);
 }
-
+function startTaskPoll(id) {
-function startTaskPoll(taskID) {
+  if (!id || taskPollers.has(id)) return;
-  if (!taskID || taskPollers.has(taskID)) return;
+  taskPollers.set(id, setInterval(() => pollTask(id), 1500));
-  taskPollers.set(taskID, setInterval(() => pollTask(taskID), 1500));
+  pollTask(id);
-  pollTask(taskID);
-}
-
-async function pickFolder() {
-  const response = await fetch('/api/system/pick-folder', { method: 'POST' });
-  const payload = await response.json();
-  if (!response.ok) {
-    throw new Error(payload.error || 'Failed to choose folder');
-  }
-  return payload.path || '';
-}
-
-async function pickMountPath() {
-  try {
-    const path = await pickFolder();
-    if (!path) return;
-    document.getElementById('mountPath').value = path;
-    localStorage.setItem('jukebox.selectedMountPath', path);
-    await refreshSelectedDisk();
-  } catch (error) {
-    toast(error.message || 'Failed to choose folder', 'error');
-  }
-}
-
-async function refreshSelectedDisk() {
-  const mountPath = document.getElementById('mountPath').value.trim();
-  if (!mountPath) {
-    selectedDisk.info = null;
-    renderDisk();
-    return;
-  }
-
-  localStorage.setItem('jukebox.selectedMountPath', mountPath);
-  try {
-    const response = await fetch('/api/disks/probe?mount_path=' + encodeURIComponent(mountPath));
-    const payload = await response.json();
-    if (!response.ok) {
-      toast(payload.error || 'Failed to inspect directory', 'error');
-      return;
-    }
-    selectedDisk.info = payload;
-    renderDisk();
-
-    if (payload.active_task_id) {
-      for (const taskID of Array.from(taskPollers.keys())) {
-        if (taskID !== payload.active_task_id) {
-          stopTaskPoll(taskID);
-          taskState.delete(taskID);
-        }
-      }
-      startTaskPoll(payload.active_task_id);
-    } else {
-      for (const taskID of Array.from(taskPollers.keys())) {
-        stopTaskPoll(taskID);
-        taskState.delete(taskID);
-      }
-    }
-  } catch (error) {
-    toast('Network error', '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);
-    renderDisk();
+    renderDisks();
-
+    if (['success','failed','canceled'].includes(task.status)) {
-    if (['success', 'failed', 'canceled'].includes(task.status)) {
       stopTaskPoll(taskID);
       taskState.delete(taskID);
-      if (task.status === 'success') toast(task.message || 'Done', 'ok');
+      if (task.status === 'success')  toast(task.message || 'Done', 'ok');
-      if (task.status === 'failed') toast('Error: ' + task.error, 'error');
+      if (task.status === 'failed')   toast('Error: ' + task.error, 'error');
       if (task.status === 'canceled') toast('Copy canceled', 'error');
-      refreshSelectedDisk();
+      refreshDisks();
     }
-  } catch (error) {}
+  } catch {}
 }
 
-async function startCopy(mode) {
+// ─── disk list refresh ────────────────────────────────────────────────────────
-  const mountPath = document.getElementById('mountPath').value.trim();
+
-  if (!mountPath) return;
+async function refreshDisks() {
   try {
-    const response = await fetch('/api/disks/copy/start', {
+    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 r = await fetch('/api/disks/' + encodeURIComponent(diskID) + '/copy/start', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ mount_path: mountPath, 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;
+    refreshDisks();
-    }
+  } catch { toast('Network error', 'error'); }
-    startTaskPoll(payload.task_id);
-    refreshSelectedDisk();
-  } catch (error) {
-    toast('Network error', 'error');
-  }
 }
 
-async function cancelCopy() {
+async function cancelCopy(diskID) {
-  if (!selectedDisk.info || !selectedDisk.info.disk_id) return;
   try {
-    await fetch('/api/disks/' + encodeURIComponent(selectedDisk.info.disk_id) + '/copy/cancel', { method: 'POST' });
+    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() {
+async function initDisk(mountPath) {
-  const mountPath = document.getElementById('mountPath').value.trim();
-  if (!mountPath) return;
   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');
-    refreshSelectedDisk();
+    refreshDisks();
-  } catch (error) {
+  } catch { toast('Network error', 'error'); }
-    toast('Network error', 'error');
-  }
 }
 
-document.getElementById('diskState').addEventListener('click', (event) => {
+// ─── event delegation ─────────────────────────────────────────────────────────
-  const button = event.target.closest('button[data-action]');
-  if (!button) return;
 
-  const action = button.dataset.action;
+document.getElementById('diskGrid').addEventListener('click', (event) => {
-  if (action === 'start-copy') startCopy(button.dataset.mode || 'add');
+  const btn = event.target.closest('button[data-action]');
-  if (action === 'cancel-copy') cancelCopy();
+  if (!btn) return;
-  if (action === 'init-disk') initDisk();
+  const action = btn.dataset.action;
+  if (action === 'start-copy')   startCopy(btn.dataset.diskId, btn.dataset.mode || 'add');
+  if (action === 'cancel-copy')  cancelCopy(btn.dataset.diskId);
+  if (action === 'init-disk')    initDisk(btn.dataset.mountPath);
+  if (action === 'disk-settings') {
+    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' : '';
+    if (open) openPanels.delete(key); else openPanels.add(key);
+    btn.textContent = open ? '⚙ Settings' : '⚙ Settings ✕';
+  }
 });
 
-const savedMountPath = localStorage.getItem('jukebox.selectedMountPath');
+// ─── init ─────────────────────────────────────────────────────────────────────
-if (savedMountPath) {
+
-  document.getElementById('mountPath').value = savedMountPath;
+refreshDisks();
-  refreshSelectedDisk();
+setInterval(refreshDisks, 5000);
-} else {
-  renderDisk();
-}
 </script>
 {{end}}

web/templates/settings.html

@@ -4,17 +4,16 @@
   <section class="panel">
     <h2>Copy Sources</h2>
     <div class="panel-body">
-      <div class="form-hint">Add one or more root folders with source files. After that, expand each root and enable or disable individual nested folders with checkboxes.</div>
+      <div class="form-hint">Select top-level folders or expand branches and choose individual nested directories.</div>
-    </div>
-    <div class="btn-row">
-      <button type="button" class="button-primary" onclick="addSourceRoot()">Add source folder</button>
-      <button type="button" class="button-secondary button-sm" onclick="reloadAllSourceTrees()">Refresh trees</button>
     </div>
     <div class="source-list">
       <div class="source-tree" id="sourceTree">
-        <div class="text-muted source-tree-empty">No source folders added yet.</div>
+        <div class="text-muted source-tree-empty">Loading...</div>
       </div>
     </div>
+    <div class="btn-row">
+      <button type="button" class="button-secondary button-sm" onclick="reloadSourceTree()">Refresh list</button>
+    </div>
   </section>
 
   <section class="panel">
@@ -36,16 +35,11 @@
         <span class="form-hint">The new-only mode skips files already copied to this disk, even if they were later removed.</span>
       </div>
 
-      <div class="form-group">
-        <label class="form-label" for="allowedFilesMode">Allowed file types</label>
-        <select class="form-select" id="allowedFilesMode" style="width:auto;max-width:420px" onchange="updateAllowedFilesModeUI()">
-          <option value="media_types">Audio, video, photo</option>
-          <option value="extensions">Custom extensions list</option>
-        </select>
-      </div>
-
       <div class="form-group" id="mediaTypesGroup">
-        <label class="form-label">Built-in media types</label>
+        <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
+          <label class="form-label" style="margin:0">Allowed file types</label>
+          <button type="button" class="button-secondary button-sm" id="editAllowedFilesButton" onclick="toggleAllowedFilesEditor()">Edit list</button>
+        </div>
         <div style="display:grid;gap:8px">
           <label style="display:flex;align-items:flex-start;gap:8px;cursor:pointer">
             <input type="checkbox" id="mediaTypeAudio" style="width:15px;height:15px;accent-color:var(--accent)">
@@ -73,7 +67,10 @@
       </div>
 
       <div class="form-group" id="extensionsGroup" style="display:none">
-        <label class="form-label" for="allowedExtensions">Allowed extensions</label>
+        <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
+          <label class="form-label" for="allowedExtensions" style="margin:0">Allowed extensions</label>
+          <button type="button" class="button-secondary button-sm" onclick="toggleAllowedFilesEditor()">Use media types</button>
+        </div>
         <textarea class="form-input" id="allowedExtensions" rows="5" placeholder=".mp3, .flac, .mp4"></textarea>
         <span class="form-hint">One extension per line or separated by commas. You can write <code>mp3</code> or <code>.mp3</code>.</span>
       </div>
@@ -125,8 +122,8 @@ const builtInMediaTypes = {
   video: ['.3gp', '.avi', '.m2ts', '.m4v', '.mkv', '.mov', '.mp4', '.mpeg', '.mpg', '.mts', '.ts', '.webm', '.wmv'],
   photo: ['.bmp', '.gif', '.heic', '.heif', '.jpeg', '.jpg', '.png', '.tif', '.tiff', '.webp'],
 };
-let sourceRoots = [];
 let sourceConfig = {};
+let allowedFilesMode = 'media_types';
 
 function escapeHTML(value) {
   return String(value || '').replace(/[&<>"']/g, (char) => ({
@@ -138,43 +135,13 @@ function escapeHTML(value) {
   }[char]));
 }
 
-function pathSegments(path) {
+function pathDepth(path) {
-  return String(path || '').split(/[\\/]+/).filter(Boolean);
+  return path ? path.split('/').length : 0;
-}
-
-function nodeName(path) {
-  const parts = pathSegments(path);
-  return parts.length ? parts[parts.length - 1] : path;
-}
-
-function normalizeComparePath(path) {
-  return String(path || '').replace(/\\/g, '/').replace(/\/+$/, '').toLowerCase();
-}
-
-function isSamePath(a, b) {
-  return normalizeComparePath(a) === normalizeComparePath(b);
-}
-
-function isPathWithin(base, candidate) {
-  const baseNorm = normalizeComparePath(base);
-  const candidateNorm = normalizeComparePath(candidate);
-  return candidateNorm === baseNorm || candidateNorm.startsWith(baseNorm + '/');
 }
 
 function parentPath(path) {
-  const value = String(path || '').replace(/[\\/]+$/, '');
+  if (!path || !path.includes('/')) return '';
-  const slash = Math.max(value.lastIndexOf('/'), value.lastIndexOf('\\'));
+  return path.slice(0, path.lastIndexOf('/'));
-  if (slash < 0) return '';
-  if (slash === 2 && /^[A-Za-z]:/.test(value)) return value.slice(0, slash + 1);
-  if (slash === 0) return value.slice(0, 1);
-  return value.slice(0, slash);
-}
-
-function relativeDepth(root, path) {
-  if (isSamePath(root, path)) return 0;
-  const rootParts = pathSegments(root);
-  const pathParts = pathSegments(path);
-  return Math.max(0, pathParts.length - rootParts.length);
 }
 
 function effectiveSourceState(path) {
@@ -183,45 +150,37 @@ function effectiveSourceState(path) {
     if (Object.prototype.hasOwnProperty.call(sourceConfig, current)) {
       return sourceConfig[current];
     }
-    current = parentPath(current);
     if (!current) return true;
+    current = parentPath(current);
   }
 }
 
 function collectSourcesForSave() {
   const items = [];
   const seen = new Set();
+  const roots = sourceTree.get('') || [];
 
-  sourceRoots.forEach((root) => {
+  for (const item of roots) {
-    items.push({ path: root, enabled: effectiveSourceState(root), root: true });
+    items.push({ path: item.path, enabled: effectiveSourceState(item.path) });
-    seen.add(normalizeComparePath(root));
+    seen.add(item.path);
-  });
+  }
 
   Object.entries(sourceConfig).forEach(([path, enabled]) => {
-    const key = normalizeComparePath(path);
+    if (seen.has(path)) return;
-    if (seen.has(key)) return;
+    items.push({ path, enabled });
-    items.push({ path, enabled, root: false });
   });
 
   return items.sort((a, b) => a.path.localeCompare(b.path));
 }
 
-async function pickFolder() {
+async function loadSourceChildren(path = '') {
-  const response = await fetch('/api/system/pick-folder', { method: 'POST' });
+  if (loadingNodes.has(path)) return;
-  const payload = await response.json();
-  if (!response.ok) {
-    throw new Error(payload.error || 'Failed to choose folder');
-  }
-  return payload.path || '';
-}
-
-async function loadSourceChildren(path) {
-  if (!path || loadingNodes.has(path)) return;
   loadingNodes.add(path);
   renderSources();
 
   try {
-    const response = await fetch('/api/sources?path=' + encodeURIComponent(path));
+    const query = path ? '?path=' + encodeURIComponent(path) : '';
+    const response = await fetch('/api/sources' + query);
     if (!response.ok) return;
     const payload = await response.json();
     sourceTree.set(path, payload.items || []);
@@ -246,59 +205,15 @@ function toggleSource(path, checked) {
   renderSources();
 }
 
-function removeRoot(path) {
+function renderSourceNodes(parent = '') {
-  sourceRoots = sourceRoots.filter((root) => !isSamePath(root, path));
+  const items = sourceTree.get(parent) || [];
-  sourceTree.delete(path);
-  expandedNodes.delete(path);
-  loadingNodes.delete(path);
-
-  Object.keys(sourceConfig).forEach((key) => {
-    if (isPathWithin(path, key)) {
-      delete sourceConfig[key];
-    }
-  });
-
-  renderSources();
-}
-
-async function addSourceRoot() {
-  try {
-    const path = await pickFolder();
-    if (!path) return;
-    if (sourceRoots.some((root) => isSamePath(root, path))) {
-      toast('This source folder is already added', 'error');
-      return;
-    }
-    sourceRoots.push(path);
-    sourceRoots.sort((a, b) => a.localeCompare(b));
-    sourceConfig[path] = true;
-    expandedNodes.add(path);
-    await loadSourceChildren(path);
-  } catch (error) {
-    toast(error.message || 'Failed to choose folder', 'error');
-  }
-}
-
-async function reloadAllSourceTrees() {
-  const roots = [...sourceRoots];
-  sourceTree.clear();
-  for (const root of roots) {
-    if (expandedNodes.has(root)) {
-      await loadSourceChildren(root);
-    }
-  }
-  renderSources();
-}
-
-function renderSourceNodes(root, parentPathValue) {
-  const items = sourceTree.get(parentPathValue) || [];
   return items.map((item) => {
     const checked = effectiveSourceState(item.path);
     const expanded = expandedNodes.has(item.path);
     const childrenKnown = sourceTree.has(item.path);
     const children = childrenKnown ? sourceTree.get(item.path) : [];
     const hasChildren = !childrenKnown || children.length > 0;
-    const pad = 16 + (relativeDepth(root, item.path) + 1) * 20;
+    const pad = 16 + pathDepth(item.path) * 20;
 
     return `
       <div class="source-node">
@@ -313,11 +228,11 @@ function renderSourceNodes(root, parentPathValue) {
           <input class="source-check" type="checkbox" data-action="toggle-check" data-path="${escapeHTML(item.path)}" ${checked ? 'checked' : ''}>
           <div class="source-label">
             <span class="source-item-name">${escapeHTML(item.name)}</span>
-            <span class="source-item-path">${escapeHTML(item.path)}</span>
+            <span class="source-item-path">/media/${escapeHTML(item.path)}</span>
           </div>
         </div>
         ${expanded && loadingNodes.has(item.path) ? '<div class="source-loading">Loading...</div>' : ''}
-        ${expanded && childrenKnown && children.length ? `<div class="source-children">${renderSourceNodes(root, item.path)}</div>` : ''}
+        ${expanded && childrenKnown && children.length ? `<div class="source-children">${renderSourceNodes(item.path)}</div>` : ''}
       </div>
     `;
   }).join('');
@@ -325,54 +240,24 @@ function renderSourceNodes(root, parentPathValue) {
 
 function renderSources() {
   const el = document.getElementById('sourceTree');
-  if (!sourceRoots.length) {
+  const roots = sourceTree.get('');
-    el.innerHTML = '<div class="text-muted source-tree-empty">No source folders added yet.</div>';
+
+  if (loadingNodes.has('') && !roots) {
+    el.innerHTML = '<div class="text-muted source-tree-empty">Loading...</div>';
+    return;
+  }
+  if (!roots || !roots.length) {
+    el.innerHTML = '<div class="text-muted source-tree-empty">No folders found in /media.</div>';
     return;
   }
 
-  el.innerHTML = sourceRoots.map((root) => {
+  el.innerHTML = renderSourceNodes('');
-    const checked = effectiveSourceState(root);
-    const expanded = expandedNodes.has(root);
-    const childrenKnown = sourceTree.has(root);
-    const children = childrenKnown ? sourceTree.get(root) : [];
-    const hasChildren = !childrenKnown || children.length > 0;
-
-    return `
-      <div class="source-root-card">
-        <div class="source-row source-root-row">
-          <button
-            type="button"
-            class="source-toggle ${hasChildren ? '' : 'source-toggle-empty'}"
-            data-action="toggle-expand"
-            data-path="${escapeHTML(root)}"
-            ${hasChildren ? '' : 'tabindex="-1" aria-hidden="true"'}
-          >${expanded ? '▾' : '▸'}</button>
-          <input class="source-check" type="checkbox" data-action="toggle-check" data-path="${escapeHTML(root)}" ${checked ? 'checked' : ''}>
-          <div class="source-label">
-            <div class="source-root-title">
-              <span class="source-item-name">${escapeHTML(nodeName(root))}</span>
-              <span class="source-root-badge">Root</span>
-            </div>
-            <span class="source-item-path">${escapeHTML(root)}</span>
-          </div>
-          <button type="button" class="button-secondary button-sm" data-action="remove-root" data-path="${escapeHTML(root)}">Remove</button>
-        </div>
-        ${expanded && loadingNodes.has(root) ? '<div class="source-loading">Loading...</div>' : ''}
-        ${expanded && childrenKnown && children.length ? `<div class="source-children">${renderSourceNodes(root, root)}</div>` : ''}
-      </div>
-    `;
-  }).join('');
 }
 
-function deriveRootsFromSources(sources) {
+async function reloadSourceTree() {
-  const explicitRoots = sources.filter((source) => source.root).map((source) => source.path);
+  sourceTree.clear();
-  if (explicitRoots.length) {
+  expandedNodes.clear();
-    return explicitRoots;
+  await loadSourceChildren('');
-  }
-
-  return sources
-    .map((source) => source.path)
-    .filter((path, index, all) => !all.some((other, otherIndex) => otherIndex !== index && isPathWithin(other, path) && !isSamePath(other, path)));
 }
 
 function defaultAllowedExtensions() {
@@ -410,9 +295,13 @@ function selectedMediaTypes() {
 }
 
 function updateAllowedFilesModeUI() {
-  const mode = document.getElementById('allowedFilesMode').value || 'media_types';
+  document.getElementById('mediaTypesGroup').style.display = allowedFilesMode === 'media_types' ? '' : 'none';
-  document.getElementById('mediaTypesGroup').style.display = mode === 'media_types' ? '' : 'none';
+  document.getElementById('extensionsGroup').style.display = allowedFilesMode === 'extensions' ? '' : 'none';
-  document.getElementById('extensionsGroup').style.display = mode === 'extensions' ? '' : 'none';
+}
+
+function toggleAllowedFilesEditor() {
+  allowedFilesMode = allowedFilesMode === 'extensions' ? 'media_types' : 'extensions';
+  updateAllowedFilesModeUI();
 }
 
 function renderMediaTypeHints() {
@@ -429,9 +318,9 @@ async function loadSettings() {
     document.getElementById('reserveGB').value      = cfg.reserve_free_gb ?? 2;
     document.getElementById('destFolder').value     = cfg.dest_folder || 'media';
     document.getElementById('fileSelectMode').value = cfg.file_select_mode || 'new';
-    document.getElementById('allowedFilesMode').value = cfg.allowed_files_mode || 'media_types';
     document.getElementById('overwriteMode').value  = cfg.overwrite_mode || 'skip';
     document.getElementById('autoCopy').checked     = !!cfg.auto_copy;
+    allowedFilesMode = cfg.allowed_files_mode || 'media_types';
     document.getElementById('mediaTypeAudio').checked = (cfg.enabled_media_types || ['audio', 'video']).includes('audio');
     document.getElementById('mediaTypeVideo').checked = (cfg.enabled_media_types || ['audio', 'video']).includes('video');
     document.getElementById('mediaTypePhoto').checked = (cfg.enabled_media_types || []).includes('photo');
@@ -442,10 +331,7 @@ async function loadSettings() {
     (cfg.sources || []).forEach((source) => {
       sourceConfig[source.path] = !!source.enabled;
     });
-    sourceRoots = deriveRootsFromSources(cfg.sources || []).sort((a, b) => a.localeCompare(b));
+    renderSources();
-    expandedNodes.clear();
-    sourceTree.clear();
-    await reloadAllSourceTrees();
   } catch (error) {}
 }
 
@@ -453,15 +339,15 @@ async function saveSettings(event) {
   event.preventDefault();
 
   const body = {
-    reserve_free_gb:   parseFloat(document.getElementById('reserveGB').value) || 2,
+    reserve_free_gb:    parseFloat(document.getElementById('reserveGB').value) || 2,
-    dest_folder:       document.getElementById('destFolder').value.trim() || 'media',
+    dest_folder:        document.getElementById('destFolder').value.trim() || 'media',
-    file_select_mode:  document.getElementById('fileSelectMode').value,
+    file_select_mode:   document.getElementById('fileSelectMode').value,
-    allowed_files_mode: document.getElementById('allowedFilesMode').value,
+    allowed_files_mode: allowedFilesMode,
     enabled_media_types: selectedMediaTypes(),
     allowed_extensions: parseExtensionsInput(document.getElementById('allowedExtensions').value),
-    overwrite_mode:    document.getElementById('overwriteMode').value,
+    overwrite_mode:     document.getElementById('overwriteMode').value,
-    auto_copy:         document.getElementById('autoCopy').checked,
+    auto_copy:          document.getElementById('autoCopy').checked,
-    sources:           collectSourcesForSave(),
+    sources:            collectSourcesForSave(),
   };
 
   try {
@@ -483,22 +369,16 @@ async function saveSettings(event) {
 }
 
 document.getElementById('sourceTree').addEventListener('click', async (event) => {
-  const button = event.target.closest('button[data-action]');
+  const button = event.target.closest('[data-action="toggle-expand"]');
   if (!button) return;
 
-  const action = button.dataset.action;
   const path = button.dataset.path;
-  if (action === 'toggle-expand') {
+  if (expandedNodes.has(path)) {
-    if (expandedNodes.has(path)) {
+    expandedNodes.delete(path);
-      expandedNodes.delete(path);
+    renderSources();
-      renderSources();
+    return;
-      return;
-    }
-    await ensureExpanded(path);
-  }
-  if (action === 'remove-root') {
-    removeRoot(path);
   }
+  await ensureExpanded(path);
 });
 
 document.getElementById('sourceTree').addEventListener('change', (event) => {
@@ -509,5 +389,6 @@ document.getElementById('sourceTree').addEventListener('change', (event) => {
 
 renderMediaTypeHints();
 loadSettings();
+loadSourceChildren('');
 </script>
 {{end}}