# 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)