feat: search, multi-stop routing, and route display
Full navigation UI with:
- Search bar with 150ms debounced autocomplete from /api/geocode
- Keyboard navigation (arrow keys, Enter, Escape)
- Exact match badge for verified address results
- Multi-stop list with drag-to-reorder (dnd-kit)
- 10-stop cap with disabled state
- Mode selector (drive/walk/bike)
- Valhalla route display with per-leg color polyline
- Maneuver list with instructions, distance, time remaining
- Click maneuver to fly map to that point
- Optimize stops button (3+ stops, uses /optimized_route)
- Responsive: side panel (desktop ≥768px), bottom sheet (mobile)
- Stop pins: green origin, red destination, blue intermediate
- Pin popup with remove button
- Geolocation permission requested on first route, not on load
- Error handling for unroutable pairs
- nginx proxy for /api/ and /valhalla/ endpoints
Dependencies added: zustand, @dnd-kit/core, @dnd-kit/sortable,
@dnd-kit/utilities
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-20 16:50:53 +00:00
|
|
|
import { create } from 'zustand'
|
|
|
|
|
|
|
|
|
|
export const useStore = create((set, get) => ({
|
|
|
|
|
// ── Search state ──
|
|
|
|
|
query: '',
|
|
|
|
|
results: [],
|
|
|
|
|
searchLoading: false,
|
|
|
|
|
abortController: null,
|
|
|
|
|
|
|
|
|
|
setQuery: (query) => set({ query }),
|
|
|
|
|
setResults: (results) => set({ results }),
|
|
|
|
|
setSearchLoading: (loading) => set({ searchLoading: loading }),
|
|
|
|
|
setAbortController: (ctrl) => set({ abortController: ctrl }),
|
|
|
|
|
|
|
|
|
|
// ── Stop list ──
|
|
|
|
|
stops: [],
|
|
|
|
|
// Each stop: { id, lat, lon, name, source, matchCode, isOrigin }
|
|
|
|
|
|
|
|
|
|
addStop: (stop) => {
|
|
|
|
|
const { stops } = get()
|
|
|
|
|
if (stops.length >= 10) return false
|
|
|
|
|
set({ stops: [...stops, { ...stop, id: crypto.randomUUID() }] })
|
|
|
|
|
return true
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
removeStop: (id) => {
|
|
|
|
|
set({ stops: get().stops.filter((s) => s.id !== id) })
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
reorderStops: (newStops) => set({ stops: newStops }),
|
|
|
|
|
|
|
|
|
|
clearStops: () => set({ stops: [] }),
|
|
|
|
|
|
|
|
|
|
setStops: (stops) => set({ stops }),
|
|
|
|
|
|
|
|
|
|
// ── Geolocation ──
|
|
|
|
|
userLocation: null, // { lat, lon }
|
|
|
|
|
geoPermission: 'prompt', // 'prompt' | 'granted' | 'denied'
|
|
|
|
|
|
|
|
|
|
setUserLocation: (loc) => set({ userLocation: loc }),
|
|
|
|
|
setGeoPermission: (p) => set({ geoPermission: p }),
|
|
|
|
|
|
2026-04-26 04:03:52 +00:00
|
|
|
// ── Map viewport (for search bias) ──
|
|
|
|
|
mapCenter: null, // { lat, lon, zoom }
|
|
|
|
|
setMapCenter: (center) => set({ mapCenter: center }),
|
|
|
|
|
|
feat: search, multi-stop routing, and route display
Full navigation UI with:
- Search bar with 150ms debounced autocomplete from /api/geocode
- Keyboard navigation (arrow keys, Enter, Escape)
- Exact match badge for verified address results
- Multi-stop list with drag-to-reorder (dnd-kit)
- 10-stop cap with disabled state
- Mode selector (drive/walk/bike)
- Valhalla route display with per-leg color polyline
- Maneuver list with instructions, distance, time remaining
- Click maneuver to fly map to that point
- Optimize stops button (3+ stops, uses /optimized_route)
- Responsive: side panel (desktop ≥768px), bottom sheet (mobile)
- Stop pins: green origin, red destination, blue intermediate
- Pin popup with remove button
- Geolocation permission requested on first route, not on load
- Error handling for unroutable pairs
- nginx proxy for /api/ and /valhalla/ endpoints
Dependencies added: zustand, @dnd-kit/core, @dnd-kit/sortable,
@dnd-kit/utilities
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-20 16:50:53 +00:00
|
|
|
// ── Mode ──
|
|
|
|
|
mode: 'auto', // 'auto' | 'pedestrian' | 'bicycle'
|
|
|
|
|
setMode: (mode) => set({ mode }),
|
|
|
|
|
|
|
|
|
|
// ── Route ──
|
|
|
|
|
route: null, // Valhalla response (trip object)
|
|
|
|
|
routeLoading: false,
|
|
|
|
|
routeError: null,
|
|
|
|
|
|
|
|
|
|
setRoute: (route) => set({ route, routeError: null }),
|
|
|
|
|
setRouteLoading: (loading) => set({ routeLoading: loading }),
|
|
|
|
|
setRouteError: (err) => set({ routeError: err, route: null }),
|
|
|
|
|
clearRoute: () => set({ route: null, routeError: null }),
|
|
|
|
|
|
2026-04-20 20:59:18 +00:00
|
|
|
// ── Place detail ──
|
|
|
|
|
selectedPlace: null, // { lat, lon, name, address, type, source, matchCode, raw }
|
|
|
|
|
gpsOrigin: true, // whether GPS should be used as origin when available
|
|
|
|
|
pendingDestination: null, // place waiting for a starting point (GPS-denied Directions flow)
|
|
|
|
|
|
|
|
|
|
setSelectedPlace: (place) => set({ selectedPlace: place }),
|
|
|
|
|
clearSelectedPlace: () => set({ selectedPlace: null }),
|
|
|
|
|
setGpsOrigin: (val) => set({ gpsOrigin: val }),
|
|
|
|
|
setPendingDestination: (place) => set({ pendingDestination: place }),
|
|
|
|
|
clearPendingDestination: () => set({ pendingDestination: null }),
|
|
|
|
|
|
|
|
|
|
startDirections: (place) => {
|
|
|
|
|
const { geoPermission, stops, addStop, clearStops } = get()
|
|
|
|
|
if (geoPermission === 'granted') {
|
|
|
|
|
clearStops()
|
|
|
|
|
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
|
|
|
|
|
set({ gpsOrigin: true, selectedPlace: null })
|
|
|
|
|
} else if (stops.length > 0) {
|
|
|
|
|
const origin = stops[0]
|
|
|
|
|
clearStops()
|
|
|
|
|
addStop({ lat: origin.lat, lon: origin.lon, name: origin.name, source: origin.source, matchCode: origin.matchCode })
|
|
|
|
|
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
|
|
|
|
|
set({ selectedPlace: null })
|
|
|
|
|
} else {
|
|
|
|
|
set({ pendingDestination: place, selectedPlace: null })
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
feat: search, multi-stop routing, and route display
Full navigation UI with:
- Search bar with 150ms debounced autocomplete from /api/geocode
- Keyboard navigation (arrow keys, Enter, Escape)
- Exact match badge for verified address results
- Multi-stop list with drag-to-reorder (dnd-kit)
- 10-stop cap with disabled state
- Mode selector (drive/walk/bike)
- Valhalla route display with per-leg color polyline
- Maneuver list with instructions, distance, time remaining
- Click maneuver to fly map to that point
- Optimize stops button (3+ stops, uses /optimized_route)
- Responsive: side panel (desktop ≥768px), bottom sheet (mobile)
- Stop pins: green origin, red destination, blue intermediate
- Pin popup with remove button
- Geolocation permission requested on first route, not on load
- Error handling for unroutable pairs
- nginx proxy for /api/ and /valhalla/ endpoints
Dependencies added: zustand, @dnd-kit/core, @dnd-kit/sortable,
@dnd-kit/utilities
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-20 16:50:53 +00:00
|
|
|
// ── UI state ──
|
|
|
|
|
sheetState: 'half', // 'collapsed' | 'half' | 'full'
|
|
|
|
|
panelOpen: true,
|
|
|
|
|
autocompleteOpen: false,
|
2026-04-20 20:59:18 +00:00
|
|
|
theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied)
|
|
|
|
|
themeOverride: null, // null | 'dark' | 'light' (manual override, persisted)
|
feat: search, multi-stop routing, and route display
Full navigation UI with:
- Search bar with 150ms debounced autocomplete from /api/geocode
- Keyboard navigation (arrow keys, Enter, Escape)
- Exact match badge for verified address results
- Multi-stop list with drag-to-reorder (dnd-kit)
- 10-stop cap with disabled state
- Mode selector (drive/walk/bike)
- Valhalla route display with per-leg color polyline
- Maneuver list with instructions, distance, time remaining
- Click maneuver to fly map to that point
- Optimize stops button (3+ stops, uses /optimized_route)
- Responsive: side panel (desktop ≥768px), bottom sheet (mobile)
- Stop pins: green origin, red destination, blue intermediate
- Pin popup with remove button
- Geolocation permission requested on first route, not on load
- Error handling for unroutable pairs
- nginx proxy for /api/ and /valhalla/ endpoints
Dependencies added: zustand, @dnd-kit/core, @dnd-kit/sortable,
@dnd-kit/utilities
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-20 16:50:53 +00:00
|
|
|
|
|
|
|
|
setSheetState: (s) => set({ sheetState: s }),
|
|
|
|
|
setPanelOpen: (open) => set({ panelOpen: open }),
|
|
|
|
|
setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
|
2026-04-20 20:59:18 +00:00
|
|
|
setTheme: (theme) => set({ theme }),
|
|
|
|
|
setThemeOverride: (override) => {
|
|
|
|
|
set({ themeOverride: override })
|
|
|
|
|
if (override) {
|
|
|
|
|
localStorage.setItem('navi-theme-override', override)
|
|
|
|
|
} else {
|
|
|
|
|
localStorage.removeItem('navi-theme-override')
|
|
|
|
|
}
|
|
|
|
|
},
|
Add contacts/phone book UI with search integration
New components:
- ContactModal.jsx: Save/edit overlay with form fields and soft delete
- ContactList.jsx: Contacts tab with filter, create, and tap-to-navigate
Modified:
- store.js: Add contacts slice (contacts, activeTab, editingContact)
- api.js: Add contacts API functions (fetch, create, update, delete, nearby)
- config.js: Add has_contacts fallback flag
- Panel.jsx: Routes/Contacts tab bar (only when has_contacts enabled)
- PlaceDetail.jsx: Save button opens ContactModal, proximity annotation
- SearchBar.jsx: Prepend matching contacts before Photon results
- App.jsx: Render ContactModal at top level
- index.css: Modal overlay, tab bar, contact list item styles
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-22 05:30:19 +00:00
|
|
|
// ── Contacts ──
|
|
|
|
|
contacts: [],
|
|
|
|
|
contactsLoaded: false,
|
|
|
|
|
activeTab: 'routes', // 'routes' | 'contacts'
|
|
|
|
|
editingContact: null, // null=closed, {}=new, {id:N}=edit
|
|
|
|
|
|
|
|
|
|
setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
|
|
|
|
|
setActiveTab: (tab) => set({ activeTab: tab }),
|
|
|
|
|
setEditingContact: (c) => set({ editingContact: c }),
|
|
|
|
|
clearEditingContact: () => set({ editingContact: null }),
|
feat: search, multi-stop routing, and route display
Full navigation UI with:
- Search bar with 150ms debounced autocomplete from /api/geocode
- Keyboard navigation (arrow keys, Enter, Escape)
- Exact match badge for verified address results
- Multi-stop list with drag-to-reorder (dnd-kit)
- 10-stop cap with disabled state
- Mode selector (drive/walk/bike)
- Valhalla route display with per-leg color polyline
- Maneuver list with instructions, distance, time remaining
- Click maneuver to fly map to that point
- Optimize stops button (3+ stops, uses /optimized_route)
- Responsive: side panel (desktop ≥768px), bottom sheet (mobile)
- Stop pins: green origin, red destination, blue intermediate
- Pin popup with remove button
- Geolocation permission requested on first route, not on load
- Error handling for unroutable pairs
- nginx proxy for /api/ and /valhalla/ endpoints
Dependencies added: zustand, @dnd-kit/core, @dnd-kit/sortable,
@dnd-kit/utilities
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-20 16:50:53 +00:00
|
|
|
}))
|