matt/echo6-docs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
echo6-docs/NAVI-DIRECTIONS-REDESIGN.md
Ubuntu 43b208e704 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.
2026-04-26 19:42:32 +00:00

5.7 KiB
Raw Blame History

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)