cards-native/Sources/Features/Study/StudySessionView.swift
Till JS aa94601409 feat(ui): Cardecky-Web-Design — Fan-Stack-Tiles + CardSurface
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>
2026-05-13 17:28:11 +02:00

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
}
}