From 43b208e704a7306e315fa83f69cd8d8d5726b43e Mon Sep 17 00:00:00 2001 From: Ubuntu Date: Sun, 26 Apr 2026 19:42:32 +0000 Subject: [PATCH] design: extend directions redesign with single-panel architecture Adds the broader panel model that consolidates the two-panel layout into one always-visible left column with state-driven content. Defines five panel states, shared place-card component, search bar behavior including aspirational search history, and implementation phases k-o. --- NAVI-DIRECTIONS-REDESIGN.md | 197 ++++++++++++++++++++++++++++++++++++ 1 file changed, 197 insertions(+) create mode 100644 NAVI-DIRECTIONS-REDESIGN.md diff --git a/NAVI-DIRECTIONS-REDESIGN.md b/NAVI-DIRECTIONS-REDESIGN.md new file mode 100644 index 0000000..1a74d99 --- /dev/null +++ b/NAVI-DIRECTIONS-REDESIGN.md @@ -0,0 +1,197 @@ +# Navi Directions Redesign + +This document captures the redesigned directions UX and the broader +single-panel architecture that consolidates the current two-panel layout. + +--- + +## Panel Architecture (Single-Column Model) + +The left panel is one always-visible column with state-driven content. +The right-side PlaceDetail panel is removed; its content moves into the +left panel. + +**Width:** ~360px desktop. Mobile: panel becomes bottom sheet per +Section 10. + +**Visual style:** Panel is always anchored at the left edge of the +viewport with consistent panel background. When idle (no preview, no +route), only the search bar is visible at the top — the rest of the +panel is empty space. The panel never disappears; it just shows less +or more content depending on state. + +--- + +## Panel States + +Panel states are mutually exclusive content modes: + +### IDLE (no preview, no route) + +- Search bar at top +- Empty body (or subtle empty-state prompt: "Search or click a place + to begin") +- Recent activity / search history (when implemented) + +### PREVIEW (place selected via map click or search, not committed to route) + +- Search bar at top +- Preview card: full place detail (name, type, coords, elevation, + land class, about, contact, links) +- Action buttons inside or below the card: [Directions] [Add stop] + [Save] [Share] [×] +- Click another place: preview replaced (previous lost — search + history retains it) +- Click × or Escape: preview dismissed, return to IDLE + +### ROUTING (1+ stops, no preview) + +- Search bar at top +- Section: "Route" with stop cards +- Each stop card: collapsed by default (header: pin + name + + drag handle + remove); expandable to show full detail +- Drag-to-reorder via card headers (preserves existing StopList) +- Per-card actions: Save, Share, Remove +- Bottom: [Get Directions] (when 2+ stops with valid mode), mode + selector (auto/walk/bike), trip summary placeholder + +### PREVIEW + ROUTING (place clicked while route exists) + +- Search bar at top +- Preview card directly below search +- Route section below preview +- Both visible simultaneously +- Multiple cards can be expanded at once (preview + a stop) + +### ROUTE_CALCULATED (after route fetch) + +- Search bar at top +- Route summary (total time, distance) +- Mode selector +- Stop cards (collapsed; expand for detail) +- Turn-by-turn maneuvers +- Preview can appear on top if user clicks a place + +--- + +## Search Bar Behavior + +- Pinned to top of panel +- Always for browsing (search → preview, never auto-add as stop) + +### Search History (aspirational — design now, implement later) + +- Empty search → dropdown shows 5 most recent searches +- Authed: persisted to backend +- Guest: localStorage +- Typing: recent matches sorted to top of search results + +--- + +## Card Pattern + +Shared between preview and stop cards. Both use the same component, +parameterized by role. + +### Header (always visible) + +- Pin/marker icon (color varies by role — preview vs stop number) +- Place name +- Expand/collapse chevron +- For stops: drag handle, remove (×) + +### Body (collapsed by default for stops, expanded by default for preview) + +- Type / category +- Coordinates + elevation + land class +- About (description, Wikipedia excerpt) +- Contact (phone, website, hours) +- Links (Wikipedia, OSM, Wikidata) +- Action buttons: + - Preview: [Directions] [Add stop] [Save] [Share] + - Stop: [Save] [Share] + +--- + +## State Transitions + +``` +IDLE → PREVIEW : click place / search-select +PREVIEW → IDLE : × button / Escape +PREVIEW → PREVIEW (different) : click another place +PREVIEW → ROUTING : "Add stop" on preview +PREVIEW → ROUTE_CALCULATED : "Directions" (becomes destination, + route auto-calculates if From available) +ROUTING → IDLE : remove all stops +ROUTING → PREVIEW + ROUTING : click place +ROUTING → ROUTE_CALCULATED : "Get Directions" / auto-route trigger +PREVIEW + ROUTING → ROUTING : dismiss preview +PREVIEW + ROUTING → ROUTING : "Add stop" on preview (adds new stop) +ROUTE_CALCULATED → ROUTING : edit route +ROUTE_CALCULATED → IDLE : clear route +``` + +--- + +## Right Panel (Floating PlaceDetail) + +**REMOVED.** All content moves into left panel cards. + +--- + +## Routes / Contacts Tabs + +Tentative: Routes is default panel. Contacts is a separate view +accessible via a tab or icon at the top. Contacts view replaces +route/preview content with a contact list — doesn't combine with +route-building. + +--- + +## Map Zoom-to-Feature + +With single panel, padding becomes simpler — just one panel width +(~360px) on the left. Top/right/bottom can be small (~50px each). + +--- + +## Mobile Bottom Sheet + +Same logic as desktop, layout rotated: + +| State | Sheet Position | +|---------------------|----------------| +| IDLE | peek (search bar visible) | +| PREVIEW | half (preview card) | +| ROUTING | half (stops list) | +| PREVIEW + ROUTING | full (both, scrollable) | +| ROUTE_CALCULATED | half/full (summary + maneuvers) | + +--- + +## Out of Scope / Future + +- Search history backend persistence (frontend localStorage first) +- Saved places browsing UI +- Contacts view redesign + +--- + +## Implementation Sequence + +| Phase | Description | +|-------|-------------| +| k | Refactor Panel.jsx to single-column state-driven content, remove right PlaceDetail panel | +| l | Build shared place card component | +| m | Wire state transitions | +| n | Mobile bottom sheet | +| o | Search history (frontend localStorage scope first) | + +--- + +## Open Questions + +- Routes/Contacts tab location and behavior in single-panel model +- Preview-of-already-routed-place: probably auto-expands the existing + stop card, no duplicate preview +- Preview card position confirmed above route section (per mock)