feat(decks): γ-1 bis γ-8 — AI/CSV-Import, Card-Edit, Pull-Update, Marketplace-Publish + Moderation + PDF

Vervollständigt die Cardecky-Web-Parität für Deck- und Card-Workflows.

γ-1+γ-2 (AI-Deck-Generierung)
- 4-Modi-Picker im DeckEditorView Create-Sheet: Leer/KI/Bild/CSV
- POST /api/v1/decks/generate für Text-Prompt + 10/min Rate-Limit-UI
- POST /api/v1/decks/from-image mit PhotosPicker + PDF-Importer
  (max 5 Files, 10 MiB/Bild, 30 MiB/PDF), Multipart-Body in
  CardsAPI+Generation
- Loading-Overlay mit Task-Cancellation, Error-Mapping für 429/413/502

γ-3 (Card-Edit)
- CardEditorView mit Mode .create(deckId:) / .edit(card:)
- Image-Occlusion + Audio-Front behalten bestehenden Media-Ref, solange
  User nicht ersetzt — MediaCache lädt Bild nach
- Type-Picker im Edit-Modus aus (Server-immutable)
- CardEditorPayload + CardEditorMediaFields als Sub-Views

γ-4 (Pull-Update + Duplicate + Archive)
- POST /marketplace/private/:id/pull-update mit Smart-Merge-Anzeige
- POST /decks/:id/duplicate
- Archive-Toggle im Edit-Modus, Server filtert Liste serverseitig
- DeckSecondaryActions als eigenes Sub-View

γ-6 (CSV-Import)
- RFC-4180-ish Parser (Quote-Escape, Header-Detect, BOM-strip)
- Preview-Liste + sequentielle Card-Inserts mit Live-Progress
- Image-Occlusion/Audio-Front werden geskipped (UI flaggt)

γ-7 (Marketplace-Publish) + Follow-up (Report + Block + Re-Publish)
- MarketplacePublishView mit lazy Author-Setup + Init + Publish 1.0.0
- Re-Publish-Modus: Picker für eigene Marketplace-Decks +
  Auto-Semver-Bump (Minor +1)
- MarketplaceCardConverter (typing → type-in, audio-front → skipped,
  image-occlusion → skipped — Server hat keinen MP-Media-Re-Upload)
- Toolbar-Menü auf PublicDeckView: „Deck melden …" + Author-Blockieren
  (App-Store-Guideline 5.1.1(v))
- ReportDeckSheet mit Reason-Picker (6 Kategorien) + optional Message
- BlockedAuthorsView in Settings mit Swipe-Entblocken

γ-8 (PDF-Export)
- DeckPrintView mit SFSafariViewController auf
  cardecky.mana.how/decks/:id/print — iOS Share-Sheet → PDF speichern

Side-Fixes (mid-stream)
- StudySessionView: Card-Aspect-Ratio springt nicht mehr beim Flip
  (Bottom-Bar in ZStack fixer Höhe)
- RootView: Glass-Pille für „Neues Deck"-Accessory + .guest- und
  .twoFactorRequired-Cases nachgezogen
- DeckListView: Account-Toolbar-Button entfernt (Account-Tab unten
  ist alleinige Anlaufstelle)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-05-14 02:03:59 +02:00
parent 8ca7bd3636
commit 73f9081fa1
26 changed files with 3419 additions and 442 deletions

View file

@ -0,0 +1,474 @@
import ManaCore
import SwiftUI
// swiftlint:disable file_length
// swiftlint:disable type_body_length
/// Publish eines privaten Decks in den Cardecky-Marketplace.
///
/// Modi: Erst-Publish (mit Author-Setup + Init + Publish 1.0.0) oder
/// neue Version eines existierenden Marketplace-Decks (Auto-Semver-Bump).
/// Image-Occlusion- und Audio-Front-Karten werden übersprungen der
/// Server hat heute keinen Marketplace-Media-Re-Upload-Flow.
///
/// `type_body_length` ist bewusst übersprungen Publish-Flow ist eine
/// zusammenhängende State-Maschine (Author Init Publish).
struct MarketplacePublishView: View {
enum PublishMode: Hashable {
case firstPublish
case newVersion(slug: String)
}
let privateDeck: CachedDeck
let onPublished: (MarketplacePublishResponse) -> Void
@Environment(AuthClient.self) private var auth
@Environment(\.dismiss) private var dismiss
// Publish-Mode
@State private var publishMode: PublishMode = .firstPublish
@State private var ownedDecks: [OwnedMarketplaceDeck] = []
@State private var selectedExistingSlug: String?
// Author-Profil-State
@State private var hasAuthor: Bool?
@State private var authorSlug: String = ""
@State private var authorDisplayName: String = ""
@State private var authorBio: String = ""
@State private var authorPseudonym: Bool = false
// Deck-Metadaten
@State private var slug: String = ""
@State private var title: String = ""
@State private var deckDescription: String = ""
@State private var language: GenerationLanguage = .de
@State private var license: MarketplaceLicense = .personalUse
@State private var priceCredits: Int = 0
@State private var category: DeckCategory?
// Version-Metadaten
@State private var semver: String = "1.0.0"
@State private var changelog: String = ""
// Submit-State
@State private var isSubmitting = false
@State private var errorMessage: String?
@State private var result: MarketplacePublishResponse?
@State private var skippedCardCount: Int = 0
var body: some View {
Form {
if !ownedDecks.isEmpty {
publishModeSection
}
if isFirstPublish, hasAuthor == false {
authorSection
}
if isFirstPublish {
deckMetadataSection
licenseSection
categorySection
} else if let existing = currentExistingDeck {
existingDeckInfoSection(deck: existing)
}
versionSection
if skippedCardCount > 0 {
skippedNoteSection
}
if let errorMessage {
Section {
Text(errorMessage)
.font(.footnote)
.foregroundStyle(CardsTheme.error)
}
}
}
.disabled(isSubmitting)
.navigationTitle("Im Marketplace veröffentlichen")
#if os(iOS)
.navigationBarTitleDisplayMode(.inline)
#endif
.toolbar {
ToolbarItem(placement: .cancellationAction) {
Button("Abbrechen") { dismiss() }
}
ToolbarItem(placement: .confirmationAction) {
Button("Veröffentlichen") { Task { await submit() } }
.disabled(!canSubmit || isSubmitting)
}
}
.overlay {
if isSubmitting {
publishProgressOverlay
}
}
.alert(item: $result) { response in
Alert(
title: Text("Veröffentlicht: \(response.deck.title)"),
message: Text(alertMessage(for: response)),
dismissButton: .default(Text("OK")) {
onPublished(response)
dismiss()
}
)
}
.task {
await prefill()
}
}
private var isFirstPublish: Bool {
if case .firstPublish = publishMode { return true }
return false
}
private var currentExistingDeck: OwnedMarketplaceDeck? {
guard let slug = selectedExistingSlug else { return nil }
return ownedDecks.first { $0.slug == slug }
}
private var publishModeSection: some View {
Section {
Picker("Modus", selection: $publishMode) {
Text("Neues Marketplace-Deck").tag(PublishMode.firstPublish)
ForEach(ownedDecks) { deck in
Text("Neue Version: \(deck.title)")
.tag(PublishMode.newVersion(slug: deck.slug))
}
}
.pickerStyle(.menu)
.onChange(of: publishMode) { _, newMode in
applyPublishMode(newMode)
}
} header: {
Text("Veröffentlichungs-Modus")
} footer: {
Text("Du hast schon Decks im Marketplace. Wähle eine, um eine neue Version zu publishen.")
}
}
private func existingDeckInfoSection(deck: OwnedMarketplaceDeck) -> some View {
Section {
LabeledContent("Slug", value: deck.slug)
LabeledContent("Titel", value: deck.title)
if let latest = deck.latestVersion {
LabeledContent("Aktuelle Version", value: "v\(latest.semver) · \(latest.cardCount) Karten")
} else {
LabeledContent("Aktuelle Version", value: "")
}
} header: {
Text("Bestehendes Deck")
} footer: {
Text("Metadaten ändern: Marketplace-Webansicht → Deck → Bearbeiten.")
}
}
private var authorSection: some View {
Section {
TextField("Author-Slug (URL)", text: $authorSlug)
.textInputAutocapitalization(.never)
.autocorrectionDisabled(true)
TextField("Anzeigename", text: $authorDisplayName)
TextField("Bio (optional)", text: $authorBio, axis: .vertical)
.lineLimit(2 ... 4)
Toggle("Pseudonym-Modus", isOn: $authorPseudonym)
} header: {
Text("Author-Profil anlegen")
} footer: {
Text("Pflicht-Schritt vor dem ersten Marketplace-Deck. Slug erscheint in Marketplace-URLs.")
}
}
private var deckMetadataSection: some View {
Section {
TextField("Slug (URL)", text: $slug)
.textInputAutocapitalization(.never)
.autocorrectionDisabled(true)
TextField("Titel", text: $title)
.textInputAutocapitalization(.sentences)
TextField("Beschreibung", text: $deckDescription, axis: .vertical)
.lineLimit(2 ... 6)
Picker("Sprache", selection: $language) {
ForEach(GenerationLanguage.allCases, id: \.self) { lang in
Text(lang.label).tag(lang)
}
}
.pickerStyle(.segmented)
} header: {
Text("Deck-Metadaten")
} footer: {
Text("Der Slug wird Teil der Marketplace-URL: cardecky.mana.how/d/<slug>.")
}
}
private var licenseSection: some View {
Section("Lizenz") {
Picker("Lizenz", selection: $license) {
ForEach(MarketplaceLicense.allCases, id: \.self) { lic in
Text(lic.label).tag(lic)
}
}
if license == .proOnly {
Stepper(value: $priceCredits, in: 0 ... 100_000, step: 10) {
Text("Preis: \(priceCredits) Credits")
}
}
}
}
private var categorySection: some View {
Section("Kategorie") {
Picker("Kategorie", selection: $category) {
Text("Keine").tag(DeckCategory?.none)
ForEach(DeckCategory.allCases, id: \.self) { cat in
Text(cat.label).tag(DeckCategory?.some(cat))
}
}
}
}
private var versionSection: some View {
Section {
TextField("SemVer (z.B. 1.0.0)", text: $semver)
.textInputAutocapitalization(.never)
.autocorrectionDisabled(true)
.keyboardType(.numbersAndPunctuation)
TextField("Changelog (optional)", text: $changelog, axis: .vertical)
.lineLimit(2 ... 4)
} header: {
Text("Version")
} footer: {
Text("Erst-Publish: 1.0.0. Spätere Versionen müssen semver-größer sein.")
}
}
private var skippedNoteSection: some View {
Section {
Label(
"""
\(skippedCardCount) Karten werden übersprungen Bild-\
Verdeckung und Audio brauchen Marketplace-Media-Upload.
""",
systemImage: "info.circle"
)
.font(.caption)
.foregroundStyle(CardsTheme.mutedForeground)
}
}
private var publishProgressOverlay: some View {
ZStack {
Color.black.opacity(0.55).ignoresSafeArea()
VStack(spacing: 12) {
ProgressView().controlSize(.large).tint(CardsTheme.primary)
Text("Wird veröffentlicht …")
.font(.headline)
.foregroundStyle(CardsTheme.foreground)
Text("AI-Moderation läuft — kann ein paar Sekunden dauern.")
.font(.caption)
.foregroundStyle(CardsTheme.mutedForeground)
.multilineTextAlignment(.center)
}
.padding(24)
.frame(maxWidth: 320)
.background(.regularMaterial, in: RoundedRectangle(cornerRadius: 16, style: .continuous))
}
}
private var canSubmit: Bool {
let semverOK = semver.range(of: "^\\d+\\.\\d+\\.\\d+$", options: .regularExpression) != nil
guard semverOK else { return false }
switch publishMode {
case .firstPublish:
if hasAuthor == false {
guard authorDisplayName.trimmed.count >= 1 else { return false }
guard authorSlug.trimmed.count >= 3 else { return false }
}
return slug.trimmed.count >= 3 && !title.trimmed.isEmpty
case .newVersion:
return selectedExistingSlug != nil
}
}
private func prefill() async {
title = privateDeck.name
deckDescription = privateDeck.deckDescription ?? ""
category = privateDeck.category
slug = slugify(privateDeck.name)
let api = CardsAPI(auth: auth)
async let authorState = api.myAuthor()
async let ownedState = api.myMarketplaceDecks()
do {
hasAuthor = try await authorState
} catch {
hasAuthor = false
errorMessage = "Author-Profil konnte nicht geladen werden: \(error.localizedDescription)"
}
ownedDecks = await (try? ownedState) ?? []
}
/// State-Übergang beim Wechsel des Publish-Modus.
/// - Erst-Publish: Slug aus dem privaten Deck-Namen, Semver 1.0.0.
/// - Neue Version: Slug-Feld unbenutzt (Server kennt Slug),
/// Semver-Default = Bump der aktuellen Version.
private func applyPublishMode(_ mode: PublishMode) {
switch mode {
case .firstPublish:
selectedExistingSlug = nil
semver = "1.0.0"
case let .newVersion(existingSlug):
selectedExistingSlug = existingSlug
if let latest = ownedDecks.first(where: { $0.slug == existingSlug })?.latestVersion {
semver = bumpMinor(latest.semver)
} else {
semver = "1.0.0"
}
}
}
/// `1.4.2` `1.5.0`. Bei unparsbarem Input bleibt 1.0.0 als Default.
private func bumpMinor(_ version: String) -> String {
let parts = version.split(separator: ".")
guard parts.count == 3,
let major = Int(parts[0]),
let minor = Int(parts[1])
else { return "1.0.0" }
return "\(major).\(minor + 1).0"
}
private func submit() async {
isSubmitting = true
errorMessage = nil
defer { isSubmitting = false }
let api = CardsAPI(auth: auth)
do {
let targetSlug = try await prepareTargetSlug(api: api)
try await publishCards(toSlug: targetSlug, api: api)
} catch let error as AuthError {
errorMessage = mapPublishError(error)
} catch {
errorMessage = error.localizedDescription
}
}
/// Erst-Publish-Pfad: Author-Profil + Marketplace-Deck-Init.
/// Liefert den Slug auf den `publishCards` veröffentlicht.
private func prepareTargetSlug(api: CardsAPI) async throws -> String {
switch publishMode {
case .firstPublish:
if hasAuthor == false {
try await api.upsertAuthor(AuthorUpsertBody(
slug: authorSlug.trimmed,
displayName: authorDisplayName.trimmed,
bio: authorBio.trimmed.isEmpty ? nil : authorBio.trimmed,
avatarUrl: nil,
pseudonym: authorPseudonym
))
hasAuthor = true
}
_ = try await api.initMarketplaceDeck(MarketplaceDeckInitBody(
slug: slug.trimmed,
title: title.trimmed,
description: deckDescription.trimmed.isEmpty ? nil : deckDescription.trimmed,
language: language.rawValue,
license: license.rawValue,
priceCredits: license == .proOnly ? priceCredits : 0,
category: category
))
return slug.trimmed
case let .newVersion(existingSlug):
return existingSlug
}
}
/// Lädt alle Karten des privaten Decks, konvertiert in Marketplace-
/// Format und veröffentlicht die neue Version.
private func publishCards(toSlug targetSlug: String, api: CardsAPI) async throws {
let cards = try await api.listCards(deckId: privateDeck.id)
let converted = cards.compactMap(MarketplaceCardConverter.convert)
skippedCardCount = cards.count - converted.count
guard !converted.isEmpty else {
errorMessage = "Keine Karten kompatibel mit dem Marketplace-Format."
return
}
result = try await api.publishMarketplaceVersion(
slug: targetSlug,
body: MarketplacePublishBody(
semver: semver.trimmed,
changelog: changelog.trimmed.isEmpty ? nil : changelog.trimmed,
cards: converted
)
)
}
private func mapPublishError(_ error: AuthError) -> String {
if case let .serverError(status, _, message) = error {
switch status {
case 409:
if let message, message.contains("slug_taken") {
return "Dieser Slug ist schon vergeben. Bitte einen anderen wählen."
}
return message ?? "Konflikt — Version-Bump nötig?"
case 403:
if let message, message.contains("moderation_block") {
return "AI-Moderation hat den Inhalt blockiert."
}
return message ?? "Aktion nicht erlaubt."
case 422:
return message ?? "Eingabe ungültig."
default:
break
}
}
return error.errorDescription ?? "Veröffentlichen fehlgeschlagen."
}
private func alertMessage(for response: MarketplacePublishResponse) -> String {
let parts = [
"Version \(response.version.semver)",
"\(response.version.cardCount) Karten",
skippedCardCount > 0 ? "\(skippedCardCount) übersprungen" : nil,
"Moderation: \(response.moderation.verdict)"
].compactMap(\.self)
return parts.joined(separator: " · ")
}
private func slugify(_ input: String) -> String {
let allowed = CharacterSet(charactersIn: "abcdefghijklmnopqrstuvwxyz0123456789-")
let lowered = input
.folding(options: .diacriticInsensitive, locale: .current)
.lowercased()
var result = ""
for scalar in lowered.unicodeScalars {
if allowed.contains(scalar) {
result.unicodeScalars.append(scalar)
} else {
result.append("-")
}
}
while result.hasPrefix("-") {
result.removeFirst()
}
while result.hasSuffix("-") {
result.removeLast()
}
while result.contains("--") {
result = result.replacingOccurrences(of: "--", with: "-")
}
return String(result.prefix(60))
}
}
// swiftlint:enable type_body_length
private extension String {
var trimmed: String {
trimmingCharacters(in: .whitespacesAndNewlines)
}
}
extension MarketplacePublishResponse: Identifiable {
var id: String {
version.id
}
}

View file

@ -1,13 +1,18 @@
import ManaAuthUI
import ManaCore
import SwiftData
import SwiftUI
// swiftlint:disable type_body_length
/// Detail-View für ein Public-Deck. Subscribe-Button löst Auto-Fork
/// serverseitig aus und navigiert anschließend zur eigenen Deck-Detail.
/// Toolbar-Menu (") hostet Report + Block-Author (App-Review-Pflicht).
struct PublicDeckView: View {
let slug: String
@Environment(AuthClient.self) private var auth
@Environment(ManaAuthGate.self) private var authGate
@Environment(\.modelContext) private var context
@State private var detail: PublicDeckDetail?
@State private var isLoading = false
@ -15,6 +20,11 @@ struct PublicDeckView: View {
@State private var errorMessage: String?
@State private var subscribed: SubscribeResponse?
// Moderation-State
@State private var showReportSheet = false
@State private var showBlockConfirm = false
@State private var moderationToast: String?
var body: some View {
ZStack {
CardsTheme.background.ignoresSafeArea()
@ -24,9 +34,69 @@ struct PublicDeckView: View {
#if os(iOS)
.navigationBarTitleDisplayMode(.inline)
#endif
.toolbar {
if detail != nil {
ToolbarItem(placement: .topBarTrailing) {
moderationMenu
}
}
}
.task(id: slug) {
await load()
}
.sheet(isPresented: $showReportSheet) {
NavigationStack {
ReportDeckSheet(slug: slug) { message in
moderationToast = message
}
}
}
.confirmationDialog(
"Author blockieren?",
isPresented: $showBlockConfirm,
titleVisibility: .visible,
presenting: detail?.owner
) { owner in
Button("\(owner.displayName) blockieren", role: .destructive) {
Task { await blockAuthor(slug: owner.slug, name: owner.displayName) }
}
Button("Abbrechen", role: .cancel) {}
} message: { _ in
Text("Decks dieses Authors erscheinen für dich nicht mehr im Marketplace.")
}
.overlay(alignment: .top) {
if let toast = moderationToast {
ToastBanner(text: toast)
.padding(.top, 8)
.task {
try? await Task.sleep(for: .seconds(3))
moderationToast = nil
}
}
}
}
private var moderationMenu: some View {
Menu {
Button {
authGate.require(reason: "marketplace-report") {
showReportSheet = true
}
} label: {
Label("Deck melden …", systemImage: "flag")
}
if let owner = detail?.owner {
Button(role: .destructive) {
authGate.require(reason: "marketplace-block") {
showBlockConfirm = true
}
} label: {
Label("\(owner.displayName) blockieren", systemImage: "hand.raised")
}
}
} label: {
Image(systemName: "ellipsis.circle")
}
}
@ViewBuilder
@ -122,7 +192,6 @@ struct PublicDeckView: View {
.padding(.horizontal, 16)
}
@ViewBuilder
private func subscribeSection(detail: PublicDeckDetail) -> some View {
VStack(spacing: 12) {
if let subscribed {
@ -147,7 +216,9 @@ struct PublicDeckView: View {
.foregroundStyle(CardsTheme.mutedForeground)
} else {
Button {
Task { await subscribe(detail: detail) }
authGate.require(reason: "marketplace-subscribe") {
Task { await subscribe(detail: detail) }
}
} label: {
HStack {
if isSubscribing {
@ -156,8 +227,8 @@ struct PublicDeckView: View {
.tint(CardsTheme.primaryForeground)
}
Text(detail.deck.priceCredits > 0
? "Abonnieren (\(detail.deck.priceCredits) Credits)"
: "Abonnieren")
? "Abonnieren (\(detail.deck.priceCredits) Credits)"
: "Abonnieren")
.fontWeight(.semibold)
}
.frame(maxWidth: .infinity)
@ -183,7 +254,17 @@ struct PublicDeckView: View {
}
}
private func subscribe(detail: PublicDeckDetail) async {
private func blockAuthor(slug: String, name: String) async {
let api = CardsAPI(auth: auth)
do {
try await api.blockAuthor(slug: slug)
moderationToast = "\(name) blockiert."
} catch {
moderationToast = "Blockieren fehlgeschlagen: \(error.localizedDescription)"
}
}
private func subscribe(detail _: PublicDeckDetail) async {
isSubscribing = true
errorMessage = nil
defer { isSubscribing = false }
@ -199,3 +280,5 @@ struct PublicDeckView: View {
}
}
}
// swiftlint:enable type_body_length

View file

@ -0,0 +1,109 @@
import ManaCore
import SwiftUI
/// Report-Form für ein Marketplace-Deck Pflicht-Komponente nach
/// App-Store-Guideline 5.1.1(v) (Report-Mechanismus für UGC).
///
/// Owned-State (Kategorie, Message, Submit-Status). Bei Erfolg schließt
/// das Sheet und ruft `onCompleted` mit einer Toast-Message auf.
struct ReportDeckSheet: View {
let slug: String
let onCompleted: (String) -> Void
@Environment(AuthClient.self) private var auth
@Environment(\.dismiss) private var dismiss
@State private var category: ReportCategory = .spam
@State private var message: String = ""
@State private var isSubmitting = false
@State private var errorMessage: String?
var body: some View {
Form {
Section("Grund") {
Picker("Grund", selection: $category) {
ForEach(ReportCategory.allCases, id: \.self) { cat in
Text(cat.label).tag(cat)
}
}
.pickerStyle(.inline)
.labelsHidden()
}
Section {
TextField("Optional: Details", text: $message, axis: .vertical)
.lineLimit(3 ... 6)
.textInputAutocapitalization(.sentences)
} header: {
Text("Beschreibung")
} footer: {
Text("Wir prüfen jede Meldung. Hass und Rechtsverletzungen werden bevorzugt behandelt.")
}
if let errorMessage {
Section {
Text(errorMessage)
.font(.footnote)
.foregroundStyle(CardsTheme.error)
}
}
}
.disabled(isSubmitting)
.navigationTitle("Deck melden")
#if os(iOS)
.navigationBarTitleDisplayMode(.inline)
#endif
.toolbar {
ToolbarItem(placement: .cancellationAction) {
Button("Abbrechen") { dismiss() }
}
ToolbarItem(placement: .confirmationAction) {
Button("Senden") { Task { await submit() } }
.disabled(isSubmitting)
}
}
}
private func submit() async {
isSubmitting = true
errorMessage = nil
defer { isSubmitting = false }
let api = CardsAPI(auth: auth)
let trimmed = message.trimmingCharacters(in: .whitespacesAndNewlines)
do {
let response = try await api.reportDeck(
slug: slug,
body: ReportDeckBody(
category: category,
body: trimmed.isEmpty ? nil : trimmed,
versionId: nil,
cardContentHash: nil
)
)
let toast = response.alreadyReported
? "Du hast dieses Deck bereits gemeldet."
: "Meldung gesendet. Danke fürs Aufpassen."
onCompleted(toast)
dismiss()
} catch {
errorMessage = (error as? LocalizedError)?.errorDescription ?? String(describing: error)
}
}
}
/// Schlichtes Top-Banner für kurze Bestätigungen.
struct ToastBanner: View {
let text: String
var body: some View {
Text(text)
.font(.subheadline.weight(.medium))
.foregroundStyle(CardsTheme.foreground)
.padding(.horizontal, 14)
.padding(.vertical, 10)
.background(.regularMaterial, in: Capsule())
.overlay(Capsule().stroke(CardsTheme.border, lineWidth: 0.5))
.padding(.horizontal, 16)
.transition(.move(edge: .top).combined(with: .opacity))
}
}