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>
This commit is contained in:
Till JS 2026-05-13 17:28:11 +02:00
parent 0b0872c8c0
commit aa94601409
6 changed files with 396 additions and 162 deletions

View file

@ -101,21 +101,16 @@ struct StudySessionView: View {
}
private func cardSurface(due: DueReview, isFlipped: Bool) -> some View {
RoundedRectangle(cornerRadius: 16)
.fill(CardsTheme.surface)
.overlay(
CardRenderer(
card: due.card,
subIndex: due.review.subIndex,
isFlipped: isFlipped
)
CardSurface(size: .hero, elevation: .raised) {
CardRenderer(
card: due.card,
subIndex: due.review.subIndex,
isFlipped: isFlipped
)
.overlay(
RoundedRectangle(cornerRadius: 16)
.stroke(CardsTheme.border, lineWidth: 1)
)
.padding(.horizontal, 16)
.padding(.top, 12)
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
.padding(.horizontal, 16)
.padding(.top, 12)
}
private func finishedView(session: StudySession) -> some View {