Implement watch-event feature (017) with bookmark in RsvpBar
All checks were successful
CI / backend-test (push) Successful in 1m0s
CI / frontend-test (push) Successful in 27s
CI / frontend-e2e (push) Successful in 1m30s
CI / build-and-publish (push) Has been skipped

Add client-side watch/bookmark functionality: users can save events to
localStorage without RSVPing via a bookmark button next to the "I'm attending"
CTA. Watched events appear in the event list with a "Watching" label.
Bookmark is only visible for visitors (not attendees or organizers).

Includes spec, plan, research, tasks, unit tests, and E2E tests.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-12 22:20:57 +01:00
parent e01d5ee642
commit c450849e4d
22 changed files with 1266 additions and 31 deletions

View File

@@ -0,0 +1,33 @@
# Quickstart: Watch Event
**Feature**: 017-watch-event
**Date**: 2026-03-12
## What This Feature Does
Adds a bookmark icon to the event detail page that lets users save events locally without RSVPing. Saved events appear in the event list with a "Watching" label.
## Files to Modify
| File | Change |
|------|--------|
| `frontend/src/composables/useEventStorage.ts` | Add `saveWatch()` and `isStored()` methods |
| `frontend/src/views/EventDetailView.vue` | Add bookmark icon left of title, shake animation trigger |
| `frontend/src/components/EventList.vue` | Update `getRole()` to return `'watcher'`, skip confirmation for watchers |
| `frontend/src/components/EventCard.vue` | Add `'watcher'` to role type, add badge styling |
## Implementation Order
1. **useEventStorage** — Add `saveWatch()` and `isStored()` (unit tests first)
2. **EventCard** — Extend role type, add "Watching" badge with styling (unit tests first)
3. **EventList** — Update `getRole()`, adjust delete flow for watchers (unit tests first)
4. **EventDetailView** — Add bookmark icon with all states and shake animation
5. **E2E tests** — Cover all 7 user stories from spec
## Key Design Decisions
- **No new StoredEvent fields** — watcher state is the absence of both `organizerToken` and `rsvpToken`
- **No backend changes** — entirely client-side
- **Bookmark icon left of title** — flex container, vertically centered
- **Non-interactive for attendees/organizers** — tapping shakes the relevant bottom action button
- **No confirmation dialog for watcher deletion** from event list