Fix datetime-local input overflow and invisible text on iOS Safari

The native datetime-local picker on iOS Safari has an intrinsic min-width
that exceeds the form container, and its webkit pseudo-elements don't
inherit the glass text color, making the selected value invisible.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.specify/memory/ideen.md

@@ -180,6 +180,7 @@ Organisator kann Event absagen (mit optionaler Nachricht, Einweg-Transition).
 * RSVPs werden nach Absage abgelehnt
 * Absage-Nachricht nachträglich editierbar
 * Kann nicht rückgängig gemacht werden
+* Wenn Organisator Event auf der Eventlistenseite löscht, muss dabei das Event abgesagt werden (nicht nur lokal entfernen)
 
 ### 025 – Event löschen
 Organisator löscht Event permanent und unwiderruflich.

CLAUDE.md

@@ -51,12 +51,8 @@ The following skills are available and should be used for their respective purpo
 - Project specifications (user stories, setup tasks, personas, etc.) live in `specs/` (feature dirs) and `.specify/memory/` (cross-cutting docs).
 
 ## Active Technologies
-- Java 25 (backend), TypeScript 5.9 (frontend) + Spring Boot 3.5.x, Vue 3, Vue Router 5, openapi-fetch, openapi-typescript (007-view-event)
-- PostgreSQL (JPA via Spring Data, Liquibase migrations) (007-view-event)
-- TypeScript 5.9 (frontend only) + Vue 3, Vue Router 5 (existing — no additions) (010-event-list-grouping)
-- localStorage via `useEventStorage.ts` composable (existing — no changes) (010-event-list-grouping)
-- Java 25, Spring Boot 3.5.x + Spring Scheduling (`@Scheduled`), Spring Data JPA (for native query) (013-auto-delete-expired)
-- PostgreSQL (existing, Liquibase migrations) (013-auto-delete-expired)
+- TypeScript 5.x, Vue 3 (Composition API) + openapi-fetch, Vue Router, Vite (018-cancel-event-list)
+- localStorage via `useEventStorage()` composable (018-cancel-event-list)
 
 ## Recent Changes
-- 007-view-event: Added Java 25 (backend), TypeScript 5.9 (frontend) + Spring Boot 3.5.x, Vue 3, Vue Router 5, openapi-fetch, openapi-typescript
+- 018-cancel-event-list: Added TypeScript 5.x, Vue 3 (Composition API) + openapi-fetch, Vue Router, Vite

Dockerfile

@@ -1,5 +1,5 @@
 # Stage 1: Build frontend
-FROM node:24-alpine AS frontend-build
+FROM node:25-alpine AS frontend-build
 WORKDIR /app/frontend
 COPY frontend/package.json frontend/package-lock.json ./
 RUN npm ci

frontend/e2e/cancel-event-list.spec.ts

@@ -0,0 +1,210 @@
+import { test, expect } from './msw-setup'
+import type { StoredEvent } from '../src/composables/useEventStorage'
+
+const STORAGE_KEY = 'fete:events'
+
+const organizerEvent: StoredEvent = {
+  eventToken: 'org-event-aaa',
+  title: 'Summer BBQ',
+  dateTime: '2027-06-15T18:00:00Z',
+  organizerToken: 'org-secret-token',
+}
+
+const attendeeEvent: StoredEvent = {
+  eventToken: 'att-event-bbb',
+  title: 'Team Meeting',
+  dateTime: '2027-01-10T09:00:00Z',
+  rsvpToken: 'rsvp-token-1',
+  rsvpName: 'Alice',
+}
+
+function seedEvents(events: StoredEvent[]): string {
+  return `window.localStorage.setItem('${STORAGE_KEY}', ${JSON.stringify(JSON.stringify(events))})`
+}
+
+test.describe('US1: Organizer Cancels Event from List', () => {
+  test('T001: organizer taps delete, confirms, event is removed after successful API call', async ({
+    page,
+    network,
+  }) => {
+    await page.addInitScript(seedEvents([organizerEvent, attendeeEvent]))
+
+    const { http, HttpResponse } = await import('msw')
+    let patchCalled = false
+    network.use(
+      http.patch('*/api/events/:token', ({ request, params }) => {
+        const url = new URL(request.url)
+        if (
+          params['token'] === organizerEvent.eventToken &&
+          url.searchParams.get('organizerToken') === organizerEvent.organizerToken
+        ) {
+          patchCalled = true
+          return new HttpResponse(null, { status: 204 })
+        }
+        return HttpResponse.json(
+          { type: 'about:blank', title: 'Forbidden', status: 403 },
+          { status: 403, headers: { 'Content-Type': 'application/problem+json' } },
+        )
+      }),
+    )
+
+    await page.goto('/')
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+
+    // Click delete on organizer event
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+
+    // Confirmation dialog appears with organizer-specific text
+    await expect(page.getByRole('alertdialog')).toBeVisible()
+
+    // Confirm cancellation
+    await page.getByRole('button', { name: 'Remove', exact: true }).click()
+
+    // Event is removed from list
+    await expect(page.getByText('Summer BBQ')).not.toBeVisible()
+    // Other event remains
+    await expect(page.getByText('Team Meeting')).toBeVisible()
+
+    expect(patchCalled).toBe(true)
+  })
+
+  test('T002: organizer confirms cancellation, API fails, event stays in list and error shown', async ({
+    page,
+    network,
+  }) => {
+    await page.addInitScript(seedEvents([organizerEvent]))
+
+    const { http, HttpResponse } = await import('msw')
+    network.use(
+      http.patch('*/api/events/:token', () => {
+        return HttpResponse.json(
+          {
+            type: 'about:blank',
+            title: 'Internal Server Error',
+            status: 500,
+          },
+          { status: 500, headers: { 'Content-Type': 'application/problem+json' } },
+        )
+      }),
+    )
+
+    await page.goto('/')
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    await expect(page.getByRole('alertdialog')).toBeVisible()
+
+    await page.getByRole('button', { name: 'Remove', exact: true }).click()
+
+    // Event stays in list
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+  })
+
+  test('T003: organizer confirms cancellation, API returns 409 Conflict, event is silently removed', async ({
+    page,
+    network,
+  }) => {
+    await page.addInitScript(seedEvents([organizerEvent]))
+
+    const { http, HttpResponse } = await import('msw')
+    network.use(
+      http.patch('*/api/events/:token', () => {
+        return HttpResponse.json(
+          {
+            type: 'about:blank',
+            title: 'Conflict',
+            status: 409,
+            detail: 'Event is already cancelled.',
+          },
+          { status: 409, headers: { 'Content-Type': 'application/problem+json' } },
+        )
+      }),
+    )
+
+    await page.goto('/')
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    await expect(page.getByRole('alertdialog')).toBeVisible()
+
+    await page.getByRole('button', { name: 'Remove', exact: true }).click()
+
+    // 409 treated as success — event removed
+    await expect(page.getByText('Summer BBQ')).not.toBeVisible()
+  })
+
+  test('T004: organizer opens cancel dialog then dismisses (cancel button), event remains', async ({
+    page,
+  }) => {
+    await page.addInitScript(seedEvents([organizerEvent]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    await expect(page.getByRole('alertdialog')).toBeVisible()
+
+    // Dismiss via Cancel button
+    await page.getByRole('button', { name: 'Cancel' }).click()
+
+    await expect(page.getByRole('alertdialog')).not.toBeVisible()
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+  })
+
+  test('T004b: organizer opens cancel dialog then dismisses via Escape', async ({ page }) => {
+    await page.addInitScript(seedEvents([organizerEvent]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    await expect(page.getByRole('alertdialog')).toBeVisible()
+
+    await page.keyboard.press('Escape')
+
+    await expect(page.getByRole('alertdialog')).not.toBeVisible()
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+  })
+
+  test('T004c: organizer opens cancel dialog then dismisses via overlay click', async ({
+    page,
+  }) => {
+    await page.addInitScript(seedEvents([organizerEvent]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    await expect(page.getByRole('alertdialog')).toBeVisible()
+
+    // Click on overlay (outside dialog)
+    await page.locator('.confirm-dialog__overlay').click({ position: { x: 10, y: 10 } })
+
+    await expect(page.getByRole('alertdialog')).not.toBeVisible()
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+  })
+})
+
+test.describe('US2: Distinct Dialog for Organizer vs. Attendee', () => {
+  test('T011: organizer dialog shows event-cancellation warning', async ({ page }) => {
+    await page.addInitScript(seedEvents([organizerEvent]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+    const dialog = page.getByRole('alertdialog')
+    await expect(dialog).toBeVisible()
+
+    // Organizer-specific title and message
+    await expect(dialog.locator('.confirm-dialog__title')).toHaveText('Cancel event?')
+    await expect(dialog.locator('.confirm-dialog__message')).toContainText(
+      'all attendees',
+    )
+  })
+
+  test('T012: attendee dialog preserves existing RSVP-cancellation message', async ({
+    page,
+  }) => {
+    await page.addInitScript(seedEvents([attendeeEvent]))
+    await page.goto('/')
+
+    await page.getByRole('button', { name: /Remove Team Meeting/ }).click()
+    const dialog = page.getByRole('alertdialog')
+    await expect(dialog).toBeVisible()
+
+    // Attendee-specific title and message
+    await expect(dialog.locator('.confirm-dialog__title')).toHaveText('Remove event?')
+    await expect(dialog.locator('.confirm-dialog__message')).toContainText(
+      'attendance will be cancelled',
+    )
+  })
+})

frontend/e2e/cancel-rsvp.spec.ts

@@ -43,7 +43,7 @@ test.describe('US1: Cancel RSVP from Event Detail View', () => {
     await expect(statusBar).toBeVisible()
 
     // Cancel button hidden initially
-    await expect(page.getByRole('button', { name: 'Cancel attendance' })).not.toBeVisible()
+    await expect(page.getByRole('button', { name: 'Cancel RSVP' })).not.toBeVisible()
   })
 
   test('tapping status bar reveals cancel button', async ({ page, network }) => {
@@ -57,7 +57,7 @@ test.describe('US1: Cancel RSVP from Event Detail View', () => {
     await page.getByRole('button', { name: /You're attending/ }).click()
 
     // Cancel button appears
-    await expect(page.getByRole('button', { name: 'Cancel attendance' })).toBeVisible()
+    await expect(page.getByRole('button', { name: 'Cancel RSVP' })).toBeVisible()
   })
 
   test('confirm cancellation → localStorage cleared, count decremented, bar reset', async ({ page, network }) => {
@@ -70,13 +70,13 @@ test.describe('US1: Cancel RSVP from Event Detail View', () => {
     await page.addInitScript(seedEvents([rsvpSeed()]))
     await page.goto(`/events/${fullEvent.eventToken}`)
 
-    // Expand → Cancel attendance → Confirm in dialog
+    // Expand → Cancel RSVP → Confirm in dialog
     await page.getByRole('button', { name: /You're attending/ }).click()
     await page.locator('.rsvp-bar__cancel').click()
 
     // Confirm dialog
-    await expect(page.getByText('Your attendance will be permanently cancelled.')).toBeVisible()
-    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel attendance' }).click()
+    await expect(page.getByText('The organizer will no longer see you as attending.')).toBeVisible()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel RSVP' }).click()
 
     // Bar resets to CTA state
     await expect(page.getByRole('button', { name: "I'm attending" })).toBeVisible()
@@ -108,7 +108,7 @@ test.describe('US1: Cancel RSVP from Event Detail View', () => {
     // Expand → Cancel → Confirm in dialog
     await page.getByRole('button', { name: /You're attending/ }).click()
     await page.locator('.rsvp-bar__cancel').click()
-    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel attendance' }).click()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel RSVP' }).click()
 
     // Error message
     await expect(page.getByText('Could not cancel RSVP. Please try again.')).toBeVisible()
@@ -136,7 +136,7 @@ test.describe('US1: Cancel RSVP from Event Detail View', () => {
     // Cancel first
     await page.getByRole('button', { name: /You're attending/ }).click()
     await page.locator('.rsvp-bar__cancel').click()
-    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel attendance' }).click()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel RSVP' }).click()
 
     // CTA should be back
     await expect(page.getByRole('button', { name: "I'm attending" })).toBeVisible()
@@ -162,20 +162,20 @@ test.describe('US2: Auto-Cancel on Event List Removal', () => {
     await expect(page.getByText('your attendance will be cancelled')).toBeVisible()
   })
 
-  test('removal of non-RSVP\'d event shows standard dialog', async ({ page }) => {
-    const noRsvp: StoredEvent = {
-      eventToken: 'no-rsvp-token',
-      title: 'No RSVP Event',
+  test('removal of non-RSVP\'d watcher event shows standard dialog', async ({ page }) => {
+    const watcherEvent: StoredEvent = {
+      eventToken: 'watcher-token',
+      title: 'Watcher Event',
       dateTime: '2027-06-15T18:00:00Z',
-      organizerToken: 'org-123',
     }
-    await page.addInitScript(seedEvents([noRsvp]))
+    await page.addInitScript(seedEvents([watcherEvent]))
     await page.goto('/')
 
-    await page.getByRole('button', { name: /Remove No RSVP Event/ }).click()
+    // Watcher events are removed directly without dialog
+    await page.getByRole('button', { name: /Remove Watcher Event/ }).click()
 
-    await expect(page.getByText('This event will be removed from your list.')).toBeVisible()
-    await expect(page.getByText('attendance will be cancelled')).not.toBeVisible()
+    // Watcher removal is immediate — event disappears
+    await expect(page.getByText('Watcher Event')).not.toBeVisible()
   })
 
   test('confirm removal → DELETE called → event removed from list', async ({ page, network }) => {
@@ -244,7 +244,7 @@ test.describe('US3: Cancel RSVP with Stale/Invalid Token', () => {
     // Cancel flow
     await page.getByRole('button', { name: /You're attending/ }).click()
     await page.locator('.rsvp-bar__cancel').click()
-    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel attendance' }).click()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel RSVP' }).click()
 
     // Treated as success — CTA returns
     await expect(page.getByRole('button', { name: "I'm attending" })).toBeVisible()

frontend/e2e/home-events.spec.ts

@@ -93,19 +93,30 @@ test.describe('US4: Past Events Appear Faded', () => {
 })
 
 test.describe('US3: Remove Event from List', () => {
-  test('delete icon triggers confirmation dialog, confirm removes event', async ({ page }) => {
+  test('delete icon triggers confirmation dialog, confirm removes event', async ({
+    page,
+    network,
+  }) => {
     await page.addInitScript(seedEvents([futureEvent1, futureEvent2]))
+
+    const { http, HttpResponse } = await import('msw')
+    network.use(
+      http.patch('*/api/events/:token', () => {
+        return new HttpResponse(null, { status: 204 })
+      }),
+    )
+
     await page.goto('/')
 
     // Both events visible
     await expect(page.getByText('Summer BBQ')).toBeVisible()
     await expect(page.getByText('Team Meeting')).toBeVisible()
 
-    // Click delete on Summer BBQ
+    // Click delete on Summer BBQ (organizer event)
     await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
 
-    // Confirmation dialog appears
-    await expect(page.getByText('Remove event?')).toBeVisible()
+    // Confirmation dialog appears (organizer event shows "Cancel event?")
+    await expect(page.getByText('Cancel event?')).toBeVisible()
 
     // Confirm removal
     await page.getByRole('button', { name: 'Remove', exact: true }).click()
@@ -120,13 +131,13 @@ test.describe('US3: Remove Event from List', () => {
     await page.goto('/')
 
     await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
-    await expect(page.getByText('Remove event?')).toBeVisible()
+    await expect(page.getByText('Cancel event?')).toBeVisible()
 
     // Cancel
     await page.getByRole('button', { name: 'Cancel' }).click()
 
     // Dialog gone, event still there
-    await expect(page.getByText('Remove event?')).not.toBeVisible()
+    await expect(page.getByText('Cancel event?')).not.toBeVisible()
     await expect(page.getByText('Summer BBQ')).toBeVisible()
   })
 })
@@ -139,7 +150,7 @@ test.describe('US5: Visual Distinction for Event Roles', () => {
     const card = page.locator('.event-card').filter({ hasText: 'Summer BBQ' })
     const badge = card.locator('.event-card__badge')
     await expect(badge).toBeVisible()
-    await expect(badge).toHaveText('Organizer')
+    await expect(badge).toHaveText('Organizing')
     await expect(badge).toHaveClass(/event-card__badge--organizer/)
   })
 
@@ -150,16 +161,19 @@ test.describe('US5: Visual Distinction for Event Roles', () => {
     const card = page.locator('.event-card').filter({ hasText: 'Team Meeting' })
     const badge = card.locator('.event-card__badge')
     await expect(badge).toBeVisible()
-    await expect(badge).toHaveText('Attendee')
+    await expect(badge).toHaveText('Attending')
     await expect(badge).toHaveClass(/event-card__badge--attendee/)
   })
 
-  test('shows no badge for events without organizerToken or rsvpToken', async ({ page }) => {
+  test('shows watcher badge for events without organizerToken or rsvpToken', async ({ page }) => {
     await page.addInitScript(seedEvents([pastEvent]))
     await page.goto('/')
 
     const card = page.locator('.event-card').filter({ hasText: 'New Year Party' })
-    await expect(card.locator('.event-card__badge')).toHaveCount(0)
+    const badge = card.locator('.event-card__badge')
+    await expect(badge).toBeVisible()
+    await expect(badge).toHaveText('Watching')
+    await expect(badge).toHaveClass(/event-card__badge--watcher/)
   })
 })
 

frontend/e2e/watch-event.spec.ts

@@ -0,0 +1,218 @@
+import { http, HttpResponse } from 'msw'
+import { test, expect } from './msw-setup'
+import type { StoredEvent } from '../src/composables/useEventStorage'
+
+const STORAGE_KEY = 'fete:events'
+
+const fullEvent = {
+  eventToken: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
+  title: 'Summer BBQ',
+  description: 'Bring your own drinks!',
+  dateTime: '2026-03-15T20:00:00+01:00',
+  timezone: 'Europe/Berlin',
+  location: 'Central Park, NYC',
+  attendeeCount: 12,
+  cancelled: false,
+}
+
+const rsvpToken = 'd4e5f6a7-b8c9-0123-4567-890abcdef012'
+const organizerToken = 'org-token-1234'
+
+function seedEvents(events: StoredEvent[]): string {
+  return `window.localStorage.setItem('${STORAGE_KEY}', ${JSON.stringify(JSON.stringify(events))})`
+}
+
+function watchSeed(): StoredEvent {
+  return {
+    eventToken: fullEvent.eventToken,
+    title: fullEvent.title,
+    dateTime: fullEvent.dateTime,
+  }
+}
+
+function rsvpSeed(): StoredEvent {
+  return {
+    eventToken: fullEvent.eventToken,
+    title: fullEvent.title,
+    dateTime: fullEvent.dateTime,
+    rsvpToken,
+    rsvpName: 'Anna',
+  }
+}
+
+function organizerSeed(): StoredEvent {
+  return {
+    eventToken: fullEvent.eventToken,
+    title: fullEvent.title,
+    dateTime: fullEvent.dateTime,
+    organizerToken,
+  }
+}
+
+test.describe('US1: Watch event from detail page', () => {
+  test('bookmark unfilled by default, tapping watches the event', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    await expect(bookmark).toBeVisible()
+    await expect(bookmark).toHaveAttribute('aria-label', 'Watch this event')
+
+    await bookmark.click()
+
+    await expect(bookmark).toHaveAttribute('aria-label', 'Stop watching this event')
+
+    // Navigate to event list via back link
+    await page.getByLabel('Back to home').click()
+
+    // Event appears with "Watching" label
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+    await expect(page.getByText('Watching')).toBeVisible()
+  })
+})
+
+test.describe('US2: Un-watch event from detail page', () => {
+  test('tapping filled bookmark un-watches the event', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.addInitScript(seedEvents([watchSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    await expect(bookmark).toHaveAttribute('aria-label', 'Stop watching this event')
+
+    await bookmark.click()
+
+    await expect(bookmark).toHaveAttribute('aria-label', 'Watch this event')
+
+    // Navigate to event list via back link (avoid page.goto re-running addInitScript)
+    await page.getByLabel('Back to home').click()
+
+    // Event is gone
+    await expect(page.getByText('Summer BBQ')).not.toBeVisible()
+  })
+})
+
+test.describe('US3: Bookmark reflects attending status', () => {
+  test('bookmark is not visible when user has RSVPed, list shows Attendee', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Bookmark not shown for attendees — RsvpBar shows status state
+    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    await expect(bookmark).not.toBeVisible()
+
+    // Navigate to list via back link
+    await page.getByLabel('Back to home').click()
+    await expect(page.getByText('Attending')).toBeVisible()
+    await expect(page.getByText('Watching')).not.toBeVisible()
+  })
+})
+
+test.describe('US4: RSVP cancellation preserves watch status', () => {
+  test('cancel RSVP → bookmark reappears, list shows Watching', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+      http.delete('*/api/events/:token/rsvps/:rsvpToken', () => {
+        return new HttpResponse(null, { status: 204 })
+      }),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Cancel RSVP
+    await page.getByRole('button', { name: /You're attending/ }).click()
+    await page.locator('.rsvp-bar__cancel').click()
+    await page.getByRole('alertdialog').getByRole('button', { name: 'Cancel RSVP' }).click()
+
+    // Bookmark reappears in CTA state, filled because event is still stored
+    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    await expect(bookmark).toBeVisible()
+    await expect(bookmark).toHaveAttribute('aria-label', 'Stop watching this event')
+
+    // Navigate to list via back link
+    await page.getByLabel('Back to home').click()
+    await expect(page.getByText('Watching')).toBeVisible()
+    await expect(page.getByText('Attending')).not.toBeVisible()
+  })
+})
+
+test.describe('US5: No bookmark for attendees and organizers', () => {
+  test('attendee does not see bookmark', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.addInitScript(seedEvents([rsvpSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    await expect(bookmark).not.toBeVisible()
+  })
+
+  test('organizer does not see bookmark', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+    )
+    await page.addInitScript(seedEvents([organizerSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    await expect(bookmark).not.toBeVisible()
+  })
+})
+
+test.describe('US6: Un-watch from event list', () => {
+  test('deleting a watched event skips confirmation dialog', async ({ page }) => {
+    await page.addInitScript(seedEvents([watchSeed()]))
+    await page.goto('/')
+
+    await expect(page.getByText('Summer BBQ')).toBeVisible()
+
+    await page.getByRole('button', { name: /Remove Summer BBQ/ }).click()
+
+    // No confirmation dialog — event removed immediately
+    await expect(page.getByText('Remove event?')).not.toBeVisible()
+    await expect(page.getByText('Summer BBQ')).not.toBeVisible()
+  })
+})
+
+test.describe('US7: Watcher upgrades to attendee', () => {
+  test('watch → RSVP → bookmark disappears, list shows Attendee', async ({ page, network }) => {
+    network.use(
+      http.get('*/api/events/:token', () => HttpResponse.json(fullEvent)),
+      http.post('*/api/events/:token/rsvps', () => {
+        return HttpResponse.json(
+          { rsvpToken: 'new-rsvp-token', name: 'Max' },
+          { status: 201 },
+        )
+      }),
+    )
+    await page.addInitScript(seedEvents([watchSeed()]))
+    await page.goto(`/events/${fullEvent.eventToken}`)
+
+    // Verify watching state — bookmark visible
+    const bookmark = page.locator('.rsvp-bar__bookmark-inner')
+    await expect(bookmark).toBeVisible()
+    await expect(bookmark).toHaveAttribute('aria-label', 'Stop watching this event')
+
+    // RSVP
+    await page.getByRole('button', { name: "I'm attending" }).click()
+    const dialog = page.getByRole('dialog', { name: 'RSVP' })
+    await dialog.getByLabel('Your name').fill('Max')
+    await dialog.getByRole('button', { name: 'Count me in' }).click()
+
+    // Bookmark gone — status bar shown instead
+    await expect(bookmark).not.toBeVisible()
+
+    // Navigate to list via back link
+    await page.getByLabel('Back to home').click()
+    await expect(page.getByText('Attending')).toBeVisible()
+    await expect(page.getByText('Watching')).not.toBeVisible()
+  })
+})

frontend/package-lock.json

@@ -3614,35 +3614,35 @@
       }
     },
     "node_modules/@vue/devtools-core": {
-      "version": "8.0.7",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-8.0.7.tgz",
-      "integrity": "sha512-PmpiPxvg3Of80ODHVvyckxwEW1Z02VIAvARIZS1xegINn3VuNQLm9iHUmKD+o6cLkMNWV8OG8x7zo0kgydZgdg==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-8.1.0.tgz",
+      "integrity": "sha512-LvD1VgDpoHmYL00IgKRLKktF6SsPAb0yaV8wB8q2jRwsAWvqhS8+vsMLEGKNs7uoKyymXhT92dhxgf/wir6YGQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-kit": "^8.0.7",
-        "@vue/devtools-shared": "^8.0.7"
+        "@vue/devtools-kit": "^8.1.0",
+        "@vue/devtools-shared": "^8.1.0"
       },
       "peerDependencies": {
         "vue": "^3.0.0"
       }
     },
     "node_modules/@vue/devtools-kit": {
-      "version": "8.0.7",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.0.7.tgz",
-      "integrity": "sha512-H6esJGHGl5q0E9iV3m2EoBQHJ+V83WMW83A0/+Fn95eZ2iIvdsq4+UCS6yT/Fdd4cGZSchx/MdWDreM3WqMsDw==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.1.0.tgz",
+      "integrity": "sha512-/NZlS4WtGIB54DA/z10gzk+n/V7zaqSzYZOVlg2CfdnpIKdB61bd7JDIMxf/zrtX41zod8E2/bbEBoW/d7x70Q==",
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-shared": "^8.0.7",
+        "@vue/devtools-shared": "^8.1.0",
         "birpc": "^2.6.1",
         "hookable": "^5.5.3",
         "perfect-debounce": "^2.0.0"
       }
     },
     "node_modules/@vue/devtools-shared": {
-      "version": "8.0.7",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.0.7.tgz",
-      "integrity": "sha512-CgAb9oJH5NUmbQRdYDj/1zMiaICYSLtm+B1kxcP72LBrifGAjUmt8bx52dDH1gWRPlQgxGPqpAMKavzVirAEhA==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.1.0.tgz",
+      "integrity": "sha512-h8uCb4Qs8UT8VdTT5yjY6tOJ//qH7EpxToixR0xqejR55t5OdISIg7AJ7eBkhBs8iu1qG5gY3QQNN1DF1EelAA==",
       "license": "MIT"
     },
     "node_modules/@vue/eslint-config-typescript": {
@@ -7811,15 +7811,15 @@
       }
     },
     "node_modules/vite-plugin-vue-devtools": {
-      "version": "8.0.7",
-      "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-8.0.7.tgz",
-      "integrity": "sha512-BWj/ykGpqVAJVdPyHmSTUm44buz3jPv+6jnvuFdQSRH0kAgP1cEIE4doHiFyqHXOmuB5EQVR/nh2g9YRiRNs9g==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-8.1.0.tgz",
+      "integrity": "sha512-4AvNRePfni3+PqOunACmAImC6SJVpUv6f7/g4oakyre9hYdEMrvDYlNmTZQsJPzVLMcGzn1FvSEqJ/n4HQ9cDg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vue/devtools-core": "^8.0.7",
-        "@vue/devtools-kit": "^8.0.7",
-        "@vue/devtools-shared": "^8.0.7",
+        "@vue/devtools-core": "^8.1.0",
+        "@vue/devtools-kit": "^8.1.0",
+        "@vue/devtools-shared": "^8.1.0",
         "sirv": "^3.0.2",
         "vite-plugin-inspect": "^11.3.3",
         "vite-plugin-vue-inspector": "^5.3.2"
@@ -7828,7 +7828,7 @@
         "node": ">=v14.21.3"
       },
       "peerDependencies": {
-        "vite": "^6.0.0 || ^7.0.0-0 || ^8.0.0-0"
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
     "node_modules/vite-plugin-vue-inspector": {

frontend/package.json

@@ -53,6 +53,12 @@
     "vitest": "^4.0.18",
     "vue-tsc": "^3.2.5"
   },
+  "browserslist": [
+    ">= 0.5%",
+    "last 2 versions",
+    "Firefox ESR",
+    "not dead"
+  ],
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
   }

frontend/src/App.vue

@@ -1,9 +1,26 @@
 <template>
   <div class="app-container">
+    <header v-if="route.name !== 'home'" class="app-header">
+      <BackLink />
+    </header>
     <RouterView />
   </div>
 </template>
 
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterView, useRoute } from 'vue-router'
+import BackLink from '@/components/BackLink.vue'
+
+const route = useRoute()
 </script>
+
+<style scoped>
+.app-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  padding-top: var(--spacing-lg);
+}
+</style>

frontend/src/assets/main.css

@@ -25,6 +25,9 @@
   --color-danger-bg-strong: rgba(220, 38, 38, 0.2);
   --color-danger-border: rgba(220, 38, 38, 0.3);
   --color-danger-border-strong: rgba(220, 38, 38, 0.4);
+  --color-danger-solid: #d32f2f;
+  --color-danger-solid-hover: #b71c1c;
+  --color-danger-solid-text: #fff;
 
   /* Glass system */
   --color-glass: rgba(255, 255, 255, 0.1);
@@ -159,11 +162,32 @@ textarea.form-field {
   min-height: 5rem;
 }
 
+/* iOS Safari: datetime-local overflows container and shows empty when no value */
+input[type="datetime-local"].form-field {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+input[type="datetime-local"].form-field.glass::-webkit-date-and-time-value {
+  color: var(--color-text-on-gradient);
+  text-align: left;
+}
+
+input[type="datetime-local"].form-field.glass::-webkit-datetime-edit {
+  color: var(--color-text-on-gradient);
+}
+
+input[type="datetime-local"].form-field.glass::-webkit-datetime-edit-fields-wrapper {
+  color: var(--color-text-on-gradient);
+}
+
 /* Form group (label + input) */
 .form-group {
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
+  overflow: hidden;
 }
 
 .form-label {
@@ -214,7 +238,7 @@ textarea.form-field {
 
 /* Error message */
 .field-error {
-  color: #fff;
+  color: var(--color-danger-solid);
   font-size: 0.875rem;
   font-weight: 600;
   padding-left: 0.25rem;
@@ -241,7 +265,6 @@ textarea.form-field {
   border: 1px solid var(--color-glass-border);
   box-shadow: var(--shadow-card);
   backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
 }
 
 .glass:hover:not(input):not(textarea):not(.btn-primary) {
@@ -253,7 +276,6 @@ textarea.form-field {
 .glass-inner {
   background: var(--color-glass-inner);
   backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
 }
 
 /* Glow border: conic gradient wrapper with halo (static) */
@@ -325,7 +347,8 @@ textarea.form-field {
   gap: var(--spacing-md);
 }
 
-.rsvp-form__label {
+.rsvp-form__label,
+.cancel-form__label {
   font-size: 0.85rem;
   font-weight: 700;
   color: var(--color-text-on-gradient);
@@ -333,7 +356,7 @@ textarea.form-field {
 }
 
 .rsvp-form__field-error {
-  color: #d32f2f;
+  color: var(--color-danger-solid);
   font-size: 0.875rem;
   font-weight: 600;
   padding-left: 0.25rem;

frontend/src/components/BackLink.vue

@@ -0,0 +1,28 @@
+<template>
+  <RouterLink to="/" class="back-link" aria-label="Back to home">
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polyline points="15 18 9 12 15 6" />
+    </svg>
+    <span class="back-link__brand">fete</span>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+</script>
+
+<style scoped>
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  color: var(--color-text-on-gradient);
+  text-decoration: none;
+  line-height: 1;
+}
+
+.back-link__brand {
+  font-size: 1.3rem;
+  font-weight: 700;
+}
+</style>

frontend/src/components/BottomSheet.vue

@@ -2,7 +2,18 @@
   <Teleport to="body">
     <Transition name="sheet">
       <div v-if="open" class="sheet-backdrop" @click.self="$emit('close')" @keydown.escape="$emit('close')">
-        <div class="sheet" role="dialog" aria-modal="true" :aria-label="label" ref="sheetEl" tabindex="-1">
+        <div
+          class="sheet"
+          role="dialog"
+          aria-modal="true"
+          :aria-label="label"
+          ref="sheetEl"
+          tabindex="-1"
+          :style="dragStyle"
+          @touchstart="onTouchStart"
+          @touchmove="onTouchMove"
+          @touchend="onTouchEnd"
+        >
           <div class="sheet__handle" aria-hidden="true" />
           <slot />
         </div>
@@ -12,14 +23,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 
 defineProps<{
   open: boolean
   label: string
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   close: []
 }>()
 
@@ -39,6 +50,45 @@ watch(
     }
   },
 )
+
+/* ── Drag-to-dismiss ── */
+const DISMISS_THRESHOLD = 100
+const dragY = ref(0)
+const dragging = ref(false)
+let startY = 0
+
+const dragStyle = computed(() => {
+  if (!dragging.value || dragY.value <= 0) return undefined
+  return {
+    transform: `translateY(${dragY.value}px)`,
+    transition: 'none',
+  }
+})
+
+function onTouchStart(e: TouchEvent) {
+  const touch = e.touches[0]
+  if (!touch) return
+  startY = touch.clientY
+  dragging.value = true
+  dragY.value = 0
+}
+
+function onTouchMove(e: TouchEvent) {
+  if (!dragging.value) return
+  const touch = e.touches[0]
+  if (!touch) return
+  const delta = touch.clientY - startY
+  if (delta > 0) e.preventDefault()
+  dragY.value = Math.max(0, delta)
+}
+
+function onTouchEnd() {
+  if (dragY.value >= DISMISS_THRESHOLD) {
+    emit('close')
+  }
+  dragging.value = false
+  dragY.value = 0
+}
 </script>
 
 <style scoped>
@@ -57,7 +107,6 @@ watch(
   border: 1px solid var(--color-glass-border);
   border-bottom: none;
   backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
   border-radius: 20px 20px 0 0;
   padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl);
   width: 100%;

frontend/src/components/ConfirmDialog.vue

@@ -87,7 +87,6 @@ watch(
   background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
   border: 1px solid var(--color-glass-border);
   backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
   border-radius: var(--radius-card);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
   padding: var(--spacing-xl);
@@ -139,8 +138,8 @@ watch(
 }
 
 .confirm-dialog__btn--confirm {
-  background: #d32f2f;
-  color: #fff;
+  background: var(--color-danger-solid);
+  color: var(--color-danger-solid-text);
 }
 
 .confirm-dialog-enter-active,

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' ? 'Organizing' : eventRole === 'attendee' ? 'Attending' : '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;
@@ -169,7 +175,7 @@ function onTouchEnd() {
 }
 
 .event-card__delete:hover {
-  color: #d32f2f;
+  color: var(--color-danger-solid);
   background: rgba(211, 47, 47, 0.08);
 }
 

frontend/src/components/EventList.vue

@@ -27,7 +27,7 @@
     </section>
     <ConfirmDialog
       :open="!!pendingDeleteToken"
-      title="Remove event?"
+      :title="deleteDialogTitle"
       :message="deleteDialogMessage"
       confirm-label="Remove"
       cancel-label="Cancel"
@@ -49,13 +49,26 @@ import DateSubheader from './DateSubheader.vue'
 import ConfirmDialog from './ConfirmDialog.vue'
 import type { StoredEvent } from '../composables/useEventStorage'
 
-const { getStoredEvents, getRsvp, removeEvent } = useEventStorage()
+const { getStoredEvents, getRsvp, getOrganizerToken, removeEvent } = useEventStorage()
 
 const pendingDeleteToken = ref<string | null>(null)
 const deleteError = ref('')
 
+const pendingDeleteRole = computed(() => {
+  if (!pendingDeleteToken.value) return null
+  const event = getStoredEvents().find((e) => e.eventToken === pendingDeleteToken.value)
+  return event ? getRole(event) : null
+})
+
+const deleteDialogTitle = computed(() => {
+  return pendingDeleteRole.value === 'organizer' ? 'Cancel event?' : 'Remove event?'
+})
+
 const deleteDialogMessage = computed(() => {
   if (!pendingDeleteToken.value) return ''
+  if (pendingDeleteRole.value === 'organizer') {
+    return 'This will permanently cancel the event for all attendees.'
+  }
   const rsvp = getRsvp(pendingDeleteToken.value)
   if (rsvp) {
     return 'This event will be removed from your list and your attendance will be cancelled.'
@@ -65,6 +78,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
 }
 
@@ -72,6 +90,32 @@ async function confirmDelete() {
   if (!pendingDeleteToken.value) return
 
   const eventToken = pendingDeleteToken.value
+  const organizerToken = getOrganizerToken(eventToken)
+
+  if (organizerToken) {
+    try {
+      const { response } = await api.PATCH('/events/{eventToken}', {
+        params: {
+          path: { eventToken },
+          query: { organizerToken },
+        },
+        body: { cancelled: true },
+      })
+
+      if (response.status !== 204 && response.status !== 409 && response.status !== 404) {
+        deleteError.value = 'Could not cancel event. Please try again.'
+        return
+      }
+    } catch {
+      deleteError.value = 'Could not cancel event. Please try again.'
+      return
+    }
+
+    removeEvent(eventToken)
+    pendingDeleteToken.value = null
+    return
+  }
+
   const rsvp = getRsvp(eventToken)
 
   if (rsvp) {
@@ -105,10 +149,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

@@ -25,16 +25,28 @@
             type="button"
             @click="$emit('cancel')"
           >
-            Cancel attendance
+            Cancel RSVP
           </button>
         </Transition>
       </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;
 }
@@ -134,7 +154,6 @@ watch(expanded, (isExpanded) => {
   background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
   border: 1px solid var(--color-glass-border);
   backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
   border-radius: var(--radius-card);
   padding: var(--spacing-md) var(--spacing-lg);
   box-shadow: var(--shadow-card);
@@ -186,7 +205,6 @@ watch(expanded, (isExpanded) => {
   background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
   border: 1px solid var(--color-glass-border);
   backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
   cursor: pointer;
   text-align: center;
   transition: background 0.15s ease;
@@ -206,4 +224,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

@@ -55,12 +55,18 @@ describe('EventCard', () => {
 
   it('renders organizer badge when eventRole is organizer', () => {
     const wrapper = mountCard({ eventRole: 'organizer' })
-    expect(wrapper.text()).toContain('Organizer')
+    expect(wrapper.text()).toContain('Organizing')
   })
 
   it('renders attendee badge when eventRole is attendee', () => {
     const wrapper = mountCard({ eventRole: 'attendee' })
-    expect(wrapper.text()).toContain('Attendee')
+    expect(wrapper.text()).toContain('Attending')
+  })
+
+  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', () => {

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

@@ -1,8 +1,15 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import { createRouter, createMemoryHistory } from 'vue-router'
 import EventList from '../EventList.vue'
 
+vi.mock('../../api/client', () => ({
+  api: {
+    PATCH: vi.fn(),
+    DELETE: vi.fn(),
+  },
+}))
+
 const router = createRouter({
   history: createMemoryHistory(),
   routes: [
@@ -20,8 +27,12 @@ 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' },
 ]
 
+const removeEventMock = vi.fn()
+
 vi.mock('../../composables/useEventStorage', () => ({
   isValidStoredEvent: (e: unknown) => {
     if (typeof e !== 'object' || e === null) return false
@@ -32,7 +43,21 @@ vi.mock('../../composables/useEventStorage', () => ({
   },
   useEventStorage: () => ({
     getStoredEvents: () => mockEvents,
-    removeEvent: vi.fn(),
+    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
+    },
+    getOrganizerToken: (token: string) => {
+      const evt = mockEvents.find((e) => e.eventToken === token)
+      if (evt && 'organizerToken' in evt) {
+        return (evt as Record<string, unknown>).organizerToken as string
+      }
+      return undefined
+    },
+    removeEvent: removeEventMock,
   }),
 }))
 
@@ -40,7 +65,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'
@@ -49,7 +76,10 @@ vi.mock('../../composables/useRelativeTime', () => ({
 
 function mountList() {
   return mount(EventList, {
-    global: { plugins: [router] },
+    global: {
+      plugins: [router],
+      stubs: { Teleport: true },
+    },
   })
 }
 
@@ -89,7 +119,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 +167,140 @@ 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('Organizing')
+  })
+
+  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('Attending')
+  })
+})
+
+describe('EventList — Organizer Cancel (US1)', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(NOW)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('T005: confirmDelete calls PATCH cancel-event API when role is organizer', async () => {
+    const { api } = await import('../../api/client')
+    const patchMock = vi.mocked(api.PATCH)
+    patchMock.mockResolvedValue({ response: { status: 204 } } as never)
+
+    const wrapper = mountList()
+
+    // Find the organizer event delete button and click it
+    const orgCard = wrapper.findAll('.event-card').find((c) => c.text().includes('Organized Event'))
+    expect(orgCard).toBeTruthy()
+    await orgCard!.find('.event-card__delete').trigger('click')
+
+    // Confirm the dialog
+    const confirmBtn = wrapper.find('.confirm-dialog__btn--confirm')
+    await confirmBtn.trigger('click')
+    await flushPromises()
+
+    expect(patchMock).toHaveBeenCalledWith(
+      '/events/{eventToken}',
+      expect.objectContaining({
+        params: expect.objectContaining({
+          path: { eventToken: 'org-1' },
+          query: { organizerToken: 'org-token' },
+        }),
+        body: { cancelled: true },
+      }),
+    )
+  })
+
+  it('T006: confirmDelete treats 409 response as success (removes event from list)', async () => {
+    const { api } = await import('../../api/client')
+    const patchMock = vi.mocked(api.PATCH)
+    patchMock.mockResolvedValue({ response: { status: 409 } } as never)
+
+    removeEventMock.mockClear()
+
+    const wrapper = mountList()
+
+    const orgCard = wrapper.findAll('.event-card').find((c) => c.text().includes('Organized Event'))
+    await orgCard!.find('.event-card__delete').trigger('click')
+
+    const confirmBtn = wrapper.find('.confirm-dialog__btn--confirm')
+    await confirmBtn.trigger('click')
+    await flushPromises()
+
+    // 409 should be treated as success — removeEvent should have been called
+    expect(removeEventMock).toHaveBeenCalledWith('org-1')
+  })
+
+  it('T006b: confirmDelete treats 404 response as success (removes event from list)', async () => {
+    const { api } = await import('../../api/client')
+    const patchMock = vi.mocked(api.PATCH)
+    patchMock.mockResolvedValue({ response: { status: 404 } } as never)
+
+    removeEventMock.mockClear()
+
+    const wrapper = mountList()
+
+    const orgCard = wrapper.findAll('.event-card').find((c) => c.text().includes('Organized Event'))
+    await orgCard!.find('.event-card__delete').trigger('click')
+
+    const confirmBtn = wrapper.find('.confirm-dialog__btn--confirm')
+    await confirmBtn.trigger('click')
+    await flushPromises()
+
+    expect(removeEventMock).toHaveBeenCalledWith('org-1')
+  })
+})
+
+describe('EventList — Dialog Differentiation (US2)', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.setSystemTime(NOW)
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('T013: deleteDialogTitle returns organizer-specific text when role is organizer', async () => {
+    const wrapper = mountList()
+
+    // Click delete on organizer event
+    const orgCard = wrapper.findAll('.event-card').find((c) => c.text().includes('Organized Event'))
+    await orgCard!.find('.event-card__delete').trigger('click')
+
+    const dialogTitle = wrapper.find('.confirm-dialog__title')
+    expect(dialogTitle.text()).toBe('Cancel event?')
+  })
+
+  it('T014: deleteDialogMessage returns existing attendee text when role is attendee', async () => {
+    const wrapper = mountList()
+
+    // Click delete on attendee event
+    const attCard = wrapper.findAll('.event-card').find((c) => c.text().includes('Attending Event'))
+    await attCard!.find('.event-card__delete').trigger('click')
+
+    const dialogTitle = wrapper.find('.confirm-dialog__title')
+    expect(dialogTitle.text()).toBe('Remove event?')
+
+    const dialogMsg = wrapper.find('.confirm-dialog__message')
+    expect(dialogMsg.text()).toContain('attendance will be cancelled')
+  })
 })

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

@@ -6,7 +6,7 @@ describe('RsvpBar', () => {
   it('renders CTA button when hasRsvp is false', () => {
     const wrapper = mount(RsvpBar)
     expect(wrapper.find('.rsvp-bar__cta').exists()).toBe(true)
-    expect(wrapper.find('.rsvp-bar__cta-inner').text()).toBe("I'm attending")
+    expect(wrapper.find('.rsvp-bar__cta-inner').text()).toBe("I'm attending!")
     expect(wrapper.find('.rsvp-bar__status').exists()).toBe(false)
   })
 

frontend/src/composables/__tests__/useEventStorage.spec.ts

@@ -194,6 +194,71 @@ describe('useEventStorage', () => {
   })
 })
 
+describe('useEventStorage – saveWatch / isStored', () => {
+  beforeEach(() => {
+    clearStorage()
+  })
+
+  it('saves a watch-only event (no rsvpToken, no organizerToken)', () => {
+    const { saveWatch, getStoredEvents } = useEventStorage()
+
+    saveWatch('watch-1', 'Concert', '2026-07-01T20:00:00+02:00')
+
+    const events = getStoredEvents()
+    expect(events).toHaveLength(1)
+    expect(events[0]!.eventToken).toBe('watch-1')
+    expect(events[0]!.title).toBe('Concert')
+    expect(events[0]!.dateTime).toBe('2026-07-01T20:00:00+02:00')
+    expect(events[0]!.rsvpToken).toBeUndefined()
+    expect(events[0]!.organizerToken).toBeUndefined()
+  })
+
+  it('does not duplicate if event already stored', () => {
+    const { saveWatch, saveRsvp, getStoredEvents } = useEventStorage()
+
+    saveRsvp('evt-1', 'rsvp-1', 'Max', 'Party', '2026-07-01T20:00:00+02:00')
+    saveWatch('evt-1', 'Party', '2026-07-01T20:00:00+02:00')
+
+    expect(getStoredEvents()).toHaveLength(1)
+    expect(getStoredEvents()[0]!.rsvpToken).toBe('rsvp-1')
+  })
+
+  it('isStored returns true for watched events', () => {
+    const { saveWatch, isStored } = useEventStorage()
+
+    saveWatch('watch-1', 'Concert', '2026-07-01T20:00:00+02:00')
+
+    expect(isStored('watch-1')).toBe(true)
+  })
+
+  it('isStored returns true for attended events', () => {
+    const { saveRsvp, isStored } = useEventStorage()
+
+    saveRsvp('evt-1', 'rsvp-1', 'Max', 'Party', '2026-07-01T20:00:00+02:00')
+
+    expect(isStored('evt-1')).toBe(true)
+  })
+
+  it('isStored returns true for organized events', () => {
+    const { saveCreatedEvent, isStored } = useEventStorage()
+
+    saveCreatedEvent({
+      eventToken: 'evt-1',
+      organizerToken: 'org-1',
+      title: 'My Event',
+      dateTime: '2026-07-01T20:00:00+02:00',
+    })
+
+    expect(isStored('evt-1')).toBe(true)
+  })
+
+  it('isStored returns false for unknown tokens', () => {
+    const { isStored } = useEventStorage()
+
+    expect(isStored('unknown')).toBe(false)
+  })
+})
+
 describe('isValidStoredEvent', () => {
   // Import directly since it's an exported function
   let isValidStoredEvent: (e: unknown) => boolean

frontend/src/composables/useEventStorage.ts

@@ -88,10 +88,24 @@ export function useEventStorage() {
     }
   }
 
+  function saveWatch(eventToken: string, title: string, dateTime: string): void {
+    const events = readEvents()
+    const existing = events.find((e) => e.eventToken === eventToken)
+    if (!existing) {
+      events.push({ eventToken, title, dateTime })
+      writeEvents(events)
+    }
+  }
+
+  function isStored(eventToken: string): boolean {
+    void version.value
+    return readEvents().some((e) => e.eventToken === eventToken)
+  }
+
   function removeEvent(eventToken: string): void {
     const events = readEvents().filter((e) => e.eventToken !== eventToken)
     writeEvents(events)
   }
 
-  return { saveCreatedEvent, getStoredEvents, getOrganizerToken, saveRsvp, getRsvp, removeRsvp, removeEvent }
+  return { saveCreatedEvent, getStoredEvents, getOrganizerToken, saveRsvp, getRsvp, removeRsvp, saveWatch, isStored, removeEvent }
 }

frontend/src/views/EventCreateView.vue

@@ -1,9 +1,6 @@
 <template>
   <main class="create">
-    <header class="create__header">
-      <RouterLink to="/" class="create__back" aria-label="Back to home">&larr;</RouterLink>
-      <h1 class="create__title">Create</h1>
-    </header>
+    <h1 class="create__title">Great, a Party!</h1>
 
     <form class="create__form" novalidate @submit.prevent="handleSubmit">
       <div class="form-group">
@@ -76,7 +73,7 @@
 
 <script setup lang="ts">
 import { reactive, ref, watch } from 'vue'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { api } from '@/api/client'
 import { useEventStorage } from '@/composables/useEventStorage'
 
@@ -194,20 +191,7 @@ async function handleSubmit() {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
-  padding-top: var(--spacing-lg);
-}
-
-.create__header {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.create__back {
-  color: var(--color-text-on-gradient);
-  font-size: 1.5rem;
-  text-decoration: none;
-  line-height: 1;
+  padding-top: calc(var(--spacing-lg) + 2.5rem);
 }
 
 .create__title {

frontend/src/views/EventDetailView.vue

@@ -8,10 +8,6 @@
         alt=""
       />
       <div class="detail__hero-overlay" />
-      <header class="detail__header">
-        <RouterLink to="/" class="detail__back" aria-label="Back to home">&larr;</RouterLink>
-        <span class="detail__brand">fete</span>
-      </header>
     </div>
 
     <div class="detail__body">
@@ -35,21 +31,21 @@
 
         <dl class="detail__meta">
           <div class="detail__meta-item">
-            <dt class="detail__meta-icon glass" aria-label="Date and time">
+            <dt class="detail__meta-icon" aria-label="Date and time">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
             </dt>
             <dd class="detail__meta-text">{{ formattedDateTime }}</dd>
           </div>
 
           <div v-if="event.location" class="detail__meta-item">
-            <dt class="detail__meta-icon glass" aria-label="Location">
+            <dt class="detail__meta-icon" aria-label="Location">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
             </dt>
             <dd class="detail__meta-text">{{ event.location }}</dd>
           </div>
 
           <div class="detail__meta-item">
-            <dt class="detail__meta-icon glass" aria-label="Attendees">
+            <dt class="detail__meta-icon" aria-label="Attendees">
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
             </dt>
             <dd class="detail__meta-text">{{ event.attendeeCount }} going</dd>
@@ -120,16 +116,18 @@
     <RsvpBar
       v-if="state === 'loaded' && event && !isOrganizer && !event.cancelled"
       :has-rsvp="!!rsvpName"
+      :bookmarked="eventIsStored"
       @open="sheetOpen = true"
       @cancel="confirmCancelOpen = true"
+      @bookmark="handleBookmarkClick"
     />
 
     <!-- Cancel confirmation dialog -->
     <ConfirmDialog
       :open="confirmCancelOpen"
-      title="Cancel attendance?"
-      message="Your attendance will be permanently cancelled."
-      confirm-label="Cancel attendance"
+      title="Cancel RSVP?"
+      message="The organizer will no longer see you as attending."
+      confirm-label="Cancel RSVP"
       cancel-label="Keep"
       @confirm="handleCancelRsvp"
       @cancel="confirmCancelOpen = false"
@@ -166,7 +164,7 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { RouterLink, useRoute } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { api } from '@/api/client'
 import { useEventStorage } from '@/composables/useEventStorage'
 import AttendeeList from '@/components/AttendeeList.vue'
@@ -179,7 +177,7 @@ type GetEventResponse = components['schemas']['GetEventResponse']
 type State = 'loading' | 'loaded' | 'not-found' | 'error'
 
 const route = useRoute()
-const { saveRsvp, getRsvp, removeRsvp, getOrganizerToken } = useEventStorage()
+const { saveRsvp, getRsvp, removeRsvp, getOrganizerToken, saveWatch, isStored, removeEvent } = useEventStorage()
 
 const state = ref<State>('loading')
 const event = ref<GetEventResponse | null>(null)
@@ -202,6 +200,20 @@ const cancelReasonInput = ref('')
 const cancelEventError = ref('')
 const cancellingEvent = ref(false)
 
+const eventToken = computed(() => route.params.eventToken as string)
+
+const eventIsStored = computed(() => isStored(eventToken.value))
+
+function handleBookmarkClick() {
+  if (!event.value) return
+  if (isOrganizer.value || rsvpName.value) return
+  if (eventIsStored.value) {
+    removeEvent(eventToken.value)
+  } else {
+    saveWatch(eventToken.value, event.value.title, event.value.dateTime)
+  }
+}
+
 const formattedDateTime = computed(() => {
   if (!event.value) return ''
   const formatted = new Intl.DateTimeFormat(undefined, {
@@ -421,32 +433,7 @@ onMounted(fetchEvent)
     var(--color-glass-overlay) 0%,
     transparent 50%
   );
-}
-
-.detail__header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-  padding: var(--spacing-lg) var(--content-padding);
-  padding-top: env(safe-area-inset-top, var(--spacing-lg));
-  z-index: 1;
-}
-
-.detail__back {
-  color: var(--color-text-on-gradient);
-  font-size: 1.5rem;
-  text-decoration: none;
-  line-height: 1;
-}
-
-.detail__brand {
-  font-size: 1.3rem;
-  font-weight: 700;
-  color: var(--color-text-on-gradient);
+  pointer-events: none;
 }
 
 .detail__body {
@@ -469,6 +456,10 @@ onMounted(fetchEvent)
   padding-top: 4rem;
 }
 
+.detail__meta-icon svg {
+  display: block;
+}
+
 /* Title */
 .detail__title {
   font-size: 2rem;
@@ -501,6 +492,10 @@ onMounted(fetchEvent)
   justify-content: center;
   border-radius: 10px;
   color: var(--color-text-on-gradient);
+  line-height: 0;
+  background: linear-gradient(135deg, var(--color-glass-strong) 0%, var(--color-glass-subtle) 100%);
+  border: 1px solid var(--color-glass-border);
+  backdrop-filter: blur(16px);
 }
 
 .detail__meta-text {
@@ -681,15 +676,15 @@ onMounted(fetchEvent)
   font-family: inherit;
   font-size: 1rem;
   font-weight: 700;
-  color: var(--color-danger);
-  background: var(--color-danger-bg-strong);
-  border: 1px solid var(--color-danger-border);
+  color: var(--color-danger-solid-text);
+  background: var(--color-danger-solid);
+  border: none;
   cursor: pointer;
   transition: background 0.15s ease;
 }
 
 .cancel-form__confirm:hover {
-  background: var(--color-danger-bg-hover);
+  background: var(--color-danger-solid-hover);
 }
 
 .cancel-form__confirm:disabled {

frontend/src/views/__tests__/EventCreateView.spec.ts

@@ -164,6 +164,8 @@ describe('EventCreateView', () => {
       saveRsvp: vi.fn(),
       getRsvp: vi.fn(),
       removeRsvp: vi.fn(),
+      saveWatch: vi.fn(),
+      isStored: vi.fn(() => false),
       removeEvent: vi.fn(),
     })
 

frontend/src/views/__tests__/EventDetailView.spec.ts

@@ -14,6 +14,9 @@ vi.mock('@/api/client', () => ({
 const mockSaveRsvp = vi.fn()
 const mockGetRsvp = vi.fn()
 const mockGetOrganizerToken = vi.fn()
+const mockSaveWatch = vi.fn()
+const mockIsStored = vi.fn()
+const mockRemoveEvent = vi.fn()
 
 vi.mock('@/composables/useEventStorage', () => ({
   useEventStorage: vi.fn(() => ({
@@ -22,7 +25,10 @@ vi.mock('@/composables/useEventStorage', () => ({
     getOrganizerToken: mockGetOrganizerToken,
     saveRsvp: mockSaveRsvp,
     getRsvp: mockGetRsvp,
-    removeEvent: vi.fn(),
+    removeRsvp: vi.fn(),
+    saveWatch: mockSaveWatch,
+    isStored: mockIsStored,
+    removeEvent: mockRemoveEvent,
   })),
 }))
 
@@ -68,6 +74,9 @@ beforeEach(() => {
   vi.restoreAllMocks()
   mockGetRsvp.mockReturnValue(undefined)
   mockGetOrganizerToken.mockReturnValue(undefined)
+  mockIsStored.mockReturnValue(false)
+  mockSaveWatch.mockClear()
+  mockRemoveEvent.mockClear()
 })
 
 describe('EventDetailView', () => {
@@ -189,7 +198,7 @@ describe('EventDetailView', () => {
     await flushPromises()
 
     expect(wrapper.find('.rsvp-bar__cta').exists()).toBe(true)
-    expect(wrapper.find('.rsvp-bar__cta').text()).toBe("I'm attending")
+    expect(wrapper.find('.rsvp-bar__cta').text()).toBe("I'm attending!")
     wrapper.unmount()
   })
 
@@ -366,4 +375,89 @@ describe('EventDetailView', () => {
     expect(document.body.textContent).toContain('Could not submit RSVP. Please try again.')
     wrapper.unmount()
   })
+
+  // Bookmark — T007: bookmark state is passed to RsvpBar via props
+  it('passes bookmarked=false to RsvpBar when event is not in storage', async () => {
+    mockIsStored.mockReturnValue(false)
+    mockLoadedEvent()
+
+    const wrapper = await mountWithToken()
+    await flushPromises()
+
+    const rsvpBar = wrapper.findComponent({ name: 'RsvpBar' })
+    expect(rsvpBar.props('bookmarked')).toBe(false)
+    wrapper.unmount()
+  })
+
+  it('passes bookmarked=true to RsvpBar when event is in storage', async () => {
+    mockIsStored.mockReturnValue(true)
+    mockLoadedEvent()
+
+    const wrapper = await mountWithToken()
+    await flushPromises()
+
+    const rsvpBar = wrapper.findComponent({ name: 'RsvpBar' })
+    expect(rsvpBar.props('bookmarked')).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('bookmark event emitted from RsvpBar calls saveWatch', async () => {
+    mockIsStored.mockReturnValue(false)
+    mockLoadedEvent()
+
+    const wrapper = await mountWithToken()
+    await flushPromises()
+
+    const rsvpBar = wrapper.findComponent({ name: 'RsvpBar' })
+    rsvpBar.vm.$emit('bookmark')
+    await flushPromises()
+
+    expect(mockSaveWatch).toHaveBeenCalledWith('test-token', 'Summer BBQ', '2026-03-15T20:00:00+01:00')
+    wrapper.unmount()
+  })
+
+  it('bookmark event emitted from RsvpBar calls removeEvent when user is watcher', async () => {
+    mockIsStored.mockReturnValue(true)
+    mockLoadedEvent()
+
+    const wrapper = await mountWithToken()
+    await flushPromises()
+
+    const rsvpBar = wrapper.findComponent({ name: 'RsvpBar' })
+    rsvpBar.vm.$emit('bookmark')
+    await flushPromises()
+
+    expect(mockRemoveEvent).toHaveBeenCalledWith('test-token')
+    wrapper.unmount()
+  })
+
+  it('bookmark event ignored when user is attendee', async () => {
+    mockGetRsvp.mockReturnValue({ rsvpToken: 'rsvp-1', rsvpName: 'Max' })
+    mockIsStored.mockReturnValue(true)
+    mockLoadedEvent()
+
+    const wrapper = await mountWithToken()
+    await flushPromises()
+
+    const rsvpBar = wrapper.findComponent({ name: 'RsvpBar' })
+    rsvpBar.vm.$emit('bookmark')
+    await flushPromises()
+
+    expect(mockRemoveEvent).not.toHaveBeenCalled()
+    expect(mockSaveWatch).not.toHaveBeenCalled()
+    wrapper.unmount()
+  })
+
+  it('passes bookmarked=true to RsvpBar after removeRsvp (event still in storage)', async () => {
+    mockIsStored.mockReturnValue(true)
+    mockGetRsvp.mockReturnValue(undefined)
+    mockLoadedEvent()
+
+    const wrapper = await mountWithToken()
+    await flushPromises()
+
+    const rsvpBar = wrapper.findComponent({ name: 'RsvpBar' })
+    expect(rsvpBar.props('bookmarked')).toBe(true)
+    wrapper.unmount()
+  })
 })

specs/017-watch-event/checklists/requirements.md

@@ -0,0 +1,35 @@
+# Specification Quality Checklist: Watch Event
+
+**Purpose**: Validate specification completeness and quality before proceeding to planning
+**Created**: 2026-03-12
+**Feature**: [spec.md](../spec.md)
+
+## Content Quality
+
+- [x] No implementation details (languages, frameworks, APIs)
+- [x] Focused on user value and business needs
+- [x] Written for non-technical stakeholders
+- [x] All mandatory sections completed
+
+## Requirement Completeness
+
+- [x] No [NEEDS CLARIFICATION] markers remain
+- [x] Requirements are testable and unambiguous
+- [x] Success criteria are measurable
+- [x] Success criteria are technology-agnostic (no implementation details)
+- [x] All acceptance scenarios are defined
+- [x] Edge cases are identified
+- [x] Scope is clearly bounded
+- [x] Dependencies and assumptions identified
+
+## Feature Readiness
+
+- [x] All functional requirements have clear acceptance criteria
+- [x] User scenarios cover primary flows
+- [x] Feature meets measurable outcomes defined in Success Criteria
+- [x] No implementation details leak into specification
+
+## Notes
+
+- All items pass. Spec is ready for `/speckit.clarify` or `/speckit.plan`.
+- localStorage is mentioned as a storage mechanism — this is an existing project convention (not an implementation detail introduced by this spec).

specs/017-watch-event/data-model.md

@@ -0,0 +1,61 @@
+# Data Model: Watch Event
+
+**Feature**: 017-watch-event
+**Date**: 2026-03-12
+
+## Entities
+
+### StoredEvent (existing — localStorage)
+
+No schema change. The existing `StoredEvent` interface already supports the watcher state:
+
+```
+StoredEvent {
+  eventToken: string        # Required — event identifier
+  organizerToken?: string   # Present → organizer role
+  title: string             # Required — display in event list
+  dateTime: string          # Required — grouping/sorting
+  rsvpToken?: string        # Present → attendee role
+  rsvpName?: string         # Present with rsvpToken
+}
+```
+
+**Watcher state**: A `StoredEvent` with only `eventToken`, `title`, and `dateTime` populated (no `organizerToken`, no `rsvpToken`). This state already occurs naturally after RSVP cancellation.
+
+## Role Hierarchy
+
+```
+organizerToken present  →  "Organizer"  (highest precedence)
+rsvpToken present       →  "Attendee"
+neither present         →  "Watching"   (new label, lowest precedence)
+```
+
+## State Transitions
+
+```
+                    ┌──────────────┐
+         watch()    │              │   un-watch()
+  (not stored) ───► │   Watching   │ ───► (not stored)
+                    │              │
+                    └──────┬───────┘
+                           │ RSVP
+                           ▼
+                    ┌──────────────┐
+                    │              │
+                    │  Attending   │
+                    │              │
+                    └──────┬───────┘
+                           │ Cancel RSVP
+                           ▼
+                    ┌──────────────┐
+                    │              │   un-watch()
+                    │   Watching   │ ───► (not stored)
+                    │              │
+                    └──────────────┘
+```
+
+Note: Organizer state is set at event creation and cannot be removed through this feature. The bookmark icon is non-interactive for organizers.
+
+## No Backend Changes
+
+This feature does not introduce any new database entities, API endpoints, or server-side logic. All data is stored in the browser's localStorage.

specs/017-watch-event/issues.md

@@ -0,0 +1,72 @@
+# Visual Issues: Bookmark Icon on Event Detail Page
+
+**Date**: 2026-03-12
+**Branch**: `017-watch-event`
+**File**: `frontend/src/views/EventDetailView.vue`
+
+## Issue 1: Meta icons have hover effect
+
+**Problem**: The `<dt class="detail__meta-icon glass">` elements (date, location, attendees) change background/border color on hover. These are non-interactive `<dt>` elements — they should not react to hover.
+
+**Root cause**: The global `.glass:hover` rule in `frontend/src/assets/main.css:247`:
+```css
+.glass:hover:not(input):not(textarea):not(.btn-primary) {
+  background: var(--color-glass-hover);
+  border-color: var(--color-glass-border-hover);
+}
+```
+This applies to ALL `.glass` elements including the static meta icons. Scoped CSS overrides don't win because the global rule has equal or higher specificity.
+
+**Fix options**:
+- A) Remove `glass` class from meta icons, replicate the static glass styles in scoped CSS
+- B) Add `.glass--static` modifier that opts out of hover, use it on meta icons
+- C) Add `:not(.detail__meta-icon)` to the global rule (leaks component knowledge into global CSS — bad)
+
+Option A is cleanest — meta icons only need the static glass background, not the full interactive glass behavior.
+
+## Issue 2: Glow effect on bookmark is ugly
+
+**Problem**: The accent-colored `box-shadow` glow around the bookmark icon looks bad visually.
+
+**Current CSS**:
+```css
+.detail__bookmark {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 6px rgba(255, 112, 67, 0.15);
+}
+.detail__bookmark--filled {
+  box-shadow: 0 0 8px rgba(255, 112, 67, 0.3);
+}
+```
+
+**Fix**: Remove the glow entirely. Differentiate the bookmark from inert meta icons through a different, subtler approach — e.g. a slightly brighter/different border color, or rely solely on the cursor change and active/focus states.
+
+## Issue 3: Filled bookmark should use same icon color as unfilled
+
+**Problem**: Filled bookmark uses `color: var(--color-accent)` (orange), unfilled uses `color: var(--color-text-on-gradient)` (white/light). User wants both states to use the same color.
+
+**Current CSS**:
+```css
+.detail__bookmark--filled {
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+}
+```
+
+**Fix**: Remove `color: var(--color-accent)` from `.detail__bookmark--filled`. The SVG `fill` attribute is already controlled by `:fill="eventIsStored ? 'currentColor' : 'none'"` in the template — so filled state will use `currentColor` (which inherits from the parent), and unfilled state will be outline-only. Both will be the same color (`--color-text-on-gradient`).
+
+## Issue 4: Icons not centered in their boxes
+
+**Problem**: SVGs inside the 36x36 glass boxes (both bookmark and meta icons) are shifted slightly to the right. The centering is off despite `display: flex; align-items: center; justify-content: center`.
+
+**Root cause**: SVGs rendered inline have implicit `line-height` whitespace. The `line-height: 0` fix was added to `.detail__bookmark` and `.detail__meta-icon` but the meta icon override may not be applying due to specificity issues with the `glass` class, or the SVGs themselves may need `display: block`.
+
+**Context**: The `<dt>` element defaults to `display: block` but the SVG inside is inline. The flex container should handle it, but browser rendering of inline SVGs inside flex containers can be inconsistent.
+
+**Fix options**:
+- Add `display: block` to the SVGs directly via a scoped rule: `.detail__meta-icon svg, .detail__bookmark svg { display: block; }`
+- Or ensure `line-height: 0` is actually applying (check specificity)
+
+## Screenshot reference
+
+User-provided screenshot showing the issues: `/home/nitrix/Pictures/Screenshot_20260312_215543.png`

specs/017-watch-event/plan.md

@@ -0,0 +1,77 @@
+# Implementation Plan: Watch Event
+
+**Branch**: `017-watch-event` | **Date**: 2026-03-12 | **Spec**: [spec.md](spec.md)
+**Input**: Feature specification from `/specs/017-watch-event/spec.md`
+
+## Summary
+
+Add a bookmark icon to the event detail page (left of event title) that lets users save events to localStorage without RSVPing. Watched events appear in the event list with a "Watching" label. The feature is entirely client-side — no backend changes required.
+
+## Technical Context
+
+**Language/Version**: TypeScript 5.9 (frontend only)
+**Primary Dependencies**: Vue 3, Vue Router 5
+**Storage**: localStorage via `useEventStorage.ts` composable (existing)
+**Testing**: Vitest for unit tests, Playwright + MSW for E2E
+**Target Platform**: Mobile-first PWA (browser)
+**Project Type**: Web application (frontend-only change)
+**Performance Goals**: Instant toggle (no network requests)
+**Constraints**: No backend involvement, no new dependencies
+**Scale/Scope**: 4 modified files, 0 new files
+
+## Constitution Check
+
+*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
+
+| Principle | Status | Notes |
+|-----------|--------|-------|
+| I. Privacy by Design | PASS | No data sent to server. Watch is purely localStorage. No tracking. |
+| II. Test-Driven Methodology | PASS | Unit tests for composable changes, E2E tests for user stories. |
+| III. API-First Development | PASS | No API changes needed. Feature is client-side only. |
+| IV. Simplicity & Quality | PASS | Minimal changes to existing code. No new abstractions. |
+| V. Dependency Discipline | PASS | No new dependencies introduced. |
+| VI. Accessibility | PASS | Bookmark icon will use semantic button/ARIA, keyboard-operable. |
+
+No violations. Gate passes.
+
+## Project Structure
+
+### Documentation (this feature)
+
+```text
+specs/017-watch-event/
+├── plan.md              # This file
+├── spec.md              # Feature specification
+├── research.md          # Phase 0 output
+├── data-model.md        # Phase 1 output
+├── quickstart.md        # Phase 1 output
+└── tasks.md             # Phase 2 output (/speckit.tasks)
+```
+
+### Source Code (files to modify)
+
+```text
+frontend/src/
+├── composables/
+│   ├── useEventStorage.ts        # Add saveWatch(), isStored() methods
+│   └── __tests__/
+│       └── useEventStorage.spec.ts  # Tests for new methods
+├── components/
+│   ├── EventCard.vue              # Add 'watcher' role + badge styling
+│   ├── EventList.vue              # Update getRole() to return 'watcher', adjust delete flow
+│   └── __tests__/
+│       ├── EventCard.spec.ts      # Tests for watcher badge
+│       └── EventList.spec.ts      # Tests for watcher delete behavior
+├── views/
+│   ├── EventDetailView.vue        # Add bookmark icon next to title
+│   └── __tests__/
+│       └── EventDetailView.spec.ts  # Tests for bookmark behavior
+└── e2e/
+    └── watch-event.spec.ts        # E2E tests for all user stories
+```
+
+**Structure Decision**: Frontend-only changes. No new files needed — all modifications go into existing components and composables. One new E2E test file.
+
+## Complexity Tracking
+
+No constitution violations. No complexity justifications needed.

specs/017-watch-event/quickstart.md

@@ -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

specs/017-watch-event/research.md

@@ -0,0 +1,56 @@
+# Research: Watch Event
+
+**Feature**: 017-watch-event
+**Date**: 2026-03-12
+
+## Research Questions
+
+### 1. How does the current role detection work?
+
+**Finding**: `EventList.vue` has a `getRole()` function that checks `organizerToken` first, then `rsvpToken`. Returns `undefined` when neither is present. `EventCard.vue` accepts an `eventRole` prop typed as `'organizer' | 'attendee' | undefined`.
+
+**Decision**: Extend `getRole()` to return `'watcher'` when the event is in localStorage but has no `organizerToken` and no `rsvpToken`. Extend `EventCard` prop type to include `'watcher'`.
+
+**Rationale**: This is the minimal change — the existing priority chain (organizer > attendee) already handles precedence. Adding watcher as the fallback case is natural.
+
+### 2. How to detect "is this event stored?" on the detail page?
+
+**Finding**: `useEventStorage` has `getStoredEvents()` which returns all events, and `getRsvp(eventToken)` / `getOrganizerToken(eventToken)` for specific lookups. There is no direct `isStored(eventToken)` check.
+
+**Decision**: Add a `isStored(eventToken)` method to `useEventStorage` that checks if an event exists in localStorage regardless of role. Add a `saveWatch(eventToken, title, dateTime)` method that creates a minimal StoredEvent entry (no rsvpToken, no organizerToken).
+
+**Rationale**: `saveWatch()` is semantically distinct from `saveRsvp()` and `saveCreatedEvent()`. The `isStored()` helper avoids filtering through the full event list for a simple boolean check.
+
+### 3. What happens to events after RSVP cancellation?
+
+**Finding**: `removeRsvp(eventToken)` deletes `rsvpToken` and `rsvpName` but keeps the event in localStorage. After cancellation, the event has no `rsvpToken` and no `organizerToken` — identical to a watched event.
+
+**Decision**: No change needed. The existing `removeRsvp()` behavior already produces the correct state for a "watcher" after cancellation. The `getRole()` update will automatically label these as "Watching".
+
+**Rationale**: This is the key insight — the post-RSVP-cancellation state is already semantically equivalent to "watching". We just need to label it.
+
+### 4. Bookmark icon placement and glow conflict
+
+**Finding**: The event title is a plain `<h1 class="detail__title">`. The RsvpBar CTA uses `glow-border glow-border--animated` with a `::before` pseudo-element that extends 12px beyond the button via `inset: -4px` + `blur(8px)`. The bookmark icon is positioned at the title area (top of page), far from the RsvpBar (fixed at bottom). No glow conflict.
+
+**Decision**: Place bookmark icon in a flex container with the title: `display: flex; align-items: center; gap: var(--spacing-sm)`. Icon to the left, title takes remaining space.
+
+**Rationale**: Vertically centered with flex is the simplest approach. No glow interference since the icon is nowhere near the RsvpBar.
+
+### 5. Delete confirmation behavior per role
+
+**Finding**: `EventList.vue` shows a `ConfirmDialog` for all deletions. The message text varies based on RSVP status. For events without RSVP, the message is generic ("This event will be removed from your list.").
+
+**Decision**: Skip the confirmation dialog entirely for watchers (no `rsvpToken`, no `organizerToken`). Call `removeEvent()` directly on swipe/delete.
+
+**Rationale**: Watching is low-commitment. The spec explicitly requires no confirmation for watcher deletion.
+
+### 6. Shake animation implementation
+
+**Finding**: No existing shake animation in the codebase. The RsvpBar status and cancel-event button are both `position: fixed; bottom: 0`.
+
+**Decision**: Add a CSS `@keyframes shake` animation (short horizontal oscillation, ~300ms). Apply via a reactive class that is toggled on bookmark tap when user is attendee/organizer. Use a ref + setTimeout to remove the class after animation completes.
+
+**Alternatives considered**:
+- Web Animations API: More flexible but overkill for a simple shake.
+- CSS transition: Insufficient for a multi-step oscillation.

specs/017-watch-event/spec.md

@@ -0,0 +1,153 @@
+# Feature Specification: Watch Event
+
+**Feature Branch**: `017-watch-event`
+**Created**: 2026-03-12
+**Status**: Draft
+**Input**: Watch/bookmark events locally without RSVPing — bookmark icon on event detail page, watching label on event list
+
+## User Scenarios & Testing *(mandatory)*
+
+### User Story 1 - Watch an event from the detail page (Priority: P1)
+
+A user receives a link to an event and opens the detail page. They are not ready to RSVP yet but want to save the event for later. They tap the bookmark icon to the left of the event title. The icon fills in, and the event is saved to their local device. Next time they open the app, the event appears in their event list with a "Watching" label.
+
+**Why this priority**: This is the core feature — without it, the only way to save an event is to RSVP. Many users want to "bookmark" events they're considering without committing.
+
+**Independent Test**: Can be fully tested by opening an event detail page, tapping the bookmark icon, verifying it fills in, and checking the event list shows the event with a "Watching" label.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user visits an event detail page for the first time (no RSVP, no watch), **When** they look at the bookmark icon next to the title, **Then** the icon is displayed as an unfilled outline.
+2. **Given** the bookmark icon is unfilled, **When** the user taps it, **Then** the icon becomes filled, and the event is saved to localStorage.
+3. **Given** the user has watched an event, **When** they open the event list, **Then** the event appears with a "Watching" label.
+
+---
+
+### User Story 2 - Un-watch an event from the detail page (Priority: P1)
+
+A user who is watching an event (but not attending) decides they are no longer interested. They tap the filled bookmark icon on the event detail page. The icon reverts to an outline, and the event is removed from localStorage. It disappears from the event list.
+
+**Why this priority**: Users must be able to undo the watch action. Without this, there is no way to remove a watched event from the detail page.
+
+**Independent Test**: Can be fully tested by watching an event, then tapping the bookmark icon again to un-watch, verifying the icon becomes unfilled and the event disappears from the event list.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user is watching an event (not attending), **When** they tap the filled bookmark icon, **Then** the icon becomes unfilled and the event is removed from localStorage.
+2. **Given** a user has un-watched an event, **When** they open the event list, **Then** the event no longer appears.
+
+---
+
+### User Story 3 - Bookmark icon reflects attending status (Priority: P1)
+
+When a user RSVPs to an event, the event is automatically saved to localStorage. The bookmark icon on the detail page reflects this by appearing filled. Attending supersedes watching — the event list shows "Attendee" (not "Watching") as the label.
+
+**Why this priority**: Consistency — attending inherently means the event is saved locally, so the bookmark must reflect that. Without this, users would see a confusing unfilled bookmark despite having RSVPed.
+
+**Independent Test**: Can be fully tested by RSVPing to an event, verifying the bookmark icon is filled, and checking that the event list shows "Attendee" as the label.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user has RSVPed to an event, **When** they view the event detail page, **Then** the bookmark icon is filled.
+2. **Given** a user has RSVPed to an event, **When** they view the event list, **Then** the event shows "Attendee" as its label (not "Watching").
+
+---
+
+### User Story 4 - RSVP cancellation preserves watch status (Priority: P2)
+
+A user who RSVPed to an event cancels their attendance. The event remains in localStorage (existing behavior). The bookmark icon stays filled. The event list label changes from "Attendee" to "Watching".
+
+**Why this priority**: This ensures a smooth transition from attending to watching. Without it, users who cancel would see an event in their list with no label and an ambiguous bookmark state.
+
+**Independent Test**: Can be fully tested by RSVPing, cancelling the RSVP, then verifying the bookmark stays filled and the event list shows "Watching".
+
+**Acceptance Scenarios**:
+
+1. **Given** a user has RSVPed and then cancelled their RSVP, **When** they view the event detail page, **Then** the bookmark icon remains filled.
+2. **Given** a user has RSVPed and then cancelled their RSVP, **When** they view the event list, **Then** the event shows "Watching" as its label.
+3. **Given** a user cancelled their RSVP and the bookmark is filled, **When** they tap the bookmark icon, **Then** the icon becomes unfilled and the event is removed from localStorage.
+
+---
+
+### User Story 5 - Bookmark icon is non-interactive for attendees and organizers (Priority: P2)
+
+When a user is an attendee or organizer, the bookmark icon is filled but not clickable (no pointer cursor, no hover effect). Tapping it triggers a short shake animation on the relevant fixed action button at the bottom of the screen (the "You're attending" bar for attendees, the "Cancel event" button for organizers) to signal that the user must act there first.
+
+**Why this priority**: Prevents confusion — removing a saved event while attending or organizing must go through the proper flow (cancel RSVP or cancel event), not through the bookmark.
+
+**Independent Test**: Can be fully tested by RSVPing to an event, tapping the bookmark icon, and verifying nothing happens except the bottom bar shaking briefly.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user is an attendee, **When** they tap the bookmark icon, **Then** nothing changes, and the "You're attending" bar shakes briefly.
+2. **Given** a user is an organizer, **When** they tap the bookmark icon, **Then** nothing changes, and the "Cancel event" button shakes briefly.
+3. **Given** a user is an attendee or organizer, **When** they hover/focus the bookmark icon, **Then** no pointer cursor or interactive hover style is shown.
+
+---
+
+### User Story 6 - Un-watch from event list (Priority: P2)
+
+A watcher removes an event from the event list using the existing swipe-to-delete gesture. Unlike attendees (who see a confirmation dialog warning about RSVP cancellation), watchers see no confirmation dialog — the event is removed immediately.
+
+**Why this priority**: Watching is a low-commitment action, so removing a watched event should be frictionless.
+
+**Independent Test**: Can be fully tested by watching an event, going to the event list, swiping to delete, and verifying the event is removed without a confirmation dialog.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user is watching an event (no RSVP), **When** they swipe to delete it from the event list, **Then** the event is removed immediately without a confirmation dialog.
+2. **Given** a user is attending an event, **When** they swipe to delete it from the event list, **Then** a confirmation dialog appears warning about RSVP cancellation (existing behavior, unchanged).
+
+---
+
+### User Story 7 - Watcher upgrades to attendee (Priority: P2)
+
+A user who is watching an event decides to attend. They tap the "I'm attending" CTA button and complete the RSVP flow as usual. The bookmark icon remains filled. The event list label changes from "Watching" to "Attendee".
+
+**Why this priority**: Natural flow from browsing to commitment. The watch-to-attend transition must be seamless.
+
+**Independent Test**: Can be fully tested by watching an event, then RSVPing, and verifying the bookmark stays filled and the label updates.
+
+**Acceptance Scenarios**:
+
+1. **Given** a user is watching an event, **When** they complete the RSVP flow, **Then** the bookmark icon remains filled.
+2. **Given** a user was watching and then RSVPed, **When** they view the event list, **Then** the event shows "Attendee" as its label (not "Watching").
+
+---
+
+### Edge Cases
+
+- What happens when a user opens an event that has been cancelled — can they still watch it? **Yes, watching is purely local and independent of event status.**
+- What happens when a user watches an event that has expired? **Same behavior — expired events can be watched. They will appear in the "Past" section of the event list.**
+- What happens when a user clears their browser localStorage? **All watched (and attended) events are lost. This is expected behavior for client-side-only storage.**
+- What happens if the user visits the event page on a different device? **The watch status is device-specific. The bookmark appears unfilled on the new device.**
+
+## Requirements *(mandatory)*
+
+### Functional Requirements
+
+- **FR-001**: The system MUST display a bookmark icon to the left of the event title on the event detail page, vertically centered with the title text.
+- **FR-002**: The bookmark icon MUST appear as an unfilled outline when the event is not saved in localStorage.
+- **FR-003**: The bookmark icon MUST appear as a filled icon when the event is saved in localStorage (regardless of whether the user is watching, attending, or organizing).
+- **FR-004**: Tapping the unfilled bookmark icon MUST save the event to localStorage (eventToken, title, dateTime) and fill the icon.
+- **FR-005**: Tapping the filled bookmark icon MUST remove the event from localStorage and revert the icon to unfilled — but only when the user is a watcher (no RSVP, no organizer token).
+- **FR-006**: The bookmark icon MUST NOT be interactive (no pointer cursor, no hover effect) when the user is an attendee or organizer.
+- **FR-007**: Tapping the bookmark icon as an attendee MUST trigger a brief shake animation on the fixed "You're attending" bar at the bottom.
+- **FR-008**: Tapping the bookmark icon as an organizer MUST trigger a brief shake animation on the fixed "Cancel event" button at the bottom.
+- **FR-009**: The event list MUST display a "Watching" label on events that are in localStorage but have no rsvpToken and no organizerToken.
+- **FR-010**: The "Watching" label MUST have lower precedence than "Attendee" and "Organizer" labels.
+- **FR-011**: Deleting a watched event (no RSVP) from the event list MUST NOT show a confirmation dialog — the event is removed immediately.
+- **FR-012**: Deleting an attended event from the event list MUST continue to show the existing confirmation dialog with the RSVP cancellation warning.
+- **FR-013**: The watch feature MUST be entirely client-side — no server requests are made when watching or un-watching.
+- **FR-014**: When an attendee cancels their RSVP, the event MUST remain in localStorage and the bookmark icon MUST remain filled. The event list label MUST change from "Attendee" to "Watching".
+
+## Success Criteria *(mandatory)*
+
+### Measurable Outcomes
+
+- **SC-001**: Users can watch an event in a single tap from the detail page.
+- **SC-002**: Watched events appear in the event list with a "Watching" label immediately upon returning to the list.
+- **SC-003**: Un-watching an event from the detail page takes a single tap and immediately updates the icon.
+- **SC-004**: Deleting a watched event from the event list completes instantly with no confirmation step.
+- **SC-005**: The bookmark icon correctly reflects the stored state on every page load (filled if saved, unfilled if not).
+- **SC-006**: The transition from watching to attending (and back via RSVP cancellation) updates both the bookmark icon and the event list label without requiring a page reload.

specs/017-watch-event/tasks.md

@@ -0,0 +1,235 @@
+# Tasks: Watch Event
+
+**Input**: Design documents from `/specs/017-watch-event/`
+**Prerequisites**: plan.md, spec.md, research.md, data-model.md, quickstart.md
+
+**Tests**: Included — constitution mandates TDD (Red → Green → Refactor).
+
+**Organization**: Tasks are grouped by user story to enable independent implementation and testing of each story.
+
+## Format: `[ID] [P?] [Story] Description`
+
+- **[P]**: Can run in parallel (different files, no dependencies)
+- **[Story]**: Which user story this task belongs to (e.g., US1, US2, US3)
+- Include exact file paths in descriptions
+
+---
+
+## Phase 1: Foundational (Composable & Data Layer)
+
+**Purpose**: Extend `useEventStorage` with watch capabilities and update role detection across list components. These changes are required by all user stories.
+
+**⚠️ CRITICAL**: No user story work can begin until this phase is complete.
+
+### Tests
+
+- [x] T001 [P] Unit tests for `saveWatch()` and `isStored()` methods in `frontend/src/composables/__tests__/useEventStorage.spec.ts` — test saving a watch-only event (no rsvpToken, no organizerToken), test `isStored()` returns true for watched/attended/organized events and false for unknown tokens
+- [x] T002 [P] Unit tests for watcher role detection in `frontend/src/components/__tests__/EventList.spec.ts` — test `getRole()` returns `'watcher'` when event has no organizerToken and no rsvpToken
+- [x] T003 [P] Unit tests for watcher badge display in `frontend/src/components/__tests__/EventCard.spec.ts` — test that `eventRole="watcher"` renders badge with text "Watching"
+
+### Implementation
+
+- [x] T004 Add `saveWatch(eventToken, title, dateTime)` and `isStored(eventToken)` methods to `frontend/src/composables/useEventStorage.ts` — `saveWatch` creates a StoredEvent with only eventToken/title/dateTime, `isStored` checks if eventToken exists in storage
+- [x] T005 Update `getRole()` in `frontend/src/components/EventList.vue` to return `'watcher'` as fallback when event has no organizerToken and no rsvpToken (role hierarchy: organizer > attendee > watcher)
+- [x] T006 [P] Extend `eventRole` prop type in `frontend/src/components/EventCard.vue` from `'organizer' | 'attendee'` to `'organizer' | 'attendee' | 'watcher'`, add "Watching" label text and `.event-card__badge--watcher` styling (glass style, matching design system)
+
+**Checkpoint**: Composable supports watch storage, role detection returns 'watcher', event cards display "Watching" badge.
+
+---
+
+## Phase 2: User Story 1 & 2 — Watch / Un-watch from Detail Page (Priority: P1) 🎯 MVP
+
+**Goal**: Add bookmark icon left of event title on detail page. Unfilled = not stored, filled = stored. Tapping toggles watch state for non-attendee/non-organizer users.
+
+**Independent Test**: Open an event detail page, tap bookmark to watch (icon fills, event appears in list with "Watching" label), tap again to un-watch (icon unfills, event disappears from list).
+
+### Tests
+
+- [x] T007 Unit tests for bookmark icon in `frontend/src/views/__tests__/EventDetailView.spec.ts` — test icon renders unfilled when event not in storage, test icon renders filled when event is in storage, test tapping unfilled icon calls `saveWatch()`, test tapping filled icon calls `removeEvent()` when user is watcher
+- [x] T008 E2E test for US1 (watch) in `frontend/e2e/watch-event.spec.ts` — visit event detail page, verify bookmark is unfilled, tap bookmark, verify it fills, navigate to event list, verify event appears with "Watching" label
+- [x] T009 E2E test for US2 (un-watch) in `frontend/e2e/watch-event.spec.ts` — watch an event, tap filled bookmark, verify it unfills, navigate to event list, verify event is gone
+
+### Implementation
+
+- [x] T010 [US1] [US2] Add bookmark icon to `frontend/src/views/EventDetailView.vue` — wrap title in flex container (`display: flex; align-items: center; gap: var(--spacing-sm)`), add bookmark button to the left of `<h1>`, icon is unfilled outline when `!isStored(eventToken)` and filled when `isStored(eventToken)`. Tapping calls `saveWatch()` or `removeEvent()` based on current state. Use semantic `<button>` with `aria-label` ("Watch this event" / "Stop watching this event"). Include keyboard support (Enter/Space).
+
+**Checkpoint**: Users can watch and un-watch events from the detail page. Watched events appear in the event list with "Watching" label.
+
+---
+
+## Phase 3: User Story 3 — Bookmark Reflects Attending Status (Priority: P1)
+
+**Goal**: Bookmark icon appears filled when user has RSVPed (attending = automatically watched). Event list shows "Attendee" label, not "Watching".
+
+**Independent Test**: RSVP to an event, verify bookmark is filled on detail page, verify event list shows "Attendee" label.
+
+### Tests
+
+- [x] T011 Unit test in `frontend/src/views/__tests__/EventDetailView.spec.ts` — test bookmark icon is filled when event has rsvpToken in storage
+- [x] T012 E2E test for US3 in `frontend/e2e/watch-event.spec.ts` — RSVP to event, verify bookmark is filled, navigate to list, verify "Attendee" label (not "Watching")
+
+### Implementation
+
+- [x] T013 [US3] Verify bookmark icon state in `frontend/src/views/EventDetailView.vue` correctly uses `isStored(eventToken)` which returns true for RSVPed events (since `saveRsvp()` already stores the event). No code change expected — this should work from T010 implementation. If not, adjust `isStored()` logic.
+
+**Checkpoint**: Attending users see filled bookmark. Label priority (Attendee > Watching) works correctly.
+
+---
+
+## Phase 4: User Story 4 — RSVP Cancellation Preserves Watch Status (Priority: P2)
+
+**Goal**: After cancelling RSVP, event stays in localStorage, bookmark stays filled, list label changes from "Attendee" to "Watching".
+
+**Independent Test**: RSVP, cancel RSVP, verify bookmark stays filled and list shows "Watching". Then un-watch via bookmark.
+
+### Tests
+
+- [x] T014 Unit test in `frontend/src/views/__tests__/EventDetailView.spec.ts` — test bookmark stays filled after `removeRsvp()` is called (event still in storage)
+- [x] T015 E2E test for US4 in `frontend/e2e/watch-event.spec.ts` — RSVP, cancel attendance, verify bookmark filled, verify list label is "Watching", tap bookmark to un-watch, verify unfilled
+
+### Implementation
+
+- [x] T016 [US4] Verify existing `removeRsvp()` behavior in `frontend/src/composables/useEventStorage.ts` preserves event in storage. No code change expected — `removeRsvp()` already only deletes rsvpToken/rsvpName. The `getRole()` update from T005 will automatically label these as "watcher". If behavior differs, adjust.
+
+**Checkpoint**: RSVP cancel → watch transition works seamlessly.
+
+---
+
+## Phase 5: User Story 5 — Non-Interactive Bookmark for Attendees & Organizers (Priority: P2)
+
+**Goal**: Bookmark icon is visually filled but non-clickable for attendees and organizers. Tapping triggers a shake animation on the relevant fixed bottom button.
+
+**Independent Test**: RSVP to event, tap bookmark, verify nothing changes and "You're attending" bar shakes. Same test for organizer with "Cancel event" button.
+
+### Tests
+
+- [x] T017 Unit test in `frontend/src/views/__tests__/EventDetailView.spec.ts` — test bookmark has no pointer cursor when user is attendee, test tapping bookmark as attendee does not call `removeEvent()`, test shake class is applied to RsvpBar ref
+- [x] T018 E2E test for US5 in `frontend/e2e/watch-event.spec.ts` — RSVP to event, tap bookmark, verify bookmark unchanged, verify attending bar has shake animation class. Test organizer: open as organizer, tap bookmark, verify cancel-event button shakes.
+
+### Implementation
+
+- [x] T019 [US5] Add shake animation CSS keyframes in `frontend/src/views/EventDetailView.vue` — `@keyframes shake` with short horizontal oscillation (~300ms). Add `.detail__shake` class that applies the animation.
+- [x] T020 [US5] Update bookmark icon behavior in `frontend/src/views/EventDetailView.vue` — when user is attendee or organizer: remove pointer cursor, remove hover effects, on tap apply shake class to the RsvpBar (attendee) or cancel-event button (organizer) via template ref. Use `setTimeout` to remove shake class after animation completes.
+
+**Checkpoint**: Attendees and organizers cannot un-watch via bookmark. Clear visual feedback via shake.
+
+---
+
+## Phase 6: User Story 6 — Un-watch from Event List (Priority: P2)
+
+**Goal**: Swiping to delete a watched event removes it immediately without a confirmation dialog.
+
+**Independent Test**: Watch an event, go to event list, swipe to delete, verify event removed instantly (no dialog).
+
+### Tests
+
+- [x] T021 Unit test in `frontend/src/components/__tests__/EventList.spec.ts` — test that deleting a watcher event (no rsvpToken) calls `removeEvent()` directly without showing ConfirmDialog
+- [x] T022 E2E test for US6 in `frontend/e2e/watch-event.spec.ts` — watch event, navigate to list, swipe to delete, verify no confirmation dialog appears, verify event removed
+
+### Implementation
+
+- [x] T023 [US6] Update delete flow in `frontend/src/components/EventList.vue` — when event has no rsvpToken and no organizerToken (watcher role), skip `showConfirmDialog` and call `removeEvent()` directly. Keep existing confirmation for attendees.
+
+**Checkpoint**: Watcher deletion is frictionless. Attendee deletion unchanged.
+
+---
+
+## Phase 7: User Story 7 — Watcher Upgrades to Attendee (Priority: P2)
+
+**Goal**: A watcher who RSVPs sees bookmark stay filled and list label change from "Watching" to "Attendee".
+
+**Independent Test**: Watch event, RSVP, verify bookmark stays filled, verify list shows "Attendee".
+
+### Tests
+
+- [x] T024 E2E test for US7 in `frontend/e2e/watch-event.spec.ts` — watch event (verify "Watching" in list), RSVP (verify bookmark stays filled), navigate to list (verify "Attendee" label)
+
+### Implementation
+
+- [x] T025 [US7] Verify watch-to-attend transition in `frontend/src/views/EventDetailView.vue` — existing `saveRsvp()` call updates the StoredEvent with rsvpToken/rsvpName. The `getRole()` update from T005 gives "attendee" precedence over "watcher". No code change expected — verify via E2E test.
+
+**Checkpoint**: Watch → attend transition is seamless.
+
+---
+
+## Phase 8: Polish & Cross-Cutting Concerns
+
+**Purpose**: Accessibility, visual refinement, and final validation
+
+- [x] T026 Accessibility audit of bookmark icon in `frontend/src/views/EventDetailView.vue` — verify ARIA labels update reactively ("Watch this event" ↔ "Stop watching this event"), verify keyboard navigation (Tab focus, Enter/Space activation), verify WCAG AA contrast for icon in both states
+- [x] T027 Visual consistency check — verify "Watching" badge styling is consistent with existing "Organizer" and "Attendee" badges in `frontend/src/components/EventCard.vue`, follows design system tokens
+- [x] T028 Run full E2E suite `frontend/e2e/watch-event.spec.ts` to verify all 7 user stories pass together
+
+---
+
+## Dependencies & Execution Order
+
+### Phase Dependencies
+
+- **Foundational (Phase 1)**: No dependencies — can start immediately
+- **US1/US2 (Phase 2)**: Depends on Phase 1 — BLOCKS all other user stories
+- **US3 (Phase 3)**: Depends on Phase 2 (bookmark icon must exist)
+- **US4 (Phase 4)**: Depends on Phase 2 (bookmark icon must exist)
+- **US5 (Phase 5)**: Depends on Phase 2 (bookmark icon must exist)
+- **US6 (Phase 6)**: Depends on Phase 1 (getRole must return 'watcher')
+- **US7 (Phase 7)**: Depends on Phase 2 (bookmark icon must exist)
+- **Polish (Phase 8)**: Depends on all phases complete
+
+### User Story Dependencies
+
+- **US1/US2 (P1)**: Core MVP — can start after Foundational
+- **US3 (P1)**: Can start after US1/US2
+- **US4 (P2)**: Can start after US1/US2 — independent of US3
+- **US5 (P2)**: Can start after US1/US2 — independent of US3/US4
+- **US6 (P2)**: Can start after Foundational — independent of all other stories
+- **US7 (P2)**: Can start after US1/US2 — independent of US3-US6
+
+### Parallel Opportunities
+
+- **Phase 1**: T001, T002, T003 can run in parallel (different test files)
+- **Phase 1**: T005 and T006 can run in parallel (different component files)
+- **After Phase 2**: US3, US4, US5, US7 can run in parallel (independent stories)
+- **US6**: Can run in parallel with Phase 2 (only depends on Phase 1)
+
+---
+
+## Parallel Example: Phase 1
+
+```text
+# All unit tests in parallel:
+T001: "Unit tests for saveWatch/isStored in useEventStorage.spec.ts"
+T002: "Unit tests for watcher role in EventList.spec.ts"
+T003: "Unit tests for watcher badge in EventCard.spec.ts"
+
+# Implementation in parallel (after tests):
+T005: "Update getRole() in EventList.vue"
+T006: "Extend eventRole in EventCard.vue"
+# T004 (useEventStorage) should go first — T005/T006 depend on its types
+```
+
+---
+
+## Implementation Strategy
+
+### MVP First (US1 + US2 Only)
+
+1. Complete Phase 1: Foundational (composable + card + list)
+2. Complete Phase 2: US1/US2 (bookmark icon toggle)
+3. **STOP and VALIDATE**: Watch/un-watch works, "Watching" label appears
+4. This alone delivers the core value
+
+### Incremental Delivery
+
+1. Phase 1 → Foundational ready
+2. Phase 2 → US1/US2 → Watch/un-watch from detail page (MVP!)
+3. Phase 3 → US3 → Bookmark reflects attending (consistency)
+4. Phase 4-7 → US4-US7 → Edge cases and transitions
+5. Phase 8 → Polish → Accessibility and visual refinement
+
+---
+
+## Notes
+
+- Most "implementation" in US3, US4, US7 is verification — the foundational changes in Phase 1 and the bookmark icon in Phase 2 handle the logic. These stories primarily need E2E tests to confirm correct behavior.
+- No backend changes. No new files except `frontend/e2e/watch-event.spec.ts`.
+- Total: 28 tasks across 8 phases.

specs/018-cancel-event-list/checklists/requirements.md

@@ -0,0 +1,35 @@
+# Specification Quality Checklist: Cancel Event from Event List
+
+**Purpose**: Validate specification completeness and quality before proceeding to planning
+**Created**: 2026-03-12
+**Feature**: [spec.md](../spec.md)
+
+## Content Quality
+
+- [x] No implementation details (languages, frameworks, APIs)
+- [x] Focused on user value and business needs
+- [x] Written for non-technical stakeholders
+- [x] All mandatory sections completed
+
+## Requirement Completeness
+
+- [x] No [NEEDS CLARIFICATION] markers remain
+- [x] Requirements are testable and unambiguous
+- [x] Success criteria are measurable
+- [x] Success criteria are technology-agnostic (no implementation details)
+- [x] All acceptance scenarios are defined
+- [x] Edge cases are identified
+- [x] Scope is clearly bounded
+- [x] Dependencies and assumptions identified
+
+## Feature Readiness
+
+- [x] All functional requirements have clear acceptance criteria
+- [x] User scenarios cover primary flows
+- [x] Feature meets measurable outcomes defined in Success Criteria
+- [x] No implementation details leak into specification
+
+## Notes
+
+- Assumptions section documents that no cancellation reason is needed from the list view (speed over detail). This is a reasonable default; can be revisited via `/speckit.clarify`.
+- All items pass validation. Spec is ready for planning.

specs/018-cancel-event-list/data-model.md

@@ -0,0 +1,35 @@
+# Data Model: Cancel Event from Event List
+
+**Date**: 2026-03-12 | **Branch**: `018-cancel-event-list`
+
+## No New Entities
+
+This feature introduces no new entities, fields, or relationships. All required data structures already exist.
+
+## Existing Entities Used
+
+### StoredEvent (frontend localStorage)
+
+| Field | Type | Notes |
+|-------|------|-------|
+| eventToken | string (UUID) | Used as path param for cancel API |
+| organizerToken | string (UUID) \| undefined | Present only for organizer role; used as query param |
+| rsvpToken | string (UUID) \| undefined | Present only for attendee role |
+| rsvpName | string \| undefined | Attendee display name |
+| title | string | Event title for dialog context |
+| dateTime | string | Event date/time |
+
+### Role Detection (derived, not stored)
+
+| Role | Condition | Delete Action |
+|------|-----------|---------------|
+| organizer | `organizerToken` present | PATCH cancel-event API |
+| attendee | `rsvpToken` present (no organizerToken) | DELETE cancel-rsvp API |
+| watcher | neither token present | Direct localStorage removal |
+
+### API Contracts Used
+
+| Endpoint | Method | Auth | Body | Success | Already Cancelled |
+|----------|--------|------|------|---------|-------------------|
+| `/events/{eventToken}` | PATCH | `?organizerToken=...` | `{ cancelled: true }` | 204 | 409 (treat as success) |
+| `/events/{eventToken}/rsvps/{rsvpToken}` | DELETE | rsvpToken in path | — | 204 | 204 (idempotent) |

specs/018-cancel-event-list/plan.md

@@ -0,0 +1,69 @@
+# Implementation Plan: Cancel Event from Event List
+
+**Branch**: `018-cancel-event-list` | **Date**: 2026-03-12 | **Spec**: [spec.md](spec.md)
+**Input**: Feature specification from `/specs/018-cancel-event-list/spec.md`
+
+## Summary
+
+Enable organizers to cancel events directly from the event list page via the existing ConfirmDialog. The `EventList.vue` `confirmDelete` handler must detect the organizer role and call `PATCH /events/{eventToken}?organizerToken=...` with `{ cancelled: true }` instead of the existing RSVP deletion flow. The ConfirmDialog message must differentiate organizer cancellation (severe, affects all attendees) from attendee RSVP cancellation.
+
+## Technical Context
+
+**Language/Version**: TypeScript 5.x, Vue 3 (Composition API)
+**Primary Dependencies**: openapi-fetch, Vue Router, Vite
+**Storage**: localStorage via `useEventStorage()` composable
+**Testing**: Vitest (unit), Playwright + MSW (E2E)
+**Target Platform**: Mobile-first PWA (all modern browsers)
+**Project Type**: Web application (frontend-only change)
+**Performance Goals**: N/A (no new endpoints, minimal UI change)
+**Constraints**: No backend changes required; cancel-event API already exists
+**Scale/Scope**: ~50 lines of logic change in EventList.vue, dialog message updates
+
+## Constitution Check
+
+*GATE: Must pass before Phase 0 research. Re-check after Phase 1 design.*
+
+| Principle | Status | Notes |
+|-----------|--------|-------|
+| I. Privacy by Design | PASS | No new data collected or stored |
+| II. Test-Driven Methodology | PASS | Unit tests + E2E tests planned |
+| III. API-First Development | PASS | Uses existing PATCH endpoint already in OpenAPI spec |
+| IV. Simplicity & Quality | PASS | Extends existing delete flow, no new abstractions |
+| V. Dependency Discipline | PASS | No new dependencies |
+| VI. Accessibility | PASS | Reuses existing ConfirmDialog (already has aria-modal, alertdialog role, keyboard nav) |
+
+All gates pass. No violations.
+
+## Project Structure
+
+### Documentation (this feature)
+
+```text
+specs/018-cancel-event-list/
+├── plan.md              # This file
+├── research.md          # Phase 0 output
+├── data-model.md        # Phase 1 output (minimal — no new entities)
+└── tasks.md             # Phase 2 output (/speckit.tasks command)
+```
+
+### Source Code (repository root)
+
+```text
+frontend/src/
+├── components/
+│   ├── EventList.vue         # PRIMARY CHANGE: confirmDelete handler + dialog message
+│   └── ConfirmDialog.vue     # No changes needed
+├── api/
+│   ├── client.ts             # No changes needed (openapi-fetch client)
+│   └── schema.d.ts           # Already has PATCH /events/{eventToken} types
+└── composables/
+    └── useEventStorage.ts    # No changes needed
+
+frontend/e2e/
+└── cancel-event-list.spec.ts # NEW: E2E tests for organizer cancellation
+
+frontend/src/components/__tests__/
+└── EventList.spec.ts         # EXTEND: Unit tests for organizer cancel flow
+```
+
+**Structure Decision**: Frontend-only change. All logic changes in `EventList.vue`. No new components, composables, or API endpoints.

specs/018-cancel-event-list/research.md

@@ -0,0 +1,39 @@
+# Research: Cancel Event from Event List
+
+**Date**: 2026-03-12 | **Branch**: `018-cancel-event-list`
+
+## Existing Cancel-Event API
+
+- **Decision**: Reuse the existing `PATCH /events/{eventToken}?organizerToken=...` endpoint with `{ cancelled: true }` body.
+- **Rationale**: The endpoint is fully implemented and documented in the OpenAPI spec. The EventDetailView already calls it successfully. No backend changes needed.
+- **Alternatives considered**: None — the endpoint exists and fits the requirement exactly.
+
+## EventList Delete Flow Architecture
+
+- **Decision**: Extend the existing `confirmDelete()` handler in `EventList.vue` with a role-based branch: organizer → PATCH cancel-event, attendee → DELETE cancel-rsvp, watcher → direct remove.
+- **Rationale**: The role detection (`getRole()`) already exists (lines 113-117). The current handler only covers attendee (RSVP deletion) and watcher (direct remove). Adding the organizer branch follows the same pattern.
+- **Alternatives considered**: Creating a separate handler for organizer cancel — rejected because it would duplicate the dialog open/close and error handling logic.
+
+## ConfirmDialog Message Differentiation
+
+- **Decision**: Compute `deleteDialogMessage` and `deleteDialogTitle` based on `getRole(pendingDeleteEvent)`. Organizer gets a severe warning ("Cancel event? This will cancel the event for all attendees."), attendee keeps existing message.
+- **Rationale**: The ConfirmDialog already accepts `title` and `message` props. The `deleteDialogMessage` computed property exists but currently only distinguishes RSVP vs watcher. Extend it to include organizer.
+- **Alternatives considered**: Using a different dialog component for organizer — rejected (unnecessary, ConfirmDialog is sufficient and already styled with danger button).
+
+## 409 Conflict Handling
+
+- **Decision**: Treat 409 (event already cancelled) as success — silently remove event from local list.
+- **Rationale**: Frontend does not track cancelled status. If the server says it's already cancelled, the user's intent (remove from list) is fulfilled either way.
+- **Alternatives considered**: Showing an info message ("Event was already cancelled") — rejected per clarification session, silent removal is simpler and less confusing.
+
+## In-Flight Behavior
+
+- **Decision**: No loading indicator in ConfirmDialog. Dialog stays open until success (close + remove) or failure (stay open + error).
+- **Rationale**: Consistent with all other ConfirmDialog-based flows in the project (cancel RSVP, delete event from list). The ConfirmDialog component has no loading state support and adding one would be scope creep.
+- **Alternatives considered**: Adding `:disabled` + spinner to confirm button (like BottomSheet forms) — rejected for consistency with existing ConfirmDialog patterns.
+
+## Confirm Button Styling
+
+- **Decision**: Use `var(--color-danger-solid)` for the organizer cancel confirm button, consistent with existing ConfirmDialog danger styling.
+- **Rationale**: The ConfirmDialog already uses danger-colored confirm buttons. No additional styling needed for the organizer flow.
+- **Alternatives considered**: None — existing styling fits.

specs/018-cancel-event-list/spec.md

@@ -0,0 +1,88 @@
+# Feature Specification: Cancel Event from Event List
+
+**Feature Branch**: `018-cancel-event-list`
+**Created**: 2026-03-12
+**Status**: Draft
+**Input**: User description: "Wenn organisator das event auf der event listen seite löscht, kommt ein confirmation dialog mit einer warnung, dass das event abgesagt wird. Dann wird wirklich ein api call zum canceln des events gesendet"
+
+## User Scenarios & Testing *(mandatory)*
+
+### User Story 1 - Organizer Cancels Event from Event List (Priority: P1)
+
+As an organizer viewing their event list, I want to cancel an event directly from the list so that I don't have to navigate into the event detail page first. When I tap the delete button on one of my events, a confirmation dialog warns me that the event will be permanently cancelled for all attendees. If I confirm, the system sends a cancellation request and removes the event from my list.
+
+**Why this priority**: This is the core and only feature — enabling organizers to cancel events directly from the event list with clear warning about the irreversible consequence.
+
+**Independent Test**: Can be fully tested by creating an event, navigating to the event list, tapping delete on the organizer's event, confirming in the dialog, and verifying the API call is made and the event is removed from the list.
+
+**Acceptance Scenarios**:
+
+1. **Given** an organizer is on the event list page and has an active (non-cancelled) event, **When** they tap the delete button on that event, **Then** a confirmation dialog appears with a warning that the event will be cancelled for all attendees.
+2. **Given** the confirmation dialog is open, **When** the organizer confirms the cancellation, **Then** the system sends a cancel-event API request and, on success, removes the event from the local list.
+3. **Given** the confirmation dialog is open, **When** the organizer taps the cancel button or presses Escape, **Then** the dialog closes and the event remains unchanged.
+4. **Given** the organizer confirms cancellation, **When** the API call fails (network error, server error), **Then** the event is not removed from the list and an error message is shown.
+
+---
+
+### User Story 2 - Distinct Dialog for Organizer vs. Attendee Delete (Priority: P2)
+
+The confirmation dialog must clearly differentiate between the organizer deleting (which cancels the event for everyone) and an attendee deleting (which only cancels their personal RSVP). The dialog text and warning level must reflect the severity of each action.
+
+**Why this priority**: Prevents organizers from accidentally cancelling an event when they only intended to remove it from their view. The existing attendee delete flow already works — this story ensures the organizer flow has appropriate, distinct messaging.
+
+**Independent Test**: Can be tested by comparing the dialog text when deleting as an organizer versus as an attendee for the same event, verifying the organizer dialog contains a stronger warning.
+
+**Acceptance Scenarios**:
+
+1. **Given** an organizer taps delete on their event, **When** the confirmation dialog appears, **Then** the title and message clearly state that the event will be cancelled permanently and all attendees will be affected.
+2. **Given** an attendee taps delete on an event they RSVP'd to, **When** the confirmation dialog appears, **Then** the existing behavior is preserved — the message says their attendance will be cancelled and the event removed from their list.
+
+---
+
+### Edge Cases
+
+- What happens when the organizer tries to cancel an event that is already cancelled? The frontend does not track cancelled status, so the delete button remains visible. If the API returns a 409 Conflict, the event is silently removed from the local list (since it is already cancelled server-side).
+- What happens if the network request is in-flight and the user navigates away? The cancellation request should complete in the background; the local list update happens on next visit.
+- What is the in-flight UI behavior during the cancellation API call? The existing ConfirmDialog pattern is used: no loading indicator, dialog remains open until API success (close + remove) or failure (stay open + show error). This is consistent with all other ConfirmDialog-based flows in the project.
+- What happens when the organizer has both an organizer token and an RSVP for the same event? The organizer role takes precedence — the dialog shows the event-cancellation warning, not the RSVP-cancellation message.
+
+## Clarifications
+
+### Session 2026-03-12
+
+- Q: How should already-cancelled events be handled in the list? → A: Frontend does not track cancelled status; delete button remains visible. On 409 Conflict, silently remove event from local list.
+- Q: What is the in-flight UI behavior during the cancellation API call? → A: Use existing ConfirmDialog pattern — no loading indicator, dialog stays open until success or failure. Consistent with all other ConfirmDialog flows.
+
+## Requirements *(mandatory)*
+
+### Functional Requirements
+
+- **FR-001**: When an organizer taps delete on their event in the event list, the system MUST show a confirmation dialog before taking any action.
+- **FR-002**: The confirmation dialog for organizer events MUST clearly warn that the event will be cancelled permanently and that all attendees will be affected.
+- **FR-003**: Upon confirmation, the system MUST send a cancel-event API request using the event's organizer token.
+- **FR-004**: On successful cancellation (API returns success), the system MUST remove the event from the organizer's local event list.
+- **FR-005**: On failed cancellation (network error or API error), the system MUST keep the event in the list and display an error message to the user. The confirmation dialog remains open.
+- **FR-005a**: If the API returns 409 Conflict (event already cancelled), the system MUST silently remove the event from the local list (treated as success).
+- **FR-006**: The confirmation dialog MUST provide a clear way to abort (cancel button, Escape key, overlay click) without triggering the cancellation.
+- **FR-007**: The existing attendee and watcher delete flows MUST remain unchanged.
+
+### Key Entities
+
+- **Event**: Has an event token, organizer token (present only for the organizer), and cancelled status.
+- **Confirmation Dialog**: Reusable UI component that displays a title, message, and confirm/cancel actions.
+
+## Success Criteria *(mandatory)*
+
+### Measurable Outcomes
+
+- **SC-001**: Organizers can cancel an event from the event list in under 5 seconds (two taps: delete + confirm).
+- **SC-002**: 100% of organizer cancellation attempts show the warning dialog before any API call is made.
+- **SC-003**: After successful cancellation, the event disappears from the list immediately without requiring a page refresh.
+- **SC-004**: Failed cancellation attempts preserve the event in the list and show a user-visible error message.
+
+## Assumptions
+
+- The cancel-event API endpoint (PATCH `/events/{eventToken}` with `cancelled: true`) already exists and is functional.
+- The `ConfirmDialog` component already exists and can be reused with different title/message props.
+- The `EventList` component already differentiates between organizer, attendee, and watcher roles using stored tokens.
+- No cancellation reason is required when cancelling from the event list (unlike the event detail page, which offers an optional reason field). The list view prioritizes speed over detail.

specs/018-cancel-event-list/tasks.md

@@ -0,0 +1,150 @@
+# Tasks: Cancel Event from Event List
+
+**Input**: Design documents from `/specs/018-cancel-event-list/`
+**Prerequisites**: plan.md, spec.md, research.md, data-model.md
+
+**Tests**: Mandatory per constitution (TDD — Red → Green → Refactor).
+
+**Organization**: Tasks are grouped by user story. No setup or foundational phases needed — all infrastructure exists.
+
+## Format: `[ID] [P?] [Story] Description`
+
+- **[P]**: Can run in parallel (different files, no dependencies)
+- **[Story]**: Which user story this task belongs to (e.g., US1, US2)
+- Include exact file paths in descriptions
+
+---
+
+## Phase 1: User Story 1 — Organizer Cancels Event from List (Priority: P1) 🎯 MVP
+
+**Goal**: Organizers can cancel an event directly from the event list via confirmation dialog and PATCH API call.
+
+**Independent Test**: Create an event, navigate to event list, tap delete on organizer event, confirm in dialog, verify API call is made and event is removed from list.
+
+### Tests for User Story 1 ⚠️
+
+> **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
+
+- [X] T001 [P] [US1] E2E test: organizer taps delete, confirms, event is removed after successful API call in `frontend/e2e/cancel-event-list.spec.ts`
+- [X] T002 [P] [US1] E2E test: organizer confirms cancellation, API fails, event stays in list and error message shown in `frontend/e2e/cancel-event-list.spec.ts`
+- [X] T003 [P] [US1] E2E test: organizer confirms cancellation, API returns 409 Conflict, event is silently removed from list in `frontend/e2e/cancel-event-list.spec.ts`
+- [X] T004 [P] [US1] E2E test: organizer opens cancel dialog then dismisses (cancel button, Escape, overlay click), event remains unchanged in `frontend/e2e/cancel-event-list.spec.ts`
+- [X] T005 [P] [US1] Unit test: `confirmDelete` calls PATCH cancel-event API when role is organizer in `frontend/src/components/__tests__/EventList.spec.ts`
+- [X] T006 [P] [US1] Unit test: `confirmDelete` treats 409 response as success (removes event from list) in `frontend/src/components/__tests__/EventList.spec.ts`
+
+### Implementation for User Story 1
+
+- [X] T007 [US1] Extend `confirmDelete` in `frontend/src/components/EventList.vue` to detect organizer role and call `api.PATCH('/events/{eventToken}')` with `{ cancelled: true }` and `organizerToken` query param
+- [X] T008 [US1] Handle 409 Conflict as success (silently remove event from local list) in `frontend/src/components/EventList.vue`
+- [X] T009 [US1] Handle API errors (keep dialog open, show error message) for organizer cancel in `frontend/src/components/EventList.vue`
+- [X] T010 [US1] Add organizer-specific dialog title ("Cancel event?") and message ("This will permanently cancel the event for all attendees.") in `frontend/src/components/EventList.vue`
+
+**Checkpoint**: Organizer can cancel events from the list. E2E and unit tests pass green.
+
+---
+
+## Phase 2: User Story 2 — Distinct Dialog for Organizer vs. Attendee (Priority: P2)
+
+**Goal**: Confirmation dialog clearly differentiates between organizer cancellation (severe, affects everyone) and attendee RSVP cancellation (personal).
+
+**Independent Test**: Compare dialog text when deleting as organizer vs. as attendee for the same event — organizer dialog must have stronger warning.
+
+### Tests for User Story 2 ⚠️
+
+> **NOTE: Write these tests FIRST, ensure they FAIL before implementation**
+
+- [X] T011 [P] [US2] E2E test: organizer dialog shows event-cancellation warning (title + message distinct from attendee) in `frontend/e2e/cancel-event-list.spec.ts`
+- [X] T012 [P] [US2] E2E test: attendee dialog preserves existing RSVP-cancellation message (no regression) in `frontend/e2e/cancel-event-list.spec.ts`
+- [X] T013 [P] [US2] Unit test: `deleteDialogMessage` and `deleteDialogTitle` return organizer-specific text when `getRole()` is organizer in `frontend/src/components/__tests__/EventList.spec.ts`
+- [X] T014 [P] [US2] Unit test: `deleteDialogMessage` returns existing attendee text unchanged when `getRole()` is attendee in `frontend/src/components/__tests__/EventList.spec.ts`
+
+### Implementation for User Story 2
+
+- [X] T015 [US2] Refactor `deleteDialogMessage` computed in `frontend/src/components/EventList.vue` to return role-differentiated text: organizer warning vs. existing attendee message
+- [X] T016 [US2] Add `deleteDialogTitle` computed in `frontend/src/components/EventList.vue` returning "Cancel event?" for organizer, "Remove event?" for attendee
+- [X] T017 [US2] Bind `deleteDialogTitle` to ConfirmDialog `:title` prop in `frontend/src/components/EventList.vue`
+
+**Checkpoint**: Dialog messages are clearly differentiated by role. All E2E and unit tests pass green.
+
+---
+
+## Phase 3: Polish & Cross-Cutting Concerns
+
+**Purpose**: Final validation and regression check
+
+- [X] T018 Run full frontend unit test suite (`npm run test:unit`) — verify no regressions
+- [X] T019 Run full E2E test suite (`npx playwright test`) — verify no regressions
+- [X] T020 Verify existing attendee and watcher delete flows unchanged (FR-007) via E2E tests
+
+---
+
+## Dependencies & Execution Order
+
+### Phase Dependencies
+
+- **Phase 1 (US1)**: No dependencies — can start immediately (all infrastructure exists)
+- **Phase 2 (US2)**: Depends on Phase 1 completion (US2 refines the dialog created in US1)
+- **Phase 3 (Polish)**: Depends on Phase 1 + Phase 2 completion
+
+### User Story Dependencies
+
+- **US1 (P1)**: Independent — core cancel flow + initial dialog message
+- **US2 (P2)**: Depends on US1 — refines dialog messaging created in US1
+
+### Within Each User Story
+
+- Tests MUST be written and FAIL before implementation (TDD)
+- Implementation tasks are sequential within each story (T007 → T008 → T009 → T010)
+- All test tasks within a story can run in parallel
+
+### Parallel Opportunities
+
+- T001–T006 (US1 tests): All parallelizable — different test scenarios, same files but independent
+- T011–T014 (US2 tests): All parallelizable
+- US1 and US2 are sequential (US2 depends on US1)
+
+---
+
+## Parallel Example: User Story 1
+
+```bash
+# Launch all US1 tests in parallel (TDD — write first, expect red):
+Task: "E2E test: organizer cancels event successfully" (T001)
+Task: "E2E test: organizer cancel fails, error shown" (T002)
+Task: "E2E test: 409 Conflict handled as success" (T003)
+Task: "E2E test: dismiss dialog, event unchanged" (T004)
+Task: "Unit test: confirmDelete calls PATCH for organizer" (T005)
+Task: "Unit test: 409 treated as success" (T006)
+
+# Then implement sequentially:
+Task: "Extend confirmDelete for organizer role" (T007)
+Task: "Handle 409 Conflict" (T008)
+Task: "Handle API errors" (T009)
+Task: "Add organizer dialog title + message" (T010)
+```
+
+---
+
+## Implementation Strategy
+
+### MVP First (User Story 1 Only)
+
+1. Write US1 tests (T001–T006) — all should fail (red)
+2. Implement US1 (T007–T010) — tests turn green
+3. **STOP and VALIDATE**: Organizer can cancel events from list
+4. Deploy/demo if ready
+
+### Full Delivery
+
+1. Complete US1 → MVP functional
+2. Complete US2 → Dialog messaging polished
+3. Complete Polish → Full regression validation
+
+---
+
+## Notes
+
+- No backend changes required — existing PATCH `/events/{eventToken}` endpoint used
+- No new components — ConfirmDialog reused as-is
+- No new dependencies
+- Primary change: ~50 lines in `EventList.vue` + tests