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:
parent
0e90f4b1c1
commit
6805bd78c7
2 changed files with 57 additions and 10 deletions
|
|
@ -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")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue