Navigation: Glas, oben oder seitlich, und mehr Reihen auf der Startseite

Drei Dinge aus dem letzten Durchgang. **Die Startseite hatte zu wenig anzubieten.** Es gab eine Reihe „Zuletzt hinzugefügt" für alles zusammen. Jetzt gibt es eine je Mediathek — „Neu in Filme" und „Neu in Serien" sind zwei verschiedene Fragen, und wer nach einem Film sucht, blättert in einer gemeinsamen Reihe an Folgen vorbei. Dazu Favoriten, die es bei Jellyfin ohnehin gibt. Die drei Abfragen laufen nebeneinander; nur die Mediatheken werden streng geholt, weil sie die Probe darauf sind, ob der Server überhaupt antwortet. **Die Seitenleiste ist jetzt echtes Glas**, nicht das alte Material: im ausfahrbaren Blatt über `glassEffect`, in der geteilten Ansicht auf dem iPad vom System selbst — dort lag mein eigener Hintergrund darüber und machte ihn stumpf. Die zum Inhalt zeigende Kante ist gerundet, damit das Blatt sichtbar über der Seite liegt statt daneben zu stehen. **Die Navigation kann nach oben.** Eine Einstellung unter Erscheinungsbild, seitlich oder oben. Oben stehen alle Einträge gleichzeitig da, als Glaskapseln in einer waagerecht scrollenden Reihe — die Zahl der Mediatheken kommt vom Server, und zusammengequetschte Beschriftungen wären die schlechtere Antwort als eine Reihe, die weiterläuft. Angesehen auf iPhone und iPad: beide Formen, das Glas in beiden Leisten, die neuen Reihen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-13 14:31:09 +02:00
parent 5763d866bf
commit 5cebfed36b
9 changed files with 3490 additions and 3176 deletions
@@ -0,0 +1,57 @@
+import SwiftUI
+import FlixyDesign
+
+/// Die Navigation als Reihe über dem Inhalt.
+///
+/// Dieselben Einträge wie in der Seitenleiste, nur nebeneinander statt
+/// untereinander. Sie scrollt waagerecht, weil die Zahl der Mediatheken vom
+/// Server kommt und niemand weiß, wie viele es sind — zusammengequetschte
+/// Beschriftungen wären die schlechtere Antwort als eine Reihe, die weiterläuft.
+struct TopNavigationBar: View {
+    let items: [SidebarDestination]
+    @Binding var selection: SidebarDestination
+
+    @Environment(\.flixyAccent) private var accent
+    @Namespace private var glass
+
+    var body: some View {
+        ScrollView(.horizontal) {
+            // Ein gemeinsamer Behälter: nebeneinanderliegende Glasflächen
+            // verschmelzen darin, statt als einzelne Scheiben übereinander zu
+            // liegen.
+            GlassEffectContainer(spacing: FlixySpacing.snug) {
+                HStack(spacing: FlixySpacing.snug) {
+                    ForEach(items, id: \.self) { item in
+                        chip(for: item)
+                    }
+                }
+            }
+            .padding(.horizontal, FlixySpacing.screenMargin)
+            .padding(.vertical, FlixySpacing.snug)
+        }
+        .scrollIndicators(.hidden)
+        .scrollClipDisabled()
+    }
+
+    private func chip(for item: SidebarDestination) -> some View {
+        let isSelected = item == selection
+
+        return Button {
+            selection = item
+        } label: {
+            Label(item.sidebarLabel, systemImage: item.symbol)
+                .font(.flixyCardTitle)
+                .lineLimit(1)
+                .foregroundStyle(isSelected ? accent : Color.flixyTextSecondary)
+                .padding(.horizontal, FlixySpacing.regular)
+                .padding(.vertical, FlixySpacing.snug)
+        }
+        .buttonStyle(.plain)
+        .glassEffect(
+            isSelected ? .regular.tint(accent.opacity(0.28)).interactive() : .regular.interactive(),
+            in: .capsule
+        )
+        .glassEffectID(item, in: glass)
+        .accessibilityAddTraits(isSelected ? [.isButton, .isSelected] : .isButton)
+    }
+}