)
@@ -162,7 +194,11 @@ export default function Panel({ onManeuverClick }) {
return (
{/* Drag handle */}
{sheetState !== 'collapsed' && (
+ {header}
{content}
)}
diff --git a/src/components/PlaceDetail.jsx b/src/components/PlaceDetail.jsx
new file mode 100644
index 0000000..f338bad
--- /dev/null
+++ b/src/components/PlaceDetail.jsx
@@ -0,0 +1,236 @@
+import { useEffect, useState } from 'react'
+import { X, Navigation, Plus, Bookmark, Share2 } from 'lucide-react'
+import toast from 'react-hot-toast'
+import { useStore } from '../store'
+import { fetchElevation } from '../api'
+
+/** Meters to feet */
+const M_TO_FT = 3.28084
+
+/** Build display address from raw result data */
+function buildAddress(place) {
+ if (place.address) return place.address
+ const raw = place.raw || {}
+ const parts = [raw.street, raw.city, raw.state, raw.postcode].filter(Boolean)
+ return parts.join(', ') || null
+}
+
+export default function PlaceDetail() {
+ const selectedPlace = useStore((s) => s.selectedPlace)
+ const clearSelectedPlace = useStore((s) => s.clearSelectedPlace)
+ const startDirections = useStore((s) => s.startDirections)
+ const addStop = useStore((s) => s.addStop)
+ const stops = useStore((s) => s.stops)
+ const geoPermission = useStore((s) => s.geoPermission)
+
+ const [elevResult, setElevResult] = useState({ lat: null, lon: null, value: null })
+ const [isMobile, setIsMobile] = useState(false)
+
+ useEffect(() => {
+ const check = () => setIsMobile(window.innerWidth < 768)
+ check()
+ window.addEventListener('resize', check)
+ return () => window.removeEventListener('resize', check)
+ }, [])
+
+ // Fetch elevation when place changes
+ const placeLat = selectedPlace?.lat
+ const placeLon = selectedPlace?.lon
+ useEffect(() => {
+ if (placeLat == null || placeLon == null) return
+ let cancelled = false
+ fetchElevation(placeLat, placeLon).then((h) => {
+ if (!cancelled) setElevResult({ lat: placeLat, lon: placeLon, value: h })
+ })
+ return () => { cancelled = true }
+ }, [placeLat, placeLon])
+
+ // Derive elevation/loading from comparing result to current place
+ const elevLoading = placeLat != null && (elevResult.lat !== placeLat || elevResult.lon !== placeLon)
+ const elevation = !elevLoading ? elevResult.value : null
+
+ if (!selectedPlace) return null
+
+ const address = buildAddress(selectedPlace)
+ const elevFeet = elevation != null ? Math.round(elevation * M_TO_FT) : null
+ const raw = selectedPlace.raw || {}
+
+ // Check if place is already in stops
+ const existingStopIndex = stops.findIndex(
+ (s) => Math.abs(s.lat - selectedPlace.lat) < 0.00001 && Math.abs(s.lon - selectedPlace.lon) < 0.00001
+ )
+
+ const handleDirections = () => {
+ startDirections(selectedPlace)
+ if (geoPermission !== 'granted' && stops.length === 0) {
+ toast('Set a starting point to get directions', { icon: '\u{1F4CD}' })
+ }
+ }
+
+ const handleAddStop = () => {
+ addStop({
+ lat: selectedPlace.lat,
+ lon: selectedPlace.lon,
+ name: selectedPlace.name,
+ source: selectedPlace.source,
+ matchCode: selectedPlace.matchCode,
+ })
+ clearSelectedPlace()
+ }
+
+ const handleSave = () => {
+ toast('Saved places coming soon')
+ }
+
+ const handleShare = () => {
+ const text = [
+ selectedPlace.name,
+ address,
+ `${selectedPlace.lat.toFixed(6)}, ${selectedPlace.lon.toFixed(6)}`,
+ ].filter(Boolean).join('\n')
+ navigator.clipboard.writeText(text).then(
+ () => toast('Copied to clipboard'),
+ () => toast.error('Failed to copy')
+ )
+ }
+
+ const panelContent = (
+ <>
+ {/* Close button */}
+
+
+ {/* Place name */}
+
+
+ {selectedPlace.name}
+
+ {selectedPlace.type && (
+
+ {selectedPlace.type}
+
+ )}
+
+
+ {/* Address */}
+ {address && (
+
+ {address}
+
+ )}
+
+ {/* Coordinates + elevation */}
+
+ {selectedPlace.lat.toFixed(6)}, {selectedPlace.lon.toFixed(6)}
+ ·
+
+ {elevLoading ? '...' : elevFeet != null ? `${elevFeet.toLocaleString()} ft` : '\u2014'}
+
+
+
+ {/* Optional extras */}
+ {(raw.opening_hours || raw.website || raw.phone) && (
+
+ )}
+
+ {/* Action buttons */}
+
+
+
+ {existingStopIndex >= 0 ? (
+
+ Added as stop {String.fromCharCode(65 + existingStopIndex)}
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+ )
+
+ // Mobile: bottom overlay
+ if (isMobile) {
+ return (
+
+ {panelContent}
+
+ )
+ }
+
+ // Desktop: side panel
+ return (
+
+ {panelContent}
+
+ )
+}
diff --git a/src/components/SearchBar.jsx b/src/components/SearchBar.jsx
index 6923d93..652b216 100644
--- a/src/components/SearchBar.jsx
+++ b/src/components/SearchBar.jsx
@@ -1,32 +1,59 @@
-import { useRef, useEffect, useCallback, useState } from 'react'
+import { useRef, useEffect, useCallback, useState, forwardRef, useImperativeHandle } from 'react'
+import { MapPin, Building2, Star, Crosshair, Coffee, Fuel, ShoppingBag, Hotel, X } from 'lucide-react'
+import toast from 'react-hot-toast'
import { useStore } from '../store'
import { searchGeocode } from '../api'
-export default function SearchBar() {
+/** Get category icon based on result type/source */
+function CategoryIcon({ result }) {
+ const type = result.type || ''
+ const source = result.source || ''
+ const size = 14
+
+ if (source === 'nickname') return
+ if (type === 'coordinates') return
+ if (type === 'locality' || type === 'city') return
+
+ // POI subcategories from osm_value if available
+ const osmVal = result.raw?.osm_value || ''
+ if (osmVal.includes('cafe') || osmVal.includes('coffee')) return
+ if (osmVal.includes('fuel') || osmVal.includes('gas')) return
+ if (osmVal.includes('shop') || osmVal.includes('supermarket')) return
+ if (osmVal.includes('hotel') || osmVal.includes('motel')) return
+
+ return
+}
+
+const SearchBar = forwardRef(function SearchBar(_, ref) {
const inputRef = useRef(null)
const [activeIndex, setActiveIndex] = useState(-1)
const debounceRef = useRef(null)
+ useImperativeHandle(ref, () => ({
+ focus: () => inputRef.current?.focus(),
+ }))
+
const query = useStore((s) => s.query)
const results = useStore((s) => s.results)
const searchLoading = useStore((s) => s.searchLoading)
const autocompleteOpen = useStore((s) => s.autocompleteOpen)
const stops = useStore((s) => s.stops)
+ const pendingDestination = useStore((s) => s.pendingDestination)
const setQuery = useStore((s) => s.setQuery)
const setResults = useStore((s) => s.setResults)
const setSearchLoading = useStore((s) => s.setSearchLoading)
const setAbortController = useStore((s) => s.setAbortController)
const setAutocompleteOpen = useStore((s) => s.setAutocompleteOpen)
const addStop = useStore((s) => s.addStop)
+ const setSelectedPlace = useStore((s) => s.setSelectedPlace)
+ const clearPendingDestination = useStore((s) => s.clearPendingDestination)
- // Focus on mount
useEffect(() => {
inputRef.current?.focus()
}, [])
const doSearch = useCallback(
async (q) => {
- // Abort previous
const prev = useStore.getState().abortController
if (prev) prev.abort()
@@ -61,19 +88,40 @@ export default function SearchBar() {
const handleChange = (e) => {
const val = e.target.value
setQuery(val)
-
if (debounceRef.current) clearTimeout(debounceRef.current)
debounceRef.current = setTimeout(() => doSearch(val), 150)
}
+ const handleClear = () => {
+ setQuery('')
+ setResults([])
+ setAutocompleteOpen(false)
+ inputRef.current?.focus()
+ }
+
const selectResult = (result) => {
- addStop({
- lat: result.lat,
- lon: result.lon,
- name: result.name,
- source: result.source,
- matchCode: result.match_code,
- })
+ const { pendingDestination: pending } = useStore.getState()
+
+ if (pending) {
+ // GPS-denied Directions flow: this result becomes the starting point
+ addStop({ lat: result.lat, lon: result.lon, name: result.name, source: result.source, matchCode: result.match_code })
+ addStop({ lat: pending.lat, lon: pending.lon, name: pending.name, source: pending.source, matchCode: pending.matchCode })
+ clearPendingDestination()
+ toast(`Routing from ${result.name} to ${pending.name}`, { icon: '\u{1F9ED}' })
+ } else {
+ // Normal flow: open PlaceDetail
+ setSelectedPlace({
+ lat: result.lat,
+ lon: result.lon,
+ name: result.name,
+ address: result.address || null,
+ type: result.type,
+ source: result.source,
+ matchCode: result.match_code,
+ raw: result.raw || {},
+ })
+ }
+
setQuery('')
setResults([])
setAutocompleteOpen(false)
@@ -83,9 +131,7 @@ export default function SearchBar() {
const handleKeyDown = (e) => {
if (!autocompleteOpen || results.length === 0) {
- if (e.key === 'Escape') {
- setAutocompleteOpen(false)
- }
+ if (e.key === 'Escape') setAutocompleteOpen(false)
return
}
@@ -116,35 +162,51 @@ export default function SearchBar() {
return (
-
-
-
results.length > 0 && setAutocompleteOpen(true)}
- placeholder={atCap ? 'Max 10 stops reached' : 'Search for a place...'}
- disabled={atCap}
- className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-cyan-400 focus:ring-1 focus:ring-cyan-400 disabled:opacity-50 disabled:cursor-not-allowed text-sm"
- aria-label="Search places"
- aria-expanded={autocompleteOpen}
- aria-autocomplete="list"
- role="combobox"
- />
- {searchLoading && (
-
- )}
+
+
results.length > 0 && setAutocompleteOpen(true)}
+ placeholder={atCap ? 'Max 10 stops reached' : pendingDestination ? 'Starting point...' : 'Search for a place...'}
+ disabled={atCap}
+ className="navi-input w-full pr-8"
+ aria-label="Search places"
+ aria-expanded={autocompleteOpen}
+ aria-autocomplete="list"
+ role="combobox"
+ />
+ {/* Clear / Loading indicator */}
+
+ {searchLoading ? (
+
+ ) : query ? (
+
+ ) : null}
{/* Autocomplete dropdown */}
{autocompleteOpen && results.length > 0 && (
{results.map((r, i) => (
@@ -152,27 +214,34 @@ export default function SearchBar() {
key={`${r.lat}-${r.lon}-${i}`}
role="option"
aria-selected={i === activeIndex}
- className={`px-3 py-2 cursor-pointer text-sm border-b border-gray-700 last:border-b-0 ${
- i === activeIndex
- ? 'bg-gray-700 text-white'
- : 'text-gray-200 hover:bg-gray-700'
- }`}
+ className="px-3 py-2 cursor-pointer text-sm"
+ style={{
+ background: i === activeIndex ? 'var(--accent-muted)' : 'transparent',
+ borderBottom: i < results.length - 1 ? '1px solid var(--border-subtle)' : 'none',
+ }}
onClick={() => selectResult(r)}
onMouseEnter={() => setActiveIndex(i)}
>
-
-
{r.name}
-
+
+
+
+
+
+ {r.name}
+
+
{r.match_code?.housenumber === 'matched' && (
-
- exact match
+
+ exact
)}
- {r.source}
-
- {r.type} · {r.confidence}
+
+ {r.type}{r.confidence && r.confidence !== 'high' ? ` \u00b7 ${r.confidence}` : ''}
))}
@@ -180,4 +249,6 @@ export default function SearchBar() {
)}
{/* Drag handle */}
{/* Pin indicator */}
{pinLabel}
{/* Stop name */}
- {stop.name}
+
+ {stop.name}
+
{/* Remove button */}
)
diff --git a/src/components/StopList.jsx b/src/components/StopList.jsx
index a6b0c6e..a370b09 100644
--- a/src/components/StopList.jsx
+++ b/src/components/StopList.jsx
@@ -14,11 +14,17 @@ import {
} from '@dnd-kit/sortable'
import { useStore } from '../store'
import StopItem from './StopItem'
+import GpsOriginItem from './GpsOriginItem'
export default function StopList() {
const stops = useStore((s) => s.stops)
const reorderStops = useStore((s) => s.reorderStops)
const geoPermission = useStore((s) => s.geoPermission)
+ const gpsOrigin = useStore((s) => s.gpsOrigin)
+ const pendingDestination = useStore((s) => s.pendingDestination)
+
+ const hasGpsOrigin = gpsOrigin && geoPermission === 'granted'
+ const indexOffset = hasGpsOrigin ? 1 : 0
const sensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
@@ -34,25 +40,34 @@ export default function StopList() {
reorderStops(arrayMove(stops, oldIndex, newIndex))
}
- if (stops.length === 0) {
+ if (stops.length === 0 && !hasGpsOrigin) {
return (
-
- {geoPermission === 'denied'
- ? 'Add a starting point and destination above'
- : 'Search and add stops to build your route'}
+
+ {pendingDestination
+ ? 'Search for a starting point above'
+ : geoPermission === 'denied'
+ ? 'Add a starting point and destination above'
+ : 'Search and add stops to build your route'}
)
}
return (
-
- s.id)} strategy={verticalListSortingStrategy}>
-
+
+ {hasGpsOrigin && }
+
+ s.id)} strategy={verticalListSortingStrategy}>
{stops.map((stop, i) => (
-
+
))}
-
-
-
+
+
+