Implement watch-event feature (017) with bookmark in RsvpBar

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>

frontend/src/components/EventCard.vue

@@ -12,7 +12,7 @@
       <span class="event-card__time">{{ displayTime }}</span>
     </RouterLink>
     <span v-if="eventRole" class="event-card__badge" :class="`event-card__badge--${eventRole}`">
-      {{ eventRole === 'organizer' ? 'Organizer' : 'Attendee' }}
+      {{ eventRole === 'organizer' ? 'Organizer' : eventRole === 'attendee' ? 'Attendee' : 'Watching' }}
     </span>
     <button
       class="event-card__delete"
@@ -34,7 +34,7 @@ const props = defineProps<{
   title: string
   relativeTime: string
   isPast: boolean
-  eventRole?: 'organizer' | 'attendee'
+  eventRole?: 'organizer' | 'attendee' | 'watcher'
   timeDisplayMode?: 'clock' | 'relative'
   dateTime?: string
 }>()
@@ -152,6 +152,12 @@ function onTouchEnd() {
   color: var(--color-text-bright);
 }
 
+.event-card__badge--watcher {
+  background: var(--color-glass);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-glass-border);
+}
+
 .event-card__delete {
   flex-shrink: 0;
   width: 28px;

frontend/src/components/EventList.vue

@@ -65,6 +65,11 @@ const deleteDialogMessage = computed(() => {
 
 function requestDelete(eventToken: string) {
   deleteError.value = ''
+  const role = getRole(getStoredEvents().find((e) => e.eventToken === eventToken)!)
+  if (role === 'watcher') {
+    removeEvent(eventToken)
+    return
+  }
   pendingDeleteToken.value = eventToken
 }
 
@@ -105,10 +110,10 @@ function cancelDelete() {
   pendingDeleteToken.value = null
 }
 
-function getRole(event: StoredEvent): 'organizer' | 'attendee' | undefined {
+function getRole(event: StoredEvent): 'organizer' | 'attendee' | 'watcher' {
   if (event.organizerToken) return 'organizer'
   if (event.rsvpToken) return 'attendee'
-  return undefined
+  return 'watcher'
 }
 
 const groupedSections = computed(() => {

frontend/src/components/RsvpBar.vue

@@ -31,10 +31,22 @@
       </div>
 
       <!-- CTA state: no RSVP yet -->
-      <div v-else class="rsvp-bar__cta glow-border glow-border--animated">
-        <button class="rsvp-bar__cta-inner glass-inner" type="button" @click="$emit('open')">
-          I'm attending
-        </button>
+      <div v-else class="rsvp-bar__row">
+        <div class="rsvp-bar__cta glow-border glow-border--animated">
+          <button class="rsvp-bar__cta-inner glass-inner" type="button" @click="$emit('open')">
+            I'm attending
+          </button>
+        </div>
+        <div class="rsvp-bar__bookmark glow-border glow-border--animated">
+          <button
+            class="rsvp-bar__bookmark-inner glass-inner"
+            type="button"
+            :aria-label="bookmarked ? 'Stop watching this event' : 'Watch this event'"
+            @click="$emit('bookmark')"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" :fill="bookmarked ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -45,11 +57,13 @@ import { ref, watch } from 'vue'
 
 const props = defineProps<{
   hasRsvp?: boolean
+  bookmarked?: boolean
 }>()
 
 defineEmits<{
   open: []
   cancel: []
+  bookmark: []
 }>()
 
 const expanded = ref(false)
@@ -92,8 +106,14 @@ watch(expanded, (isExpanded) => {
   max-width: var(--content-max-width);
 }
 
+.rsvp-bar__row {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
 .rsvp-bar__cta {
-  width: 100%;
+  flex: 1;
+  min-width: 0;
   border-radius: var(--radius-button);
   transition: transform 0.1s ease;
 }
@@ -206,4 +226,37 @@ watch(expanded, (isExpanded) => {
   opacity: 0;
   transform: translateY(-4px);
 }
+
+.rsvp-bar__bookmark {
+  flex-shrink: 0;
+  border-radius: var(--radius-button);
+  transition: transform 0.1s ease;
+}
+
+.rsvp-bar__bookmark:hover {
+  transform: scale(1.02);
+}
+
+.rsvp-bar__bookmark:active {
+  transform: scale(0.98);
+}
+
+.rsvp-bar__bookmark-inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-md);
+  border-radius: calc(var(--radius-button) - 2px);
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-on-gradient);
+  line-height: 0;
+}
+
+.rsvp-bar__bookmark-inner svg {
+  display: block;
+}
+
 </style>

frontend/src/components/__tests__/EventCard.spec.ts

@@ -63,6 +63,12 @@ describe('EventCard', () => {
     expect(wrapper.text()).toContain('Attendee')
   })
 
+  it('renders watcher badge when eventRole is watcher', () => {
+    const wrapper = mountCard({ eventRole: 'watcher' })
+    expect(wrapper.find('.event-card__badge--watcher').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Watching')
+  })
+
   it('renders no badge when eventRole is undefined', () => {
     const wrapper = mountCard({ eventRole: undefined })
     expect(wrapper.find('.event-card__badge').exists()).toBe(false)

frontend/src/components/__tests__/EventList.spec.ts

@@ -20,6 +20,8 @@ const mockEvents = [
   { eventToken: 'today-1', title: 'Today Event', dateTime: '2026-03-11T18:00:00' },
   { eventToken: 'week-1', title: 'This Week Event', dateTime: '2026-03-13T10:00:00' },
   { eventToken: 'nextweek-1', title: 'Next Week Event', dateTime: '2026-03-16T10:00:00' },
+  { eventToken: 'org-1', title: 'Organized Event', dateTime: '2026-03-11T19:00:00', organizerToken: 'org-token' },
+  { eventToken: 'rsvp-1', title: 'Attending Event', dateTime: '2026-03-11T20:00:00', rsvpToken: 'rsvp-token', rsvpName: 'Max' },
 ]
 
 vi.mock('../../composables/useEventStorage', () => ({
@@ -32,6 +34,13 @@ vi.mock('../../composables/useEventStorage', () => ({
   },
   useEventStorage: () => ({
     getStoredEvents: () => mockEvents,
+    getRsvp: (token: string) => {
+      const evt = mockEvents.find((e) => e.eventToken === token)
+      if (evt && 'rsvpToken' in evt && 'rsvpName' in evt) {
+        return { rsvpToken: evt.rsvpToken, rsvpName: evt.rsvpName }
+      }
+      return undefined
+    },
     removeEvent: vi.fn(),
   }),
 }))
@@ -40,7 +49,9 @@ vi.mock('../../composables/useRelativeTime', () => ({
   formatRelativeTime: (dateTime: string) => {
     if (dateTime.includes('03-01')) return '10 days ago'
     if (dateTime.includes('06-15')) return 'in 1 year'
-    if (dateTime.includes('03-11')) return 'in 6 hours'
+    if (dateTime.includes('03-11T18')) return 'in 6 hours'
+    if (dateTime.includes('03-11T19')) return 'in 7 hours'
+    if (dateTime.includes('03-11T20')) return 'in 8 hours'
     if (dateTime.includes('03-13')) return 'in 2 days'
     if (dateTime.includes('03-16')) return 'in 5 days'
     return 'sometime'
@@ -89,7 +100,7 @@ describe('EventList', () => {
   it('renders all valid events as cards', () => {
     const wrapper = mountList()
     const cards = wrapper.findAll('.event-card')
-    expect(cards).toHaveLength(5)
+    expect(cards).toHaveLength(7)
   })
 
   it('marks past events with isPast class', () => {
@@ -137,4 +148,25 @@ describe('EventList', () => {
     const pastSection = wrapper.findAll('.event-section')[4]!
     expect(pastSection.find('.date-subheader').exists()).toBe(true)
   })
+
+  it('assigns watcher role when event has no organizerToken and no rsvpToken', () => {
+    const wrapper = mountList()
+    const badges = wrapper.findAll('.event-card__badge--watcher')
+    expect(badges.length).toBeGreaterThanOrEqual(1)
+    expect(badges[0]!.text()).toBe('Watching')
+  })
+
+  it('assigns organizer role when event has organizerToken', () => {
+    const wrapper = mountList()
+    const badge = wrapper.find('.event-card__badge--organizer')
+    expect(badge.exists()).toBe(true)
+    expect(badge.text()).toBe('Organizer')
+  })
+
+  it('assigns attendee role when event has rsvpToken', () => {
+    const wrapper = mountList()
+    const badge = wrapper.find('.event-card__badge--attendee')
+    expect(badge.exists()).toBe(true)
+    expect(badge.text()).toBe('Attendee')
+  })
 })