43b208e704
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.
197 lines
5.7 KiB
Markdown
197 lines
5.7 KiB
Markdown
# 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)
|