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>
This commit is contained in:
Scarriffle
2026-09-13 14:31:09 +02:00
co-authored by Claude Opus 5
parent 5763d866bf
commit 5cebfed36b
9 changed files with 3490 additions and 3176 deletions
+37 -4
View File
@@ -7,6 +7,14 @@ import FlixyDesign
/// lässt sie sich auf dem iPhone in den Drawer und auf dem iPad in die
/// `NavigationSplitView` stecken, ohne etwas zu ändern.
struct SidebarView: View {
/// Wo diese Leiste steckt.
///
/// In der geteilten Ansicht bringt das System die Glasfläche selbst mit —
/// eine eigene läge darüber und machte sie stumpf. Im ausfahrbaren Blatt
/// gibt es keine, also kommt sie von hier.
enum Presentation { case drawer, column }
var presentation: Presentation = .drawer
let libraries: [SidebarDestination]
/// Ob der aktive Server Live-TV anbietet.
///
@@ -40,10 +48,7 @@ struct SidebarView: View {
.padding(.vertical, FlixySpacing.section)
}
.scrollBounceBehavior(.basedOnSize)
// Milchig statt undurchsichtig: der Inhalt dahinter bleibt zu ahnen,
// und die Leiste wirkt wie eine Schicht darüber statt wie eine zweite
// Seite daneben. Ein Vollton stand vorher wie eine Wand im Bild.
.background(.ultraThinMaterial)
.modifier(SidebarBackground(presentation: presentation))
}
private var header: some View {
@@ -106,3 +111,31 @@ private struct SidebarRow: View {
.accessibilityAddTraits(isSelected ? [.isButton, .isSelected] : .isButton)
}
}
/// Die Fläche hinter der Seitenleiste.
///
/// Ein eigener Modifikator, weil die beiden Fälle verschiedene Ergebnistypen
/// haben und ein `if` im Ansichtskörper sie nicht zusammenbringt.
private struct SidebarBackground: ViewModifier {
let presentation: SidebarView.Presentation
func body(content: Content) -> some View {
switch presentation {
case .drawer:
// Die zum Inhalt zeigende Kante ist gerundet: so liegt das Blatt
// sichtbar **über** der Seite, statt eine zweite Seite daneben zu
// sein. Ein Vollton stand vorher wie eine Wand im Bild.
content.glassEffect(
.regular,
in: .rect(
topLeadingRadius: 0,
bottomLeadingRadius: 0,
bottomTrailingRadius: FlixyRadius.sheet,
topTrailingRadius: FlixyRadius.sheet
)
)
case .column:
content
}
}
}