Add RSVP frontend: bottom sheet form, RsvpBar, and localStorage persistence

Introduces BottomSheet and RsvpBar components, integrates the RSVP
submission flow into EventDetailView, extends useEventStorage with
saveRsvp/getRsvp, and adds unit tests plus an E2E spec for the RSVP
workflow.

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

frontend/src/views/EventDetailView.vue

@@ -54,6 +54,38 @@
       <p class="detail__message">Something went wrong.</p>
       <button class="btn-primary" type="button" @click="fetchEvent">Retry</button>
     </div>
+
+    <!-- RSVP bar (only for loaded, non-expired events) -->
+    <RsvpBar
+      v-if="state === 'loaded' && event && !event.expired && !isOrganizer"
+      :has-rsvp="!!rsvpName"
+      @open="sheetOpen = true"
+    />
+
+    <!-- RSVP bottom sheet -->
+    <BottomSheet :open="sheetOpen" label="RSVP" @close="sheetOpen = false">
+      <h2 class="sheet-title">RSVP</h2>
+      <form class="rsvp-form" @submit.prevent="submitRsvp" novalidate>
+        <div class="form-group">
+          <label class="rsvp-form__label" for="rsvp-name">Your name</label>
+          <input
+            id="rsvp-name"
+            v-model.trim="nameInput"
+            class="form-field"
+            type="text"
+            placeholder="e.g. Max Mustermann"
+            maxlength="100"
+            required
+            @input="nameError = ''"
+          />
+          <span v-if="nameError" class="rsvp-form__field-error" role="alert">{{ nameError }}</span>
+        </div>
+        <button class="btn-primary" type="submit" :disabled="submitting">
+          {{ submitting ? 'Sending…' : "Count me in" }}
+        </button>
+        <p v-if="submitError" class="rsvp-form__field-error rsvp-form__error" role="alert">{{ submitError }}</p>
+      </form>
+    </BottomSheet>
   </main>
 </template>
 
@@ -61,15 +93,29 @@
 import { ref, computed, onMounted } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 import { api } from '@/api/client'
+import { useEventStorage } from '@/composables/useEventStorage'
+import BottomSheet from '@/components/BottomSheet.vue'
+import RsvpBar from '@/components/RsvpBar.vue'
 import type { components } from '@/api/schema'
 
 type GetEventResponse = components['schemas']['GetEventResponse']
 type State = 'loading' | 'loaded' | 'not-found' | 'error'
 
 const route = useRoute()
+const { saveRsvp, getRsvp, getOrganizerToken } = useEventStorage()
+
 const state = ref<State>('loading')
 const event = ref<GetEventResponse | null>(null)
 
+// RSVP state
+const sheetOpen = ref(false)
+const nameInput = ref('')
+const nameError = ref('')
+const submitError = ref('')
+const submitting = ref(false)
+const rsvpName = ref<string | undefined>(undefined)
+const isOrganizer = ref(false)
+
 const formattedDateTime = computed(() => {
   if (!event.value) return ''
   const formatted = new Intl.DateTimeFormat(undefined, {
@@ -95,11 +141,68 @@ async function fetchEvent() {
 
     event.value = data!
     state.value = 'loaded'
+
+    // Check if current user is the organizer
+    isOrganizer.value = !!getOrganizerToken(event.value.eventToken)
+
+    // Restore RSVP status from localStorage
+    const stored = getRsvp(event.value.eventToken)
+    if (stored) {
+      rsvpName.value = stored.rsvpName
+    }
   } catch {
     state.value = 'error'
   }
 }
 
+async function submitRsvp() {
+  nameError.value = ''
+  submitError.value = ''
+
+  if (!nameInput.value) {
+    nameError.value = 'Please enter your name.'
+    return
+  }
+
+  if (nameInput.value.length > 100) {
+    nameError.value = 'Name must be 100 characters or fewer.'
+    return
+  }
+
+  submitting.value = true
+
+  try {
+    const { data, error } = await api.POST('/events/{token}/rsvps', {
+      params: { path: { token: route.params.token as string } },
+      body: { name: nameInput.value },
+    })
+
+    if (error) {
+      submitError.value = 'Could not submit RSVP. Please try again.'
+      return
+    }
+
+    // Persist RSVP in localStorage
+    saveRsvp(
+      event.value!.eventToken,
+      data!.rsvpToken,
+      data!.name,
+      event.value!.title,
+      event.value!.dateTime,
+    )
+
+    // Update UI
+    rsvpName.value = data!.name
+    event.value!.attendeeCount += 1
+    sheetOpen.value = false
+    nameInput.value = ''
+  } catch {
+    submitError.value = 'Could not submit RSVP. Please try again.'
+  } finally {
+    submitting.value = false
+  }
+}
+
 onMounted(fetchEvent)
 </script>