GUI: Splitter zwischen Liste und Detail (340-680px, persistent)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0113vDKdSNtD3Dwcw4QMu9yV

app/web/src/main.js

@@ -289,8 +289,29 @@ function viewRecordings() {
   v.innerHTML = `
     <div class="rec-layout">
       <aside class="rec-list-pane"><div id="reclist" class="list">Lade…</div></aside>
+      <div class="rec-splitter" title="Ziehen: Listenbreite ändern"></div>
       <section class="rec-detail-pane"><div id="detail"><div class="detail-empty muted">← Aufnahme wählen</div></div></section>
     </div>`;
+  // Draggable splitter: list width between LIST_MIN (the old fixed width) and
+  // twice that; persisted for all sessions.
+  const LIST_MIN = 340, LIST_MAX = 680;
+  const listPane = v.querySelector('.rec-list-pane');
+  const applyW = (w) => { listPane.style.flex = `0 0 ${Math.min(LIST_MAX, Math.max(LIST_MIN, w))}px`; };
+  applyW(+localStorage.getItem('aime-list-width') || LIST_MIN);
+  v.querySelector('.rec-splitter').onmousedown = (e) => {
+    e.preventDefault();
+    const startX = e.clientX, startW = listPane.getBoundingClientRect().width;
+    document.body.classList.add('resizing');
+    const move = (ev) => applyW(startW + (ev.clientX - startX));
+    const up = () => {
+      document.removeEventListener('mousemove', move);
+      document.removeEventListener('mouseup', up);
+      document.body.classList.remove('resizing');
+      localStorage.setItem('aime-list-width', Math.round(listPane.getBoundingClientRect().width));
+    };
+    document.addEventListener('mousemove', move);
+    document.addEventListener('mouseup', up);
+  };
   refreshRecList();
   if (state.selectedId != null) openRecording(state.selectedId);
 }

app/web/src/style.css

@@ -175,7 +175,13 @@ audio { width: 100%; margin-bottom: 10px; }
 .ana-line { margin: 2px 0 8px; }
 
 /* ---- Aufnahmen: Liste links, Detail rechts ---- */
-.rec-layout { display: flex; gap: 14px; align-items: flex-start; }
+.rec-layout { display: flex; gap: 8px; align-items: flex-start; }
+.rec-splitter {
+  flex: 0 0 6px; align-self: stretch; cursor: col-resize; border-radius: 3px;
+  background: transparent; transition: background .12s;
+}
+.rec-splitter:hover, body.resizing .rec-splitter { background: var(--accent-soft); }
+body.resizing { cursor: col-resize; user-select: none; }
 .rec-list-pane {
   flex: 0 0 340px; position: sticky; top: 12px; max-height: calc(100vh - 90px);
   overflow-y: auto; background: var(--surface); border: 1px solid var(--line);
@@ -268,7 +274,8 @@ audio { width: 100%; margin-bottom: 10px; }
 @media (max-width: 800px) {
   #app.wide { max-width: 860px; }
   .rec-layout { flex-direction: column; }
-  .rec-list-pane { flex: none; width: 100%; position: static; max-height: 340px; }
+  .rec-list-pane { flex: none !important; width: 100%; position: static; max-height: 340px; }
+  .rec-splitter { display: none; }
   .topbar nav { margin-left: 0; width: 100%; order: 3; }
 }
 

docs/08-changelog.md

@@ -3,6 +3,13 @@
 Chronik der Entwicklungsschritte. **Regel: jede zukünftige Änderung bekommt hier einen Eintrag** (Datum,
 Was, Warum, betroffene Dateien/Backups).
 
+## 2026-07-17 — GUI: Listenbreite per Splitter ziehbar
+
+Zwischen Liste und Detail sitzt jetzt ein 6-px-Splitter (Hover/Ziehen = Kupfer-Schimmer,
+col-resize-Cursor): Liste zwischen 340 px (alte Festbreite = Minimum) und 680 px (Maximum = doppelt)
+frei ziehbar, Breite persistiert in localStorage['aime-list-width']. Auf schmalen Screens (gestapelt)
+ausgeblendet. Playwright-getestet (Clamp 340/680 + Persistenz). Bundle `index-BbmdfFEI.js`.
+
 ## 2026-07-17 — GUI: Kupfer-Zaehler, Favicon, Tab-Reihenfolge
 
 Tages-Zaehler in der Liste jetzt im Logo-Kupfer (accent-soft-Pille); Wellenform-Logo als Favicon