Files
tesla-roadtrip/client
tony 7187975ca5 feat(ui): Phase 3b — Customise, Detour, GPX modals
Three new modals wired into the planner with real interactions:

CustomiseStopModal (4 tabs)
- Tab rail (Charger / Overnight / Duration / Things to do / Detour)
  auto-hides tabs that don't apply (e.g. Charger only for chargers,
  Overnight only for hotels, Things to do only when nearby[] exists).
- Charger tab: radio-style picker over stop.chargerOptions with
  kW/stalls/€/network/detour badge per option.
- Overnight tab: lists the current hotel + stop.alternatives as
  swappable options with Choose buttons.
- Duration tab: 48px figure + range slider (10–120 min, snaps to
  presets) with arrive/leave battery % shown live; preset grid
  (Quick top-up / Coffee / Sit-down lunch / Explore / Full charge /
  Skip).
- Things to do tab: checkbox grid over stop.nearby[] for picking what
  you want to do at the stop.
- Apply Changes commits chargeMinutes + durationMin back into the
  itinerary via a new updateStop() handler.

AddDetourOverlay
- Spotlight-style search bar (autofocus, esc to close) with a
  curated POPULAR_DETOURS list (York Minster, Lake District,
  Hadrian's Wall, Beaune town centre, etc.). Insert button adds the
  detour as a new stop in the current day via a new insertDetour()
  handler. The map polyline / leg metrics recompute automatically.

GpxExportModal
- Real downloadable export — GPX (XML), KML (Google Earth), CSV.
- Live preview pane shows the generated file, with line count + KB
  in the footer. Copy puts the file content on the clipboard;
  Download .gpx writes it as a Blob with the right MIME type and
  triggers a real browser download. Filename derived from the trip's
  first/last stop.
- GPX include-toggles for stop notes and nearby places.
- Empty-trip state shows a friendly message instead of an empty pane.

Plumbing
- Modal state lifted into the planner as { kind, stopId? } | null.
- Top bar Export button, the rail's Add stop button, and the bottom
  Add detour link all open the relevant modal.
- The Customise stop button inside the expanded stop card now opens
  the Customise modal for that stop.
- ModalShell handles backdrop, escape-to-close, scroll-clamp, and
  optional header/footer/subtitle.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-20 14:02:22 +01:00
..