trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add multiplayer awareness: participant list, name editing, cursor styling, join/leave toasts

Browse source 
Implement the planner-multiplayer-awareness OpenSpec change:

- Add setUserName to use-yjs.ts that persists to localStorage and syncs via awareness
- Create ParticipantList component showing all session participants with color dots,
  host badge, and inline name editing for the local user
- Replace plain text cursor labels with SVG pointer arrows and styled name tags
  (colored background, drop shadow, rounded corners, z-index below map controls)
- Track awareness add/remove events and display auto-dismissing toasts (3s)
  when participants join or leave the session
- Add i18n keys for participant UI in English and German

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-03-25 04:11:58 +01:00
parent 068b474f94
commit 9b4f4c6759
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
7 changed files with 292 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

26
openspec/changes/planner-multiplayer-awareness/tasks.md
View file

@ -1,27 +1,27 @@
## 1. Name Editing
- [ ] 1.1 Update use-yjs.ts: allow updating user name via a returned setter function
- [ ] 1.2 Save updated name to localStorage and sync via awareness.setLocalStateField
- [ ] 1.3 Add i18n keys for participant UI (en + de)
- [x] 1.1 Update use-yjs.ts: allow updating user name via a returned setter function
- [x] 1.2 Save updated name to localStorage and sync via awareness.setLocalStateField
- [x] 1.3 Add i18n keys for participant UI (en + de)
## 2. Participant List
- [ ] 2.1 Create ParticipantList component showing all awareness states (name, color dot, host badge)
- [ ] 2.2 Add inline name edit when clicking own name in the list
- [ ] 2.3 Integrate ParticipantList into SessionView header
- [x] 2.1 Create ParticipantList component showing all awareness states (name, color dot, host badge)
- [x] 2.2 Add inline name edit when clicking own name in the list
- [x] 2.3 Integrate ParticipantList into SessionView header
## 3. Cursor Styling
- [ ] 3.1 Replace current divIcon cursor with SVG pointer arrow + styled name tag (background, shadow, rounded)
- [ ] 3.2 Set cursor z-index below map controls to avoid overlap
- [x] 3.1 Replace current divIcon cursor with SVG pointer arrow + styled name tag (background, shadow, rounded)
- [x] 3.2 Set cursor z-index below map controls to avoid overlap
## 4. Join/Leave Toasts
- [ ] 4.1 Track awareness changes (added/removed clients) in SessionView
- [ ] 4.2 Show auto-dismissing toast when participant joins or leaves (3 second duration)
- [x] 4.1 Track awareness changes (added/removed clients) in SessionView
- [x] 4.2 Show auto-dismissing toast when participant joins or leaves (3 second duration)
## 5. Verify
- [ ] 5.1 Test with two browser windows: verify participant list, name editing, cursor rendering
- [ ] 5.2 Verify join/leave toasts appear correctly
- [ ] 5.3 Verify name persists across page refresh (localStorage)
- [x] 5.1 Test with two browser windows: verify participant list, name editing, cursor rendering
- [x] 5.2 Verify join/leave toasts appear correctly
- [x] 5.3 Verify name persists across page refresh (localStorage)