Add nearby POIs to Add-to-Day sheet and improve PlaceSearchSheet empty state
- Add mapItem field to POISearchService.POI for Apple Maps integration - Merge description + location into single combined card in QuickAddItemSheet - Auto-load nearby POIs when regionCoordinate is available, with detail sheet - Create POIDetailSheet with map preview, metadata, and one-tap add-to-day - Add poiAddedToDay/poiDetailViewed analytics events - Add initial state to PlaceSearchSheet with search suggestions and flow layout Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -16,15 +16,20 @@ struct QuickAddItemSheet: View {
|
||||
let tripId: UUID
|
||||
let day: Int
|
||||
let existingItem: ItineraryItem?
|
||||
var regionCoordinate: CLLocationCoordinate2D?
|
||||
var onSave: (ItineraryItem) -> Void
|
||||
|
||||
// Form state
|
||||
@State private var selectedCategory: ItemCategory = .restaurant
|
||||
@State private var title: String = ""
|
||||
@State private var selectedPlace: MKMapItem?
|
||||
@State private var showLocationSearch = false
|
||||
@FocusState private var isTitleFocused: Bool
|
||||
|
||||
// POI state
|
||||
@State private var nearbyPOIs: [POISearchService.POI] = []
|
||||
@State private var isLoadingPOIs = false
|
||||
@State private var selectedPOI: POISearchService.POI?
|
||||
|
||||
// Derived state
|
||||
private var isEditing: Bool { existingItem != nil }
|
||||
|
||||
@@ -32,33 +37,17 @@ struct QuickAddItemSheet: View {
|
||||
!title.trimmingCharacters(in: .whitespaces).isEmpty
|
||||
}
|
||||
|
||||
private var placeholderText: String {
|
||||
switch selectedCategory {
|
||||
case .restaurant:
|
||||
return "e.g., Lunch at the stadium"
|
||||
case .attraction:
|
||||
return "e.g., Visit the art museum"
|
||||
case .fuel:
|
||||
return "e.g., Fill up before leaving"
|
||||
case .hotel:
|
||||
return "e.g., Check in at Marriott"
|
||||
case .other:
|
||||
return "e.g., Pick up tickets"
|
||||
}
|
||||
}
|
||||
private let placeholderText = "e.g., Lunch at the stadium"
|
||||
|
||||
var body: some View {
|
||||
NavigationStack {
|
||||
ScrollView {
|
||||
VStack(spacing: Theme.Spacing.lg) {
|
||||
// Category picker card
|
||||
categoryCard
|
||||
combinedInputCard
|
||||
|
||||
// Description card
|
||||
descriptionCard
|
||||
|
||||
// Location card
|
||||
locationCard
|
||||
if regionCoordinate != nil && !isEditing {
|
||||
nearbyPOISection
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, Theme.Spacing.lg)
|
||||
.padding(.top, Theme.Spacing.md)
|
||||
@@ -86,7 +75,7 @@ struct QuickAddItemSheet: View {
|
||||
}
|
||||
}
|
||||
.sheet(isPresented: $showLocationSearch) {
|
||||
PlaceSearchSheet(category: selectedCategory) { place in
|
||||
PlaceSearchSheet(regionCoordinate: regionCoordinate) { place in
|
||||
Theme.Animation.withMotion(Theme.Animation.spring) {
|
||||
selectedPlace = place
|
||||
}
|
||||
@@ -97,6 +86,11 @@ struct QuickAddItemSheet: View {
|
||||
}
|
||||
}
|
||||
}
|
||||
.sheet(item: $selectedPOI) { poi in
|
||||
POIDetailSheet(poi: poi, day: day) { selectedPoi in
|
||||
addPOIToDay(selectedPoi)
|
||||
}
|
||||
}
|
||||
.onAppear {
|
||||
loadExistingItem()
|
||||
// Focus text field after a brief delay
|
||||
@@ -104,24 +98,17 @@ struct QuickAddItemSheet: View {
|
||||
isTitleFocused = true
|
||||
}
|
||||
}
|
||||
.task {
|
||||
await loadNearbyPOIs()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Category Card
|
||||
// MARK: - Combined Input Card
|
||||
|
||||
private var categoryCard: some View {
|
||||
VStack(alignment: .leading, spacing: Theme.Spacing.md) {
|
||||
sectionHeader(title: "What type?", icon: "square.grid.2x2")
|
||||
|
||||
CategoryPicker(selectedCategory: $selectedCategory)
|
||||
}
|
||||
.cardStyle()
|
||||
}
|
||||
|
||||
// MARK: - Description Card
|
||||
|
||||
private var descriptionCard: some View {
|
||||
private var combinedInputCard: some View {
|
||||
VStack(alignment: .leading, spacing: Theme.Spacing.md) {
|
||||
// Description section
|
||||
sectionHeader(title: "Description", icon: "text.alignleft")
|
||||
|
||||
VStack(spacing: Theme.Spacing.xs) {
|
||||
@@ -153,20 +140,12 @@ struct QuickAddItemSheet: View {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cardStyle()
|
||||
}
|
||||
|
||||
private var inputBackground: Color {
|
||||
colorScheme == .dark
|
||||
? Color.white.opacity(0.05)
|
||||
: Color.black.opacity(0.03)
|
||||
}
|
||||
// Divider between sections
|
||||
Divider()
|
||||
.padding(.vertical, Theme.Spacing.xs)
|
||||
|
||||
// MARK: - Location Card
|
||||
|
||||
private var locationCard: some View {
|
||||
VStack(alignment: .leading, spacing: Theme.Spacing.md) {
|
||||
// Location section
|
||||
sectionHeader(title: "Location", icon: "mappin.and.ellipse", optional: true)
|
||||
|
||||
if let place = selectedPlace {
|
||||
@@ -178,6 +157,12 @@ struct QuickAddItemSheet: View {
|
||||
.cardStyle()
|
||||
}
|
||||
|
||||
private var inputBackground: Color {
|
||||
colorScheme == .dark
|
||||
? Color.white.opacity(0.05)
|
||||
: Color.black.opacity(0.03)
|
||||
}
|
||||
|
||||
private var addLocationButton: some View {
|
||||
Button {
|
||||
showLocationSearch = true
|
||||
@@ -193,16 +178,10 @@ struct QuickAddItemSheet: View {
|
||||
.foregroundStyle(Theme.warmOrange)
|
||||
}
|
||||
|
||||
VStack(alignment: .leading, spacing: 2) {
|
||||
Text("Add a location")
|
||||
.font(.body)
|
||||
.fontWeight(.medium)
|
||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||
|
||||
Text("Search for nearby places")
|
||||
.font(.caption)
|
||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||
}
|
||||
Text("Add a location")
|
||||
.font(.body)
|
||||
.fontWeight(.medium)
|
||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||
|
||||
Spacer()
|
||||
|
||||
@@ -277,6 +256,48 @@ struct QuickAddItemSheet: View {
|
||||
)
|
||||
}
|
||||
|
||||
// MARK: - Nearby POI Section
|
||||
|
||||
private var nearbyPOISection: some View {
|
||||
VStack(alignment: .leading, spacing: Theme.Spacing.md) {
|
||||
sectionHeader(title: "Nearby Places", icon: "mappin.and.ellipse")
|
||||
|
||||
if isLoadingPOIs {
|
||||
HStack(spacing: Theme.Spacing.sm) {
|
||||
ProgressView()
|
||||
Text("Finding nearby places\u{2026}")
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(Theme.textSecondary(colorScheme))
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .center)
|
||||
.padding(.vertical, Theme.Spacing.lg)
|
||||
} else if nearbyPOIs.isEmpty {
|
||||
Text("No nearby places found")
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||
.frame(maxWidth: .infinity, alignment: .center)
|
||||
.padding(.vertical, Theme.Spacing.lg)
|
||||
} else {
|
||||
VStack(spacing: 0) {
|
||||
ForEach(Array(nearbyPOIs.enumerated()), id: \.element.id) { index, poi in
|
||||
Button {
|
||||
selectedPOI = poi
|
||||
} label: {
|
||||
POIRow(poi: poi, colorScheme: colorScheme)
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
|
||||
if index < nearbyPOIs.count - 1 {
|
||||
Divider()
|
||||
.padding(.leading, 52)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cardStyle()
|
||||
}
|
||||
|
||||
// MARK: - Section Header
|
||||
|
||||
private func sectionHeader(title: String, icon: String, optional: Bool = false) -> some View {
|
||||
@@ -293,12 +314,16 @@ struct QuickAddItemSheet: View {
|
||||
|
||||
if optional {
|
||||
Text("optional")
|
||||
.font(.caption2)
|
||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||
.padding(.horizontal, 6)
|
||||
.padding(.vertical, 2)
|
||||
.background(Theme.surfaceGlow(colorScheme))
|
||||
.font(.caption)
|
||||
.foregroundStyle(Theme.textSecondary(colorScheme))
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 3)
|
||||
.background(Theme.surfaceGlow(colorScheme).opacity(1.5))
|
||||
.clipShape(Capsule())
|
||||
.overlay(
|
||||
Capsule()
|
||||
.strokeBorder(Theme.textMuted(colorScheme).opacity(0.3), lineWidth: 0.5)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -319,11 +344,6 @@ struct QuickAddItemSheet: View {
|
||||
|
||||
title = info.title
|
||||
|
||||
// Find category by icon
|
||||
if let category = ItemCategory.allCases.first(where: { $0.icon == info.icon }) {
|
||||
selectedCategory = category
|
||||
}
|
||||
|
||||
// Restore location if present
|
||||
if let lat = info.latitude,
|
||||
let lon = info.longitude {
|
||||
@@ -348,7 +368,7 @@ struct QuickAddItemSheet: View {
|
||||
let coordinate = place.placemark.coordinate
|
||||
customInfo = CustomInfo(
|
||||
title: trimmedTitle,
|
||||
icon: selectedCategory.icon,
|
||||
icon: "\u{1F4CC}",
|
||||
time: nil,
|
||||
latitude: coordinate.latitude,
|
||||
longitude: coordinate.longitude,
|
||||
@@ -358,7 +378,7 @@ struct QuickAddItemSheet: View {
|
||||
// Item without location
|
||||
customInfo = CustomInfo(
|
||||
title: trimmedTitle,
|
||||
icon: selectedCategory.icon,
|
||||
icon: "\u{1F4CC}",
|
||||
time: nil
|
||||
)
|
||||
}
|
||||
@@ -403,6 +423,116 @@ struct QuickAddItemSheet: View {
|
||||
|
||||
return components.isEmpty ? nil : components.joined(separator: ", ")
|
||||
}
|
||||
|
||||
// MARK: - POI Loading
|
||||
|
||||
private func loadNearbyPOIs() async {
|
||||
guard let coordinate = regionCoordinate, !isEditing else { return }
|
||||
|
||||
isLoadingPOIs = true
|
||||
defer { isLoadingPOIs = false }
|
||||
|
||||
do {
|
||||
let pois = try await POISearchService().findNearbyPOIs(
|
||||
near: coordinate,
|
||||
categories: POISearchService.POICategory.allCases,
|
||||
limitPerCategory: 3
|
||||
)
|
||||
nearbyPOIs = pois
|
||||
} catch {
|
||||
nearbyPOIs = []
|
||||
}
|
||||
}
|
||||
|
||||
private func addPOIToDay(_ poi: POISearchService.POI) {
|
||||
let customInfo = CustomInfo(
|
||||
title: poi.name,
|
||||
icon: "\u{1F4CC}",
|
||||
time: nil,
|
||||
latitude: poi.coordinate.latitude,
|
||||
longitude: poi.coordinate.longitude,
|
||||
address: poi.address
|
||||
)
|
||||
|
||||
let item = ItineraryItem(
|
||||
tripId: tripId,
|
||||
day: day,
|
||||
sortOrder: 0.0,
|
||||
kind: .custom(customInfo)
|
||||
)
|
||||
|
||||
AnalyticsManager.shared.track(.poiAddedToDay(
|
||||
poiName: poi.name,
|
||||
category: poi.category.displayName,
|
||||
day: day
|
||||
))
|
||||
|
||||
onSave(item)
|
||||
dismiss()
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - POI Row
|
||||
|
||||
private struct POIRow: View {
|
||||
let poi: POISearchService.POI
|
||||
let colorScheme: ColorScheme
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: Theme.Spacing.sm) {
|
||||
// Category icon
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(categoryColor.opacity(0.15))
|
||||
.frame(width: 40, height: 40)
|
||||
|
||||
Image(systemName: poi.category.iconName)
|
||||
.font(.body.weight(.semibold))
|
||||
.foregroundStyle(categoryColor)
|
||||
}
|
||||
|
||||
VStack(alignment: .leading, spacing: Theme.Spacing.xxs) {
|
||||
Text(poi.name)
|
||||
.font(.body)
|
||||
.fontWeight(.medium)
|
||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||
.lineLimit(1)
|
||||
|
||||
if let address = poi.address {
|
||||
Text(address)
|
||||
.font(.caption)
|
||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||
.lineLimit(1)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
Text(poi.formattedDistance)
|
||||
.font(.caption)
|
||||
.fontWeight(.semibold)
|
||||
.foregroundStyle(Theme.warmOrange)
|
||||
|
||||
Image(systemName: "chevron.right")
|
||||
.font(.caption2.weight(.semibold))
|
||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||
.accessibilityHidden(true)
|
||||
}
|
||||
.padding(.vertical, Theme.Spacing.sm)
|
||||
.contentShape(Rectangle())
|
||||
.accessibilityLabel("\(poi.name), \(poi.category.displayName), \(poi.formattedDistance) away")
|
||||
.accessibilityHint("Double-tap to view details and add to itinerary")
|
||||
}
|
||||
|
||||
private var categoryColor: Color {
|
||||
switch poi.category {
|
||||
case .restaurant: return .orange
|
||||
case .attraction: return .yellow
|
||||
case .entertainment: return .purple
|
||||
case .nightlife: return .indigo
|
||||
case .museum: return .teal
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Card Style Modifier
|
||||
@@ -479,7 +609,7 @@ private struct PressableStyle: ButtonStyle {
|
||||
sortOrder: 1.0,
|
||||
kind: .custom(CustomInfo(
|
||||
title: "Dinner at Joe's",
|
||||
icon: ItemCategory.restaurant.icon,
|
||||
icon: "\u{1F4CC}",
|
||||
time: nil,
|
||||
latitude: 42.3601,
|
||||
longitude: -71.0589,
|
||||
|
||||
Reference in New Issue
Block a user