Fix picker capsule clipping and replace custom tab bar with native segmented control

Picker: moved .fixedSize(), .padding, .background, .clipShape outside the Menu
label so the capsule sizing is stable and never clips rounded corners during
menu open/close animation.

Tab bar: replaced custom HStack+underline tab bar with native SwiftUI
Picker(.segmented) for "For You" / "Browse All" tabs.
This commit is contained in:
Trey T
2026-03-30 11:32:08 -05:00
parent 266d540d28
commit 05ee8e0a79
2 changed files with 17 additions and 52 deletions

View File

@@ -944,45 +944,12 @@ private struct OnboardingTaskTabBar: View {
@Binding var selectedTab: OnboardingTaskTab
var body: some View {
HStack(spacing: 0) {
Picker("", selection: $selectedTab) {
ForEach(OnboardingTaskTab.allCases, id: \.self) { tab in
Button {
withAnimation(.spring(response: 0.3)) {
selectedTab = tab
}
} label: {
VStack(spacing: 6) {
HStack(spacing: 6) {
if tab == .forYou {
Image(systemName: "sparkles")
.font(.system(size: 12, weight: .semibold))
} else {
Image(systemName: "square.grid.2x2.fill")
.font(.system(size: 12, weight: .semibold))
}
Text(tab.rawValue)
.font(.system(size: 14, weight: .semibold))
}
.foregroundColor(selectedTab == tab ? Color.appPrimary : Color.appTextSecondary)
.frame(maxWidth: .infinity)
// Indicator
RoundedRectangle(cornerRadius: 1.5)
.fill(selectedTab == tab ? Color.appPrimary : Color.clear)
.frame(height: 3)
}
}
.buttonStyle(.plain)
Text(tab.rawValue).tag(tab)
}
}
.padding(.vertical, 4)
.background(
ZStack {
Color.appBackgroundSecondary
GrainTexture(opacity: 0.01)
}
)
.clipShape(RoundedRectangle(cornerRadius: 14, style: .continuous))
.pickerStyle(.segmented)
}
}

View File

@@ -332,23 +332,21 @@ private struct ProfilePicker: View {
}
}
} label: {
HStack(spacing: 6) {
Text(displayValue)
.font(.system(size: 14, weight: .semibold))
.foregroundColor(selection != nil ? Color.appPrimary : Color.appTextSecondary)
Image(systemName: "chevron.up.chevron.down")
.font(.system(size: 10, weight: .semibold))
.foregroundColor(Color.appTextSecondary)
}
.fixedSize()
.padding(.horizontal, 14)
.padding(.vertical, 8)
.background(
(selection != nil ? Color.appPrimary : Color.appTextSecondary).opacity(0.1)
)
.clipShape(Capsule())
Text(displayValue)
.font(.system(size: 14, weight: .semibold))
.foregroundColor(selection != nil ? Color.appPrimary : Color.appTextSecondary)
+
Text(" \(Image(systemName: "chevron.up.chevron.down"))")
.font(.system(size: 10, weight: .semibold))
.foregroundColor(Color.appTextSecondary)
}
.padding(.horizontal, 14)
.padding(.vertical, 8)
.background(
(selection != nil ? Color.appPrimary : Color.appTextSecondary).opacity(0.1)
)
.clipShape(Capsule())
.fixedSize()
}
}