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/style.css

@@ -567,3 +567,70 @@ h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 var(
   .detail-text h1 { font-size: 26px; }
   #topbar .suchfeld { max-width: none; }
 }
+
+/* --- Ordnerauswahl ------------------------------------------------------
+ *
+ * Klappt im Dialog auf, statt einen zweiten darüberzulegen. Die Höhe ist
+ * begrenzt und scrollt: ein Verzeichnis mit zweihundert Unterordnern würde
+ * den Dialog sonst über den Bildschirmrand schieben. */
+
+.ordnerfeld { display: flex; flex-direction: column; gap: var(--s-snug); }
+
+.ordnerzeile { display: flex; gap: var(--s-snug); }
+.ordnerzeile .feld { flex: 1; min-width: 0; }
+.ordnerzeile .btn { flex: none; gap: 6px; }
+
+.ordnerbaum {
+  border: 1px solid var(--line); border-radius: var(--r-control);
+  background: var(--canvas); overflow: hidden;
+}
+
+.ordnerkopf {
+  display: flex; align-items: center; gap: var(--s-snug);
+  padding: var(--s-snug); border-bottom: 1px solid var(--line);
+}
+.ordnerkopf .rund { width: 30px; height: 30px; flex: none; }
+.ordnerkopf .rund svg { width: 16px; height: 16px; }
+.ordnerkopf .rund:disabled { opacity: .35; }
+
+/* Der Pfad scrollt waagerecht statt umzubrechen — ein tiefer Pfad soll die
+   Kopfzeile nicht dreizeilig machen. */
+.ordnerpfad {
+  display: flex; align-items: center; gap: 2px;
+  overflow-x: auto; scrollbar-width: none; min-width: 0;
+}
+.ordnerpfad::-webkit-scrollbar { display: none; }
+.ordnerpfad .pfadstueck {
+  background: none; border: 0; padding: 2px 5px; border-radius: 4px;
+  color: var(--text-dim); font-size: 12px; white-space: nowrap;
+}
+.ordnerpfad .pfadstueck:hover { background: var(--elevated); color: var(--text); }
+.ordnerpfad .pfadstueck:not(:last-child)::after { content: '/'; margin-left: 5px; color: var(--text-faint); }
+.ordnerpfad .pfadstueck.wurzel::after { content: none; }
+
+.ordnerliste {
+  max-height: 220px; overflow-y: auto;
+  display: flex; flex-direction: column; padding: var(--s-tight);
+}
+.ordnerliste .winzig { padding: var(--s-regular); }
+
+.ordnereintrag {
+  display: flex; align-items: center; gap: var(--s-snug);
+  background: none; border: 0; border-radius: 5px;
+  padding: 7px var(--s-snug); text-align: left;
+  color: var(--text-dim); font-size: 13px;
+}
+.ordnereintrag svg { width: 17px; height: 17px; color: var(--text-faint); }
+.ordnereintrag:hover { background: var(--elevated); color: var(--text); }
+.ordnereintrag:hover svg { color: var(--accent); }
+
+.ordnerfuss {
+  padding: var(--s-snug); border-top: 1px solid var(--line);
+  display: flex; justify-content: flex-end;
+}
+/* Der Knopf trägt den ganzen Pfad — bei einem langen muss er kürzen dürfen,
+   sonst wächst der Dialog mit. */
+.ordnerfuss .btn {
+  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  display: block;
+}