Ordner durchklicken, statt den Pfad zu wissen

Beim Anlegen einer Mediathek verlangte das Feld den Pfad im Container —
nicht den auf dem NAS. Diese Unterscheidung kennt nur, wer die
Compose-Datei selbst geschrieben hat, und ein Tippfehler darin ergibt
eine leere Mediathek ohne erkennbaren Grund.

Neben dem Feld steht jetzt ein Knopf, der die Ordner des Servers im
selben Dialog aufklappt: Pfadzeile in anklickbaren Stücken, Unterordner
darunter, unten der Knopf mit dem gewählten Pfad darauf.

Im selben Dialog und nicht in einem zweiten darüber: zwei gestapelte
Dialoge sind beim Schliessen immer eine Frage zu viel.

Das Feld bleibt tippbar. Wer den Pfad kennt, ist damit schneller, und
bei einem tiefen Baum ist es die einzige geduldschonende Möglichkeit.

An der Wurzel bleiben /proc, /sys, /usr und Verwandte aussen vor. Das
ist keine Absperrung — wer den Pfad kennt, tippt ihn weiterhin ein —,
sondern eine Liste aus zwanzig Einträgen, von denen achtzehn nie eine
Mediathek enthalten, ist unbrauchbar.

Ein Ordner ohne Leserecht wird gemeldet, nicht geworfen. Ohne das flöge
eine UnauthorizedAccessException bis in die Antwort und würde zur 500,
während die ehrliche Auskunft lautet: den darfst du nicht lesen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/src/dialog.ts

@@ -1,5 +1,6 @@
 import { icons } from './icons';
 import { knopf } from './util';
+import { ordner, type Ordnerstand } from './api';
 
 /* Dialoge über dem Inhalt statt Blöcken darin.
  *
@@ -9,7 +10,7 @@ import { knopf } from './util';
  * Vorlesesoftware kündigt ihn als Dialog an. Jede Zeile, die das selbst
  * baut, ist eine Zeile, die es schlechter kann. */
 
-export type Feldart = 'text' | 'password' | 'number';
+export type Feldart = 'text' | 'password' | 'number' | 'ordner';
 
 export type Dialogfeld = {
   name: string;
@@ -71,7 +72,10 @@ export function dialog(optionen: {
   const eingaben = new Map<string, HTMLInputElement | HTMLSelectElement>();
 
   (optionen.felder ?? []).forEach(f => {
-    const block = document.createElement('label');
+    // **Ein `<label>` nur dort, wo genau ein Bedienelement darin sitzt.**
+    // Umschliesst es zusätzlich einen Knopf, löst jeder Klick darauf auch
+    // das Label aus und schiebt den Fokus ins Textfeld zurück.
+    const block = document.createElement(f.art === 'ordner' ? 'div' : 'label');
     block.className = 'dlg-feld';
 
     const titel = document.createElement('span');
@@ -100,6 +104,14 @@ export function dialog(optionen: {
       block.prepend(e);
       titel.remove();
       block.append(titel);
+    } else if (f.art === 'ordner') {
+      const e = document.createElement('input');
+      e.className = 'feld';
+      e.type = 'text';
+      e.value = f.wert ?? '';
+      e.placeholder = f.platzhalter ?? '';
+      eingaben.set(f.name, e);
+      block.appendChild(ordnerfeld(e));
     } else {
       const e = document.createElement('input');
       e.className = 'feld';
@@ -179,6 +191,157 @@ export function dialog(optionen: {
   });
 }
 
+/** Ein Textfeld mit Ordnerauswahl daneben.
+ *
+ * **Das Feld bleibt tippbar.** Wer den Pfad kennt, ist damit schneller als
+ * mit jedem Durchklicken — und bei einem tiefen Baum ist es die einzige
+ * geduldschonende Möglichkeit. Der Knopf ist ein Angebot, keine Pflicht.
+ *
+ * **Die Auswahl klappt im selben Dialog auf**, statt einen zweiten darüber
+ * zu legen. Zwei gestapelte Dialoge sind beim Schliessen immer eine Frage
+ * zu viel: welcher geht jetzt zu?
+ */
+function ordnerfeld(eingabe: HTMLInputElement): HTMLElement {
+  const huelle = document.createElement('div');
+  huelle.className = 'ordnerfeld';
+
+  const zeile = document.createElement('div');
+  zeile.className = 'ordnerzeile';
+  const auf = knopf('Durchsuchen', 'btn');
+  auf.type = 'button';
+  auf.prepend(rahmenIcon(icons.ordner));
+  zeile.append(eingabe, auf);
+
+  const baum = document.createElement('div');
+  baum.className = 'ordnerbaum hidden';
+
+  const kopf = document.createElement('div');
+  kopf.className = 'ordnerkopf';
+  const hoch = document.createElement('button');
+  hoch.type = 'button';
+  hoch.className = 'rund';
+  hoch.innerHTML = icons.hoch;
+  hoch.setAttribute('aria-label', 'Eine Ebene höher');
+  const pfad = document.createElement('div');
+  pfad.className = 'ordnerpfad';
+  kopf.append(hoch, pfad);
+
+  const liste = document.createElement('div');
+  liste.className = 'ordnerliste';
+
+  const fuss = document.createElement('div');
+  fuss.className = 'ordnerfuss';
+  const waehlen = knopf('Diesen Ordner wählen', 'btn btn-primary');
+  waehlen.type = 'button';
+  fuss.appendChild(waehlen);
+
+  baum.append(kopf, liste, fuss);
+  huelle.append(zeile, baum);
+
+  let hier: Ordnerstand | null = null;
+
+  async function gehe(ziel?: string): Promise<void> {
+    liste.innerHTML = '<div class="spinner"></div>';
+    try {
+      hier = await ordner(ziel);
+    } catch (fehler) {
+      liste.innerHTML = '';
+      liste.appendChild(hinweiszeile((fehler as Error).message));
+      return;
+    }
+    zeichne();
+  }
+
+  function zeichne(): void {
+    if (!hier) return;
+    hoch.disabled = hier.parent === null;
+    waehlen.textContent = `„${hier.path}" wählen`;
+
+    // Der Pfad in anklickbaren Stücken — ein Sprung nach oben ist damit
+    // einer, nicht fünf.
+    pfad.innerHTML = '';
+    const teile = hier.path.split('/').filter(t => t.length > 0);
+    // Die Wurzel trägt ihren Strich selbst und bekommt deshalb keinen
+    // Trenner angehängt — sonst steht dort „/ / media".
+    const wurzel = pfadstueck('/', '/');
+    wurzel.classList.add('wurzel');
+    pfad.appendChild(wurzel);
+    let bisher = '';
+    teile.forEach(t => {
+      bisher += '/' + t;
+      pfad.appendChild(pfadstueck(t, bisher));
+    });
+
+    liste.innerHTML = '';
+    if (hier.entries.length === 0) {
+      liste.appendChild(hinweiszeile(hier.note ?? 'Keine Unterordner.'));
+      return;
+    }
+    hier.entries.forEach(e => {
+      const z = document.createElement('button');
+      z.type = 'button';
+      z.className = 'ordnereintrag';
+      z.innerHTML = icons.ordner;
+      const name = document.createElement('span');
+      name.textContent = e.name;
+      z.appendChild(name);
+      z.onclick = () => void gehe(e.path);
+      liste.appendChild(z);
+    });
+  }
+
+  function pfadstueck(text: string, ziel: string): HTMLElement {
+    const b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'pfadstueck';
+    b.textContent = text;
+    b.onclick = () => void gehe(ziel);
+    return b;
+  }
+
+  function hinweiszeile(text: string): HTMLElement {
+    const d = document.createElement('div');
+    d.className = 'winzig';
+    d.textContent = text;
+    return d;
+  }
+
+  auf.onclick = () => {
+    const offen = !baum.classList.toggle('hidden');
+    auf.textContent = offen ? 'Zuklappen' : 'Durchsuchen';
+    auf.prepend(rahmenIcon(icons.ordner));
+    // Da anfangen, wo im Feld schon etwas steht — sonst beim Server.
+    if (offen && !hier) void gehe(eingabe.value.trim() || undefined);
+  };
+
+  hoch.onclick = () => { if (hier?.parent) void gehe(hier.parent); };
+
+  waehlen.onclick = () => {
+    if (!hier) return;
+    eingabe.value = hier.path;
+    baum.classList.add('hidden');
+    auf.textContent = 'Durchsuchen';
+    auf.prepend(rahmenIcon(icons.ordner));
+    eingabe.focus();
+  };
+
+  // **Enter darf hier nicht den Dialog abschicken.** Der Dialog lauscht
+  // auf seinem Körper und drückt bei Enter den Bestätigen-Knopf; in der
+  // Ordnerauswahl soll Enter den fokussierten Ordner öffnen und sonst
+  // nichts.
+  baum.addEventListener('keydown', e => { if (e.key === 'Enter') e.stopPropagation(); });
+
+  return huelle;
+}
+
+/** Ein Icon als Element — `innerHTML` würde den Text des Knopfes löschen. */
+function rahmenIcon(svg: string): HTMLElement {
+  const s = document.createElement('span');
+  s.className = 'icon';
+  s.innerHTML = svg;
+  return s;
+}
+
 /** Fragt einmal nach — für alles, was etwas wegnimmt. */
 export function nachfragen(optionen: {
   titel: string;