# 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