Phase 0: Projektgerüst, Design-Tokens und Navigation
Legt das Fundament für den Plex-Client an: - XcodeGen-Projekt nach dem Muster von Onyx (com.scarriffleservices, strict concurrency, Projektdatei nicht eingecheckt) - FlixyKit mit vier Modulen: PlexKit, FlixyDesign, FlixyPlayback, FlixyDownloads. macOS steht als Plattform mit drin, damit die Logik-Tests ohne Simulator laufen. - FlixyDesign: dunkle Farb-Tokens, Schriftskala, Poster- und Querformat-Kacheln, Aufmacher-Bild. Die Akzentfarbe fließt über die Umgebung und wird per WCAG-Rechnung lesbar gehalten. - PlexKit: Kopfzeilen-Identität, Transport-Protokoll, Fehlerarten und die Medienmodelle samt nachsichtigem Decoder. - FlixyPlayback: VideoPlayerEngine-Protokoll und PlaybackDecider — die eine Funktion, an der Phase 2 das Transcoding andockt. - Ausfahrbare Seitenleiste auf dem iPhone, Split-View auf dem iPad. - 45 Tests, alle grün. VLCKit 4.0.0-a24 ist vorab geprüft: baut über SPM unter Swift 6 mit strict concurrency. Die iOS-Slice ist mit 239 MB allerdings gewichtig, deshalb bekommt sie in Phase 1 ein eigenes Target. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Guido
Claude Opus 5
@@ -0,0 +1,27 @@
|
||||
import Foundation
|
||||
|
||||
/// Alles, was den Namen der App trägt — an einer Stelle.
|
||||
///
|
||||
/// Der Name steht noch nicht fest. Damit ein späterer Wechsel nicht zur Suche
|
||||
/// quer durch den Quelltext wird, greift die App nirgends auf ein hart
|
||||
/// geschriebenes „Flixy" zu, sondern immer hierauf. Zu ändern sind dann genau
|
||||
/// zwei Dinge: diese Datei und `project.yml` (Produktname, Bundle-Kennung,
|
||||
/// Anzeigename).
|
||||
///
|
||||
/// Die Typen aus FlixyKit behalten ihre Namen — sie sind Bauteile, keine Marke.
|
||||
enum Branding {
|
||||
/// Wie die App sich selbst nennt.
|
||||
static let appName = "Flixy"
|
||||
|
||||
/// Unter welchem Namen die App in der Geräteliste des Plex-Kontos steht.
|
||||
///
|
||||
/// Wandert in die Kopfzeile `X-Plex-Product`. Eine Änderung hier legt beim
|
||||
/// nächsten Anmelden einen neuen Eintrag an — der alte bleibt als Karteileiche
|
||||
/// stehen, bis er von Hand entfernt wird.
|
||||
static let plexProduct = appName
|
||||
|
||||
/// Die Version aus dem Bundle, für die Kopfzeile `X-Plex-Version`.
|
||||
static var version: String {
|
||||
Bundle.main.object(forInfoDictionaryKey: "CFBundleShortVersionString") as? String ?? "0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import SwiftUI
|
||||
import FlixyDesign
|
||||
|
||||
@main
|
||||
struct FlixyApp: App {
|
||||
/// Lebt hier, nicht in einer View: die Akzentfarbe gilt für die gesamte
|
||||
/// App, und ein Neuaufbau der Wurzelansicht darf die Auswahl nicht
|
||||
/// zurücksetzen.
|
||||
@State private var theme = FlixyTheme()
|
||||
|
||||
var body: some Scene {
|
||||
WindowGroup {
|
||||
RootView()
|
||||
.environment(theme)
|
||||
.flixyAccent(theme)
|
||||
// Der eigentliche Schalter für „nur dunkel" steht in der
|
||||
// Info.plist (UIUserInterfaceStyle). Diese Zeile ist die
|
||||
// Absicherung für SwiftUI-Vorschauen, die die Info.plist
|
||||
// nicht lesen.
|
||||
.preferredColorScheme(.dark)
|
||||
.tint(theme.accentColor)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
|
||||
<plist version="1.0">
|
||||
<dict>
|
||||
<key>CFBundleDevelopmentRegion</key>
|
||||
<string>$(DEVELOPMENT_LANGUAGE)</string>
|
||||
<key>CFBundleDisplayName</key>
|
||||
<string>Flixy</string>
|
||||
<key>CFBundleExecutable</key>
|
||||
<string>$(EXECUTABLE_NAME)</string>
|
||||
<key>CFBundleIdentifier</key>
|
||||
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
|
||||
<key>CFBundleInfoDictionaryVersion</key>
|
||||
<string>6.0</string>
|
||||
<key>CFBundleName</key>
|
||||
<string>$(PRODUCT_NAME)</string>
|
||||
<key>CFBundlePackageType</key>
|
||||
<string>APPL</string>
|
||||
<key>CFBundleShortVersionString</key>
|
||||
<string>1.0</string>
|
||||
<key>CFBundleVersion</key>
|
||||
<string>1</string>
|
||||
<key>NSAppTransportSecurity</key>
|
||||
<dict>
|
||||
<key>NSAllowsLocalNetworking</key>
|
||||
<true/>
|
||||
</dict>
|
||||
<key>NSLocalNetworkUsageDescription</key>
|
||||
<string>Flixy benötigt Zugriff auf das lokale Netzwerk, um deinen Plex-Server zu finden und Medien direkt von ihm zu laden.</string>
|
||||
<key>UIBackgroundModes</key>
|
||||
<array>
|
||||
<string>audio</string>
|
||||
</array>
|
||||
<key>UILaunchScreen</key>
|
||||
<dict>
|
||||
<key>UIColorName</key>
|
||||
<string>LaunchBackground</string>
|
||||
</dict>
|
||||
<key>UISupportedInterfaceOrientations</key>
|
||||
<array>
|
||||
<string>UIInterfaceOrientationPortrait</string>
|
||||
<string>UIInterfaceOrientationLandscapeLeft</string>
|
||||
<string>UIInterfaceOrientationLandscapeRight</string>
|
||||
</array>
|
||||
<key>UISupportedInterfaceOrientations~ipad</key>
|
||||
<array>
|
||||
<string>UIInterfaceOrientationPortrait</string>
|
||||
<string>UIInterfaceOrientationPortraitUpsideDown</string>
|
||||
<string>UIInterfaceOrientationLandscapeLeft</string>
|
||||
<string>UIInterfaceOrientationLandscapeRight</string>
|
||||
</array>
|
||||
<key>UIUserInterfaceStyle</key>
|
||||
<string>Dark</string>
|
||||
</dict>
|
||||
</plist>
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"images" : [ { "idiom" : "universal", "platform" : "ios", "size" : "1024x1024" } ],
|
||||
"info" : { "author" : "xcode", "version" : 1 }
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{ "info" : { "author" : "xcode", "version" : 1 } }
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"colors" : [
|
||||
{
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : { "alpha" : "1.000", "blue" : "0x0D", "green" : "0x0B", "red" : "0x0B" }
|
||||
},
|
||||
"idiom" : "universal"
|
||||
}
|
||||
],
|
||||
"info" : { "author" : "xcode", "version" : 1 }
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
{
|
||||
"sourceLanguage": "en",
|
||||
"strings": {
|
||||
"sidebar.libraries": {
|
||||
"comment": "Überschrift über der Liste der Mediatheken in der Seitenleiste",
|
||||
"localizations": {
|
||||
"de": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Mediatheken"
|
||||
}
|
||||
},
|
||||
"en": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Libraries"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"sidebar.more": {
|
||||
"comment": "Überschrift über Live-TV, Downloads und Einstellungen",
|
||||
"localizations": {
|
||||
"de": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Mehr"
|
||||
}
|
||||
},
|
||||
"en": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "More"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"sidebar.liveTV": {
|
||||
"comment": "Eintrag in der Seitenleiste",
|
||||
"localizations": {
|
||||
"de": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Live-TV"
|
||||
}
|
||||
},
|
||||
"en": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Live TV"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"sidebar.downloads": {
|
||||
"comment": "Eintrag in der Seitenleiste",
|
||||
"localizations": {
|
||||
"de": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Downloads"
|
||||
}
|
||||
},
|
||||
"en": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Downloads"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"sidebar.settings": {
|
||||
"comment": "Eintrag in der Seitenleiste",
|
||||
"localizations": {
|
||||
"de": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Einstellungen"
|
||||
}
|
||||
},
|
||||
"en": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Settings"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"sidebar.open": {
|
||||
"comment": "Barrierefreiheits-Beschriftung des Hamburger-Knopfes",
|
||||
"localizations": {
|
||||
"de": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Seitenleiste öffnen"
|
||||
}
|
||||
},
|
||||
"en": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Open sidebar"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"sidebar.close": {
|
||||
"comment": "Barrierefreiheits-Beschriftung der abgedunkelten Fläche",
|
||||
"localizations": {
|
||||
"de": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Seitenleiste schließen"
|
||||
}
|
||||
},
|
||||
"en": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Close sidebar"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"placeholder.description": {
|
||||
"comment": "Text auf den Platzhalter-Bildschirmen von Phase 0",
|
||||
"localizations": {
|
||||
"de": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Dieser Bereich entsteht in einer späteren Phase."
|
||||
}
|
||||
},
|
||||
"en": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "This area is coming in a later phase."
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"sidebar.home": {
|
||||
"comment": "Eintrag der Startseite in der Seitenleiste",
|
||||
"localizations": {
|
||||
"de": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Start"
|
||||
}
|
||||
},
|
||||
"en": {
|
||||
"stringUnit": {
|
||||
"state": "translated",
|
||||
"value": "Home"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"version": "1.0"
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import SwiftUI
|
||||
import FlixyDesign
|
||||
|
||||
/// Die ausfahrbare Seitenleiste auf dem iPhone.
|
||||
///
|
||||
/// Sie legt sich über den Inhalt und dunkelt ihn ab, statt ihn zur Seite zu
|
||||
/// schieben — dadurch bleibt die Position im Inhalt erhalten und das Zumachen
|
||||
/// fühlt sich an wie das Wegwischen eines Blattes.
|
||||
struct DrawerContainer<Sidebar: View, Content: View>: View {
|
||||
@Binding var isOpen: Bool
|
||||
|
||||
@ViewBuilder let sidebar: Sidebar
|
||||
@ViewBuilder let content: Content
|
||||
|
||||
/// Breit genug für lange Mediatheksnamen, schmal genug, dass vom Inhalt
|
||||
/// dahinter noch etwas zu sehen bleibt.
|
||||
private let width: CGFloat = 280
|
||||
/// Ab wie weit gezogen die Leiste offen bleibt, statt zurückzuschnappen.
|
||||
private let commitThreshold: CGFloat = 0.4
|
||||
|
||||
@GestureState private var drag: CGFloat = 0
|
||||
@Environment(\.layoutDirection) private var layoutDirection
|
||||
|
||||
/// 0 = zu, 1 = offen. Fasst Zustand und laufende Geste zusammen, damit
|
||||
/// Abdunklung und Position immer zueinander passen.
|
||||
private var openness: CGFloat {
|
||||
let base = isOpen ? width : 0
|
||||
return ((base + drag) / width).clamped()
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
ZStack(alignment: .leading) {
|
||||
content
|
||||
.accessibilityHidden(isOpen)
|
||||
|
||||
if openness > 0 {
|
||||
Color.flixyScrim
|
||||
.opacity(openness)
|
||||
.ignoresSafeArea()
|
||||
.onTapGesture { setOpen(false) }
|
||||
// Ohne diese Beschriftung ist die Fläche für VoiceOver ein
|
||||
// stummer Block, der den Inhalt verdeckt.
|
||||
.accessibilityLabel(Text("sidebar.close"))
|
||||
.accessibilityAddTraits(.isButton)
|
||||
.accessibilityAction { setOpen(false) }
|
||||
}
|
||||
|
||||
sidebar
|
||||
.frame(width: width)
|
||||
.frame(maxHeight: .infinity)
|
||||
.background(Color.flixySurface)
|
||||
.offset(x: (openness - 1) * width)
|
||||
.accessibilityHidden(!isOpen)
|
||||
}
|
||||
.gesture(dragGesture)
|
||||
.animation(.snappy(duration: 0.28), value: isOpen)
|
||||
}
|
||||
|
||||
private var dragGesture: some Gesture {
|
||||
DragGesture(minimumDistance: 12, coordinateSpace: .global)
|
||||
.updating($drag) { value, state, _ in
|
||||
// Bei geschlossener Leiste zählt nur ein Zug, der am linken
|
||||
// Rand beginnt. Sonst würde jedes waagerechte Wischen in einer
|
||||
// Reihe die Seitenleiste hervorziehen.
|
||||
if !isOpen {
|
||||
guard value.startLocation.x < 24 else { return }
|
||||
state = max(0, value.translation.width)
|
||||
} else {
|
||||
state = min(0, value.translation.width)
|
||||
}
|
||||
}
|
||||
.onEnded { value in
|
||||
guard isOpen || value.startLocation.x < 24 else { return }
|
||||
let projected = openness + (value.predictedEndTranslation.width - value.translation.width) / width
|
||||
setOpen(projected > commitThreshold)
|
||||
}
|
||||
}
|
||||
|
||||
private func setOpen(_ open: Bool) {
|
||||
guard open != isOpen else { return }
|
||||
withAnimation(.snappy(duration: 0.28)) { isOpen = open }
|
||||
}
|
||||
}
|
||||
|
||||
extension CGFloat {
|
||||
fileprivate func clamped(to range: ClosedRange<CGFloat> = 0...1) -> CGFloat {
|
||||
Swift.min(Swift.max(self, range.lowerBound), range.upperBound)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import SwiftUI
|
||||
import FlixyDesign
|
||||
|
||||
/// Die Wurzelansicht.
|
||||
///
|
||||
/// Legt fest, in welcher Form die Seitenleiste erscheint: auf dem iPhone als
|
||||
/// ausfahrbares Blatt, auf dem iPad dauerhaft neben dem Inhalt. Beide Wege
|
||||
/// nutzen dieselbe `SidebarView` — der Unterschied liegt nur im Rahmen.
|
||||
struct RootView: View {
|
||||
@Environment(\.horizontalSizeClass) private var sizeClass
|
||||
|
||||
@State private var selection: SidebarDestination = .home
|
||||
@State private var isSidebarOpen = false
|
||||
/// Kommt in Phase 1 vom Server. Solange leer, blendet die Seitenleiste den
|
||||
/// Abschnitt aus, statt eine leere Überschrift zu zeigen.
|
||||
@State private var libraries: [SidebarDestination] = []
|
||||
|
||||
var body: some View {
|
||||
Group {
|
||||
if sizeClass == .regular {
|
||||
splitLayout
|
||||
} else {
|
||||
drawerLayout
|
||||
}
|
||||
}
|
||||
.background(Color.flixyCanvas)
|
||||
}
|
||||
|
||||
/// iPad: die Seitenleiste ist Teil des Fensters und lässt sich über den
|
||||
/// Systemknopf einklappen.
|
||||
private var splitLayout: some View {
|
||||
NavigationSplitView {
|
||||
SidebarView(libraries: libraries, selection: $selection, showsHeader: false) {}
|
||||
.navigationTitle(Branding.appName)
|
||||
.toolbar(removing: .sidebarToggle)
|
||||
} detail: {
|
||||
NavigationStack {
|
||||
destination
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// iPhone: die Seitenleiste fährt über den Inhalt.
|
||||
private var drawerLayout: some View {
|
||||
DrawerContainer(isOpen: $isSidebarOpen) {
|
||||
SidebarView(libraries: libraries, selection: $selection) {
|
||||
isSidebarOpen = false
|
||||
}
|
||||
} content: {
|
||||
NavigationStack {
|
||||
destination
|
||||
.toolbar {
|
||||
ToolbarItem(placement: .topBarLeading) {
|
||||
Button {
|
||||
withAnimation(.snappy(duration: 0.28)) { isSidebarOpen = true }
|
||||
} label: {
|
||||
Image(systemName: "line.3.horizontal")
|
||||
}
|
||||
.accessibilityLabel(Text("sidebar.open"))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var destination: some View {
|
||||
switch selection {
|
||||
case .home:
|
||||
PlaceholderScreen(destination: .home)
|
||||
case .library(let key, let title):
|
||||
PlaceholderScreen(destination: .library(key: key, title: title))
|
||||
case .liveTV:
|
||||
PlaceholderScreen(destination: .liveTV)
|
||||
case .downloads:
|
||||
PlaceholderScreen(destination: .downloads)
|
||||
case .settings:
|
||||
PlaceholderScreen(destination: .settings)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import Foundation
|
||||
|
||||
/// Was in der Seitenleiste steht.
|
||||
///
|
||||
/// Die Mediatheken kommen erst zur Laufzeit vom Server, deshalb trägt
|
||||
/// `library` den Schlüssel des Abschnitts statt eines festen Falls.
|
||||
enum SidebarDestination: Hashable {
|
||||
case home
|
||||
case library(key: String, title: String)
|
||||
case liveTV
|
||||
case downloads
|
||||
case settings
|
||||
|
||||
/// Der Titel in der Navigationsleiste.
|
||||
///
|
||||
/// Auf der Startseite steht dort der Name der App — in der Seitenleiste
|
||||
/// wäre das nur eine Dopplung der Überschrift, deshalb hat sie mit
|
||||
/// `sidebarLabel` einen eigenen Text.
|
||||
var title: String {
|
||||
switch self {
|
||||
case .home: Branding.appName
|
||||
case .library(_, let title): title
|
||||
case .liveTV: String(localized: "sidebar.liveTV")
|
||||
case .downloads: String(localized: "sidebar.downloads")
|
||||
case .settings: String(localized: "sidebar.settings")
|
||||
}
|
||||
}
|
||||
|
||||
/// Die Beschriftung in der Seitenleiste.
|
||||
var sidebarLabel: String {
|
||||
switch self {
|
||||
case .home: String(localized: "sidebar.home")
|
||||
default: title
|
||||
}
|
||||
}
|
||||
|
||||
var symbol: String {
|
||||
switch self {
|
||||
case .home: "house"
|
||||
case .library: "film"
|
||||
case .liveTV: "dot.radiowaves.left.and.right"
|
||||
case .downloads: "arrow.down.circle"
|
||||
case .settings: "gearshape"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import SwiftUI
|
||||
import FlixyDesign
|
||||
|
||||
/// Der Inhalt der Seitenleiste.
|
||||
///
|
||||
/// Kennt keine Navigation — sie meldet nur, was ausgewählt wurde. Dadurch
|
||||
/// 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 {
|
||||
let libraries: [SidebarDestination]
|
||||
@Binding var selection: SidebarDestination
|
||||
/// Auf dem iPad trägt die Navigationsleiste den Namen bereits — dort wäre
|
||||
/// eine eigene Überschrift die dritte Nennung auf demselben Bildschirm.
|
||||
var showsHeader: Bool = true
|
||||
let onSelect: () -> Void
|
||||
|
||||
var body: some View {
|
||||
ScrollView {
|
||||
VStack(alignment: .leading, spacing: FlixySpacing.section) {
|
||||
if showsHeader { header }
|
||||
|
||||
section(title: nil, items: [.home])
|
||||
|
||||
if !libraries.isEmpty {
|
||||
section(title: String(localized: "sidebar.libraries"), items: libraries)
|
||||
}
|
||||
|
||||
section(
|
||||
title: String(localized: "sidebar.more"),
|
||||
items: [.liveTV, .downloads, .settings]
|
||||
)
|
||||
}
|
||||
.padding(.horizontal, FlixySpacing.regular)
|
||||
.padding(.vertical, FlixySpacing.section)
|
||||
}
|
||||
.scrollBounceBehavior(.basedOnSize)
|
||||
.background(Color.flixySurface)
|
||||
}
|
||||
|
||||
private var header: some View {
|
||||
Text(Branding.appName)
|
||||
.font(.flixyTitle)
|
||||
.foregroundStyle(Color.flixyTextPrimary)
|
||||
.padding(.horizontal, FlixySpacing.snug)
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private func section(title: String?, items: [SidebarDestination]) -> some View {
|
||||
VStack(alignment: .leading, spacing: FlixySpacing.tight) {
|
||||
if let title {
|
||||
Text(title)
|
||||
.font(.flixyCaption)
|
||||
.foregroundStyle(Color.flixyTextMuted)
|
||||
.textCase(.uppercase)
|
||||
.padding(.horizontal, FlixySpacing.snug)
|
||||
.padding(.bottom, FlixySpacing.tight)
|
||||
}
|
||||
ForEach(items, id: \.self) { item in
|
||||
SidebarRow(destination: item, isSelected: item == selection) {
|
||||
selection = item
|
||||
onSelect()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private struct SidebarRow: View {
|
||||
let destination: SidebarDestination
|
||||
let isSelected: Bool
|
||||
let action: () -> Void
|
||||
|
||||
@Environment(\.flixyAccent) private var accent
|
||||
|
||||
var body: some View {
|
||||
Button(action: action) {
|
||||
Label {
|
||||
Text(destination.sidebarLabel).font(.flixyBody)
|
||||
} icon: {
|
||||
Image(systemName: destination.symbol)
|
||||
// Feste Breite, damit die Beschriftungen auf einer Linie
|
||||
// stehen — SF-Symbole sind unterschiedlich breit.
|
||||
.frame(width: 22)
|
||||
}
|
||||
.foregroundStyle(isSelected ? accent : Color.flixyTextSecondary)
|
||||
.padding(.horizontal, FlixySpacing.snug)
|
||||
.padding(.vertical, FlixySpacing.regular)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.background {
|
||||
if isSelected {
|
||||
RoundedRectangle(cornerRadius: FlixyRadius.control)
|
||||
.fill(accent.opacity(0.14))
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
.accessibilityAddTraits(isSelected ? [.isButton, .isSelected] : .isButton)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import SwiftUI
|
||||
import FlixyDesign
|
||||
|
||||
/// Ein noch nicht gebauter Bereich.
|
||||
///
|
||||
/// Gibt es nur in Phase 0, damit die Navigation vollständig begehbar ist,
|
||||
/// bevor es Inhalte gibt. Jede Phase ersetzt einen dieser Bildschirme durch
|
||||
/// den echten.
|
||||
struct PlaceholderScreen: View {
|
||||
let destination: SidebarDestination
|
||||
|
||||
var body: some View {
|
||||
ContentUnavailableView {
|
||||
Label(destination.title, systemImage: destination.symbol)
|
||||
} description: {
|
||||
Text("placeholder.description")
|
||||
}
|
||||
.background(Color.flixyCanvas)
|
||||
.navigationTitle(destination.title)
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.toolbarBackground(Color.flixySurface, for: .navigationBar)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user