Suchen am Fernseher — und die Leiste, die es dafür braucht

Das Backend konnte die Suche längst; es fehlte die Oberfläche.

**`.searchable`, keine eigene Tastatur.** tvOS macht daraus einen eigenen
Bildschirm mit Rastertastatur oben und Ergebnissen darunter — die
Bedienung, die jeder von Apples Apps kennt. Etwas Eigenes zu bauen hiesse,
sie nachzuahmen und dabei die Diktierfunktion zu verlieren.

**Herausgelöst statt kopiert**, wie schon bei Start und Mediathek:
`SearchFeed` trägt das Entprellen, die Mindestlänge und die zuletzt
gesuchten Begriffe. Drei Stellen, an denen es nicht offensichtlich ist —
und die dritte ist die wichtigste: geprüft wird auf `Task.isCancelled`
und nicht auf `CancellationError`, weil eine abgebrochene Netzanfrage als
Übertragungsfehler zurückkommt. Die naheliegende Prüfung lief ins Leere,
und jeder Tastendruck leerte kurz die Liste.

**Und erst jetzt eine Reiterleiste.** Bis hierher gab es genau einen
Bildschirm, und eine Leiste mit einem Eintrag wäre Zierrat gewesen. Der
Suchreiter trägt `role: .search`: tvOS stellt ihn dadurch ans Ende und
gibt ihm die Lupe, dieselbe Stelle wie überall sonst. Keinen dritten
Reiter für die Mediatheken — die stehen als Reihe auf der Startseite, und
ein Reiter verspräche einen eigenen Bereich, hinter dem dasselbe Raster
läge.

Der offene Reiter wird ausdrücklich gehalten, nicht dem System
überlassen: ein Link aus dem Regal über der App führt zur Startseite, und
stünde gerade die Suche offen, passierte sichtbar nichts.

Nebenbei bekommt die iOS-Suche einen Knopf zum Vergessen des Verlaufs.
Wischen zum Löschen gab es dort, am Fernseher gibt es das nicht — und
eine Liste, die sich nur auf einer Plattform leeren lässt, ist keine.

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

FlixyTV/Views/Search/TVSearchView.swift

@@ -0,0 +1,104 @@
+import SwiftUI
+import FlixyDesign
+import MediaKit
+
+/// Die Suche am Fernseher.
+///
+/// **`.searchable` und keine eigene Tastatur.** tvOS macht daraus einen
+/// eigenen Bildschirm mit Rastertastatur links und Ergebnissen rechts — die
+/// Bedienung, die jeder von Apples eigenen Apps kennt. Etwas Eigenes zu bauen
+/// hiesse, sie nachzuahmen und dabei die Diktierfunktion zu verlieren.
+///
+/// Das Modell dahinter ist dasselbe wie am Telefon: `SearchFeed` entprellt,
+/// fragt und merkt sich die letzten Begriffe.
+struct TVSearchView: View {
+    @Environment(FlixySession.self) private var session
+    @Environment(PlaybackCoordinator.self) private var playback
+    @Environment(QuickPlay.self) private var quickPlay
+
+    @State private var text = ""
+    @State private var feed = SearchFeed()
+    @State private var pfad = NavigationPath()
+
+    var body: some View {
+        NavigationStack(path: $pfad) {
+            inhalt
+                .navigationDestination(for: MediaRoute.self) { route in
+                    TVDetailView(route: route)
+                }
+        }
+        .searchable(text: $text, prompt: Text("search.hint"))
+        // Jeder Tastendruck löst eine Anfrage aus — aber erst nach einer
+        // kurzen Pause. Siehe `SearchFeed`.
+        .task(id: text) { await feed.search(text, from: session.backend) }
+    }
+
+    @ViewBuilder
+    private var inhalt: some View {
+        if text.isEmpty {
+            zuletzt
+        } else if feed.hubs.isEmpty {
+            // Kein Unterschied zwischen „sucht noch" und „nichts gefunden":
+            // auf dem Fernseher tippt man langsam, und ein Text, der bei
+            // jedem Buchstaben zwischen beiden wechselt, flackert nur.
+            leer
+        } else {
+            ergebnisse
+        }
+    }
+
+    private var ergebnisse: some View {
+        ScrollView {
+            LazyVStack(alignment: .leading, spacing: FlixySpacing.section) {
+                ForEach(feed.hubs) { reihe in
+                    TVMediaRow(
+                        row: reihe,
+                        onSelect: { quickPlay.start($0, backend: session.backend, coordinator: playback) }
+                    )
+                }
+            }
+            .padding(.vertical, FlixySpacing.section)
+        }
+        .scrollClipDisabled()
+        .scrollIndicators(.never)
+    }
+
+    /// Die letzten Begriffe — als Knöpfe, nicht als Liste.
+    ///
+    /// Am Fernseher ist das der eigentliche Wert der Suche: einmal getippt,
+    /// danach ein Druck. Eine Zeile mit Wischen zum Löschen gibt es hier
+    /// nicht, deshalb steht das Vergessen als eigener Knopf daneben.
+    @ViewBuilder
+    private var zuletzt: some View {
+        if feed.recent.isEmpty {
+            hinweis("search.hint")
+        } else {
+            VStack(alignment: .leading, spacing: FlixySpacing.regular) {
+                Text("search.recent")
+                    .font(.flixyRowHeader)
+                    .foregroundStyle(Color.flixyTextPrimary)
+
+                ForEach(feed.recent, id: \.self) { eintrag in
+                    Button(eintrag) { text = eintrag }
+                }
+
+                Button("search.forgetRecent", role: .destructive) { feed.forgetRecent() }
+                    .padding(.top, FlixySpacing.regular)
+            }
+            .frame(maxWidth: 700, alignment: .leading)
+            .padding(FlixySpacing.section)
+        }
+    }
+
+    private var leer: some View {
+        hinweis("search.noResults")
+    }
+
+    private func hinweis(_ text: LocalizedStringKey) -> some View {
+        Text(text)
+            .font(.flixyBody)
+            .foregroundStyle(Color.flixyTextMuted)
+            .frame(maxWidth: 700)
+            .padding(FlixySpacing.section)
+    }
+}

FlixyTV/Views/TVRootView.swift

@@ -39,7 +39,7 @@ struct TVRootView: View {
                 fehlgeschlagen(meldung)
 
             case .ready:
-                TVHomeView(deepLinkTarget: $ziel)
+                TVShell(deepLinkTarget: $ziel)
             }
         }
         .task { await session.restore() }

FlixyTV/Views/TVShell.swift

@@ -0,0 +1,48 @@
+import SwiftUI
+import FlixyDesign
+
+/// Start und Suche nebeneinander.
+///
+/// **Ein `TabView`, und erst jetzt.** Bis hierher gab es genau einen
+/// Bildschirm, und eine Leiste mit einem einzigen Eintrag wäre Zierrat
+/// gewesen. Mit der Suche gibt es zwei Orte, zwischen denen man wechselt —
+/// und dafür ist die Leiste oben die Bedienung, die jeder vom Fernseher
+/// kennt: sie erscheint, wenn man vom obersten Element aus nach oben wischt,
+/// und verschwindet wieder.
+///
+/// **Kein Reiter für die Mediatheken.** Die stehen als Reihe auf der
+/// Startseite. Ein dritter Reiter dafür verspräche einen eigenen Bereich, und
+/// dahinter läge dasselbe Raster, das eine Reihe tiefer ohnehin erreichbar
+/// ist.
+struct TVShell: View {
+    @Binding var deepLinkTarget: MediaRoute?
+
+    /// Welcher Reiter offen ist.
+    ///
+    /// Ausdrücklich gehalten, nicht dem System überlassen: ein Link aus dem
+    /// Regal über der App führt immer zur Startseite, und stünde gerade die
+    /// Suche offen, passierte sichtbar nichts.
+    @State private var reiter = Reiter.start
+
+    private enum Reiter: Hashable { case start, suche }
+
+    var body: some View {
+        TabView(selection: $reiter) {
+            Tab(value: Reiter.start) {
+                TVHomeView(deepLinkTarget: $deepLinkTarget)
+            } label: {
+                Text("sidebar.home")
+            }
+
+            // **`role: .search` und nicht ein gewöhnlicher Reiter.** tvOS
+            // stellt ihn dadurch ans Ende der Leiste und gibt ihm das
+            // Lupensymbol — dieselbe Stelle wie in Apples eigenen Apps.
+            Tab(value: Reiter.suche, role: .search) {
+                TVSearchView()
+            }
+        }
+        .onChange(of: deepLinkTarget) { _, neu in
+            if neu != nil { reiter = .start }
+        }
+    }
+}