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>
280 lines
11 KiB
Swift
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"
|
|
}
|
|
}
|