cards-native/Sources/Features/Decks/DeckListView.swift
Till JS 6805bd78c7 feat(decks): iOS-26 tabViewBottomAccessory für „Neues Deck"-Pille
Ersetzt den bottomBar-„+"-Button auf iOS 26 durch eine schwebende
Liquid-Glass-Pille via `.tabViewBottomAccessory`, nur sichtbar wenn
der Decks-Tab aktiv ist. iOS 18-Geräte behalten den bestehenden
bottomBar-Button (gated via `if #unavailable(iOS 26.0)`).

`showCreate` wandert als Binding von DeckListView nach RootView,
damit das Accessory den Sheet triggern kann.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-13 19:08:57 +02:00

280 lines
11 KiB
Swift

import ManaCore
import SwiftData
import SwiftUI
/// Navigations-Routen für die DeckListView. Tap auf eine Tile geht
/// direkt in Study-Mode, Tap auf den Edit-Button in den Deck-Detail-
/// View für Browse + Edit.
enum DeckRoute: Hashable {
case study(deckId: String, deckName: String)
case detail(deckId: String)
}
/// Decks-Hauptbildschirm im Cardecky-Look: horizontale Scroll-Reihen
/// mit Fan-Stack-Karten-Tiles. Web-Vorbild:
/// `cards/apps/web/src/routes/decks/+page.svelte`.
struct DeckListView: View {
@Environment(AuthClient.self) private var auth
@Environment(\.modelContext) private var context
@Query(sort: \CachedDeck.updatedAt, order: .reverse) private var decks: [CachedDeck]
@Binding var showCreate: Bool
@State private var store: DeckListStore?
@State private var showAccount = false
@State private var pendingShares: [PendingShare] = []
@State private var path = NavigationPath()
var body: some View {
NavigationStack(path: $path) {
ZStack {
CardsTheme.background.ignoresSafeArea()
content
}
.navigationTitle("Decks")
.navigationDestination(for: DeckRoute.self) { route in
switch route {
case let .study(deckId, deckName):
StudySessionView(deckId: deckId, deckName: deckName)
case let .detail(deckId):
DeckDetailView(deckId: deckId)
}
}
.navigationDestination(for: PendingShareRoute.self) { route in
PendingShareConsumeView(share: route.share, onDone: {
PendingShareStore.remove(id: route.share.id)
pendingShares = PendingShareStore.readAll()
})
}
.toolbar { toolbar }
.refreshable {
await store?.refresh()
}
.sheet(isPresented: $showCreate) {
NavigationStack {
DeckEditorView(mode: .create) { _ in
Task { await store?.refresh() }
}
}
}
.task {
if store == nil {
store = DeckListStore(auth: auth, context: context)
}
await store?.refresh()
pendingShares = PendingShareStore.readAll()
}
.onAppear {
pendingShares = PendingShareStore.readAll()
}
.sheet(isPresented: $showAccount) {
NavigationStack {
AccountView()
.toolbar {
ToolbarItem(placement: .confirmationAction) {
Button("Fertig") { showAccount = false }
}
}
}
}
}
}
@ViewBuilder
private var content: some View {
if decks.isEmpty {
emptyState
} else {
ScrollView {
VStack(alignment: .leading, spacing: 24) {
pendingShareSection
inboxBanner
deckSection(title: "Eigene Decks", icon: "rectangle.stack", decks: ownDecks)
if !subscribedDecks.isEmpty {
deckSection(title: "Abonniert", icon: "globe", decks: subscribedDecks)
}
}
.padding(.vertical, 12)
}
}
}
private var ownDecks: [CachedDeck] {
decks.filter { !$0.isFromMarketplace }
}
private var subscribedDecks: [CachedDeck] {
decks.filter { $0.isFromMarketplace }
}
@ViewBuilder
private func deckSection(title: String, icon: String, decks: [CachedDeck]) -> some View {
if !decks.isEmpty {
VStack(alignment: .leading, spacing: 12) {
HStack(spacing: 6) {
Image(systemName: icon)
.foregroundStyle(CardsTheme.primary)
Text(title)
.font(.title3.weight(.semibold))
.foregroundStyle(CardsTheme.foreground)
Text("\(decks.count)")
.font(.subheadline)
.foregroundStyle(CardsTheme.mutedForeground)
}
.padding(.horizontal, 20)
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .top, spacing: 16) {
ForEach(decks) { deck in
DeckStackTile(
deck: deck,
onTap: { path.append(DeckRoute.study(deckId: deck.id, deckName: deck.name)) },
onEdit: { path.append(DeckRoute.detail(deckId: deck.id)) }
)
.frame(width: 240)
.scrollTransition(.animated) { content, phase in
content
.scaleEffect(phase.isIdentity ? 1 : 0.92)
.opacity(phase.isIdentity ? 1 : 0.7)
}
}
}
.padding(.horizontal, 20)
.padding(.bottom, 12)
.scrollTargetLayout()
}
.scrollTargetBehavior(.viewAligned)
}
}
}
@ViewBuilder
private var inboxBanner: some View {
if let inbox = decks.first(where: { $0.isFromMarketplace && $0.dueCount > 0 }) {
Button {
path.append(DeckRoute.study(deckId: inbox.id, deckName: inbox.name))
} label: {
HStack(spacing: 12) {
Image(systemName: "tray.full.fill")
.font(.title3)
.foregroundStyle(CardsTheme.primary)
VStack(alignment: .leading, spacing: 2) {
Text("Inbox")
.font(.subheadline.weight(.semibold))
.foregroundStyle(CardsTheme.foreground)
Text("\(inbox.dueCount) fällige Karten aus abonnierten Decks")
.font(.caption)
.foregroundStyle(CardsTheme.mutedForeground)
}
Spacer()
Image(systemName: "chevron.right")
.font(.footnote)
.foregroundStyle(CardsTheme.mutedForeground)
}
.padding(14)
.background(CardsTheme.primary.opacity(0.08), in: RoundedRectangle(cornerRadius: 12, style: .continuous))
.overlay(
RoundedRectangle(cornerRadius: 12, style: .continuous)
.stroke(CardsTheme.primary.opacity(0.18), lineWidth: 1)
)
.padding(.horizontal, 20)
}
.buttonStyle(.plain)
}
}
@ViewBuilder
private var pendingShareSection: some View {
if !pendingShares.isEmpty {
VStack(alignment: .leading, spacing: 8) {
ForEach(pendingShares) { share in
NavigationLink(value: PendingShareRoute(share: share)) {
HStack(spacing: 12) {
Image(systemName: "square.and.arrow.down")
.foregroundStyle(CardsTheme.warning)
VStack(alignment: .leading, spacing: 2) {
Text("Aus Teilen-Menü")
.font(.subheadline.weight(.semibold))
.foregroundStyle(CardsTheme.foreground)
Text(share.text)
.font(.caption)
.foregroundStyle(CardsTheme.mutedForeground)
.lineLimit(2)
}
Spacer()
Image(systemName: "chevron.right")
.font(.footnote)
.foregroundStyle(CardsTheme.mutedForeground)
}
.padding(14)
.background(CardsTheme.warning.opacity(0.12), in: RoundedRectangle(cornerRadius: 12, style: .continuous))
}
.buttonStyle(.plain)
}
}
.padding(.horizontal, 20)
}
}
private var emptyState: some View {
VStack(spacing: 16) {
if store?.state == .loading {
ProgressView()
.tint(CardsTheme.primary)
Text("Lade Decks …")
.foregroundStyle(CardsTheme.mutedForeground)
} else if let message = store?.errorMessage {
ContentUnavailableView {
Label("Decks konnten nicht geladen werden", systemImage: "wifi.exclamationmark")
.foregroundStyle(CardsTheme.foreground)
} description: {
Text(message)
.foregroundStyle(CardsTheme.mutedForeground)
}
} else {
ContentUnavailableView {
Label("Noch keine Decks", systemImage: "rectangle.stack")
.foregroundStyle(CardsTheme.foreground)
} description: {
Text("Tippe unten auf »+«, um dein erstes Deck zu erstellen, oder browse den Marketplace im Entdecken-Tab.")
.foregroundStyle(CardsTheme.mutedForeground)
}
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
@ToolbarContentBuilder
private var toolbar: some ToolbarContent {
// Auf iOS 26 übernimmt das `.tabViewBottomAccessory` aus RootView die
// Neues Deck"-Pille. Doppelten +"-Button im Liquid-Glass-Layout
// vermeiden bottomBar-Button nur auf iOS < 26 zeigen.
if #unavailable(iOS 26.0) {
ToolbarItemGroup(placement: .bottomBar) {
Button {
showCreate = true
} label: {
Label("Deck hinzufügen", systemImage: "plus")
.labelStyle(.iconOnly)
.foregroundStyle(CardsTheme.primary)
}
.accessibilityLabel("Deck hinzufügen")
Spacer()
}
}
ToolbarItem(placement: .topBarTrailing) {
Button {
showAccount = true
} label: {
Image(systemName: accountIcon)
.foregroundStyle(CardsTheme.primary)
}
.accessibilityLabel("Account")
}
}
private var accountIcon: String {
if case .signedIn = auth.status { return "person.crop.circle.fill" }
return "person.crop.circle.badge.exclamationmark"
}
}