refactor: TripDetailView loads games on demand, improve poll UI
- Refactor TripDetailView to fetch games from AppDataProvider when not provided, adding loading state indicator for better UX - Update all callers (25+ HomeContent variants, TripOptionsView, HomeView) to use simpler TripDetailView(trip:) initializer - Fix PollDetailView sheet issue by using sheet(item:) instead of sheet(isPresented:) to prevent blank screen on first tap - Improve PollDetailView UI with Theme styling, icons, and better visual hierarchy for share code, voting status, and results sections Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Trey t
@@ -14,6 +14,7 @@ struct PollDetailView: View {
|
||||
@State private var showShareSheet = false
|
||||
@State private var showDeleteConfirmation = false
|
||||
@State private var showVotingSheet = false
|
||||
@State private var selectedTrip: Trip?
|
||||
@State private var isOwner = false
|
||||
|
||||
let pollId: UUID?
|
||||
@@ -123,12 +124,25 @@ struct PollDetailView: View {
|
||||
} message: {
|
||||
Text("This will permanently delete the poll and all votes. This action cannot be undone.")
|
||||
}
|
||||
.sheet(item: $selectedTrip) { trip in
|
||||
NavigationStack {
|
||||
TripDetailView(trip: trip)
|
||||
.navigationBarTitleDisplayMode(.inline)
|
||||
.toolbar {
|
||||
ToolbarItem(placement: .cancellationAction) {
|
||||
Button("Done") {
|
||||
selectedTrip = nil
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private func pollContent(_ poll: TripPoll) -> some View {
|
||||
ScrollView {
|
||||
VStack(spacing: 20) {
|
||||
VStack(spacing: Theme.Spacing.lg) {
|
||||
// Share Code Card
|
||||
shareCodeCard(poll)
|
||||
|
||||
@@ -143,85 +157,161 @@ struct PollDetailView: View {
|
||||
// Trip Previews
|
||||
tripPreviewsSection(poll)
|
||||
}
|
||||
.padding()
|
||||
.padding(.horizontal, Theme.Spacing.md)
|
||||
.padding(.vertical, Theme.Spacing.lg)
|
||||
}
|
||||
.background(Theme.backgroundGradient(colorScheme))
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private func shareCodeCard(_ poll: TripPoll) -> some View {
|
||||
VStack(spacing: 8) {
|
||||
Text("Share Code")
|
||||
.font(.caption)
|
||||
.foregroundStyle(.secondary)
|
||||
VStack(spacing: Theme.Spacing.md) {
|
||||
// Icon
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(Theme.warmOrange.opacity(0.15))
|
||||
.frame(width: 56, height: 56)
|
||||
Image(systemName: "link.circle.fill")
|
||||
.font(.system(size: 28))
|
||||
.foregroundStyle(Theme.warmOrange)
|
||||
}
|
||||
|
||||
Text(poll.shareCode)
|
||||
.font(.system(size: 32, weight: .bold, design: .monospaced))
|
||||
.foregroundStyle(Theme.warmOrange)
|
||||
VStack(spacing: Theme.Spacing.xs) {
|
||||
Text("Share Code")
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(Theme.textSecondary(colorScheme))
|
||||
|
||||
Text("sportstime://poll/\(poll.shareCode)")
|
||||
.font(.caption2)
|
||||
.foregroundStyle(.secondary)
|
||||
Text(poll.shareCode)
|
||||
.font(.system(size: 36, weight: .bold, design: .monospaced))
|
||||
.foregroundStyle(Theme.warmOrange)
|
||||
.tracking(4)
|
||||
}
|
||||
|
||||
// Copy button
|
||||
Button {
|
||||
UIPasteboard.general.string = poll.shareCode
|
||||
} label: {
|
||||
Label("Copy Code", systemImage: "doc.on.doc")
|
||||
.font(.subheadline.weight(.medium))
|
||||
.foregroundStyle(Theme.warmOrange)
|
||||
.padding(.horizontal, Theme.Spacing.md)
|
||||
.padding(.vertical, Theme.Spacing.sm)
|
||||
.background(Theme.warmOrange.opacity(0.1))
|
||||
.clipShape(Capsule())
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding()
|
||||
.padding(Theme.Spacing.lg)
|
||||
.background(Theme.cardBackground(colorScheme))
|
||||
.clipShape(RoundedRectangle(cornerRadius: 12))
|
||||
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.large))
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: Theme.CornerRadius.large)
|
||||
.strokeBorder(Theme.warmOrange.opacity(0.2), lineWidth: 1)
|
||||
)
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var votingStatusCard: some View {
|
||||
HStack {
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text(viewModel.hasVoted ? "You voted" : "You haven't voted yet")
|
||||
.font(.headline)
|
||||
HStack(spacing: Theme.Spacing.md) {
|
||||
// Status icon
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(viewModel.hasVoted ? Theme.mlsGreen.opacity(0.15) : Theme.warmOrange.opacity(0.15))
|
||||
.frame(width: 44, height: 44)
|
||||
Image(systemName: viewModel.hasVoted ? "checkmark.circle.fill" : "hand.raised.fill")
|
||||
.font(.title3)
|
||||
.foregroundStyle(viewModel.hasVoted ? Theme.mlsGreen : Theme.warmOrange)
|
||||
}
|
||||
|
||||
Text("\(viewModel.votes.count) total votes")
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(.secondary)
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text(viewModel.hasVoted ? "You voted" : "Cast your vote")
|
||||
.font(.headline)
|
||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||
|
||||
HStack(spacing: Theme.Spacing.xs) {
|
||||
Image(systemName: "person.2.fill")
|
||||
.font(.caption2)
|
||||
Text("\(viewModel.votes.count) vote\(viewModel.votes.count == 1 ? "" : "s")")
|
||||
.font(.subheadline)
|
||||
}
|
||||
.foregroundStyle(Theme.textSecondary(colorScheme))
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
Button(viewModel.hasVoted ? "Change Vote" : "Vote Now") {
|
||||
Button {
|
||||
showVotingSheet = true
|
||||
} label: {
|
||||
Text(viewModel.hasVoted ? "Change" : "Vote")
|
||||
.font(.subheadline.weight(.semibold))
|
||||
.foregroundStyle(.white)
|
||||
.padding(.horizontal, Theme.Spacing.md)
|
||||
.padding(.vertical, Theme.Spacing.sm)
|
||||
.background(Theme.warmOrange)
|
||||
.clipShape(Capsule())
|
||||
}
|
||||
.buttonStyle(.borderedProminent)
|
||||
.tint(Theme.warmOrange)
|
||||
}
|
||||
.padding()
|
||||
.padding(Theme.Spacing.md)
|
||||
.background(Theme.cardBackground(colorScheme))
|
||||
.clipShape(RoundedRectangle(cornerRadius: 12))
|
||||
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private func resultsSection(_ results: PollResults) -> some View {
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
Text("Results")
|
||||
.font(.headline)
|
||||
VStack(alignment: .leading, spacing: Theme.Spacing.md) {
|
||||
// Section header
|
||||
HStack(spacing: Theme.Spacing.sm) {
|
||||
Image(systemName: "chart.bar.fill")
|
||||
.foregroundStyle(Theme.warmOrange)
|
||||
Text("Results")
|
||||
.font(.headline)
|
||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||
}
|
||||
|
||||
ForEach(results.tripScores, id: \.tripIndex) { item in
|
||||
let trip = results.poll.tripSnapshots[item.tripIndex]
|
||||
ResultRow(
|
||||
rank: results.tripScores.firstIndex { $0.tripIndex == item.tripIndex }! + 1,
|
||||
tripName: trip.name,
|
||||
score: item.score,
|
||||
percentage: results.scorePercentage(for: item.tripIndex)
|
||||
)
|
||||
VStack(spacing: Theme.Spacing.sm) {
|
||||
ForEach(results.tripScores, id: \.tripIndex) { item in
|
||||
let trip = results.poll.tripSnapshots[item.tripIndex]
|
||||
let rank = results.tripScores.firstIndex { $0.tripIndex == item.tripIndex }! + 1
|
||||
ResultRow(
|
||||
rank: rank,
|
||||
tripName: trip.name,
|
||||
score: item.score,
|
||||
percentage: results.scorePercentage(for: item.tripIndex),
|
||||
isLeader: rank == 1 && item.score > 0
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
.padding(Theme.Spacing.md)
|
||||
.background(Theme.cardBackground(colorScheme))
|
||||
.clipShape(RoundedRectangle(cornerRadius: 12))
|
||||
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private func tripPreviewsSection(_ poll: TripPoll) -> some View {
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
Text("Trip Options")
|
||||
.font(.headline)
|
||||
VStack(alignment: .leading, spacing: Theme.Spacing.md) {
|
||||
// Section header
|
||||
HStack(spacing: Theme.Spacing.sm) {
|
||||
Image(systemName: "map.fill")
|
||||
.foregroundStyle(Theme.warmOrange)
|
||||
Text("Trip Options")
|
||||
.font(.headline)
|
||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||
|
||||
Spacer()
|
||||
|
||||
Text("\(poll.tripSnapshots.count) trips")
|
||||
.font(.caption)
|
||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||
}
|
||||
|
||||
ForEach(Array(poll.tripSnapshots.enumerated()), id: \.element.id) { index, trip in
|
||||
TripPreviewCard(trip: trip, index: index + 1)
|
||||
Button {
|
||||
selectedTrip = trip
|
||||
} label: {
|
||||
TripPreviewCard(trip: trip, index: index + 1)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -241,43 +331,72 @@ struct PollDetailView: View {
|
||||
// MARK: - Result Row
|
||||
|
||||
private struct ResultRow: View {
|
||||
@Environment(\.colorScheme) private var colorScheme
|
||||
let rank: Int
|
||||
let tripName: String
|
||||
let score: Int
|
||||
let percentage: Double
|
||||
var isLeader: Bool = false
|
||||
|
||||
private var rankIcon: String {
|
||||
switch rank {
|
||||
case 1: return "trophy.fill"
|
||||
case 2: return "medal.fill"
|
||||
case 3: return "medal.fill"
|
||||
default: return "\(rank).circle.fill"
|
||||
}
|
||||
}
|
||||
|
||||
private var rankColor: Color {
|
||||
switch rank {
|
||||
case 1: return Theme.warmOrange
|
||||
case 2: return .gray
|
||||
case 3: return .brown
|
||||
default: return .secondary
|
||||
}
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 12) {
|
||||
Text("#\(rank)")
|
||||
.font(.headline)
|
||||
.foregroundStyle(rank == 1 ? Theme.warmOrange : .secondary)
|
||||
.frame(width: 30)
|
||||
HStack(spacing: Theme.Spacing.sm) {
|
||||
// Rank badge
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(rankColor.opacity(0.15))
|
||||
.frame(width: 36, height: 36)
|
||||
Image(systemName: rankIcon)
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(rankColor)
|
||||
}
|
||||
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text(tripName)
|
||||
.font(.subheadline)
|
||||
.font(.subheadline.weight(isLeader ? .semibold : .regular))
|
||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||
|
||||
GeometryReader { geometry in
|
||||
ZStack(alignment: .leading) {
|
||||
Rectangle()
|
||||
.fill(Color.secondary.opacity(0.2))
|
||||
.frame(height: 8)
|
||||
.clipShape(RoundedRectangle(cornerRadius: 4))
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.fill(Theme.cardBackgroundElevated(colorScheme))
|
||||
.frame(height: 6)
|
||||
|
||||
Rectangle()
|
||||
.fill(rank == 1 ? Theme.warmOrange : Color.secondary)
|
||||
.frame(width: geometry.size.width * percentage, height: 8)
|
||||
.clipShape(RoundedRectangle(cornerRadius: 4))
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.fill(rankColor)
|
||||
.frame(width: max(geometry.size.width * percentage, percentage > 0 ? 6 : 0), height: 6)
|
||||
}
|
||||
}
|
||||
.frame(height: 8)
|
||||
.frame(height: 6)
|
||||
}
|
||||
|
||||
// Score badge
|
||||
Text("\(score)")
|
||||
.font(.caption)
|
||||
.foregroundStyle(.secondary)
|
||||
.frame(width: 40, alignment: .trailing)
|
||||
.font(.subheadline.weight(.medium).monospacedDigit())
|
||||
.foregroundStyle(rankColor)
|
||||
.padding(.horizontal, 10)
|
||||
.padding(.vertical, 4)
|
||||
.background(rankColor.opacity(0.1))
|
||||
.clipShape(Capsule())
|
||||
}
|
||||
.padding(.vertical, Theme.Spacing.xs)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -289,47 +408,59 @@ private struct TripPreviewCard: View {
|
||||
let index: Int
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
HStack {
|
||||
Text("Option \(index)")
|
||||
.font(.caption)
|
||||
.fontWeight(.semibold)
|
||||
.foregroundStyle(.white)
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.background(Theme.warmOrange)
|
||||
.clipShape(Capsule())
|
||||
HStack(spacing: 12) {
|
||||
VStack(alignment: .leading, spacing: 8) {
|
||||
HStack {
|
||||
Text("Option \(index)")
|
||||
.font(.caption)
|
||||
.fontWeight(.semibold)
|
||||
.foregroundStyle(.white)
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.background(Theme.warmOrange)
|
||||
.clipShape(Capsule())
|
||||
|
||||
Text(trip.name)
|
||||
.font(.headline)
|
||||
}
|
||||
Text(trip.name)
|
||||
.font(.headline)
|
||||
.foregroundStyle(.primary)
|
||||
}
|
||||
|
||||
// Date range and duration
|
||||
HStack {
|
||||
Label(trip.formattedDateRange, systemImage: "calendar")
|
||||
Spacer()
|
||||
Label("\(trip.tripDuration) days", systemImage: "clock")
|
||||
}
|
||||
.font(.caption)
|
||||
.foregroundStyle(.secondary)
|
||||
|
||||
HStack {
|
||||
Label("\(trip.stops.count) stops", systemImage: "mappin.and.ellipse")
|
||||
Spacer()
|
||||
Label("\(trip.stops.flatMap { $0.games }.count) games", systemImage: "sportscourt")
|
||||
}
|
||||
.font(.caption)
|
||||
.foregroundStyle(.secondary)
|
||||
|
||||
// Show cities
|
||||
Text(trip.stops.map { $0.city }.joined(separator: " → "))
|
||||
// Date range and duration
|
||||
HStack {
|
||||
Label(trip.formattedDateRange, systemImage: "calendar")
|
||||
Spacer()
|
||||
Label("\(trip.tripDuration) days", systemImage: "clock")
|
||||
}
|
||||
.font(.caption)
|
||||
.foregroundStyle(.secondary)
|
||||
.lineLimit(2)
|
||||
|
||||
HStack {
|
||||
Label("\(trip.stops.count) stops", systemImage: "mappin.and.ellipse")
|
||||
Spacer()
|
||||
Label("\(trip.stops.flatMap { $0.games }.count) games", systemImage: "sportscourt")
|
||||
}
|
||||
.font(.caption)
|
||||
.foregroundStyle(.secondary)
|
||||
|
||||
// Show cities
|
||||
Text(trip.stops.map { $0.city }.joined(separator: " → "))
|
||||
.font(.caption)
|
||||
.foregroundStyle(.secondary)
|
||||
.lineLimit(2)
|
||||
}
|
||||
|
||||
Image(systemName: "chevron.right")
|
||||
.font(.caption)
|
||||
.fontWeight(.semibold)
|
||||
.foregroundStyle(.tertiary)
|
||||
}
|
||||
.padding()
|
||||
.background(Theme.cardBackground(colorScheme))
|
||||
.clipShape(RoundedRectangle(cornerRadius: 12))
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 12)
|
||||
.strokeBorder(Color.secondary.opacity(0.1), lineWidth: 1)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user