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: unified routing UI with wilderness + network segments

Browse source 
- Single routing system (removed duplicate Valhalla-only flow)
- Unified radial menu: From here, To here, Clear, Save, Measure
- Removed "Offroute" section from panel (single directions display)
- Better error messages without technical "Offroute" prefix
- ManeuverList shows wilderness + network breakdown
- PlaceCard integration for previews

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Matt 2026-05-08 15:05:52 +00:00
commit d6aa125215
6 changed files with 878 additions and 938 deletions
Download patch file Download diff file Expand all files Collapse all files

79
src/App.jsx
View file

@ -1,8 +1,7 @@
import { useEffect, useRef, useCallback } from 'react' import { useEffect, useRef, useCallback } from 'react'
import { useStore } from './store' import { useStore } from './store'
import { useTheme } from './hooks/useTheme' import { useTheme } from './hooks/useTheme'
import { requestRoute, fetchAuthState } from './api' import { fetchAuthState } from './api'
import { decodePolyline } from './utils/decode'
import MapView from './components/MapView' import MapView from './components/MapView'
import Panel from './components/Panel' import Panel from './components/Panel'
@ -12,20 +11,10 @@ import LocateButton from './components/LocateButton'
export default function App() { export default function App() {
const mapViewRef = useRef(null) const mapViewRef = useRef(null)
const routeDebounceRef = useRef(null)
// Initialize theme system // Initialize theme system
useTheme() useTheme()
const stops = useStore((s) => s.stops)
const mode = useStore((s) => s.mode)
const route = useStore((s) => s.route)
const gpsOrigin = useStore((s) => s.gpsOrigin)
const geoPermission = useStore((s) => s.geoPermission)
const setRoute = useStore((s) => s.setRoute)
const setRouteLoading = useStore((s) => s.setRouteLoading)
const setRouteError = useStore((s) => s.setRouteError)
const clearRoute = useStore((s) => s.clearRoute)
const setAuth = useStore((s) => s.setAuth) const setAuth = useStore((s) => s.setAuth)
// Initialize auth state on app load (single fetch, no polling) // Initialize auth state on app load (single fetch, no polling)
@ -33,70 +22,18 @@ export default function App() {
fetchAuthState().then(setAuth) fetchAuthState().then(setAuth)
}, [setAuth]) }, [setAuth])
// Fetch route when stops, mode, gpsOrigin, or geoPermission change (debounced 500ms) // Handle clear route from panel
useEffect(() => { const handleClearRoute = useCallback(() => {
if (routeDebounceRef.current) clearTimeout(routeDebounceRef.current) mapViewRef.current?.clearRoute?.()
}, [])
routeDebounceRef.current = setTimeout(async () => {
const { userLocation } = useStore.getState()
let effective = stops.map((s) => ({ lat: s.lat, lon: s.lon }))
if (gpsOrigin && geoPermission === 'granted' && userLocation) {
effective = [{ lat: userLocation.lat, lon: userLocation.lon }, ...effective]
}
if (effective.length < 2) {
clearRoute()
return
}
setRouteLoading(true)
try {
const data = await requestRoute(effective, mode)
if (data.trip) {
setRoute(data.trip)
} else {
setRouteError('No route returned')
}
} catch (e) {
setRouteError(e.message || 'Route request failed')
} finally {
setRouteLoading(false)
}
}, 500)
return () => {
if (routeDebounceRef.current) clearTimeout(routeDebounceRef.current)
}
}, [stops, mode, gpsOrigin, geoPermission, clearRoute, setRoute, setRouteLoading, setRouteError])
// Handle maneuver click
const handleManeuverClick = useCallback(
(maneuver) => {
if (!route || !route.legs) return
const legIdx = maneuver._legIndex || 0
const leg = route.legs[legIdx]
if (!leg || !leg.shape) return
const coords = decodePolyline(leg.shape, 6)
const idx = maneuver.begin_shape_index
if (idx >= 0 && idx < coords.length) {
const [lng, lat] = coords[idx]
mapViewRef.current?.flyTo(lat, lng, 15)
}
},
[route]
)
return ( return (
<div className="relative w-screen h-screen overflow-hidden" style={{ background: 'var(--bg-base)' }}> <div className="relative w-screen h-screen overflow-hidden" style={{ background: 'var(--bg-base)' }}>
<MapView ref={mapViewRef} /> <MapView ref={mapViewRef} />
<Panel onManeuverClick={handleManeuverClick} /> <Panel onClearRoute={handleClearRoute} />
<ContactModal /> <ContactModal />
{/* Bottom-right map controls */} {/* Bottom-right map controls */}
<div className="map-controls-br"> <div className="map-controls-br">
<LocateButton mapRef={mapViewRef} /> <LocateButton mapRef={mapViewRef} />

66
src/api.js
View file

@ -321,3 +321,69 @@ export async function fetchAuthState() {
return { authenticated: false, username: null } return { authenticated: false, username: null }
} }
} }
// ── Offroute API ──
const OFFROUTE_URL = "/api/offroute"
const MVUM_URL = "/api/mvum"
/**
* Request an offroute route from the pathfinder API.
* @param {object} start - { lat, lon }
* @param {object} end - { lat, lon }
* @param {string} mode - foot | mtb | atv | vehicle
* @param {string} boundaryMode - strict | pragmatic | emergency
* @returns {Promise<object>} Offroute response with GeoJSON route
*/
export async function requestOffroute(start, end, mode = "foot", boundaryMode = "strict") {
const body = {
start: [start.lat, start.lon],
end: [end.lat, end.lon],
mode,
boundary_mode: boundaryMode,
}
const controller = new AbortController()
const timeout = setTimeout(() => controller.abort(), 120000) // 2 min timeout for complex routes
try {
const resp = await fetch(OFFROUTE_URL, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
signal: controller.signal,
})
if (!resp.ok) {
const errBody = await resp.json().catch(() => ({}))
throw new Error(errBody.message || 'Could not find a route. Try a different start point or mode.')
}
return resp.json()
} finally {
clearTimeout(timeout)
}
}
/**
* Fetch MVUM (Motor Vehicle Use Map) info for a location.
* @param {number} lat
* @param {number} lon
* @param {number} radius - Search radius in meters
* @returns {Promise<object|null>} MVUM feature info or null
*/
export async function fetchMvumInfo(lat, lon, radius = 500) {
try {
const params = new URLSearchParams({
lat: String(lat),
lon: String(lon),
radius: String(radius),
})
const resp = await fetch(`${MVUM_URL}?${params}`, { signal: AbortSignal.timeout(5000) })
if (!resp.ok) return null
const data = await resp.json()
return data.feature || null
} catch {
return null
}
}

304
src/components/ManeuverList.jsx
View file

@ -1,140 +1,164 @@
import { import {
MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft, MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft,
MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw, MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw,
GitMerge, CornerRightDown, CornerRightUp, Navigation GitMerge, CornerRightDown, CornerRightUp, Navigation, Mountain, Map, AlertTriangle
} from 'lucide-react' } from 'lucide-react'
import { useStore } from '../store' import { useStore } from '../store'
function formatTime(seconds) { function formatDistKm(km) {
if (seconds < 60) return `${Math.round(seconds)}s` const miles = km * 0.621371
if (seconds < 3600) return `${Math.round(seconds / 60)} min` if (miles < 0.1) return Math.round(miles * 5280) + ' ft'
const h = Math.floor(seconds / 3600) return miles.toFixed(1) + ' mi'
const m = Math.round((seconds % 3600) / 60) }
return m > 0 ? `${h}h ${m}m` : `${h}h`
} function formatTimeMin(minutes) {
if (minutes < 60) return Math.round(minutes) + ' min'
function formatDist(miles) { const h = Math.floor(minutes / 60)
if (miles < 0.1) return `${Math.round(miles * 5280)} ft` const m = Math.round(minutes % 60)
return `${miles.toFixed(1)} mi` return m > 0 ? h + 'h ' + m + 'm' : h + 'h'
} }
function ManeuverIcon({ type }) { function ManeuverIcon({ type }) {
const size = 16 const size = 16
const props = { size, strokeWidth: 1.5 } const props = { size, strokeWidth: 1.5 }
switch (type) { switch (type) {
case 0: return <MoveRight {...props} /> case 0: return <MoveRight {...props} />
case 1: return <MoveUpRight {...props} /> case 1: return <MoveUpRight {...props} />
case 2: return <CornerUpRight {...props} /> case 2: return <CornerUpRight {...props} />
case 3: return <MoveDownRight {...props} /> case 3: return <MoveDownRight {...props} />
case 4: case 5: return <CornerUpLeft {...props} /> case 4: case 5: return <CornerUpLeft {...props} />
case 6: return <MoveDownLeft {...props} /> case 6: return <MoveDownLeft {...props} />
case 7: return <CornerUpLeft {...props} /> case 7: return <CornerUpLeft {...props} />
case 8: return <MoveUpLeft {...props} /> case 8: return <MoveUpLeft {...props} />
case 9: return <Navigation {...props} /> case 9: return <Navigation {...props} />
case 10: case 11: case 12: return <CircleDot {...props} /> case 10: case 11: case 12: return <CircleDot {...props} />
case 15: case 16: return <RotateCw {...props} /> case 15: case 16: return <RotateCw {...props} />
case 24: return <GitMerge {...props} /> case 24: return <GitMerge {...props} />
case 25: return <CornerRightUp {...props} /> case 25: return <CornerRightUp {...props} />
case 26: return <CornerRightDown {...props} /> case 26: return <CornerRightDown {...props} />
default: return <MoveRight {...props} /> default: return <MoveRight {...props} />
} }
} }
export default function ManeuverList({ onManeuverClick }) { export default function ManeuverList() {
const route = useStore((s) => s.route) const routeResult = useStore((s) => s.routeResult)
const routeLoading = useStore((s) => s.routeLoading) const routeLoading = useStore((s) => s.routeLoading)
const routeError = useStore((s) => s.routeError) const routeError = useStore((s) => s.routeError)
if (routeLoading) { if (routeLoading) {
return ( return (
<div className="flex items-center justify-center py-4"> <div className="flex items-center justify-center py-4">
<div <div
className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin" className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
style={{ borderColor: 'var(--accent)', borderTopColor: 'transparent' }} style={{ borderColor: 'var(--accent)', borderTopColor: 'transparent' }}
/> />
<span className="ml-2 text-sm" style={{ color: 'var(--text-secondary)' }}> <span className="ml-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
Calculating route... Calculating route...
</span> </span>
</div> </div>
) )
} }
if (routeError) { if (routeError) {
return ( return (
<div <div
className="px-3 py-2 rounded text-sm" className="px-3 py-2 rounded text-sm"
style={{ style={{
background: 'color-mix(in srgb, var(--status-danger) 15%, transparent)', background: 'color-mix(in srgb, var(--status-danger) 15%, transparent)',
border: '1px solid var(--status-danger)', border: '1px solid var(--status-danger)',
color: 'var(--status-danger)', color: 'var(--status-danger)',
}} }}
> >
{routeError} {routeError}
</div> </div>
) )
} }
if (!route || !route.legs) return null if (!routeResult?.summary) return null
const totalTime = route.summary?.time || 0 const summary = routeResult.summary
const totalDist = route.summary?.length || 0 const networkFeature = routeResult.route?.features?.find(f => f.properties?.segment_type === 'network')
const maneuvers = networkFeature?.properties?.maneuvers || []
const allManeuvers = []
let timeRemaining = totalTime return (
<div className="flex flex-col">
for (let legIdx = 0; legIdx < route.legs.length; legIdx++) { {/* Total summary */}
const leg = route.legs[legIdx] <div
for (const man of leg.maneuvers || []) { className="flex items-center justify-between px-3 py-2 rounded mb-2"
allManeuvers.push({ ...man, _legIndex: legIdx, timeRemaining }) style={{ background: 'var(--bg-overlay)', border: '1px solid var(--border-subtle)' }}
timeRemaining -= man.time || 0 >
} <span className="font-mono text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
} {formatDistKm(summary.total_distance_km)}
</span>
return ( <span className="font-mono text-sm" style={{ color: 'var(--text-secondary)' }}>
<div className="flex flex-col"> {formatTimeMin(summary.total_effort_minutes)}
{/* Route summary */} </span>
<div </div>
className="flex items-center justify-between px-3 py-2 rounded mb-2"
style={{ background: 'var(--bg-overlay)', border: '1px solid var(--border-subtle)' }} {/* Segment breakdown */}
> <div className="flex flex-col gap-1 px-2 mb-2">
<span className="font-mono text-sm font-medium" style={{ color: 'var(--text-primary)' }}> {summary.wilderness_distance_km > 0 && (
{formatDist(totalDist)} <div className="flex items-center gap-2 text-sm">
</span> <Mountain size={14} style={{ color: '#f97316' }} />
<span className="font-mono text-sm" style={{ color: 'var(--text-secondary)' }}> <span style={{ color: 'var(--text-secondary)' }}>Wilderness</span>
{formatTime(totalTime)} <span className="ml-auto font-mono text-xs" style={{ color: 'var(--text-tertiary)' }}>
</span> {formatDistKm(summary.wilderness_distance_km)} / {formatTimeMin(summary.wilderness_effort_minutes)}
</div> </span>
</div>
{/* Maneuver steps */} )}
<div className="flex flex-col max-h-[50vh] overflow-y-auto"> {summary.network_distance_km > 0 && (
{allManeuvers.map((man, i) => ( <div className="flex items-center gap-2 text-sm">
<button <Map size={14} style={{ color: '#3b82f6' }} />
key={i} <span style={{ color: 'var(--text-secondary)' }}>Road/Trail</span>
onClick={() => { <span className="ml-auto font-mono text-xs" style={{ color: 'var(--text-tertiary)' }}>
if (man.begin_shape_index != null && onManeuverClick) onManeuverClick(man) {formatDistKm(summary.network_distance_km)} / {formatTimeMin(summary.network_duration_minutes)}
}} </span>
className="flex items-start gap-2 px-2 py-2 text-left rounded transition-colors duration-75" </div>
style={{ '--hover-bg': 'var(--bg-overlay)' }} )}
onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-overlay)'} </div>
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
> {/* Warnings */}
<span className="w-5 shrink-0 mt-0.5" style={{ color: 'var(--accent)' }}> {(summary.barrier_crossings > 0 || summary.mvum_closed_crossings > 0) && (
<ManeuverIcon type={man.type} /> <div className="px-2 mb-2 flex flex-col gap-1">
</span> {summary.barrier_crossings > 0 && (
<div className="flex-1 min-w-0"> <div className="flex items-center gap-1 text-xs" style={{ color: 'var(--status-warning)' }}>
<p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}> <AlertTriangle size={12} />
{man.instruction || man.verbal_pre_transition_instruction || 'Continue'} <span>{summary.barrier_crossings} barrier crossing{summary.barrier_crossings > 1 ? 's' : ''}</span>
</p> </div>
<p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}> )}
{formatDist(man.length || 0)} {summary.mvum_closed_crossings > 0 && (
{man.timeRemaining > 0 && ( <div className="flex items-center gap-1 text-xs" style={{ color: 'var(--status-warning)' }}>
<span className="ml-2">{formatTime(man.timeRemaining)} left</span> <AlertTriangle size={12} />
)} <span>{summary.mvum_closed_crossings} MVUM closure{summary.mvum_closed_crossings > 1 ? 's' : ''}</span>
</p> </div>
</div> )}
</button> </div>
))} )}
</div>
</div> {/* Turn-by-turn directions */}
) {maneuvers.length > 0 && (
} <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>
</div>
</div>
))}
</div>
)}
</div>
)
}

444
src/components/MapView.jsx
View file

@ -6,9 +6,9 @@ import { layers, namedTheme } from 'protomaps-themes-base'
import { getTheme, getThemeSprite, getOverlayConfig } from '../themes/registry' import { getTheme, getThemeSprite, getOverlayConfig } from '../themes/registry'
import { useStore } from '../store' import { useStore } from '../store'
import { decodePolyline } from '../utils/decode' import { decodePolyline } from '../utils/decode'
import { fetchReverse } from '../api' import { fetchReverse, requestOffroute } from '../api'
import { getConfig, hasFeature } from '../config' import { getConfig, hasFeature } from '../config'
import { MapPin, Navigation, ArrowUpRight, ArrowDownLeft, Plus, Star, Ruler, X } from 'lucide-react' import { MapPin, Navigation, ArrowUpRight, ArrowDownLeft, Star, Ruler, X, Trash2 } from 'lucide-react'
import RadialMenu from './RadialMenu' import RadialMenu from './RadialMenu'
import useContextMenu from '../hooks/useContextMenu' import useContextMenu from '../hooks/useContextMenu'
import toast from 'react-hot-toast' import toast from 'react-hot-toast'
@ -27,6 +27,10 @@ const BOUNDARY_SOURCE = 'boundary-source'
const BOUNDARY_LAYER = 'boundary-layer' const BOUNDARY_LAYER = 'boundary-layer'
const STATE_BOUNDARIES_LAYER = 'state-boundaries-z4-z7' const STATE_BOUNDARIES_LAYER = 'state-boundaries-z4-z7'
const ROUTE_LAYER_PREFIX = 'route-layer-' const ROUTE_LAYER_PREFIX = 'route-layer-'
const OFFROUTE_SOURCE = 'offroute-source'
const OFFROUTE_WILDERNESS_LAYER = 'offroute-wilderness'
const OFFROUTE_NETWORK_LAYER = 'offroute-network'
const OFFROUTE_MARKERS_LAYER = 'offroute-markers'
const HILLSHADE_SOURCE = 'hillshade-dem' const HILLSHADE_SOURCE = 'hillshade-dem'
const HILLSHADE_LAYER = 'hillshade-layer' const HILLSHADE_LAYER = 'hillshade-layer'
const TRAFFIC_SOURCE = 'traffic-tiles' const TRAFFIC_SOURCE = 'traffic-tiles'
@ -1122,6 +1126,7 @@ function isProtectedLayer(id) {
return id.startsWith('public-lands') || return id.startsWith('public-lands') ||
id.startsWith('boundary') || id.startsWith('boundary') ||
id.startsWith('route') || id.startsWith('route') ||
id.startsWith('offroute') ||
id.startsWith('measure') || id.startsWith('measure') ||
id.startsWith('contour') || id.startsWith('contour') ||
id.startsWith('usfs') || id.startsWith('usfs') ||
@ -1327,6 +1332,83 @@ function removeStateBoundaries(map) {
} }
} }
/** Clear offroute display layers */
function clearRouteDisplay(map) {
if (!map) return
if (map.getLayer(OFFROUTE_WILDERNESS_LAYER)) map.removeLayer(OFFROUTE_WILDERNESS_LAYER)
if (map.getLayer(OFFROUTE_NETWORK_LAYER)) map.removeLayer(OFFROUTE_NETWORK_LAYER)
if (map.getLayer(OFFROUTE_MARKERS_LAYER)) map.removeLayer(OFFROUTE_MARKERS_LAYER)
if (map.getSource(OFFROUTE_SOURCE)) map.removeSource(OFFROUTE_SOURCE)
}
/** Update offroute display with route GeoJSON */
function updateRouteDisplay(map, routeGeojson) {
if (!map || !routeGeojson) return
// Clear existing layers
clearRouteDisplay(map)
// Add source with route features
map.addSource(OFFROUTE_SOURCE, {
type: "geojson",
data: routeGeojson,
})
// Find first symbol layer for proper z-ordering
let beforeId = undefined
for (const layer of map.getStyle().layers) {
if (layer.type === "symbol") {
beforeId = layer.id
break
}
}
// Wilderness segment - dashed orange line
map.addLayer({
id: OFFROUTE_WILDERNESS_LAYER,
type: "line",
source: OFFROUTE_SOURCE,
filter: ["==", ["get", "segment_type"], "wilderness"],
layout: { "line-join": "round", "line-cap": "round" },
paint: {
"line-color": "#f97316", // orange-500
"line-width": 4,
"line-opacity": 0.9,
"line-dasharray": [8, 4],
},
}, beforeId)
// Network segment - solid blue line
map.addLayer({
id: OFFROUTE_NETWORK_LAYER,
type: "line",
source: OFFROUTE_SOURCE,
filter: ["==", ["get", "segment_type"], "network"],
layout: { "line-join": "round", "line-cap": "round" },
paint: {
"line-color": "#3b82f6", // blue-500
"line-width": 5,
"line-opacity": 0.85,
},
}, beforeId)
// Fit bounds to route
const features = routeGeojson.features || []
const allCoords = features
.filter(f => f.geometry?.coordinates)
.flatMap(f => f.geometry.coordinates)
if (allCoords.length > 0) {
const bounds = allCoords.reduce(
(b, c) => b.extend(c),
new maplibregl.LngLatBounds(allCoords[0], allCoords[0])
)
const leftPad = 420
map.fitBounds(bounds, { padding: { top: 60, bottom: 60, left: leftPad, right: 60 } })
}
}
const MapView = forwardRef(function MapView(_, ref) { const MapView = forwardRef(function MapView(_, ref) {
const mapRef = useRef(null) const mapRef = useRef(null)
const mapInstance = useRef(null) const mapInstance = useRef(null)
@ -1348,14 +1430,11 @@ const MapView = forwardRef(function MapView(_, ref) {
const measuringRef = useRef({ active: false, points: [] }) const measuringRef = useRef({ active: false, points: [] })
const measureLabelsRef = useRef([]) // HTML label elements const measureLabelsRef = useRef([]) // HTML label elements
const stops = useStore((s) => s.stops)
const route = useStore((s) => s.route)
const theme = useStore((s) => s.theme) const theme = useStore((s) => s.theme)
const selectedPlace = useStore((s) => s.selectedPlace) const selectedPlace = useStore((s) => s.selectedPlace)
const clickMarker = useStore((s) => s.clickMarker) const clickMarker = useStore((s) => s.clickMarker)
const setClickMarker = useStore((s) => s.setClickMarker) const setClickMarker = useStore((s) => s.setClickMarker)
const clearClickMarker = useStore((s) => s.clearClickMarker) const clearClickMarker = useStore((s) => s.clearClickMarker)
const gpsOrigin = useStore((s) => s.gpsOrigin)
const geoPermission = useStore((s) => s.geoPermission) const geoPermission = useStore((s) => s.geoPermission)
const setSheetState = useStore((s) => s.setSheetState) const setSheetState = useStore((s) => s.setSheetState)
const setMapCenter = useStore((s) => s.setMapCenter) const setMapCenter = useStore((s) => s.setMapCenter)
@ -1578,96 +1657,95 @@ const MapView = forwardRef(function MapView(_, ref) {
updateMeasureLabels(newPoints) updateMeasureLabels(newPoints)
} }
const radialWedges = [ const radialWedges = [
{ {
id: "directions-to", id: "to-here",
label: "To here", label: "To here",
icon: ArrowDownLeft, icon: ArrowDownLeft,
onSelect: () => { onSelect: () => {
setRadialMenu((m) => ({ ...m, open: false })) setRadialMenu((m) => ({ ...m, open: false }))
const place = { const place = {
lat: radialMenu.lat, lat: radialMenu.lat,
lon: radialMenu.lon, lon: radialMenu.lon,
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5), name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
source: "radial_menu", }
matchCode: null, const { routeStart, setRouteEnd, setRouteLoading, setRouteResult, setRouteError, routeMode, boundaryMode } = useStore.getState()
} setRouteEnd(place)
useStore.getState().startDirections(place) if (routeStart) {
}, setRouteLoading(true)
}, requestOffroute(routeStart, place, routeMode, boundaryMode)
{ .then((data) => {
id: "directions-from", if (data.status === "ok" && data.route) {
label: "From here", setRouteResult(data)
icon: ArrowUpRight, updateRouteDisplay(mapInstance.current, data.route)
onSelect: () => { } else {
setRadialMenu((m) => ({ ...m, open: false })) setRouteError(data.error || "No route found")
const { clearStops, addStop } = useStore.getState() }
clearStops() })
const place = { .catch((e) => setRouteError(e.message))
lat: radialMenu.lat, .finally(() => setRouteLoading(false))
lon: radialMenu.lon, } else {
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5), toast("Set starting point first")
source: "radial_menu", }
matchCode: null, },
} },
addStop(place) {
useStore.setState({ gpsOrigin: false }) id: "from-here",
}, label: "From here",
}, icon: ArrowUpRight,
{ onSelect: () => {
id: "add-stop", setRadialMenu((m) => ({ ...m, open: false }))
label: "Add stop", const place = {
icon: Plus, lat: radialMenu.lat,
onSelect: () => { lon: radialMenu.lon,
setRadialMenu((m) => ({ ...m, open: false })) name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
const { stops, addStop, clearStops } = useStore.getState() }
const place = { const { clearRoute, setRouteStart } = useStore.getState()
lat: radialMenu.lat, clearRoute()
lon: radialMenu.lon, clearRouteDisplay(mapInstance.current)
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5), setRouteStart(place)
source: "radial_menu", toast("Now tap destination")
matchCode: null, },
} },
if (stops.length === 0) { {
addStop(place) id: "clear-route",
useStore.setState({ gpsOrigin: false }) label: "Clear",
} else { icon: Trash2,
const success = addStop(place) onSelect: () => {
if (!success) { setRadialMenu((m) => ({ ...m, open: false }))
toast("Maximum 10 stops reached") useStore.getState().clearRoute()
} clearRouteDisplay(mapInstance.current)
} },
}, },
}, {
{ id: "save-place",
id: "save-place", label: "Save",
label: "Save", icon: Star,
icon: Star, requiresAuth: true,
requiresAuth: true, onSelect: () => {
onSelect: () => { setRadialMenu((m) => ({ ...m, open: false }))
setRadialMenu((m) => ({ ...m, open: false })) const { auth, setEditingContact } = useStore.getState()
const { auth, setEditingContact } = useStore.getState() if (auth.authenticated) {
if (auth.authenticated) { setEditingContact({
setEditingContact({ label: "",
label: "", lat: radialMenu.lat,
lat: radialMenu.lat, lon: radialMenu.lon,
lon: radialMenu.lon, })
}) } else {
} else { toast("Log in to save places")
toast("Log in to save places") }
} },
}, },
}, {
{ id: "measure",
id: "measure", label: "Measure",
label: "Measure", icon: Ruler,
icon: Ruler, onSelect: () => {
onSelect: () => { setRadialMenu((m) => ({ ...m, open: false }))
setRadialMenu((m) => ({ ...m, open: false })) startMeasuring(radialMenu.lat, radialMenu.lon)
startMeasuring(radialMenu.lat, radialMenu.lon) },
}, },
}, ]
]
// Context menu trigger handler // Context menu trigger handler
const handleContextMenuTrigger = ({ x, y }) => { const handleContextMenuTrigger = ({ x, y }) => {
const map = mapInstance.current const map = mapInstance.current
@ -1805,6 +1883,14 @@ const MapView = forwardRef(function MapView(_, ref) {
updateSatellitePaint(map, currentThemeRef.current) updateSatellitePaint(map, currentThemeRef.current)
}, },
// Clear offroute route from map
clearRoute() {
const map = mapInstance.current
if (!map) return
clearRouteDisplay(map)
useStore.getState().clearRoute()
},
})) }))
// Initialize map // Initialize map
@ -2464,10 +2550,8 @@ const MapView = forwardRef(function MapView(_, ref) {
originalPaintValues = {} originalPaintValues = {}
// Restore view // Restore view
map.jumpTo({ center, zoom, bearing, pitch }) const currentRoute = useStore.getState().routeResult
// Re-render route if exists if (currentRoute?.route) updateRouteDisplay(map, currentRoute.route)
const currentRoute = useStore.getState().route
if (currentRoute) updateRoute(map, currentRoute)
}) })
}, [theme]) }, [theme])
@ -2560,168 +2644,6 @@ const MapView = forwardRef(function MapView(_, ref) {
return () => document.removeEventListener('keydown', handleKeyDown) return () => document.removeEventListener('keydown', handleKeyDown)
}, [selectedPlace]) }, [selectedPlace])
// Update route polyline when route changes
useEffect(() => {
const map = mapInstance.current
if (!map) return
if (!map.isStyleLoaded()) {
const handler = () => updateRoute(map, route)
map.once('idle', handler)
return () => map.off('idle', handler)
}
updateRoute(map, route)
}, [route])
function updateRoute(map, routeData) {
if (!map) return
// Remove old route layers
const style = map.getStyle()
if (style) {
for (const layer of style.layers) {
if (layer.id.startsWith(ROUTE_LAYER_PREFIX)) {
map.removeLayer(layer.id)
}
}
}
if (!routeData || !routeData.legs) {
if (map.getSource(ROUTE_SOURCE)) {
map.getSource(ROUTE_SOURCE).setData({ type: 'FeatureCollection', features: [] })
}
return
}
const features = []
for (let i = 0; i < routeData.legs.length; i++) {
const leg = routeData.legs[i]
if (!leg.shape) continue
const coords = decodePolyline(leg.shape, 6)
features.push({
type: 'Feature',
properties: { legIndex: i },
geometry: { type: 'LineString', coordinates: coords },
})
}
const source = map.getSource(ROUTE_SOURCE)
if (source) {
source.setData({ type: 'FeatureCollection', features })
} else {
map.addSource(ROUTE_SOURCE, {
type: 'geojson',
data: { type: 'FeatureCollection', features },
})
}
// Use CSS variable for route color (read computed value)
const routeColor = getComputedStyle(document.documentElement).getPropertyValue('--route-line').trim()
for (let i = 0; i < features.length; i++) {
const layerId = `${ROUTE_LAYER_PREFIX}${i}`
if (!map.getLayer(layerId)) {
map.addLayer({
id: layerId,
type: 'line',
source: ROUTE_SOURCE,
filter: ['==', ['get', 'legIndex'], i],
layout: { 'line-join': 'round', 'line-cap': 'round' },
paint: {
'line-color': routeColor || '#7a9a6b',
'line-width': 5,
'line-opacity': 0.85,
},
})
}
}
// Fit bounds to route
if (features.length > 0) {
const allCoords = features.flatMap((f) => f.geometry.coordinates)
const bounds = allCoords.reduce(
(b, c) => b.extend(c),
new maplibregl.LngLatBounds(allCoords[0], allCoords[0])
)
// Single-panel: no floating detail
const leftPad = 420 // 360px panel + margin
map.fitBounds(bounds, { padding: { top: 60, bottom: 60, left: leftPad, right: 60 } })
}
}
// Update stop markers when stops change
useEffect(() => {
const map = mapInstance.current
if (!map) return
// Remove old markers
for (const m of markersRef.current) m.remove()
markersRef.current = []
if (popupRef.current) {
popupRef.current.remove()
popupRef.current = null
}
const hasGpsOrigin = gpsOrigin && geoPermission === 'granted'
const indexOffset = hasGpsOrigin ? 1 : 0
stops.forEach((stop, i) => {
const displayIndex = i + indexOffset
const effectiveTotal = stops.length + indexOffset
let pinClass = 'navi-pin navi-pin--intermediate'
if (displayIndex === 0) pinClass = 'navi-pin navi-pin--origin'
else if (displayIndex === effectiveTotal - 1 && effectiveTotal > 1) pinClass = 'navi-pin navi-pin--destination'
const label = String.fromCharCode(65 + Math.min(displayIndex, 25))
const el = document.createElement('div')
el.className = pinClass
el.textContent = label
el.addEventListener('click', (e) => {
e.stopPropagation()
// Flag so the map-level click handler doesn't fire
pinClickedRef.current = true
if (popupRef.current) popupRef.current.remove()
const popup = new maplibregl.Popup({ offset: 20, closeButton: true })
.setLngLat([stop.lon, stop.lat])
.setHTML(
`<div style="font-size:12px;max-width:200px">
<strong>${stop.name}</strong>
<br/><button id="remove-stop-${stop.id}" style="margin-top:4px;padding:2px 8px;background:var(--status-danger);border:none;border-radius:4px;color:white;cursor:pointer;font-size:11px">Remove</button>
</div>`
)
.addTo(map)
popup.getElement().querySelector(`#remove-stop-${stop.id}`)?.addEventListener('click', () => {
useStore.getState().removeStop(stop.id)
popup.remove()
})
popupRef.current = popup
})
const marker = new maplibregl.Marker({ element: el })
.setLngLat([stop.lon, stop.lat])
.addTo(map)
markersRef.current.push(marker)
})
// If stops but no route yet, fit to stops
if (stops.length > 0 && !route) {
if (stops.length === 1) {
map.flyTo({ center: [stops[0].lon, stops[0].lat], zoom: 13 })
} else {
const bounds = stops.reduce(
(b, s) => b.extend([s.lon, s.lat]),
new maplibregl.LngLatBounds([stops[0].lon, stops[0].lat], [stops[0].lon, stops[0].lat])
)
map.fitBounds(bounds, { padding: { top: 60, bottom: 60, left: 420, right: 60 } })
}
}
}, [stops, route, gpsOrigin, geoPermission])
// ESC key handler for measurement mode // ESC key handler for measurement mode
useEffect(() => { useEffect(() => {
const handleKeyDown = (e) => { const handleKeyDown = (e) => {

605
src/components/Panel.jsx
View file

@ -1,311 +1,294 @@
import { useRef, useCallback, useEffect, useState } from 'react' import { useRef, useCallback, useEffect, useState } from 'react'
import { LogIn, LogOut } from 'lucide-react' import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin } from 'lucide-react'
import ThemePicker from './ThemePicker' import ThemePicker from './ThemePicker'
import { useStore, usePanelState } from '../store' import { useStore, usePanelState } from '../store'
import { hasFeature } from '../config' import { hasFeature } from '../config'
import SearchBar from './SearchBar' import SearchBar from './SearchBar'
import StopList from './StopList' import ManeuverList from './ManeuverList'
import ModeSelector from './ModeSelector' import ContactList from './ContactList'
import ManeuverList from './ManeuverList' import { PlaceCard } from './PlaceCard'
import ContactList from './ContactList'
import { PlaceCard } from './PlaceCard' const TRAVEL_MODES = [
import { requestOptimizedRoute } from '../api' { id: 'foot', label: 'Foot', Icon: Footprints },
{ id: 'mtb', label: 'MTB', Icon: Bike },
export default function Panel({ onManeuverClick }) { { id: 'atv', label: 'ATV', Icon: Car },
const selectedPlace = useStore((s) => s.selectedPlace) { id: 'vehicle', label: '4x4', Icon: Car },
const pendingDestination = useStore((s) => s.pendingDestination) ]
const clearSelectedPlace = useStore((s) => s.clearSelectedPlace)
const clearPendingDestination = useStore((s) => s.clearPendingDestination) const BOUNDARY_MODES = [
const stops = useStore((s) => s.stops) { id: 'strict', label: 'Strict', Icon: Shield, title: 'Avoid barriers' },
const mode = useStore((s) => s.mode) { id: 'pragmatic', label: 'Cross', Icon: AlertTriangle, title: 'Cross with penalty' },
const route = useStore((s) => s.route) { id: 'emergency', label: 'Ignore', Icon: Zap, title: 'Ignore barriers' },
const routeLoading = useStore((s) => s.routeLoading) ]
const routeError = useStore((s) => s.routeError)
const setStops = useStore((s) => s.setStops) export default function Panel({ onClearRoute }) {
const setRoute = useStore((s) => s.setRoute) const selectedPlace = useStore((s) => s.selectedPlace)
const setRouteError = useStore((s) => s.setRouteError) const clearSelectedPlace = useStore((s) => s.clearSelectedPlace)
const setRouteLoading = useStore((s) => s.setRouteLoading) const routeStart = useStore((s) => s.routeStart)
const sheetState = useStore((s) => s.sheetState) const routeEnd = useStore((s) => s.routeEnd)
const setSheetState = useStore((s) => s.setSheetState) const routeMode = useStore((s) => s.routeMode)
const theme = useStore((s) => s.theme) const boundaryMode = useStore((s) => s.boundaryMode)
const themeOverride = useStore((s) => s.themeOverride) const routeResult = useStore((s) => s.routeResult)
const setThemeOverride = useStore((s) => s.setThemeOverride) const routeLoading = useStore((s) => s.routeLoading)
const gpsOrigin = useStore((s) => s.gpsOrigin) const setRouteMode = useStore((s) => s.setRouteMode)
const geoPermission = useStore((s) => s.geoPermission) const setBoundaryMode = useStore((s) => s.setBoundaryMode)
const activeTab = useStore((s) => s.activeTab) const clearRoute = useStore((s) => s.clearRoute)
const auth = useStore((s) => s.auth) const sheetState = useStore((s) => s.sheetState)
const setActiveTab = useStore((s) => s.setActiveTab) const setSheetState = useStore((s) => s.setSheetState)
const activeTab = useStore((s) => s.activeTab)
const panelState = usePanelState() const auth = useStore((s) => s.auth)
const setActiveTab = useStore((s) => s.setActiveTab)
const [isMobile, setIsMobile] = useState(false)
const [optimizing, setOptimizing] = useState(false) const panelState = usePanelState()
const sheetRef = useRef(null)
const dragStartY = useRef(0) const [isMobile, setIsMobile] = useState(false)
const dragStartState = useRef('half') const sheetRef = useRef(null)
const dragStartY = useRef(0)
// Show contacts tab only if feature enabled AND user is authenticated const dragStartState = useRef('half')
const showContacts = hasFeature('has_contacts') && auth.authenticated
const showContacts = hasFeature('has_contacts') && auth.authenticated
// Responsive detection
useEffect(() => { useEffect(() => {
const check = () => setIsMobile(window.innerWidth < 768) const check = () => setIsMobile(window.innerWidth < 768)
check() check()
window.addEventListener('resize', check) window.addEventListener('resize', check)
return () => window.removeEventListener('resize', check) return () => window.removeEventListener('resize', check)
}, []) }, [])
// Auth handlers const handleLogin = () => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' }
const handleLogin = () => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' } const handleLogout = () => { window.location.href = 'https://auth.echo6.co/if/flow/default-invalidation-flow/?next=https://navi.echo6.co/' }
const handleLogout = () => { window.location.href = 'https://auth.echo6.co/if/flow/default-invalidation-flow/?next=https://navi.echo6.co/' }
const handleTouchStart = useCallback((e) => {
// Optimize stops dragStartY.current = e.touches[0].clientY
const hasGpsOrigin = gpsOrigin && geoPermission === 'granted' dragStartState.current = sheetState
const effectiveCount = stops.length + (hasGpsOrigin ? 1 : 0) }, [sheetState])
const handleOptimize = useCallback(async () => { const handleTouchEnd = useCallback((e) => {
if (effectiveCount < 3 || optimizing) return const deltaY = e.changedTouches[0].clientY - dragStartY.current
setOptimizing(true) if (Math.abs(deltaY) < 30) return
try { if (deltaY < 0) {
const { userLocation } = useStore.getState() if (dragStartState.current === 'collapsed') setSheetState('half')
let locations = stops.map((s) => ({ lat: s.lat, lon: s.lon })) else if (dragStartState.current === 'half') setSheetState('full')
if (hasGpsOrigin && userLocation) { } else {
locations = [{ lat: userLocation.lat, lon: userLocation.lon }, ...locations] if (dragStartState.current === 'full') setSheetState('half')
} else if (dragStartState.current === 'half') setSheetState('collapsed')
const data = await requestOptimizedRoute(locations, mode) }
if (data.trip) { }, [setSheetState])
const wpOrder = hasGpsOrigin && userLocation
? (data.trip.locations || []).slice(1) const handleClearRoute = () => {
: data.trip.locations clearRoute()
if (wpOrder && wpOrder.length === stops.length) { onClearRoute?.()
const reordered = wpOrder.map((wp) => { }
let closest = stops[0]
let minDist = Infinity const showPreviewCard = panelState.startsWith('PREVIEW')
for (const s of stops) { const hasRoutePoints = routeStart || routeEnd
const d = Math.abs(s.lat - wp.lat) + Math.abs(s.lon - wp.lon) const showRouteSection = hasRoutePoints || routeResult || routeLoading
if (d < minDist) { const showEmptyState = panelState === 'IDLE' && !hasRoutePoints
minDist = d
closest = s const routesContent = (
} <>
} <SearchBar />
return closest
}) {showPreviewCard && selectedPlace && (
const seen = new Set() <div className="mt-3">
const unique = reordered.filter((s) => { <PlaceCard
if (seen.has(s.id)) return false place={selectedPlace}
seen.add(s.id) variant="preview"
return true expanded={true}
}) onClose={clearSelectedPlace}
if (unique.length === stops.length) { />
setStops(unique) </div>
} )}
}
setRoute(data.trip) {showRouteSection && (
} <div className="mt-3">
} catch (e) { <div className="flex items-center justify-between mb-2">
setRouteError(e.message) <span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
} finally { Route
setOptimizing(false) </span>
} <button
}, [stops, mode, optimizing, effectiveCount, hasGpsOrigin, setStops, setRoute, setRouteError]) onClick={handleClearRoute}
className="p-1 rounded hover:bg-[var(--bg-overlay)]"
// Mobile sheet drag handling title="Clear route"
const handleTouchStart = useCallback((e) => { >
dragStartY.current = e.touches[0].clientY <X size={14} style={{ color: 'var(--text-tertiary)' }} />
dragStartState.current = sheetState </button>
}, [sheetState]) </div>
const handleTouchEnd = useCallback((e) => { <div className="flex flex-col gap-1 mb-3 text-xs">
const deltaY = e.changedTouches[0].clientY - dragStartY.current <div className="flex items-center gap-2">
if (Math.abs(deltaY) < 30) return <MapPin size={12} style={{ color: '#22c55e' }} />
if (deltaY < 0) { <span style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
if (dragStartState.current === 'collapsed') setSheetState('half') {routeStart?.name || 'Right-click to set start'}
else if (dragStartState.current === 'half') setSheetState('full') </span>
} else { </div>
if (dragStartState.current === 'full') setSheetState('half') <div className="flex items-center gap-2">
else if (dragStartState.current === 'half') setSheetState('collapsed') <MapPin size={12} style={{ color: '#ef4444' }} />
} <span style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
}, [setSheetState]) {routeEnd?.name || 'Right-click to set destination'}
</span>
const showOptimize = effectiveCount >= 3 </div>
</div>
// Determine what to show based on panel state
const showPreviewCard = panelState.startsWith('PREVIEW') <div className="flex gap-1 mb-2">
const showRouteSection = ['ROUTING', 'ROUTE_CALCULATED', 'PREVIEW_ROUTING', 'PREVIEW_CALCULATED'].includes(panelState) || !!pendingDestination {TRAVEL_MODES.map((m) => {
const showManeuvers = panelState === 'ROUTE_CALCULATED' || panelState === 'PREVIEW_CALCULATED' const active = routeMode === m.id
const showEmptyState = panelState === 'IDLE' && !pendingDestination return (
<button
// Routes tab content - now state-driven key={m.id}
const routesContent = ( onClick={() => setRouteMode(m.id)}
<> className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
<SearchBar /> style={{
background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
{/* Preview card when place is selected */} color: active ? 'var(--accent)' : 'var(--text-tertiary)',
{showPreviewCard && selectedPlace && ( }}
<div className="mt-3"> title={m.label}
<PlaceCard >
place={selectedPlace} <m.Icon size={14} />
variant="preview" <span className="hidden sm:inline">{m.label}</span>
expanded={true} </button>
onClose={clearSelectedPlace} )
/> })}
</div> </div>
)}
<div className="flex gap-1 mb-3">
{/* Route section with stops */} {BOUNDARY_MODES.map((m) => {
{showRouteSection && ( const active = boundaryMode === m.id
<> return (
<div className="mt-3"> <button
<StopList /> key={m.id}
</div> onClick={() => setBoundaryMode(m.id)}
className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
<div className="mt-3 flex flex-col gap-2"> style={{
<ModeSelector /> background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
{showOptimize && ( color: active ? 'var(--accent)' : 'var(--text-tertiary)',
<button }}
onClick={handleOptimize} title={m.title}
disabled={optimizing || routeLoading} >
className="navi-btn-secondary w-full" <m.Icon size={14} />
> <span className="hidden sm:inline">{m.label}</span>
{optimizing ? 'Optimizing...' : 'Optimize stop order'} </button>
</button> )
)} })}
{pendingDestination && stops.length === 0 && ( </div>
<button
onClick={clearPendingDestination} <ManeuverList />
className="navi-btn-secondary w-full" </div>
> )}
Cancel
</button> {showEmptyState && (
)} <div className="mt-6 text-center text-xs" style={{ color: 'var(--text-tertiary)' }}>
</div> <p>Search or tap the map to explore</p>
</> </div>
)} )}
</>
{/* Maneuvers when route is calculated */} )
{showManeuvers && (route || routeLoading || routeError) && (
<div className="mt-3"> const content = (
<ManeuverList onManeuverClick={onManeuverClick} /> <>
</div> {showContacts && (
)} <div className="navi-tab-bar mb-3">
<button
{/* Empty state */} className={"navi-tab " + (activeTab === 'routes' ? 'navi-tab-active' : '')}
{showEmptyState && ( onClick={() => setActiveTab('routes')}
<div className="mt-6 text-center text-xs" style={{ color: 'var(--text-tertiary)' }}> >
<p>Search or tap the map to explore</p> Routes
</div> </button>
)} <button
</> className={"navi-tab " + (activeTab === 'contacts' ? 'navi-tab-active' : '')}
) onClick={() => setActiveTab('contacts')}
>
const content = ( Contacts
<> </button>
{showContacts && ( </div>
<div className="navi-tab-bar mb-3"> )}
<button
className={`navi-tab ${activeTab === 'routes' ? 'navi-tab-active' : ''}`} {(!showContacts || activeTab === 'routes') ? routesContent : <ContactList />}
onClick={() => setActiveTab('routes')} </>
> )
Routes
</button> const header = (
<button <div className="flex items-center justify-between mb-3">
className={`navi-tab ${activeTab === 'contacts' ? 'navi-tab-active' : ''}`} <h1 className="text-md font-semibold" style={{ color: 'var(--accent)' }}>Navi</h1>
onClick={() => setActiveTab('contacts')} <div className="flex items-center gap-1">
> {auth.loaded && (
Contacts auth.authenticated ? (
</button> <button
</div> onClick={handleLogout}
)} className="flex items-center gap-1 px-2 py-1 rounded text-xs"
style={{ color: 'var(--text-tertiary)' }}
{(!showContacts || activeTab === 'routes') ? routesContent : <ContactList />} title={"Logged in as " + auth.username + ". Click to log out."}
</> >
) <span className="hidden sm:inline">{auth.username}</span>
<LogOut size={14} />
const header = ( </button>
<div className="flex items-center justify-between mb-3"> ) : (
<h1 className="text-md font-semibold" style={{ color: 'var(--accent)' }}>Navi</h1> <button
<div className="flex items-center gap-1"> onClick={handleLogin}
{auth.loaded && ( className="flex items-center gap-1 px-2 py-1 rounded text-xs"
auth.authenticated ? ( style={{ color: 'var(--accent)' }}
<button title="Log in"
onClick={handleLogout} >
className="flex items-center gap-1 px-2 py-1 rounded text-xs" <LogIn size={14} />
style={{ color: 'var(--text-tertiary)' }} <span>Log in</span>
title={`Logged in as ${auth.username}. Click to log out.`} </button>
> )
<span className="hidden sm:inline">{auth.username}</span> )}
<LogOut size={14} /> <ThemePicker />
</button> </div>
) : ( </div>
<button )
onClick={handleLogin}
className="flex items-center gap-1 px-2 py-1 rounded text-xs" if (!isMobile) {
style={{ color: 'var(--accent)' }} return (
title="Log in" <div
> className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
<LogIn size={14} /> style={{
<span>Log in</span> width: '400px',
</button> background: 'var(--bg-raised)',
) borderRight: '1px solid var(--border)',
)} }}
<ThemePicker /> >
</div> {header}
</div> {content}
) </div>
)
// Desktop: side panel (now 360px to accommodate PlaceCard) }
if (!isMobile) {
return ( const sheetHeights = {
<div collapsed: 'h-12',
className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col" half: 'h-[45vh]',
style={{ full: 'h-[85vh]',
width: '400px', }
background: 'var(--bg-raised)',
borderRight: '1px solid var(--border)', return (
}} <div
> ref={sheetRef}
{header} className={"absolute bottom-0 left-0 right-0 z-10 rounded-t-2xl transition-all duration-200 " + sheetHeights[sheetState]}
{content} style={{
</div> background: 'var(--bg-raised)',
) borderTop: '1px solid var(--border)',
} }}
>
// Mobile: bottom sheet <div
const sheetHeights = { className="flex justify-center py-2 cursor-grab"
collapsed: 'h-12', onTouchStart={handleTouchStart}
half: 'h-[45vh]', onTouchEnd={handleTouchEnd}
full: 'h-[85vh]', onClick={() => {
} if (sheetState === 'collapsed') setSheetState('half')
else if (sheetState === 'half') setSheetState('full')
return ( else setSheetState('half')
<div }}
ref={sheetRef} >
className={`absolute bottom-0 left-0 right-0 z-10 rounded-t-2xl transition-all duration-200 ${sheetHeights[sheetState]}`} <div className="w-10 h-1 rounded-full" style={{ background: 'var(--border)' }} />
style={{ </div>
background: 'var(--bg-raised)',
borderTop: '1px solid var(--border)', {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))' }}>
> {header}
{/* Drag handle */} {content}
<div </div>
className="flex justify-center py-2 cursor-grab" )}
onTouchStart={handleTouchStart} </div>
onTouchEnd={handleTouchEnd} )
onClick={() => { }
if (sheetState === 'collapsed') setSheetState('half')
else if (sheetState === 'half') setSheetState('full')
else setSheetState('half')
}}
>
<div className="w-10 h-1 rounded-full" style={{ background: 'var(--border)' }} />
</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))' }}>
{header}
{content}
</div>
)}
</div>
)
}

318
src/store.js
View file

@ -1,155 +1,163 @@
import { create } from 'zustand' import { create } from 'zustand'
export const useStore = create((set, get) => ({ export const useStore = create((set, get) => ({
// ── Search state ── // ── Search state ──
query: '', query: '',
results: [], results: [],
searchLoading: false, searchLoading: false,
abortController: null, abortController: null,
setQuery: (query) => set({ query }), setQuery: (query) => set({ query }),
setResults: (results) => set({ results }), setResults: (results) => set({ results }),
setSearchLoading: (loading) => set({ searchLoading: loading }), setSearchLoading: (loading) => set({ searchLoading: loading }),
setAbortController: (ctrl) => set({ abortController: ctrl }), setAbortController: (ctrl) => set({ abortController: ctrl }),
// ── Stop list ── // ── Geolocation ──
stops: [], userLocation: null, // { lat, lon }
// Each stop: { id, lat, lon, name, source, matchCode, isOrigin } geoPermission: 'prompt', // 'prompt' | 'granted' | 'denied'
addStop: (stop) => { setUserLocation: (loc) => set({ userLocation: loc }),
const { stops } = get() setGeoPermission: (p) => set({ geoPermission: p }),
if (stops.length >= 10) return false
set({ stops: [...stops, { ...stop, id: crypto.randomUUID() }] }) // ── Map viewport (for search bias) ──
return true mapCenter: null, // { lat, lon, zoom }
}, setMapCenter: (center) => set({ mapCenter: center }),
removeStop: (id) => { // ── Unified Route State ──
set({ stops: get().stops.filter((s) => s.id !== id) }) // Single routing system - all routes go through /api/offroute
}, routeStart: null, // { lat, lon, name }
routeEnd: null, // { lat, lon, name }
reorderStops: (newStops) => set({ stops: newStops }), routeMode: "foot", // foot | mtb | atv | vehicle
boundaryMode: "strict", // strict | pragmatic | emergency
clearStops: () => set({ stops: [] }), routeResult: null, // Response from /api/offroute
routeLoading: false,
setStops: (stops) => set({ stops }), routeError: null,
// ── Geolocation ── setRouteStart: (place) => set({ routeStart: place, routeResult: null, routeError: null }),
userLocation: null, // { lat, lon } setRouteEnd: (place) => set({ routeEnd: place }),
geoPermission: 'prompt', // 'prompt' | 'granted' | 'denied' setRouteMode: (mode) => set({ routeMode: mode }),
setBoundaryMode: (mode) => set({ boundaryMode: mode }),
setUserLocation: (loc) => set({ userLocation: loc }), setRouteResult: (result) => set({ routeResult: result, routeError: null }),
setGeoPermission: (p) => set({ geoPermission: p }), setRouteLoading: (loading) => set({ routeLoading: loading }),
setRouteError: (err) => set({ routeError: err, routeResult: null }),
// ── Map viewport (for search bias) ── clearRoute: () => set({
mapCenter: null, // { lat, lon, zoom } routeStart: null,
setMapCenter: (center) => set({ mapCenter: center }), routeEnd: null,
routeResult: null,
// ── Mode ── routeError: null
mode: 'auto', // 'auto' | 'pedestrian' | 'bicycle' }),
setMode: (mode) => set({ mode }),
// ── Legacy compatibility (for components not yet migrated) ──
// ── Route ── stops: [],
route: null, // Valhalla response (trip object) gpsOrigin: false,
routeLoading: false, pendingDestination: null,
routeError: null, route: null,
setRoute: (route) => set({ route, routeError: null }), addStop: (stop) => {
setRouteLoading: (loading) => set({ routeLoading: loading }), // Legacy: just set as route end point
setRouteError: (err) => set({ routeError: err, route: null }), const { routeStart, setRouteEnd } = get()
clearRoute: () => set({ route: null, routeError: null }), const place = { lat: stop.lat, lon: stop.lon, name: stop.name }
if (!routeStart) {
// ── Place detail ── set({ routeStart: place, stops: [{ ...stop, id: crypto.randomUUID() }] })
selectedPlace: null, // { lat, lon, name, address, type, source, matchCode, raw, mode?, featureId?, featureLayer?, wikidata? } } else {
clickMarker: null, // { lat, lon, circleRadiusPx } — visual marker for two-click selection setRouteEnd(place)
gpsOrigin: true, // whether GPS should be used as origin when available set({ stops: [...get().stops, { ...stop, id: crypto.randomUUID() }] })
pendingDestination: null, // place waiting for a starting point (GPS-denied Directions flow) }
return true
setSelectedPlace: (place) => set({ selectedPlace: place }), },
removeStop: (id) => {
// Boundary rendering function - set by MapView, called by PlaceCard const { stops } = get()
updateBoundary: null, const newStops = stops.filter((s) => s.id !== id)
setUpdateBoundary: (fn) => set({ updateBoundary: fn }), set({ stops: newStops })
clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }), if (newStops.length === 0) {
setClickMarker: (marker) => set({ clickMarker: marker }), get().clearRoute()
clearClickMarker: () => set({ clickMarker: null }), }
setGpsOrigin: (val) => set({ gpsOrigin: val }), },
setPendingDestination: (place) => set({ pendingDestination: place }), clearStops: () => set({ stops: [], routeStart: null, routeEnd: null }),
clearPendingDestination: () => set({ pendingDestination: null }), setStops: (stops) => set({ stops }),
reorderStops: (newStops) => set({ stops: newStops }),
startDirections: (place) => { setGpsOrigin: (val) => set({ gpsOrigin: val }),
const { geoPermission, stops, addStop, clearStops } = get() setPendingDestination: (place) => set({ pendingDestination: place }),
if (geoPermission === 'granted') { clearPendingDestination: () => set({ pendingDestination: null }),
clearStops()
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode }) startDirections: (place) => {
set({ gpsOrigin: true, selectedPlace: null }) // Legacy: set as destination
} else if (stops.length > 0) { const { routeStart, setRouteEnd, clearRoute } = get()
const origin = stops[0] clearRoute()
clearStops() set({
addStop({ lat: origin.lat, lon: origin.lon, name: origin.name, source: origin.source, matchCode: origin.matchCode }) routeEnd: { lat: place.lat, lon: place.lon, name: place.name },
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode }) stops: [{ ...place, id: crypto.randomUUID() }],
set({ selectedPlace: null }) selectedPlace: null
} else { })
// GPS denied, no stops: set pendingDestination only; origin-picker will add both },
set({ pendingDestination: place, selectedPlace: null })
} // ── Place detail ──
}, selectedPlace: null,
clickMarker: null,
// ── UI state ──
sheetState: 'half', // 'collapsed' | 'half' | 'full' setSelectedPlace: (place) => set({ selectedPlace: place }),
panelOpen: true, updateBoundary: null,
autocompleteOpen: false, setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied) clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
themeOverride: null, // null | 'dark' | 'light' (manual override, persisted) setClickMarker: (marker) => set({ clickMarker: marker }),
viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map', // 'map' | 'satellite' | 'hybrid' clearClickMarker: () => set({ clickMarker: null }),
setSheetState: (s) => set({ sheetState: s }), // ── UI state ──
setViewMode: (mode) => { sheetState: 'half',
set({ viewMode: mode }) panelOpen: true,
localStorage.setItem('navi-view-mode', mode) autocompleteOpen: false,
}, theme: 'dark',
setPanelOpen: (open) => set({ panelOpen: open }), themeOverride: null,
setAutocompleteOpen: (open) => set({ autocompleteOpen: open }), viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map',
setTheme: (theme) => set({ theme }),
setThemeOverride: (override) => { setSheetState: (s) => set({ sheetState: s }),
set({ themeOverride: override }) setViewMode: (mode) => {
if (override) { set({ viewMode: mode })
localStorage.setItem('navi-theme-override', override) localStorage.setItem('navi-view-mode', mode)
} else { },
localStorage.removeItem('navi-theme-override') setPanelOpen: (open) => set({ panelOpen: open }),
} setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
}, setTheme: (theme) => set({ theme }),
// ── Auth state ── setThemeOverride: (override) => {
auth: { authenticated: false, username: null, loaded: false }, set({ themeOverride: override })
setAuth: (auth) => set({ auth: { ...auth, loaded: true } }), if (override) {
localStorage.setItem('navi-theme-override', override)
// ── Contacts ── } else {
contacts: [], localStorage.removeItem('navi-theme-override')
contactsLoaded: false, }
activeTab: 'routes', // 'routes' | 'contacts' },
editingContact: null, // null=closed, {}=new, {id:N}=edit
pickingLocationFor: null, // form data while user picks location on map // ── Auth state ──
auth: { authenticated: false, username: null, loaded: false },
setContacts: (c) => set({ contacts: c, contactsLoaded: true }), setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
setActiveTab: (tab) => set({ activeTab: tab }),
setEditingContact: (c) => set({ editingContact: c }), // ── Contacts ──
clearEditingContact: () => set({ editingContact: null }), contacts: [],
setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }), contactsLoaded: false,
clearPickingLocationFor: () => set({ pickingLocationFor: null }), activeTab: 'routes',
})) editingContact: null,
pickingLocationFor: null,
// ── Panel state selector ──
// Returns string state, prioritizing preview to allow it alongside any route state setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
export const usePanelState = () => { setActiveTab: (tab) => set({ activeTab: tab }),
return useStore((s) => { setEditingContact: (c) => set({ editingContact: c }),
const hasPreview = !!s.selectedPlace clearEditingContact: () => set({ editingContact: null }),
const hasRoute = !!s.route setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }),
const hasStops = s.stops.length >= 1 clearPickingLocationFor: () => set({ pickingLocationFor: null }),
}))
if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
if (hasPreview && hasStops) return "PREVIEW_ROUTING" // ── Panel state selector ──
if (hasPreview) return "PREVIEW" export const usePanelState = () => {
if (hasRoute) return "ROUTE_CALCULATED" return useStore((s) => {
if (hasStops) return "ROUTING" const hasPreview = !!s.selectedPlace
return "IDLE" const hasRoute = !!s.routeResult
}) const hasRoutePoints = !!s.routeStart || !!s.routeEnd
}
if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
if (hasPreview && hasRoutePoints) return "PREVIEW_ROUTING"
if (hasPreview) return "PREVIEW"
if (hasRoute) return "ROUTE_CALCULATED"
if (hasRoutePoints) return "ROUTING"
return "IDLE"
})
}