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

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

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

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

frontend/src/components/RsvpBar.vue

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