UI-Refactor angelehnt an cards/apps/web. Drei Killer-Patterns
übernommen:
1. CardSurface (Sources/Core/Theme/CardSurface.swift)
- Drei Sizes md/lg/hero mit identischem Border-Radius 14pt,
1pt Border, layered Shadows je nach Elevation
- Aspect-Ratio 5:7 für md/hero, 12:16.8 für lg
- Optional Color-Accent-Stripe links (6pt, deck.color)
2. DeckStackTile (Sources/Features/Decks/DeckStackTile.swift)
- Spielkarten-Stack-Visual: 3 gestaffelt-rotierte
Hintergrund-Layer hinter der CardSurface
- Layer-Offsets + Tilts deterministisch aus Deck-ID gehasht
(gleiches Deck = gleiche Asymmetrie)
- Inhalt: Category-Icon oben rechts, Titel + Description
zentriert, Counts unten als Pill für dueCount
3. RatingBar mit Good-Emphasis (Features/Study/RatingBar.swift)
- "Good" als full primary background (hero action)
- again/hard/easy mit subtle border-tint + opacity-08-Background
- Keyboard-Shortcut im Button-Label als kbd-Style-Pill
DeckListView komplett umgebaut:
- Horizontale ScrollView mit scrollTransition + viewAligned-Snap
- Zwei Sektionen: "Eigene Decks" und "Abonniert"
- Inbox-Banner als highlight (primary opacity 0.08 mit border)
- Pending-Share-Banner mit warning-Tint
- Section-Headers mit Icon + Title + Count
StudySessionView.cardSurface nutzt jetzt CardSurface(.hero, .raised).
Build 6 → 7. Drei native Targets bauen, 35 Tests grün.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
186 lines
6.5 KiB
Swift
186 lines
6.5 KiB
Swift
import ManaCore
|
|
import SwiftData
|
|
import SwiftUI
|
|
|
|
#if canImport(UIKit)
|
|
import UIKit
|
|
#endif
|
|
|
|
/// Vollbild-Study-View. Wird per Navigation aus DeckListView geöffnet.
|
|
struct StudySessionView: View {
|
|
let deckId: String
|
|
let deckName: String
|
|
|
|
@Environment(AuthClient.self) private var auth
|
|
@Environment(\.modelContext) private var context
|
|
@Environment(\.dismiss) private var dismiss
|
|
@State private var session: StudySession?
|
|
|
|
var body: some View {
|
|
ZStack {
|
|
CardsTheme.background.ignoresSafeArea()
|
|
content
|
|
}
|
|
.navigationTitle(deckName)
|
|
#if os(iOS)
|
|
.navigationBarTitleDisplayMode(.inline)
|
|
#endif
|
|
.toolbar {
|
|
ToolbarItem(placement: .topBarTrailing) {
|
|
if let session, case .studying = session.phase {
|
|
Text("\(session.remaining)")
|
|
.font(.subheadline.weight(.semibold))
|
|
.foregroundStyle(CardsTheme.mutedForeground)
|
|
.accessibilityLabel("\(session.remaining) Karten übrig")
|
|
}
|
|
}
|
|
}
|
|
.task {
|
|
if session == nil {
|
|
let s = StudySession(deckId: deckId, deckName: deckName, auth: auth, context: context)
|
|
session = s
|
|
await s.start()
|
|
}
|
|
}
|
|
}
|
|
|
|
@ViewBuilder
|
|
private var content: some View {
|
|
if let session {
|
|
switch session.phase {
|
|
case .loading:
|
|
ProgressView("Karten werden geladen …")
|
|
.tint(CardsTheme.primary)
|
|
case .studying:
|
|
studyingView(session: session)
|
|
case .finished:
|
|
finishedView(session: session)
|
|
case let .failed(message):
|
|
failedView(message: message, session: session)
|
|
}
|
|
} else {
|
|
ProgressView()
|
|
.tint(CardsTheme.primary)
|
|
}
|
|
}
|
|
|
|
private func studyingView(session: StudySession) -> some View {
|
|
VStack(spacing: 16) {
|
|
if let due = session.current {
|
|
cardSurface(due: due, isFlipped: session.isFlipped)
|
|
.onTapGesture {
|
|
flipHaptic()
|
|
session.flip()
|
|
}
|
|
keyboardShortcuts(session: session)
|
|
if session.isFlipped {
|
|
RatingBar { rating in
|
|
Task { await session.grade(rating) }
|
|
}
|
|
.transition(.move(edge: .bottom).combined(with: .opacity))
|
|
} else {
|
|
Button {
|
|
flipHaptic()
|
|
session.flip()
|
|
} label: {
|
|
Text("Antwort anzeigen")
|
|
.font(.subheadline.weight(.semibold))
|
|
.frame(maxWidth: .infinity)
|
|
.padding(.vertical, 14)
|
|
.background(CardsTheme.primary, in: RoundedRectangle(cornerRadius: 10))
|
|
.foregroundStyle(CardsTheme.primaryForeground)
|
|
}
|
|
.buttonStyle(.plain)
|
|
.padding(.horizontal, 16)
|
|
}
|
|
}
|
|
}
|
|
.padding(.bottom, 20)
|
|
.animation(.easeInOut(duration: 0.2), value: session.isFlipped)
|
|
.animation(.easeInOut(duration: 0.2), value: session.currentIndex)
|
|
}
|
|
|
|
private func cardSurface(due: DueReview, isFlipped: Bool) -> some View {
|
|
CardSurface(size: .hero, elevation: .raised) {
|
|
CardRenderer(
|
|
card: due.card,
|
|
subIndex: due.review.subIndex,
|
|
isFlipped: isFlipped
|
|
)
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
|
}
|
|
.padding(.horizontal, 16)
|
|
.padding(.top, 12)
|
|
}
|
|
|
|
private func finishedView(session: StudySession) -> some View {
|
|
VStack(spacing: 16) {
|
|
Image(systemName: "checkmark.seal.fill")
|
|
.font(.system(size: 64))
|
|
.foregroundStyle(CardsTheme.success)
|
|
Text(session.totalGraded == 0 ? "Keine Karten fällig" : "Fertig!")
|
|
.font(.title.bold())
|
|
.foregroundStyle(CardsTheme.foreground)
|
|
if session.totalGraded > 0 {
|
|
Text("\(session.totalGraded) Karten gelernt")
|
|
.font(.subheadline)
|
|
.foregroundStyle(CardsTheme.mutedForeground)
|
|
}
|
|
Button("Zurück") { dismiss() }
|
|
.padding(.top, 24)
|
|
}
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
|
}
|
|
|
|
private func failedView(message: String, session: StudySession) -> some View {
|
|
VStack(spacing: 16) {
|
|
Image(systemName: "wifi.exclamationmark")
|
|
.font(.system(size: 48))
|
|
.foregroundStyle(CardsTheme.error)
|
|
Text("Karten konnten nicht geladen werden")
|
|
.font(.headline)
|
|
.foregroundStyle(CardsTheme.foreground)
|
|
Text(message)
|
|
.font(.caption)
|
|
.multilineTextAlignment(.center)
|
|
.foregroundStyle(CardsTheme.mutedForeground)
|
|
.padding(.horizontal, 32)
|
|
Button("Erneut versuchen") {
|
|
Task { await session.start() }
|
|
}
|
|
.padding(.top, 16)
|
|
}
|
|
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
|
}
|
|
|
|
/// Unsichtbare Buttons mit Keyboard-Shortcuts. Funktionieren auf
|
|
/// iPad (Magic Keyboard) und macOS. Space = flip, 1-4 = Rating.
|
|
@ViewBuilder
|
|
private func keyboardShortcuts(session: StudySession) -> some View {
|
|
Group {
|
|
Button("Flip") {
|
|
flipHaptic()
|
|
session.flip()
|
|
}
|
|
.keyboardShortcut(.space, modifiers: [])
|
|
|
|
if session.isFlipped {
|
|
ForEach(Rating.allCases, id: \.self) { rating in
|
|
Button(rating.label) {
|
|
Task { await session.grade(rating) }
|
|
}
|
|
.keyboardShortcut(KeyEquivalent(Character(rating.shortcut)), modifiers: [])
|
|
}
|
|
}
|
|
}
|
|
.frame(width: 0, height: 0)
|
|
.opacity(0)
|
|
.accessibilityHidden(true)
|
|
}
|
|
|
|
private func flipHaptic() {
|
|
#if canImport(UIKit)
|
|
UIImpactFeedbackGenerator(style: .soft).impactOccurred()
|
|
#endif
|
|
}
|
|
}
|