ScarriffleandClaude Opus 5
5f635c699a
Dreimal habe ich an den Rändern geschraubt, und dreimal war es nicht das.
Der Fehler sass in der Navigation und zeigte sich im Player.
**Gemessen statt vermutet.** Auf einem iPhone Pro Max im Querformat:
Fenster 956×440, Rand 0,62,62,20 → erwartet 832×420
Wurzel 832×558,67 @62,−69,33 → 138,67 zu hoch
Der Wurzelbaum ist zu gross für den Vorschlag und wird darin zentriert;
(420 − 558,67) / 2 ergibt exakt −69,33. Der Player liegt als Überlagerung
darin und erbt den Kasten — oben fielen neunundsechzig Punkte heraus,
unten neunundvierzig. Genau dort sitzen Kopfzeile und Zeitangaben.
**Die Ursache:** `FlixySidebar` war eine `VStack` ohne Bildlaufansicht,
mit dem Kommentar „die Einträge sind wenige und passen". Auf einem iPad
und im Hochformat stimmt das. Ein grosses iPhone ist quer
vierhundertvierzig Punkte hoch, und die Leiste braucht mit Kopf, Gruppen,
Trenner und Kontozeile gut fünfhundertdreissig. Eine `VStack` schrumpft
dann nicht — sie überragt, der `HStack` nimmt das Maximum, und alles
darüber wächst mit.
Deshalb war es nur dort zu sehen: nur auf einem grossen iPhone ist die
Anordnung quer `regular`, und nur dann gibt es überhaupt eine
Seitenleiste. Auf einem 17 Pro ist quer `compact` — dort stimmte jede
Messung, und genau deshalb konnte ich es dreimal nicht nachstellen.
Jetzt scrollt die Leiste, wenn sie muss (`basedOnSize`). Wo die Einträge
passen, sieht man keinen Unterschied. Nachgemessen: Wurzel 832×420,
Rahmen des Players 956×440 @0,0 — deckungsgleich mit dem Fenster.
**Mitgenommen:** `statusBarHeight` kam aus `proxy.safeAreaInsets.top` und
ging über `topInset` in einen `safeAreaInset` am selben Baum zurück. Das
Layout lief dadurch in Runden auf die richtige Grösse zu, jede Runde
zweiundsechzig Punkte. Der Wert kommt jetzt aus dem Fenster, das ihn ohne
Rückkopplung kennt — eine Runde statt drei.
`ScreenSafeArea` liegt dafür nicht mehr beim Player, sondern bei den
Modellen: es beantwortet jetzt für zwei Stellen dieselbe Frage.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
450 lines
18 KiB
Swift
450 lines
18 KiB
Swift
import SwiftUI
|
|
import FlixyDesign
|
|
import MediaKit
|
|
|
|
/// Wo die Navigation sitzt.
|
|
///
|
|
/// Die Wahl gehört dem Nutzer und muss den Neustart überleben — deshalb eine
|
|
/// eigene, gespeicherte Größe statt eines Zustands, der mit der Ansicht stirbt.
|
|
enum NavigationPlacement: String {
|
|
case sidebar
|
|
case top
|
|
}
|
|
|
|
/// Ein Eintrag in der Navigation.
|
|
struct NavigationEntry: Identifiable, Arrangeable {
|
|
let destination: SidebarDestination
|
|
let title: Text
|
|
let symbol: String
|
|
/// Der Titel als reiner Text — für die Sortierlogik und für die
|
|
/// Bedienungshilfen. `Text` selbst lässt sich nicht auslesen.
|
|
let plainTitle: String
|
|
|
|
var id: SidebarDestination { destination }
|
|
var arrangementID: String { destination.storageKey }
|
|
var arrangementTitle: String { plainTitle }
|
|
}
|
|
|
|
/// Eine Gruppe von Einträgen, mit oder ohne Überschrift.
|
|
struct NavigationGroup: Identifiable {
|
|
let id: String
|
|
let title: LocalizedStringKey?
|
|
let entries: [NavigationEntry]
|
|
}
|
|
|
|
// MARK: - Seitenleiste
|
|
|
|
/// Die Seitenleiste, wie sie auf dem iPad aussieht — überall.
|
|
///
|
|
/// Selbst gezeichnet, weil das System sie auf dem Mac angeklebt an den
|
|
/// Fensterrand setzt und sich das nicht umstellen lässt. Siehe
|
|
/// `TabChromeSuppressor`: das Verhalten kommt weiter vom `TabView`, nur das
|
|
/// Kleid ist unseres.
|
|
///
|
|
/// Eine schwebende Fläche mit Rand ringsum — genau das war die Bitte: „eine
|
|
/// eigene Bubble mit einem klaren Rand, der nicht der Fensterrand ist".
|
|
///
|
|
/// Der Rand kommt von `glassEffect` und nicht von einem gezeichneten Strich.
|
|
/// Ein Material mit einer halben Linie Kontur darum sah aus wie eine Fläche
|
|
/// mit Kontur; Glas bringt seine Kante selbst mit — sie hellt auf, wo Licht
|
|
/// fällt, und verschwindet, wo keins ist. Das ist der Unterschied zwischen
|
|
/// „umrandet" und „aus Glas".
|
|
struct FlixySidebar: View {
|
|
/// Alle Einträge, **ungefiltert**. Was davon zu sehen ist, entscheidet
|
|
/// `layout` — beim Bearbeiten müssen auch die ausgeblendeten dastehen.
|
|
let groups: [NavigationGroup]
|
|
@Binding var selection: SidebarDestination
|
|
@Binding var placement: NavigationPlacement
|
|
let layout: NavigationLayoutSettings
|
|
|
|
@Environment(\.flixyAccent) private var accent
|
|
/// Welche Gruppen eingeklappt sind. Nach Kennung, nicht nach Stellung:
|
|
/// kommt eine Mediathek dazu, soll nicht plötzlich die falsche zuklappen.
|
|
@State private var collapsed: Set<String> = []
|
|
@State private var isEditing = false
|
|
|
|
/// 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.30), location: 0),
|
|
.init(color: .white.opacity(0.05), location: 0.5),
|
|
.init(color: .white.opacity(0.16), 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
|
|
|
|
var body: some View {
|
|
VStack(alignment: .leading, spacing: 0) {
|
|
header
|
|
|
|
// **Doch mit Bildlaufansicht.** Hier stand „die Einträge sind
|
|
// wenige und passen" — und das stimmte auf einem iPad und im
|
|
// Hochformat. Auf einem grossen iPhone **quer** ist der
|
|
// Bildschirm vierhundertvierzig Punkte hoch, und die Leiste
|
|
// braucht mit Kopf, Gruppen, Trenner und Kontozeile gut
|
|
// fünfhundertdreissig.
|
|
//
|
|
// Eine `VStack` schrumpft dann nicht, sie **überragt**: der
|
|
// `HStack` daneben nimmt das Maximum, und der ganze Wurzelbaum
|
|
// wurde hundertachtunddreissig Punkte höher als der Bildschirm.
|
|
// Was darin als Überlagerung liegt — der Player — ging oben und
|
|
// unten hinaus, und Kopfzeile wie Zeitangaben waren weg. Der
|
|
// Fehler sass also in der Navigation und zeigte sich im Player.
|
|
//
|
|
// `basedOnSize`: es wird nur gescrollt, wenn es nötig ist. Wo die
|
|
// Einträge passen, sieht man keinen Unterschied.
|
|
//
|
|
// Beim Bearbeiten braucht es eine Liste — nur die bringt das
|
|
// Ziehen zum Umsortieren mit, und die scrollt von sich aus.
|
|
if isEditing {
|
|
Text("sidebar.editHint")
|
|
.font(.flixyCaption)
|
|
.foregroundStyle(Color.flixyTextMuted)
|
|
.padding(.horizontal, FlixySpacing.regular)
|
|
.padding(.bottom, FlixySpacing.snug)
|
|
|
|
List {
|
|
ForEach(groups) { group in
|
|
Section {
|
|
ForEach(editable(group)) { entry in
|
|
editRow(entry)
|
|
}
|
|
.onMove { move(in: group, from: $0, to: $1) }
|
|
} header: {
|
|
if let title = group.title {
|
|
Text(title)
|
|
.font(.flixyCaption)
|
|
.foregroundStyle(Color.flixyTextMuted)
|
|
}
|
|
}
|
|
.listRowBackground(Color.clear)
|
|
.listRowSeparator(.hidden)
|
|
}
|
|
}
|
|
.listStyle(.plain)
|
|
.scrollContentBackground(.hidden)
|
|
.environment(\.editMode, .constant(.active))
|
|
} else {
|
|
ScrollView {
|
|
VStack(alignment: .leading, spacing: FlixySpacing.regular) {
|
|
ForEach(groups) { group in
|
|
section(visible(group))
|
|
}
|
|
}
|
|
.padding(.horizontal, FlixySpacing.snug)
|
|
.padding(.bottom, FlixySpacing.regular)
|
|
}
|
|
.scrollBounceBehavior(.basedOnSize)
|
|
.scrollIndicators(.never)
|
|
}
|
|
|
|
Spacer(minLength: 0)
|
|
|
|
Divider().overlay(Color.flixySeparator)
|
|
AccountBar(selection: $selection)
|
|
.padding(.horizontal, FlixySpacing.snug)
|
|
.padding(.vertical, FlixySpacing.snug)
|
|
}
|
|
.frame(width: Self.width)
|
|
.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)
|
|
// **Kein** Abstand nach rechts: dort schließt der Inhalt unmittelbar
|
|
// an. Ein Abstand dorthin war der schwarze Spalt zwischen Aufmacher
|
|
// und Leiste. Der schwebende Eindruck kommt von den übrigen drei
|
|
// Seiten und vom Schatten.
|
|
.padding(.leading, Self.margin)
|
|
.padding(.vertical, Self.margin)
|
|
}
|
|
|
|
private var header: some View {
|
|
HStack(spacing: FlixySpacing.snug) {
|
|
Button {
|
|
withAnimation(.snappy(duration: 0.25)) { isEditing.toggle() }
|
|
} label: {
|
|
Text(isEditing ? "action.done" : "sidebar.edit")
|
|
.font(.flixyCaption)
|
|
.padding(.horizontal, FlixySpacing.snug)
|
|
.padding(.vertical, FlixySpacing.tight)
|
|
.contentShape(Capsule())
|
|
}
|
|
.buttonStyle(.plain)
|
|
.foregroundStyle(isEditing ? accent : Color.flixyTextSecondary)
|
|
|
|
Spacer(minLength: 0)
|
|
|
|
if !isEditing {
|
|
Button {
|
|
placement = .top
|
|
} label: {
|
|
Image(systemName: "rectangle.topthird.inset.filled")
|
|
.font(.flixyRowHeader)
|
|
.padding(FlixySpacing.tight)
|
|
// Ohne eigene Klickfläche reicht das Ziel nur so weit
|
|
// wie das Zeichen selbst — auf dem Mac trifft man das
|
|
// mit dem Zeiger kaum.
|
|
.contentShape(Rectangle())
|
|
}
|
|
.buttonStyle(.plain)
|
|
.foregroundStyle(Color.flixyTextSecondary)
|
|
.accessibilityLabel(Text("sidebar.moveToTop"))
|
|
}
|
|
}
|
|
.padding(.horizontal, FlixySpacing.regular)
|
|
.padding(.top, FlixySpacing.regular)
|
|
.padding(.bottom, FlixySpacing.snug)
|
|
}
|
|
|
|
/// Die Einträge einer Gruppe beim Bearbeiten: alle, in der gespeicherten
|
|
/// Reihenfolge, auch die ausgeblendeten.
|
|
private func editable(_ group: NavigationGroup) -> [NavigationEntry] {
|
|
layout.ordered(group.entries)
|
|
}
|
|
|
|
/// Verschiebt einen Eintrag innerhalb seiner Gruppe.
|
|
///
|
|
/// Gespeichert wird die Reihenfolge **aller** Gruppen hintereinander.
|
|
/// Innerhalb einer Gruppe zu sortieren genügt für die Anzeige, aber eine
|
|
/// Liste je Gruppe zu speichern hieße, beim Hinzukommen einer Gruppe
|
|
/// wieder eine Sonderregel zu haben.
|
|
private func move(in group: NavigationGroup, from source: IndexSet, to destination: Int) {
|
|
var entries = editable(group)
|
|
entries.move(fromOffsets: source, toOffset: destination)
|
|
|
|
var order: [String] = []
|
|
for other in groups {
|
|
let ids = other.id == group.id
|
|
? entries.map(\.arrangementID)
|
|
: editable(other).map(\.arrangementID)
|
|
order.append(contentsOf: ids)
|
|
}
|
|
layout.setOrder(order)
|
|
}
|
|
|
|
@ViewBuilder
|
|
private func section(_ group: NavigationGroup) -> some View {
|
|
if let title = group.title {
|
|
Button {
|
|
withAnimation(.snappy(duration: 0.25)) {
|
|
if collapsed.contains(group.id) {
|
|
collapsed.remove(group.id)
|
|
} else {
|
|
collapsed.insert(group.id)
|
|
}
|
|
}
|
|
} label: {
|
|
HStack {
|
|
Text(title)
|
|
.font(.flixyCaption)
|
|
.foregroundStyle(Color.flixyTextMuted)
|
|
Spacer()
|
|
Image(systemName: "chevron.down")
|
|
.font(.flixyCaption)
|
|
.foregroundStyle(Color.flixyTextMuted)
|
|
.rotationEffect(.degrees(collapsed.contains(group.id) ? -90 : 0))
|
|
}
|
|
.padding(.horizontal, FlixySpacing.regular)
|
|
.padding(.top, FlixySpacing.snug)
|
|
}
|
|
.buttonStyle(.plain)
|
|
}
|
|
|
|
if !collapsed.contains(group.id) {
|
|
ForEach(group.entries) { entry in
|
|
row(entry)
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Eine Gruppe, wie sie im Ruhezustand dasteht: ausgeblendete raus,
|
|
/// Reihenfolge angewandt.
|
|
private func visible(_ group: NavigationGroup) -> NavigationGroup {
|
|
NavigationGroup(id: group.id, title: group.title, entries: layout.apply(to: group.entries))
|
|
}
|
|
|
|
private func editRow(_ entry: NavigationEntry) -> some View {
|
|
let isHidden = layout.isHidden(entry.arrangementID)
|
|
|
|
return HStack(spacing: FlixySpacing.snug) {
|
|
Button {
|
|
layout.setHidden(!isHidden, for: entry.arrangementID)
|
|
} label: {
|
|
Image(systemName: isHidden ? "circle" : "checkmark.circle.fill")
|
|
.foregroundStyle(isHidden ? Color.flixyTextMuted : accent)
|
|
.contentShape(Rectangle())
|
|
}
|
|
.buttonStyle(.plain)
|
|
.accessibilityLabel(Text(isHidden ? "sidebar.show" : "sidebar.hide"))
|
|
|
|
Image(systemName: entry.symbol)
|
|
.frame(width: 22)
|
|
entry.title
|
|
.lineLimit(1)
|
|
Spacer(minLength: 0)
|
|
}
|
|
.font(.flixyBody)
|
|
.foregroundStyle(isHidden ? Color.flixyTextMuted : Color.flixyTextPrimary)
|
|
}
|
|
|
|
private func row(_ entry: NavigationEntry) -> some View {
|
|
let isSelected = selection == entry.destination
|
|
|
|
return Button {
|
|
selection = entry.destination
|
|
} label: {
|
|
HStack(spacing: FlixySpacing.snug) {
|
|
Image(systemName: entry.symbol)
|
|
.font(.flixyBody)
|
|
.frame(width: 22, alignment: .center)
|
|
entry.title
|
|
.font(.flixyBody)
|
|
// Ein langer Mediathekenname darf die Leiste nicht
|
|
// breiter machen; sie hat eine feste Breite.
|
|
.lineLimit(1)
|
|
Spacer(minLength: 0)
|
|
}
|
|
.foregroundStyle(isSelected ? accent : Color.flixyTextPrimary)
|
|
.padding(.horizontal, FlixySpacing.regular)
|
|
.padding(.vertical, FlixySpacing.snug)
|
|
.background {
|
|
if isSelected {
|
|
Capsule().fill(Color.flixyElevated)
|
|
}
|
|
}
|
|
.contentShape(Capsule())
|
|
}
|
|
.buttonStyle(.plain)
|
|
}
|
|
}
|
|
|
|
// MARK: - Leiste oben
|
|
|
|
/// Dieselben Einträge als schwebende Leiste oben.
|
|
///
|
|
/// Mediatheken stehen hier in einem Menü statt einzeln: oben ist der Platz
|
|
/// waagerecht begrenzt, und eine Reihe, die bei acht Mediatheken über den Rand
|
|
/// hinauswächst, wäre schlechter als ein Menü.
|
|
struct FlixyTopBar: View {
|
|
let groups: [NavigationGroup]
|
|
@Binding var selection: SidebarDestination
|
|
@Binding var placement: NavigationPlacement
|
|
|
|
@Environment(\.flixyAccent) private var accent
|
|
|
|
var body: some View {
|
|
HStack(spacing: FlixySpacing.tight) {
|
|
Button {
|
|
placement = .sidebar
|
|
} label: {
|
|
Image(systemName: "sidebar.leading")
|
|
.font(.flixyBody)
|
|
.padding(.horizontal, FlixySpacing.regular)
|
|
.padding(.vertical, FlixySpacing.snug)
|
|
// Ohne eigene Klickfläche reicht das Ziel nur so weit wie
|
|
// das Zeichen; auf dem Mac war der Umschalter damit
|
|
// praktisch nicht zu treffen.
|
|
.contentShape(Capsule())
|
|
}
|
|
.buttonStyle(.plain)
|
|
.foregroundStyle(Color.flixyTextSecondary)
|
|
.accessibilityLabel(Text("sidebar.moveToSide"))
|
|
|
|
ForEach(groups) { group in
|
|
if group.title == nil {
|
|
ForEach(group.entries) { entry in
|
|
pill(entry)
|
|
}
|
|
} else {
|
|
menu(group)
|
|
}
|
|
}
|
|
}
|
|
.padding(.horizontal, FlixySpacing.snug)
|
|
.padding(.vertical, FlixySpacing.snug)
|
|
.background { FlixySidebar.surface(in: .capsule) }
|
|
.clipShape(.capsule)
|
|
.shadow(color: .black.opacity(0.45), radius: 18, y: 6)
|
|
.padding(.top, FlixySpacing.snug)
|
|
}
|
|
|
|
private func pill(_ entry: NavigationEntry) -> some View {
|
|
let isSelected = selection == entry.destination
|
|
|
|
return Button {
|
|
selection = entry.destination
|
|
} label: {
|
|
entry.title
|
|
.font(.flixyBody)
|
|
.lineLimit(1)
|
|
.foregroundStyle(isSelected ? accent : Color.flixyTextPrimary)
|
|
.padding(.horizontal, FlixySpacing.loose)
|
|
.padding(.vertical, FlixySpacing.snug)
|
|
.background {
|
|
if isSelected { Capsule().fill(Color.flixyElevated) }
|
|
}
|
|
.contentShape(Capsule())
|
|
}
|
|
.buttonStyle(.plain)
|
|
}
|
|
|
|
private func menu(_ group: NavigationGroup) -> some View {
|
|
let containsSelection = group.entries.contains { $0.destination == selection }
|
|
|
|
return Menu {
|
|
ForEach(group.entries) { entry in
|
|
Button { selection = entry.destination } label: {
|
|
Label { entry.title } icon: { Image(systemName: entry.symbol) }
|
|
}
|
|
}
|
|
} label: {
|
|
HStack(spacing: FlixySpacing.tight) {
|
|
if let title = group.title {
|
|
// Ohne das wurde aus „Mediatheken" ein „Mediathe…".
|
|
// Die Leiste ist so breit wie ihr Inhalt; sie hat keinen
|
|
// Grund, an einem Wort zu sparen.
|
|
Text(title).fixedSize()
|
|
}
|
|
Image(systemName: "chevron.down").font(.flixyCaption)
|
|
}
|
|
.font(.flixyBody)
|
|
.foregroundStyle(containsSelection ? accent : Color.flixyTextPrimary)
|
|
.padding(.horizontal, FlixySpacing.loose)
|
|
.padding(.vertical, FlixySpacing.snug)
|
|
.background {
|
|
if containsSelection { Capsule().fill(Color.flixyElevated) }
|
|
}
|
|
.contentShape(Capsule())
|
|
}
|
|
.menuStyle(.button)
|
|
.buttonStyle(.plain)
|
|
}
|
|
}
|