matt/navi
1
0
Fork 0
mirror of https://github.com/zvx-echo6/navi.git synced 2026-05-20 14:44:51 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: wilderness maneuvers, pick-from-map, distance formatting, place card panel

Browse source 
- Wilderness maneuvers render with compass arrows and cardinal directions
- Network maneuvers prefixed with transport mode (Drive/Walk/Ride)
- Distances under 1 mile show feet with commas
- Pick-from-map mode replaces auto-fill-on-focus (crosshair + toast)
- ESC cancels pick mode
- Place card slides out right during active routing
- Removed debug toasts

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Matt 2026-05-09 06:09:14 +00:00
commit 816ea8dd1f
7 changed files with 663 additions and 378 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/api.js
View file

@ -342,6 +342,7 @@ export async function requestOffroute(start, end, mode = "foot", boundaryMode =
mode,
boundary_mode: boundaryMode,
}
console.log('[TRACE-API] requestOffroute body:', JSON.stringify(body))
const controller = new AbortController()
const timeout = setTimeout(() => controller.abort(), 120000) // 2 min timeout for complex routes

622
src/components/LocationInput.jsx
View file

@ -1,301 +1,321 @@
import { useRef, useEffect, useCallback, useState } from "react"
import { MapPin, Crosshair, X, Navigation2, User, Star, Coffee, Fuel, ShoppingBag, Hotel, Building2 } from "lucide-react"
import { useStore } from "../store"
import { searchGeocode } from "../api"
import { buildAddress } from "../utils/place"
import { hasFeature } from "../config"
/** Parse coordinate input like "42.35, -114.30" */
function parseCoordinates(input) {
if (!input) return null
const pattern = /^(-?\d+\.?\d*)\s*[,\s]\s*(-?\d+\.?\d*)$/
const match = input.trim().match(pattern)
if (!match) return null
const lat = parseFloat(match[1])
const lon = parseFloat(match[2])
if (isNaN(lat) || isNaN(lon) || lat < -90 || lat > 90 || lon < -180 || lon > 180) return null
return { lat, lon }
}
function CategoryIcon({ result, size = 14 }) {
const type = result.type || ""
const source = result.source || ""
if (result._isContact) return <User size={size} />
if (source === "nickname") return <Star size={size} />
if (type === "coordinates") return <Crosshair size={size} />
if (type === "locality" || type === "city") return <Building2 size={size} />
const osmVal = result.raw?.osm_value || ""
if (osmVal.includes("cafe") || osmVal.includes("coffee")) return <Coffee size={size} />
if (osmVal.includes("fuel") || osmVal.includes("gas")) return <Fuel size={size} />
if (osmVal.includes("shop") || osmVal.includes("supermarket")) return <ShoppingBag size={size} />
if (osmVal.includes("hotel") || osmVal.includes("motel")) return <Hotel size={size} />
return <MapPin size={size} />
}
export default function LocationInput({
value, // { lat, lon, name } or null
onChange, // (place) => void
placeholder,
icon, // "origin" | "destination" | "stop"
fieldId, // unique id for this field (for map click targeting)
onFocus, // () => void
autoFocus,
}) {
const inputRef = useRef(null)
const [query, setQuery] = useState(value?.name || "")
const [results, setResults] = useState([])
const [loading, setLoading] = useState(false)
const [open, setOpen] = useState(false)
const [activeIndex, setActiveIndex] = useState(-1)
const debounceRef = useRef(null)
const abortRef = useRef(null)
const contacts = useStore((s) => s.contacts)
const activeDirectionsField = useStore((s) => s.activeDirectionsField)
const setActiveDirectionsField = useStore((s) => s.setActiveDirectionsField)
// Sync display value when external value changes
useEffect(() => {
if (value?.name && value.name !== query) {
setQuery(value.name)
} else if (!value && query && !open) {
// Value cleared externally
setQuery("")
}
}, [value?.name, value?.lat, value?.lon])
const doSearch = useCallback(async (q) => {
if (abortRef.current) abortRef.current.abort()
if (!q.trim()) {
setResults([])
setOpen(false)
setLoading(false)
return
}
// Check coordinates first
const coords = parseCoordinates(q)
if (coords) {
const coordResult = {
lat: coords.lat,
lon: coords.lon,
name: coords.lat.toFixed(5) + ", " + coords.lon.toFixed(5),
address: "Coordinates",
type: "coordinates",
source: "coordinates",
match_code: null,
raw: {},
}
setResults([coordResult])
setOpen(true)
setLoading(false)
return
}
// Contact matches
let contactResults = []
if (hasFeature("has_contacts") && contacts.length > 0) {
const lower = q.trim().toLowerCase()
contactResults = contacts
.filter((c) =>
(c.label || "").toLowerCase().startsWith(lower) ||
(c.name || "").toLowerCase().startsWith(lower) ||
(c.call_sign || "").toLowerCase().startsWith(lower)
)
.slice(0, 3)
.map((c) => ({
lat: c.lat,
lon: c.lon,
name: c.label,
address: c.address || c.name || "",
type: "contact",
source: "contacts",
match_code: null,
raw: { contact: c },
_isContact: true,
}))
}
const ctrl = new AbortController()
abortRef.current = ctrl
setLoading(true)
try {
const data = await searchGeocode(q.trim(), 5, ctrl.signal)
const combined = [...contactResults, ...(data.results || [])]
setResults(combined)
setOpen(combined.length > 0)
setActiveIndex(-1)
} catch (e) {
if (e.name !== "AbortError") {
if (contactResults.length > 0) {
setResults(contactResults)
setOpen(true)
} else {
setResults([])
setOpen(false)
}
}
} finally {
setLoading(false)
}
}, [contacts])
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([])
setOpen(false)
onChange(null)
inputRef.current?.focus()
}
const selectResult = (result) => {
onChange({
lat: result.lat,
lon: result.lon,
name: result.name,
source: result.source,
matchCode: result.match_code,
})
setQuery(result.name)
setResults([])
setOpen(false)
setActiveIndex(-1)
}
const handleKeyDown = (e) => {
if (!open || results.length === 0) {
if (e.key === "Escape") setOpen(false)
return
}
switch (e.key) {
case "ArrowDown":
e.preventDefault()
setActiveIndex((prev) => Math.min(prev + 1, results.length - 1))
break
case "ArrowUp":
e.preventDefault()
setActiveIndex((prev) => Math.max(prev - 1, -1))
break
case "Enter":
e.preventDefault()
if (activeIndex >= 0 && activeIndex < results.length) {
selectResult(results[activeIndex])
}
break
case "Escape":
e.preventDefault()
setOpen(false)
setActiveIndex(-1)
break
}
}
const handleFocus = () => {
setActiveDirectionsField(fieldId)
if (results.length > 0) setOpen(true)
onFocus?.()
}
const handleBlur = () => {
// Delay to allow click on dropdown
setTimeout(() => setOpen(false), 150)
}
const isActive = activeDirectionsField === fieldId
const iconColor = icon === "origin" ? "#22c55e" : icon === "destination" ? "#ef4444" : "var(--text-tertiary)"
return (
<div className="relative">
<div
className="flex items-center gap-2 px-3 py-2 rounded-lg transition-all"
style={{
background: "var(--bg-overlay)",
border: isActive ? "1px solid var(--accent)" : "1px solid var(--border)",
}}
>
{icon === "origin" ? (
<Navigation2 size={16} style={{ color: iconColor, transform: "rotate(45deg)" }} />
) : (
<MapPin size={16} style={{ color: iconColor }} />
)}
<input
ref={inputRef}
type="text"
value={query}
onChange={handleChange}
onKeyDown={handleKeyDown}
onFocus={handleFocus}
onBlur={handleBlur}
placeholder={placeholder}
autoFocus={autoFocus}
className="flex-1 bg-transparent text-sm outline-none"
style={{ color: "var(--text-primary)" }}
/>
{loading ? (
<div
className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
style={{ borderColor: "var(--accent)", borderTopColor: "transparent" }}
/>
) : query ? (
<button onClick={handleClear} className="p-0.5" style={{ color: "var(--text-tertiary)" }}>
<X size={14} />
</button>
) : null}
</div>
{open && results.length > 0 && (
<ul
className="absolute z-50 mt-1 w-full rounded-lg overflow-hidden max-h-48 overflow-y-auto"
style={{
background: "var(--bg-overlay)",
border: "1px solid var(--border)",
boxShadow: "var(--shadow-lg)",
}}
>
{results.map((r, i) => {
const isPoi = r.type === "poi" && r.raw?.name
const isContact = r._isContact
const primary = isContact ? r.name : isPoi ? r.raw.name : r.name
const secondary = isContact ? (r.address || "") : isPoi ? buildAddress(r) : null
return (
<li
key={`${r.lat}-${r.lon}-${i}`}
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)}
>
<div className="flex items-center gap-2">
<span style={{ color: isContact ? "var(--accent)" : "var(--text-tertiary)" }}>
<CategoryIcon result={r} />
</span>
<span className="truncate flex-1" style={{ color: "var(--text-primary)" }}>
{primary}
</span>
</div>
{secondary && (
<div className="text-[11px] mt-0.5 ml-6 truncate" style={{ color: "var(--text-tertiary)" }}>
{secondary}
</div>
)}
</li>
)
})}
</ul>
)}
</div>
)
}
import { useRef, useEffect, useCallback, useState } from "react"
import { MapPin, Crosshair, X, Navigation2, User, Star, Coffee, Fuel, ShoppingBag, Hotel, Building2, Target } from "lucide-react"
import toast from "react-hot-toast"
import { useStore } from "../store"
import { searchGeocode } from "../api"
import { buildAddress } from "../utils/place"
import { hasFeature } from "../config"
/** Parse coordinate input like "42.35, -114.30" */
function parseCoordinates(input) {
if (!input) return null
const pattern = /^(-?\d+\.?\d*)\s*[,\s]\s*(-?\d+\.?\d*)$/
const match = input.trim().match(pattern)
if (!match) return null
const lat = parseFloat(match[1])
const lon = parseFloat(match[2])
if (isNaN(lat) || isNaN(lon) || lat < -90 || lat > 90 || lon < -180 || lon > 180) return null
return { lat, lon }
}
function CategoryIcon({ result, size = 14 }) {
const type = result.type || ""
const source = result.source || ""
if (result._isContact) return <User size={size} />
if (source === "nickname") return <Star size={size} />
if (type === "coordinates") return <Crosshair size={size} />
if (type === "locality" || type === "city") return <Building2 size={size} />
const osmVal = result.raw?.osm_value || ""
if (osmVal.includes("cafe") || osmVal.includes("coffee")) return <Coffee size={size} />
if (osmVal.includes("fuel") || osmVal.includes("gas")) return <Fuel size={size} />
if (osmVal.includes("shop") || osmVal.includes("supermarket")) return <ShoppingBag size={size} />
if (osmVal.includes("hotel") || osmVal.includes("motel")) return <Hotel size={size} />
return <MapPin size={size} />
}
export default function LocationInput({
value, // { lat, lon, name } or null
onChange, // (place) => void
placeholder,
icon, // "origin" | "destination" | "stop"
fieldId, // unique id for this field (for map click targeting)
onFocus, // () => void
autoFocus,
}) {
const inputRef = useRef(null)
const [query, setQuery] = useState(value?.name || "")
const [results, setResults] = useState([])
const [loading, setLoading] = useState(false)
const [open, setOpen] = useState(false)
const [activeIndex, setActiveIndex] = useState(-1)
const debounceRef = useRef(null)
const abortRef = useRef(null)
const contacts = useStore((s) => s.contacts)
const activeDirectionsField = useStore((s) => s.activeDirectionsField)
const setActiveDirectionsField = useStore((s) => s.setActiveDirectionsField)
const pickingRouteField = useStore((s) => s.pickingRouteField)
const setPickingRouteField = useStore((s) => s.setPickingRouteField)
// Sync display value when external value changes
useEffect(() => {
if (value?.name && value.name !== query) {
setQuery(value.name)
} else if (!value && query && !open) {
// Value cleared externally
setQuery("")
}
}, [value?.name, value?.lat, value?.lon])
const doSearch = useCallback(async (q) => {
if (abortRef.current) abortRef.current.abort()
if (!q.trim()) {
setResults([])
setOpen(false)
setLoading(false)
return
}
// Check coordinates first
const coords = parseCoordinates(q)
if (coords) {
const coordResult = {
lat: coords.lat,
lon: coords.lon,
name: coords.lat.toFixed(5) + ", " + coords.lon.toFixed(5),
address: "Coordinates",
type: "coordinates",
source: "coordinates",
match_code: null,
raw: {},
}
setResults([coordResult])
setOpen(true)
setLoading(false)
return
}
// Contact matches
let contactResults = []
if (hasFeature("has_contacts") && contacts.length > 0) {
const lower = q.trim().toLowerCase()
contactResults = contacts
.filter((c) =>
(c.label || "").toLowerCase().startsWith(lower) ||
(c.name || "").toLowerCase().startsWith(lower) ||
(c.call_sign || "").toLowerCase().startsWith(lower)
)
.slice(0, 3)
.map((c) => ({
lat: c.lat,
lon: c.lon,
name: c.label,
address: c.address || c.name || "",
type: "contact",
source: "contacts",
match_code: null,
raw: { contact: c },
_isContact: true,
}))
}
const ctrl = new AbortController()
abortRef.current = ctrl
setLoading(true)
try {
const data = await searchGeocode(q.trim(), 5, ctrl.signal)
const combined = [...contactResults, ...(data.results || [])]
setResults(combined)
setOpen(combined.length > 0)
setActiveIndex(-1)
} catch (e) {
if (e.name !== "AbortError") {
if (contactResults.length > 0) {
setResults(contactResults)
setOpen(true)
} else {
setResults([])
setOpen(false)
}
}
} finally {
setLoading(false)
}
}, [contacts])
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([])
setOpen(false)
onChange(null)
inputRef.current?.focus()
}
const selectResult = (result) => {
onChange({
lat: result.lat,
lon: result.lon,
name: result.name,
source: result.source,
matchCode: result.match_code,
})
setQuery(result.name)
setResults([])
setOpen(false)
setActiveIndex(-1)
}
const handleKeyDown = (e) => {
if (!open || results.length === 0) {
if (e.key === "Escape") setOpen(false)
return
}
switch (e.key) {
case "ArrowDown":
e.preventDefault()
setActiveIndex((prev) => Math.min(prev + 1, results.length - 1))
break
case "ArrowUp":
e.preventDefault()
setActiveIndex((prev) => Math.max(prev - 1, -1))
break
case "Enter":
e.preventDefault()
if (activeIndex >= 0 && activeIndex < results.length) {
selectResult(results[activeIndex])
}
break
case "Escape":
e.preventDefault()
setOpen(false)
setActiveIndex(-1)
break
}
}
const handleFocus = () => {
setActiveDirectionsField(fieldId) // For styling only, not map clicks
if (results.length > 0) setOpen(true)
onFocus?.()
}
const handlePickFromMap = () => {
setPickingRouteField(fieldId)
toast("Click map to set location", { icon: "🎯", duration: 3000 })
inputRef.current?.blur() // Unfocus input so user focuses on map
}
const isPicking = pickingRouteField === fieldId
const handleBlur = () => {
// Delay to allow click on dropdown
setTimeout(() => setOpen(false), 150)
}
const isActive = activeDirectionsField === fieldId
const iconColor = icon === "origin" ? "#22c55e" : icon === "destination" ? "#ef4444" : "var(--text-tertiary)"
return (
<div className="relative">
<div
className="flex items-center gap-2 px-3 py-2 rounded-lg transition-all"
style={{
background: "var(--bg-overlay)",
border: isActive ? "1px solid var(--accent)" : "1px solid var(--border)",
}}
>
{icon === "origin" ? (
<Navigation2 size={16} style={{ color: iconColor, transform: "rotate(45deg)" }} />
) : (
<MapPin size={16} style={{ color: iconColor }} />
)}
<input
ref={inputRef}
type="text"
value={query}
onChange={handleChange}
onKeyDown={handleKeyDown}
onFocus={handleFocus}
onBlur={handleBlur}
placeholder={placeholder}
autoFocus={autoFocus}
className="flex-1 bg-transparent text-sm outline-none"
style={{ color: "var(--text-primary)" }}
/>
{/* Pick from map button */}
<button
onClick={handlePickFromMap}
className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
style={{ color: isPicking ? "var(--accent)" : "var(--text-tertiary)" }}
title="Pick location from map"
>
<Target size={14} />
</button>
{loading ? (
<div
className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
style={{ borderColor: "var(--accent)", borderTopColor: "transparent" }}
/>
) : query ? (
<button onClick={handleClear} className="p-0.5" style={{ color: "var(--text-tertiary)" }}>
<X size={14} />
</button>
) : null}
</div>
{open && results.length > 0 && (
<ul
className="absolute z-50 mt-1 w-full rounded-lg overflow-hidden max-h-48 overflow-y-auto"
style={{
background: "var(--bg-overlay)",
border: "1px solid var(--border)",
boxShadow: "var(--shadow-lg)",
}}
>
{results.map((r, i) => {
const isPoi = r.type === "poi" && r.raw?.name
const isContact = r._isContact
const primary = isContact ? r.name : isPoi ? r.raw.name : r.name
const secondary = isContact ? (r.address || "") : isPoi ? buildAddress(r) : null
return (
<li
key={`${r.lat}-${r.lon}-${i}`}
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)}
>
<div className="flex items-center gap-2">
<span style={{ color: isContact ? "var(--accent)" : "var(--text-tertiary)" }}>
<CategoryIcon result={r} />
</span>
<span className="truncate flex-1" style={{ color: "var(--text-primary)" }}>
{primary}
</span>
</div>
{secondary && (
<div className="text-[11px] mt-0.5 ml-6 truncate" style={{ color: "var(--text-tertiary)" }}>
{secondary}
</div>
)}
</li>
)
})}
</ul>
)}
</div>
)
}

233
src/components/ManeuverList.jsx
View file

@ -1,13 +1,32 @@
import {
MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft,
MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw,
GitMerge, CornerRightDown, CornerRightUp, Navigation, Mountain, Map, AlertTriangle
GitMerge, CornerRightDown, CornerRightUp, Navigation, Mountain, Map, AlertTriangle,
Compass, ArrowUp, ArrowUpRight, ArrowRight, ArrowDownRight, ArrowDown,
ArrowDownLeft, ArrowLeft, ArrowUpLeft, MapPin
} from 'lucide-react'
import { useStore } from '../store'
function formatDistKm(km) {
const miles = km * 0.621371
if (miles < 0.1) return Math.round(miles * 5280) + ' ft'
/**
* Format distance with commas for feet, one decimal for miles.
* Under 1 mile: "2,640 ft"
* 1+ miles: "1.3 mi"
*/
function formatDistance(distanceM, distanceKm) {
let meters = null
if (distanceM !== undefined && distanceM !== null) {
meters = distanceM
} else if (distanceKm !== undefined && distanceKm !== null) {
meters = distanceKm * 1000
}
if (meters === null) return ''
const miles = meters / 1609.34
if (miles < 1) {
const feet = Math.round(meters * 3.28084)
return feet.toLocaleString() + ' ft'
}
return miles.toFixed(1) + ' mi'
}
@ -18,6 +37,51 @@ function formatTimeMin(minutes) {
return m > 0 ? h + 'h ' + m + 'm' : h + 'h'
}
// Compass arrow icon based on cardinal direction with rotation
function CompassIcon({ cardinal, bearing, size = 16 }) {
// Use bearing to rotate arrow, or fall back to cardinal-based icon
if (bearing !== undefined && bearing !== null) {
return (
<ArrowUp
size={size}
strokeWidth={2}
style={{ transform: `rotate(${bearing}deg)` }}
/>
)
}
const props = { size, strokeWidth: 2 }
const arrowMap = {
'N': ArrowUp,
'NNE': ArrowUpRight,
'NE': ArrowUpRight,
'ENE': ArrowRight,
'E': ArrowRight,
'ESE': ArrowRight,
'SE': ArrowDownRight,
'SSE': ArrowDownRight,
'S': ArrowDown,
'SSW': ArrowDownLeft,
'SW': ArrowDownLeft,
'WSW': ArrowLeft,
'W': ArrowLeft,
'WNW': ArrowLeft,
'NW': ArrowUpLeft,
'NNW': ArrowUpLeft,
}
const Icon = arrowMap[cardinal] || Compass
return <Icon {...props} />
}
// Wilderness maneuver icon
function WildernessIcon({ type, cardinal, bearing, size = 16 }) {
if (type === 'arrival') {
return <MapPin size={size} strokeWidth={1.5} />
}
return <CompassIcon cardinal={cardinal} bearing={bearing} size={size} />
}
// Network maneuver icon (Valhalla types)
function ManeuverIcon({ type }) {
const size = 16
const props = { size, strokeWidth: 1.5 }
@ -40,10 +104,55 @@ function ManeuverIcon({ type }) {
}
}
/**
* Add transport mode prefix to network maneuver instruction.
* "Drive east on..." for auto, "Walk south on..." for foot, "Ride north on..." for mtb
*/
function formatNetworkInstruction(instruction, mode) {
if (!instruction) return ''
// Get verb based on mode
const modeVerbs = {
'auto': 'Drive',
'foot': 'Walk',
'pedestrian': 'Walk',
'mtb': 'Ride',
'bicycle': 'Ride',
'atv': 'Drive',
'vehicle': 'Drive',
}
const verb = modeVerbs[mode] || 'Go'
// Check if instruction starts with a direction verb we should replace
const startsWithVerbs = [
'Turn left', 'Turn right', 'Bear left', 'Bear right',
'Keep left', 'Keep right', 'Continue', 'Head', 'Go',
'Proceed', 'Make a', 'Take a', 'Start', 'Merge', 'Exit'
]
for (const v of startsWithVerbs) {
if (instruction.startsWith(v)) {
// Already has a verb, return as-is (Valhalla instructions are already good)
return instruction
}
}
// If instruction starts with direction (north, south, etc.), prepend verb
const directions = ['north', 'south', 'east', 'west', 'onto', 'on ']
for (const dir of directions) {
if (instruction.toLowerCase().startsWith(dir)) {
return `${verb} ${instruction}`
}
}
return instruction
}
export default function ManeuverList() {
const routeResult = useStore((s) => s.routeResult)
const routeLoading = useStore((s) => s.routeLoading)
const routeError = useStore((s) => s.routeError)
const routeMode = useStore((s) => s.routeMode)
if (routeLoading) {
return (
@ -77,8 +186,25 @@ export default function ManeuverList() {
if (!routeResult?.summary) return null
const summary = routeResult.summary
const networkFeature = routeResult.route?.features?.find(f => f.properties?.segment_type === 'network')
const maneuvers = networkFeature?.properties?.maneuvers || []
const features = routeResult.route?.features || []
const networkMode = summary.network_mode || routeMode || 'foot'
// Extract maneuvers from each segment type
const wildernessStartFeature = features.find(f =>
f.properties?.segment_type === 'wilderness' && f.properties?.segment_position === 'start'
)
const networkFeature = features.find(f => f.properties?.segment_type === 'network')
const wildernessEndFeature = features.find(f =>
f.properties?.segment_type === 'wilderness' && f.properties?.segment_position === 'end'
)
const wildernessStartManeuvers = wildernessStartFeature?.properties?.maneuvers || []
const networkManeuvers = networkFeature?.properties?.maneuvers || []
const wildernessEndManeuvers = wildernessEndFeature?.properties?.maneuvers || []
const hasManeuvers = wildernessStartManeuvers.length > 0 ||
networkManeuvers.length > 0 ||
wildernessEndManeuvers.length > 0
return (
<div className="flex flex-col">
@ -88,7 +214,7 @@ export default function ManeuverList() {
style={{ background: 'var(--bg-overlay)', border: '1px solid var(--border-subtle)' }}
>
<span className="font-mono text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
{formatDistKm(summary.total_distance_km)}
{formatDistance(null, summary.total_distance_km)}
</span>
<span className="font-mono text-sm" style={{ color: 'var(--text-secondary)' }}>
{formatTimeMin(summary.total_effort_minutes)}
@ -102,7 +228,7 @@ export default function ManeuverList() {
<Mountain size={14} style={{ color: '#f97316' }} />
<span style={{ color: 'var(--text-secondary)' }}>Wilderness</span>
<span className="ml-auto font-mono text-xs" style={{ color: 'var(--text-tertiary)' }}>
{formatDistKm(summary.wilderness_distance_km)} / {formatTimeMin(summary.wilderness_effort_minutes)}
{formatDistance(null, summary.wilderness_distance_km)} / {formatTimeMin(summary.wilderness_effort_minutes)}
</span>
</div>
)}
@ -111,7 +237,7 @@ export default function ManeuverList() {
<Map size={14} style={{ color: '#3b82f6' }} />
<span style={{ color: 'var(--text-secondary)' }}>Road/Trail</span>
<span className="ml-auto font-mono text-xs" style={{ color: 'var(--text-tertiary)' }}>
{formatDistKm(summary.network_distance_km)} / {formatTimeMin(summary.network_duration_minutes)}
{formatDistance(null, summary.network_distance_km)} / {formatTimeMin(summary.network_duration_minutes)}
</span>
</div>
)}
@ -136,27 +262,80 @@ export default function ManeuverList() {
)}
{/* Turn-by-turn directions */}
{maneuvers.length > 0 && (
{hasManeuvers && (
<div className="flex flex-col max-h-[40vh] overflow-y-auto">
<div className="text-xs px-2 mb-1" style={{ color: 'var(--text-tertiary)' }}>Directions</div>
{maneuvers.map((man, i) => (
<div
key={i}
className="flex items-start gap-2 px-2 py-2 text-left"
>
<span className="w-5 shrink-0 mt-0.5" style={{ color: 'var(--accent)' }}>
<ManeuverIcon type={man.type} />
</span>
<div className="flex-1 min-w-0">
<p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
{man.instruction}
</p>
<p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
{formatDistKm(man.distance_km)}
</p>
{/* Wilderness start maneuvers */}
{wildernessStartManeuvers.length > 0 && (
<>
<div className="text-[10px] uppercase tracking-wide px-2 py-1 font-medium"
style={{ color: '#f97316', background: 'rgba(249,115,22,0.1)' }}>
Wilderness — On Foot
</div>
</div>
))}
{wildernessStartManeuvers.map((man, i) => (
<div key={`ws-${i}`} className="flex items-start gap-2 px-2 py-2 text-left">
<span className="w-5 shrink-0 mt-0.5" style={{ color: '#f97316' }}>
<WildernessIcon type={man.type} cardinal={man.cardinal} bearing={man.bearing} />
</span>
<div className="flex-1 min-w-0">
<p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
{man.instruction}
</p>
</div>
</div>
))}
</>
)}
{/* Network maneuvers */}
{networkManeuvers.length > 0 && (
<>
{wildernessStartManeuvers.length > 0 && (
<div className="text-[10px] uppercase tracking-wide px-2 py-1 font-medium"
style={{ color: '#3b82f6', background: 'rgba(59,130,246,0.1)' }}>
Road/Trail
</div>
)}
{networkManeuvers.map((man, i) => (
<div key={`net-${i}`} className="flex items-start gap-2 px-2 py-2 text-left">
<span className="w-5 shrink-0 mt-0.5" style={{ color: 'var(--accent)' }}>
<ManeuverIcon type={man.type} />
</span>
<div className="flex-1 min-w-0">
<p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
{formatNetworkInstruction(man.instruction, networkMode)}
</p>
<p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
{formatDistance(null, man.distance_km)}
</p>
</div>
</div>
))}
</>
)}
{/* Wilderness end maneuvers */}
{wildernessEndManeuvers.length > 0 && (
<>
<div className="text-[10px] uppercase tracking-wide px-2 py-1 font-medium"
style={{ color: '#f97316', background: 'rgba(249,115,22,0.1)' }}>
Wilderness — On Foot
</div>
{wildernessEndManeuvers.map((man, i) => (
<div key={`we-${i}`} className="flex items-start gap-2 px-2 py-2 text-left">
<span className="w-5 shrink-0 mt-0.5" style={{ color: '#f97316' }}>
<WildernessIcon type={man.type} cardinal={man.cardinal} bearing={man.bearing} />
</span>
<div className="flex-1 min-w-0">
<p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
{man.instruction}
</p>
</div>
</div>
))}
</>
)}
</div>
)}
</div>

27
src/components/MapView.jsx
View file

@ -1443,6 +1443,7 @@ const MapView = forwardRef(function MapView(_, ref) {
const clearPickingLocationFor = useStore((s) => s.clearPickingLocationFor)
const directionsMode = useStore((s) => s.directionsMode)
const activeDirectionsField = useStore((s) => s.activeDirectionsField)
const pickingRouteField = useStore((s) => s.pickingRouteField)
// Zoom level indicator state
const [zoomLevel, setZoomLevel] = useState(10)
@ -2001,34 +2002,30 @@ const MapView = forwardRef(function MapView(_, ref) {
return
}
// Handle directions mode — click fills the active field
const { directionsMode, activeDirectionsField, setRouteStart, setRouteEnd, setActiveDirectionsField } = useStore.getState()
if (directionsMode && activeDirectionsField) {
// Handle explicit pick-from-map mode for route inputs
const { pickingRouteField, setRouteStart, setRouteEnd, clearPickingRouteField } = useStore.getState()
if (pickingRouteField) {
const { lng, lat } = e.lngLat
map.getCanvas().style.cursor = ''
// Reverse geocode for name
fetchReverse(lat, lng).then((place) => {
const name = place?.name || lat.toFixed(5) + ", " + lng.toFixed(5)
const location = { lat, lon: lng, name, source: "map_click" }
if (activeDirectionsField === "origin") {
if (pickingRouteField === "origin") {
setRouteStart(location)
setActiveDirectionsField("destination")
} else if (activeDirectionsField === "destination") {
} else if (pickingRouteField === "destination") {
setRouteEnd(location)
setActiveDirectionsField(null)
} else if (activeDirectionsField.startsWith("stop-")) {
// Handle intermediate stops - would need more logic
setActiveDirectionsField(null)
}
clearPickingRouteField()
}).catch(() => {
const name = lat.toFixed(5) + ", " + lng.toFixed(5)
const location = { lat, lon: lng, name, source: "map_click" }
if (activeDirectionsField === "origin") {
if (pickingRouteField === "origin") {
setRouteStart(location)
setActiveDirectionsField("destination")
} else if (activeDirectionsField === "destination") {
} else if (pickingRouteField === "destination") {
setRouteEnd(location)
setActiveDirectionsField(null)
}
clearPickingRouteField()
})
return
}
@ -2253,6 +2250,7 @@ const MapView = forwardRef(function MapView(_, ref) {
updateBoundaryRef.current(polygonGeometry)
}
console.log('[TRACE-CLICK] Feature click setSelectedPlace:', { featureLat, featureLon, clickLat: lat, clickLng: lng, name: props.name })
store.setSelectedPlace({
lat: featureLat,
lon: featureLon,
@ -2284,6 +2282,7 @@ const MapView = forwardRef(function MapView(_, ref) {
circleRadiusPx: MARKER_RADIUS_PX,
})
console.log('[TRACE-CLICK] Reticle click setSelectedPlace:', { lat, lng })
store.setSelectedPlace({
lat,
lon: lng,

147
src/components/Panel.jsx
View file

@ -1,5 +1,5 @@
import { useRef, useCallback, useEffect, useState } from 'react'
import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin } from 'lucide-react'
import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin, Target } from 'lucide-react'
import ThemePicker from './ThemePicker'
import { useStore, usePanelState } from '../store'
import { hasFeature } from '../config'
@ -8,6 +8,7 @@ import ManeuverList from './ManeuverList'
import ContactList from './ContactList'
import { PlaceCard } from './PlaceCard'
import DirectionsPanel from './DirectionsPanel'
import PlaceDetail from './PlaceDetail'
const TRAVEL_MODES = [
{ id: 'auto', label: 'Drive', Icon: Car },
@ -34,6 +35,8 @@ export default function Panel({ onClearRoute }) {
const routeLoading = useStore((s) => s.routeLoading)
const setRouteMode = useStore((s) => s.setRouteMode)
const setBoundaryMode = useStore((s) => s.setBoundaryMode)
const pickingRouteField = useStore((s) => s.pickingRouteField)
const setPickingRouteField = useStore((s) => s.setPickingRouteField)
const clearRoute = useStore((s) => s.clearRoute)
const sheetState = useStore((s) => s.sheetState)
const setSheetState = useStore((s) => s.setSheetState)
@ -89,29 +92,20 @@ export default function Panel({ onClearRoute }) {
const showRouteSection = hasRoutePoints || routeResult || routeLoading
const showEmptyState = panelState === 'IDLE' && !hasRoutePoints
// Show side panel place card when building route (either mode) and place is selected
const showSidePlaceCard = (directionsMode || showRouteSection) && selectedPlace
const routesContent = directionsMode ? (
<>
<DirectionsPanel onClose={() => {
setDirectionsMode(false)
onClearRoute?.()
}} />
{/* Show place card below directions when clicking map during routing */}
{selectedPlace && (
<div className="mt-3 border-t pt-3" style={{ borderColor: "var(--border)" }}>
<PlaceCard
place={selectedPlace}
variant="preview"
expanded={true}
onClose={clearSelectedPlace}
/>
</div>
)}
</>
// Directions mode: just the directions panel, place card is shown in side panel
<DirectionsPanel onClose={() => {
setDirectionsMode(false)
onClearRoute?.()
}} />
) : (
<>
<SearchBar />
{showPreviewCard && selectedPlace && (
{showPreviewCard && selectedPlace && !showRouteSection && (
<div className="mt-3">
<PlaceCard
place={selectedPlace}
@ -140,15 +134,31 @@ export default function Panel({ onClearRoute }) {
<div className="flex flex-col gap-1 mb-3 text-xs">
<div className="flex items-center gap-2">
<MapPin size={12} style={{ color: '#22c55e' }} />
<span style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
{routeStart?.name || 'Right-click to set start'}
<span className="flex-1" style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
{routeStart?.name || 'Click pin to pick start'}
</span>
<button
onClick={() => setPickingRouteField('origin')}
className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
style={{ color: pickingRouteField === 'origin' ? 'var(--accent)' : 'var(--text-tertiary)' }}
title="Pick start from map"
>
<Target size={14} />
</button>
</div>
<div className="flex items-center gap-2">
<MapPin size={12} style={{ color: '#ef4444' }} />
<span style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
{routeEnd?.name || 'Right-click to set destination'}
<span className="flex-1" style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
{routeEnd?.name || 'Click pin to pick destination'}
</span>
<button
onClick={() => setPickingRouteField('destination')}
className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
style={{ color: pickingRouteField === 'destination' ? 'var(--accent)' : 'var(--text-tertiary)' }}
title="Pick destination from map"
>
<Target size={14} />
</button>
</div>
</div>
@ -263,19 +273,85 @@ export default function Panel({ onClearRoute }) {
</div>
)
// Side panel for place card during directions mode (desktop only)
const sidePlaceCardPanel = showSidePlaceCard && !isMobile && (
<div
className="absolute top-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
style={{
left: '400px',
width: '300px',
background: 'var(--bg-raised)',
borderRight: '1px solid var(--border)',
boxShadow: 'inset 4px 0 8px -4px rgba(0,0,0,0.15)',
}}
>
<div className="flex items-center justify-between mb-3">
<span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
{selectedPlace?.name || 'Place Info'}
</span>
<button
onClick={clearSelectedPlace}
className="p-1.5 rounded-lg hover:bg-[var(--bg-overlay)] transition-colors"
title="Close"
>
<X size={16} style={{ color: 'var(--text-tertiary)' }} />
</button>
</div>
{/* Use PlaceCard in compact preview mode */}
<PlaceCard
place={selectedPlace}
variant="preview"
expanded={true}
onClose={clearSelectedPlace}
/>
</div>
)
// Mobile overlay for place card during directions mode
const mobilePlaceCardOverlay = showSidePlaceCard && isMobile && (
<div
className="absolute inset-0 z-20 flex flex-col rounded-t-2xl"
style={{ background: 'var(--bg-raised)' }}
>
<div className="flex items-center justify-between p-4 border-b" style={{ borderColor: 'var(--border)' }}>
<span className="text-sm font-medium truncate pr-2" style={{ color: 'var(--text-primary)' }}>
{selectedPlace?.name || 'Place Info'}
</span>
<button
onClick={clearSelectedPlace}
className="p-1.5 rounded-lg hover:bg-[var(--bg-overlay)] transition-colors shrink-0"
title="Close"
>
<X size={16} style={{ color: 'var(--text-tertiary)' }} />
</button>
</div>
<div className="flex-1 overflow-y-auto p-4">
<PlaceCard
place={selectedPlace}
variant="preview"
expanded={true}
onClose={clearSelectedPlace}
/>
</div>
</div>
)
if (!isMobile) {
return (
<div
className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
style={{
width: '400px',
background: 'var(--bg-raised)',
borderRight: '1px solid var(--border)',
}}
>
{header}
{content}
</div>
<>
<div
className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
style={{
width: '400px',
background: 'var(--bg-raised)',
borderRight: '1px solid var(--border)',
}}
>
{header}
{content}
</div>
{sidePlaceCardPanel}
</>
)
}
@ -308,9 +384,10 @@ export default function Panel({ onClearRoute }) {
</div>
{sheetState !== 'collapsed' && (
<div className="px-4 pb-4 overflow-y-auto overflow-x-hidden h-[calc(100%-2rem)]" style={{ paddingBottom: 'max(1rem, env(safe-area-inset-bottom))' }}>
<div className="px-4 pb-4 overflow-y-auto overflow-x-hidden h-[calc(100%-2rem)] relative" style={{ paddingBottom: 'max(1rem, env(safe-area-inset-bottom))' }}>
{header}
{content}
{mobilePlaceCardOverlay}
</div>
)}
</div>

1
src/components/PlaceCard.jsx
View file

@ -476,6 +476,7 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
const savedContact = contacts.find((c) => c.lat === place.lat && c.lon === place.lon)
const handleDirections = () => {
console.log('[TRACE-DIRECTIONS] PlaceCard handleDirections, place:', { lat: place?.lat, lon: place?.lon, name: place?.name })
// No toast - empty origin slot is the visual prompt
startDirections(place)
}

10
src/store.js
View file

@ -72,6 +72,10 @@ export const useStore = create((set, get) => ({
// This is the SINGLE routing function for everything
computeRoute: async () => {
const { routeStart, routeEnd, routeMode, boundaryMode, _updateRouteDisplay } = get()
console.log('[TRACE-ROUTE] computeRoute called with:', {
startLat: routeStart?.lat, startLon: routeStart?.lon, startName: routeStart?.name,
endLat: routeEnd?.lat, endLon: routeEnd?.lon, endName: routeEnd?.name
})
// Need both endpoints to route
if (!routeStart || !routeEnd) return
@ -175,6 +179,7 @@ export const useStore = create((set, get) => ({
// Master startDirections - enters directions mode with destination pre-filled
startDirections: (place) => {
console.log('[TRACE-STORE] startDirections received place:', { lat: place?.lat, lon: place?.lon, name: place?.name })
const { geoPermission, userLocation, clearRoute } = get()
clearRoute()
@ -229,7 +234,8 @@ export const useStore = create((set, get) => ({
panelOpen: true,
autocompleteOpen: false,
directionsMode: false, // true when directions panel is active
activeDirectionsField: null, // 'origin' | 'destination' | 'stop-N' | null (for map click targeting)
activeDirectionsField: null, // 'origin' | 'destination' | 'stop-N' | null (for input focus styling)
pickingRouteField: null, // 'origin' | 'destination' | null (explicit pick-from-map mode)
theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied)
themeOverride: null, // null | 'dark' | 'light' (manual override, persisted)
viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map', // 'map' | 'satellite' | 'hybrid'
@ -243,6 +249,8 @@ export const useStore = create((set, get) => ({
setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
setDirectionsMode: (mode) => set({ directionsMode: mode, activeDirectionsField: mode ? 'origin' : null }),
setActiveDirectionsField: (field) => set({ activeDirectionsField: field }),
setPickingRouteField: (field) => set({ pickingRouteField: field }),
clearPickingRouteField: () => set({ pickingRouteField: null }),
setTheme: (theme) => set({ theme }),
setThemeOverride: (override) => {
set({ themeOverride: override })