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>
This commit is contained in:
Till JS 2026-05-13 19:08:57 +02:00
parent 0e90f4b1c1
commit 6805bd78c7
2 changed files with 57 additions and 10 deletions

View file

@ -7,6 +7,7 @@ struct RootView: View {
@Environment(AuthClient.self) private var auth @Environment(AuthClient.self) private var auth
@State private var selectedTab: AppTab = .decks @State private var selectedTab: AppTab = .decks
@State private var pendingDeepLinkSlug: String? @State private var pendingDeepLinkSlug: String?
@State private var showCreateDeck = false
var body: some View { var body: some View {
Group { Group {
@ -29,7 +30,7 @@ struct RootView: View {
@ViewBuilder @ViewBuilder
private var mainTabs: some View { private var mainTabs: some View {
TabView(selection: $selectedTab) { TabView(selection: $selectedTab) {
DeckListView() DeckListView(showCreate: $showCreateDeck)
.tabItem { Label("Decks", systemImage: "rectangle.stack") } .tabItem { Label("Decks", systemImage: "rectangle.stack") }
.tag(AppTab.decks) .tag(AppTab.decks)
@ -43,6 +44,9 @@ struct RootView: View {
.tabItem { Label("Account", systemImage: "person.crop.circle") } .tabItem { Label("Account", systemImage: "person.crop.circle") }
.tag(AppTab.account) .tag(AppTab.account)
} }
.decksCreateAccessory(visible: selectedTab == .decks) {
showCreateDeck = true
}
} }
/// Universal-Link- und URL-Scheme-Handler: /// Universal-Link- und URL-Scheme-Handler:
@ -65,3 +69,38 @@ enum AppTab: Hashable {
case explore case explore
case account case account
} }
private extension View {
/// iOS 26: floating Neues Deck"-Pille via `.tabViewBottomAccessory`,
/// nur sichtbar wenn der Decks-Tab aktiv ist. iOS 18 fällt auf den
/// bestehenden `.bottomBar`-+"-Toolbar-Button in `DeckListView` zurück.
@ViewBuilder
func decksCreateAccessory(visible: Bool, onTap: @escaping () -> Void) -> some View {
if #available(iOS 26.0, *) {
self.tabViewBottomAccessory {
if visible {
DeckCreateAccessoryPill(action: onTap)
}
}
} else {
self
}
}
}
@available(iOS 26.0, *)
private struct DeckCreateAccessoryPill: View {
let action: () -> Void
var body: some View {
Button(action: action) {
Label("Neues Deck", systemImage: "plus")
.font(.subheadline.weight(.semibold))
.padding(.horizontal, 14)
.padding(.vertical, 8)
}
.buttonStyle(.borderedProminent)
.tint(CardsTheme.primary)
.accessibilityLabel("Neues Deck erstellen")
}
}

View file

@ -18,9 +18,10 @@ struct DeckListView: View {
@Environment(\.modelContext) private var context @Environment(\.modelContext) private var context
@Query(sort: \CachedDeck.updatedAt, order: .reverse) private var decks: [CachedDeck] @Query(sort: \CachedDeck.updatedAt, order: .reverse) private var decks: [CachedDeck]
@Binding var showCreate: Bool
@State private var store: DeckListStore? @State private var store: DeckListStore?
@State private var showAccount = false @State private var showAccount = false
@State private var showCreate = false
@State private var pendingShares: [PendingShare] = [] @State private var pendingShares: [PendingShare] = []
@State private var path = NavigationPath() @State private var path = NavigationPath()
@ -235,7 +236,7 @@ struct DeckListView: View {
Label("Noch keine Decks", systemImage: "rectangle.stack") Label("Noch keine Decks", systemImage: "rectangle.stack")
.foregroundStyle(CardsTheme.foreground) .foregroundStyle(CardsTheme.foreground)
} description: { } description: {
Text("Tippe oben auf »+«, um dein erstes Deck zu erstellen, oder browse den Marketplace im Entdecken-Tab.") Text("Tippe unten auf »+«, um dein erstes Deck zu erstellen, oder browse den Marketplace im Entdecken-Tab.")
.foregroundStyle(CardsTheme.mutedForeground) .foregroundStyle(CardsTheme.mutedForeground)
} }
} }
@ -245,14 +246,21 @@ struct DeckListView: View {
@ToolbarContentBuilder @ToolbarContentBuilder
private var toolbar: some ToolbarContent { private var toolbar: some ToolbarContent {
ToolbarItem(placement: .topBarLeading) { // Auf iOS 26 übernimmt das `.tabViewBottomAccessory` aus RootView die
Button { // Neues Deck"-Pille. Doppelten +"-Button im Liquid-Glass-Layout
showCreate = true // vermeiden bottomBar-Button nur auf iOS < 26 zeigen.
} label: { if #unavailable(iOS 26.0) {
Image(systemName: "plus.circle") ToolbarItemGroup(placement: .bottomBar) {
.foregroundStyle(CardsTheme.primary) Button {
showCreate = true
} label: {
Label("Deck hinzufügen", systemImage: "plus")
.labelStyle(.iconOnly)
.foregroundStyle(CardsTheme.primary)
}
.accessibilityLabel("Deck hinzufügen")
Spacer()
} }
.accessibilityLabel("Deck hinzufügen")
} }
ToolbarItem(placement: .topBarTrailing) { ToolbarItem(placement: .topBarTrailing) {
Button { Button {