538a69e1c5
Both changes fully implemented. Sync delta specs to main: - map-display: add Planner home page nav and cursor rendering requirements - planner-session: add session participant awareness requirement Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
46 lines
1.8 KiB
Markdown
46 lines
1.8 KiB
Markdown
## Context
|
|
|
|
Yjs awareness already tracks users with `{ color, name }` state and renders
|
|
map cursors via `CursorTracker` in `PlannerMap.tsx`. The current implementation
|
|
has issues: random names can't be changed, cursor labels are unstyled, and
|
|
there's no participant list showing who's in the session.
|
|
|
|
## Goals / Non-Goals
|
|
|
|
**Goals:**
|
|
- See all participants in the session (name, color, host/participant role)
|
|
- Edit your own name (saved to localStorage, synced via awareness)
|
|
- Polished cursor rendering on the map
|
|
- Visual feedback when someone joins or leaves
|
|
|
|
**Non-Goals:**
|
|
- Chat or messaging between participants
|
|
- Cursor position sharing outside the map (e.g., in the sidebar)
|
|
- Participant permissions or kicking (admin-only debug feature already exists)
|
|
|
|
## Decisions
|
|
|
|
### D1: Participant list in session header
|
|
|
|
Show colored dots + names in the header bar (already has space between profile
|
|
selector and connection status). Clicking your own name opens an inline edit.
|
|
Keeps the sidebar free for waypoints.
|
|
|
|
### D2: Name persisted in localStorage, synced via awareness
|
|
|
|
Current approach: random name from a list, stored in localStorage as
|
|
`trails:user`. Enhancement: let users edit it. On change, update localStorage
|
|
AND call `awareness.setLocalStateField("user", { color, name })`. All other
|
|
clients see the update immediately.
|
|
|
|
### D3: Cursor as SVG pointer with name tag
|
|
|
|
Replace the current `divIcon` cursor label with: a small SVG arrow in the
|
|
user's color + a name tag with background, shadow, and rounded corners.
|
|
Position offset so the pointer tip is at the actual lat/lng.
|
|
|
|
### D4: Join/leave toasts
|
|
|
|
When awareness detects a new client or a client leaving, show a brief toast
|
|
("Alice joined" / "Bob left") that auto-dismisses after 3 seconds. Use a
|
|
simple absolute-positioned div, no toast library.
|