Einstellungen: sechs Bildschirme statt einer Liste — und was sie steuern

Deine Einstellungs-Bilder sind eine lange Liste. Ich habe sie durchgegangen
und getrennt: was etwas steuert, ist gebaut; was eine Einstellung für eine
Sache wäre, die es nicht gibt, ist nicht gebaut. Ein Schalter, der nichts
bewirkt, ist schlimmer als kein Schalter.

**Die Einstellungen sind jetzt eine Übersicht.** Vorher stand alles
untereinander auf einem Bildschirm — Serverangaben, Qualität, Wiedergabe, drei
Verweise, Downloads, Version, Abmelden. Das war beim Bauen bequem und beim
Suchen anstrengend. Jetzt führt jede Zeile in einen Bildschirm, der zu einer
Frage gehört: Server, Erscheinungsbild, Startseite, Wiedergabe, Ton &
Untertitel, Downloads, Diagnose.

**Neu, und jedes davon greift irgendwo:**

- Zurück- und Vorspulen getrennt einstellbar. Die Knöpfe im Player und die
  Doppeltipp-Flächen tragen danach auch das passende Symbol.
- Startgeschwindigkeit — die Engine kann es längst, gefragt wurde nie.
- „Im Querformat sperren" abschaltbar. Für die allermeisten Filme richtig, für
  den, der im Bett auf der Seite liegt, das Gegenteil.
- „Gewählte Qualität merken": die Stufe gilt dann auch für den nächsten Titel.
  Aufbewahrt wird eine **Zahl**, keine Sprosse — welche Sprossen es gibt, hängt
  von der Quelle ab, und eine 720p-Datei kennt keine Zwanzig-Megabit-Stufe.
  Dann kommt die nächstgelegene, nicht „automatisch".
- „Bitrate im Qualitätsmenü zeigen".
- Gleichzeitige Downloads. Der Wert gab es schon in der Engine, nur ohne
  Bedienung und ohne dass er einen Neustart überlebte.
- Aufmacher: wie viele Titel, und ob sie aus Angefangenem oder nur aus
  Neuzugängen kommen.
- „Weiterschauen und Als Nächstes zusammenlegen" und „Gesehenes aus
  Neuzugängen ausblenden" — beides in der Ansicht, nicht im Server: das sind
  Fragen der Darstellung, und so gelten sie für Plex und Jellyfin gleich.

**Verkleinert herunterladen geht jetzt auch bei Jellyfin.** Da hatte ich zu
früh aufgegeben: ich hatte nur nach der Adresse zum *Abspielen* gesucht, und
die ist eine Abspielliste mit hunderten Schnipseln — als Datei unbrauchbar.
`/Videos/{id}/stream.mp4` gibt dieselbe Umrechnung als eine Datei heraus. Die
Größe bleibt eine Schätzung; eine Umrechnung, die erst beim Abruf beginnt,
kennt ihre eigene Länge nicht.

**Die Kontozeile ist jetzt eine Karte, die nach oben aufklappt**, kein
Systemmenü mehr. Ein Menü legt sich als eigene Ebene über alles und springt
dorthin, wo Platz ist; die Karte bleibt, wo sie ist, und lässt die Zeile mit
dem Namen stehen — man sieht also weiter, um wessen Konto es geht.

**Nicht gebaut, mit Grund:** Trailer im Karussell, Poster- und Sammlungsstil,
Untertitel-Aussehen, sekundäre Untertitel, lokale Intros, Modular Home,
App-Symbol. Für all das fehlt das, was die Einstellung steuern würde — es gibt
in Flixy weder Trailer noch Sammlungen, und der Player zeichnet Untertitel
nicht selbst.

263 Tests grün. **Nicht angesehen**: der Simulator-Tunnel ist weiterhin
abgestürzt und ließ sich nicht wieder aufbauen.

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

Flixy/Views/Navigation/AccountBar.swift

@@ -3,18 +3,25 @@ import FlixyDesign
 
 /// Wer angemeldet ist — unten in der Seitenleiste.
 ///
-/// Der Platz ist nicht zufällig: dort sucht man sein Konto, weil es auf jedem
-/// Schreibtisch und in jeder App der letzte Eintrag ist. Und von dort führt
-/// der Weg in die Einstellungen, statt dass sie als gleichrangiger Eintrag
-/// zwischen den Mediatheken stehen.
+/// Der Platz ist nicht zufällig: dort sucht man sein Konto, weil es in jeder
+/// App der letzte Eintrag ist. Und von dort führt der Weg in die
+/// Einstellungen, statt dass sie als gleichrangiger Eintrag zwischen den
+/// Mediatheken stehen.
 ///
-/// Auf dem iPhone gibt es diese Leiste nicht — dort gehört das Konto in die
-/// Einstellungen selbst, und die haben ihren eigenen Eintrag.
+/// **Eine Karte, die nach oben aufklappt**, kein Systemmenü. Der Unterschied
+/// ist nicht nur Geschmack: ein Menü legt sich als eigene Ebene über alles und
+/// springt dorthin, wo Platz ist. Die Karte bleibt, wo sie ist, wächst nach
+/// oben und lässt die Zeile mit dem Namen die ganze Zeit stehen — man sieht
+/// also weiter, um wessen Konto es geht.
+///
+/// Auf dem iPhone gibt es diese Leiste nicht; dort haben die Einstellungen
+/// ihren eigenen Eintrag.
 struct AccountBar: View {
     @Binding var selection: SidebarDestination
 
     @Environment(FlixySession.self) private var session
     @Environment(\.flixyAccent) private var accent
+    @State private var isExpanded = false
     @State private var showsSignOutConfirmation = false
 
     private var title: String {
@@ -28,16 +35,44 @@ struct AccountBar: View {
     }
 
     var body: some View {
-        Menu {
-            Button("account.settings", systemImage: "gearshape") {
-                selection = .settings
+        VStack(spacing: 0) {
+            if isExpanded {
+                action("account.settings", symbol: "gearshape") {
+                    collapse()
+                    selection = .settings
+                }
+                separator
+
+                action(
+                    "action.signOut",
+                    symbol: "rectangle.portrait.and.arrow.right",
+                    isDestructive: true
+                ) {
+                    collapse()
+                    showsSignOutConfirmation = true
+                }
+                separator
             }
 
-            Divider()
+            accountRow
+        }
+        .glassEffect(.regular, in: .rect(cornerRadius: FlixyRadius.sheet))
+        .animation(.snappy(duration: 0.25), value: isExpanded)
+        .confirmationDialog(
+            Text("settings.signOutConfirm"),
+            isPresented: $showsSignOutConfirmation,
+            titleVisibility: .visible
+        ) {
+            Button("action.signOut", role: .destructive) { session.signOut() }
+            Button("action.cancel", role: .cancel) {}
+        } message: {
+            Text("settings.signOutExplanation")
+        }
+    }
 
-            Button("action.signOut", systemImage: "rectangle.portrait.and.arrow.right", role: .destructive) {
-                showsSignOutConfirmation = true
-            }
+    private var accountRow: some View {
+        Button {
+            withAnimation(.snappy(duration: 0.25)) { isExpanded.toggle() }
         } label: {
             HStack(spacing: FlixySpacing.snug) {
                 avatar
@@ -58,25 +93,40 @@ struct AccountBar: View {
 
                 Spacer(minLength: FlixySpacing.snug)
 
-                Image(systemName: "chevron.up.chevron.down")
-                    .font(.caption2)
+                // Zeigt nach oben, wenn zugeklappt: dorthin wächst die Karte.
+                Image(systemName: isExpanded ? "chevron.down" : "chevron.up")
+                    .font(.caption2.weight(.semibold))
                     .foregroundStyle(Color.flixyTextMuted)
             }
-            .padding(.vertical, FlixySpacing.tight)
+            .padding(.horizontal, FlixySpacing.regular)
+            .padding(.vertical, FlixySpacing.snug)
             .contentShape(.rect)
         }
         .buttonStyle(.plain)
         .accessibilityLabel(Text(title))
-        .confirmationDialog(
-            Text("settings.signOutConfirm"),
-            isPresented: $showsSignOutConfirmation,
-            titleVisibility: .visible
-        ) {
-            Button("action.signOut", role: .destructive) { session.signOut() }
-            Button("action.cancel", role: .cancel) {}
-        } message: {
-            Text("settings.signOutExplanation")
+        .accessibilityHint(Text("account.hint"))
+    }
+
+    private func action(
+        _ title: LocalizedStringKey,
+        symbol: String,
+        isDestructive: Bool = false,
+        perform: @escaping () -> Void
+    ) -> some View {
+        Button(action: perform) {
+            Label(title, systemImage: symbol)
+                .font(.flixyBody)
+                .foregroundStyle(isDestructive ? Color.flixyDestructive : Color.flixyTextPrimary)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .padding(.horizontal, FlixySpacing.regular)
+                .padding(.vertical, FlixySpacing.regular)
+                .contentShape(.rect)
         }
+        .buttonStyle(.plain)
+    }
+
+    private var separator: some View {
+        Divider().overlay(Color.flixySeparator)
     }
 
     /// Der erste Buchstabe auf einer Scheibe.
@@ -91,4 +141,8 @@ struct AccountBar: View {
             .frame(width: 26, height: 26)
             .background(accent, in: .circle)
     }
+
+    private func collapse() {
+        withAnimation(.snappy(duration: 0.25)) { isExpanded = false }
+    }
 }