Volle Höhe, eine Kante statt eines Streifens

Der Aufmacher nimmt jetzt achtundachtzig Prozent der sichtbaren Höhe, statt
sich seine Höhe aus 16:9 auszurechnen. Ein Aufmacher, der ein Drittel hoch ist,
sieht aus wie ein breites Vorschaubild; die zwölf Prozent Rest sind Absicht,
dort lugt die erste Reihe herein und sagt, dass es weitergeht. Auf schmalen
Geräten bleibt es beim Hochformat.

`FlixyArtwork` kann dafür den Rahmen ausfüllen, den es bekommt. Das
Seitenverhältnis bleibt trotzdem wichtig — danach werden die Bilder beim Server
angefordert.

Und `glassEffect` ist raus. Er zeichnet an seiner Kante einen Lichtsaum, und
über einem hellen Aufmacher wurde daraus ein heller Balken von mehreren Punkten
Breite neben der Leiste — kein Rand, sondern ein Streifen. Von einer Kante war
gleichzeitig nichts zu erkennen.

Von Hand sind es drei Lagen: ein trübes Material, ein Schleier gegen die
durchziehende Startseite, und ein Haarstrich, der oben links aufhellt und unten
rechts nachlässt. Dazu ein Schatten — was schwebt, wirft einen.

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

Flixy/Views/Navigation/FlixyNavigationBar.swift

@@ -54,6 +54,40 @@ struct FlixySidebar: View {
     /// kommt eine Mediathek dazu, soll nicht plötzlich die falsche zuklappen.
     @State private var collapsed: Set<String> = []
 
+    /// Die Fläche, auf der die Leiste liegt.
+    ///
+    /// Von Hand gebaut und nicht mit `glassEffect`. Der zeichnet an seiner
+    /// Kante einen Lichtsaum, und über einem hellen Aufmacher wurde daraus ein
+    /// heller Balken von mehreren Punkten Breite, der neben der Leiste stand —
+    /// kein Rand, sondern ein Streifen. Gleichzeitig war von einer Kante nichts
+    /// zu erkennen.
+    ///
+    /// Drei Lagen: ein trübes Material, damit die Leiste eine eigene Fläche
+    /// ist; ein Schleier, damit die durchziehende Startseite nicht mitgelesen
+    /// wird; und ein Haarstrich, der oben links aufhellt und unten rechts
+    /// nachlässt — so fängt Glas das Licht. Dazu ein Schatten, denn was
+    /// schwebt, wirft einen.
+    @ViewBuilder
+    static func surface(in shape: some InsettableShape) -> some View {
+        shape
+            .fill(.ultraThinMaterial)
+            .overlay { shape.fill(Color.flixyCanvas.opacity(0.55)) }
+            .overlay {
+                shape.strokeBorder(
+                    LinearGradient(
+                        stops: [
+                            .init(color: .white.opacity(0.55), location: 0),
+                            .init(color: .white.opacity(0.10), location: 0.5),
+                            .init(color: .white.opacity(0.30), location: 1),
+                        ],
+                        startPoint: .topLeading,
+                        endPoint: .bottomTrailing
+                    ),
+                    lineWidth: 1
+                )
+            }
+    }
+
     static let width: CGFloat = 235
     /// Der Abstand zum Fensterrand. Er ist der eigentliche Punkt der Sache.
     static let margin: CGFloat = 12
@@ -81,21 +115,9 @@ struct FlixySidebar: View {
                 .padding(.vertical, FlixySpacing.snug)
         }
         .frame(width: Self.width)
-        // Ein Schleier unter dem Glas.
-        //
-        // Reines Glas zeigt alles, was dahinter vorbeizieht — und beim Scrollen
-        // zieht die ganze Startseite vorbei. Der Aufmacher, die Plakatreihen,
-        // die Überschriften: alles wanderte durch die Leiste hindurch, und
-        // neben den ruhigen Beschriftungen wurde daraus ein unruhiger Brei.
-        //
-        // Der Schleier nimmt der Bewegung die Schärfe, ohne die Fläche
-        // zuzumauern: man sieht noch, dass dort etwas ist, aber man liest es
-        // nicht mehr mit.
-        .background(
-            Color.flixyCanvas.opacity(0.72),
-            in: .rect(cornerRadius: FlixyRadius.panel, style: .continuous)
-        )
-        .glassEffect(.regular, in: .rect(cornerRadius: FlixyRadius.panel))
+        .background { Self.surface(in: .rect(cornerRadius: FlixyRadius.panel, style: .continuous)) }
+        .clipShape(.rect(cornerRadius: FlixyRadius.panel, style: .continuous))
+        .shadow(color: .black.opacity(0.45), radius: 22, y: 8)
         .padding(Self.margin)
     }
 
@@ -223,8 +245,9 @@ struct FlixyTopBar: View {
         }
         .padding(.horizontal, FlixySpacing.snug)
         .padding(.vertical, FlixySpacing.tight)
-        .background(Color.flixyCanvas.opacity(0.72), in: .capsule)
-        .glassEffect(.regular, in: .capsule)
+        .background { FlixySidebar.surface(in: .capsule) }
+        .clipShape(.capsule)
+        .shadow(color: .black.opacity(0.45), radius: 18, y: 6)
         .padding(.top, FlixySpacing.snug)
     }