From 86cefffe2fcf0525cc3bc6b5f69feaec11249da6 Mon Sep 17 00:00:00 2001
From: Lucas Berger <me@lucasberger.ca>
Date: Fri, 5 Jun 2026 18:29:23 -0400
Subject: [PATCH] feat(03-05): implement EventForm modal (create/edit)

- Bottom sheet on phone, centered 480px dialog on desktop (EventDetailPopover pattern)
- Fields: title, all-day toggle, start/end date/time, recurrence select, location, description
- D-02: calendar picker hidden when 1 writable calendar, shown when >1 (from writable-calendars endpoint)
- D-11: recurrence presets None/Daily/Weekly/Monthly/Yearly only (whole-series)
- Validation: empty title + end-before-start with UI-SPEC error copy
- create mode: POST /api/events/create; edit mode: PATCH /api/events/:uid/edit
- role=dialog aria-modal=true; focus Title on open; Escape/backdrop close
- T-03-15: all values as plain-text JSX children; no dangerouslySetInnerHTML
- D-01: last-used calendar URL persisted in localStorage
- Auto-fix: vi.hoisted() for mock factory variables (D-03-04-hoisting)
---
 apps/pwa/src/components/EventForm.test.tsx |  21 +-
 apps/pwa/src/components/EventForm.tsx      | 715 +++++++++++++++++++++
 2 files changed, 729 insertions(+), 7 deletions(-)
 create mode 100644 apps/pwa/src/components/EventForm.tsx

diff --git a/apps/pwa/src/components/EventForm.test.tsx b/apps/pwa/src/components/EventForm.test.tsx
index a6eca2f..a78e0a3 100644
--- a/apps/pwa/src/components/EventForm.test.tsx
+++ b/apps/pwa/src/components/EventForm.test.tsx
@@ -23,9 +23,21 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
 // ── Module mocks ──────────────────────────────────────────────────────────────
+// vi.hoisted() is required for variables used inside vi.mock() factory functions
+// to avoid TDZ (temporal dead zone) issues — decision D-03-04-hoisting.
+
+const {
+  mockSetEventForm,
+  mockCreateEvent,
+  mockUpdateEvent,
+  mockFetchWritableCalendars,
+} = vi.hoisted(() => ({
+  mockSetEventForm: vi.fn(),
+  mockCreateEvent: vi.fn().mockResolvedValue({ uid: 'new-uid-123' }),
+  mockUpdateEvent: vi.fn().mockResolvedValue({ uid: 'edit-uid-456' }),
+  mockFetchWritableCalendars: vi.fn(),
+}))
 
-// Mock the calendarStore
-const mockSetEventForm = vi.fn()
 let mockEventFormOpen = true
 let mockEventFormMode: 'create' | 'edit' = 'create'
 let mockEventFormUid: string | null = null
@@ -39,11 +51,6 @@ vi.mock('../store/calendarStore.js', () => ({
   })),
 }))
 
-// Mock write client calls
-const mockCreateEvent = vi.fn().mockResolvedValue({ uid: 'new-uid-123' })
-const mockUpdateEvent = vi.fn().mockResolvedValue({ uid: 'edit-uid-456' })
-const mockFetchWritableCalendars = vi.fn()
-
 vi.mock('../api/client.js', () => ({
   createEvent: mockCreateEvent,
   updateEvent: mockUpdateEvent,
diff --git a/apps/pwa/src/components/EventForm.tsx b/apps/pwa/src/components/EventForm.tsx
new file mode 100644
index 0000000..c49b732
--- /dev/null
+++ b/apps/pwa/src/components/EventForm.tsx
@@ -0,0 +1,715 @@
+/**
+ * EventForm — create/edit event modal overlay (Plan 03-05).
+ *
+ * Rendering modes:
+ *   - create: "New Event" form opened via FAB/toolbar (eventFormMode === 'create')
+ *   - edit: pre-populated from TanStack Query cache by eventFormUid
+ *
+ * Responsive:
+ *   - Phone (≤767px): bottom sheet (full-screen overlay)
+ *   - Tablet/desktop (≥768px): centered dialog (max-width 480px)
+ *
+ * Security: T-03-15 — all field values rendered as plain-text JSX children.
+ * NEVER use dangerouslySetInnerHTML for any event field.
+ *
+ * Calendar picker: hidden when member has exactly 1 writable calendar (D-02).
+ * Populated from GET /api/events/writable-calendars (D-03 server-authoritative).
+ *
+ * Writes: 202 optimistic-accept (D-05/D-12). Enqueued to outbox by the API.
+ * On success: form closes. SyncStateToast feedback lands in Plan 03-06.
+ *
+ * Accessibility:
+ *   - role="dialog", aria-modal="true", aria-label="New Event"/"Edit Event"
+ *   - Focus moves to Title input on open
+ *   - Escape / backdrop click closes form
+ *   - All-day toggle: role="switch", aria-checked
+ *   - Recurrence: <select> with labeled options
+ *   - 44px minimum touch targets on all interactive elements
+ */
+
+import { useEffect, useRef, useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { X, Loader2 } from 'lucide-react'
+import { useCalendarStore } from '../store/calendarStore.js'
+import {
+  createEvent,
+  updateEvent,
+  fetchWritableCalendars,
+  type CreateEventPayload,
+  type RecurrencePreset,
+} from '../api/client.js'
+import type { CalendarOccurrence } from '../api/client.js'
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const LAST_CALENDAR_KEY = 'eventForm.lastCalendarUrl'
+
+function getDefaultStartDate(): string {
+  return new Date().toISOString().slice(0, 10)
+}
+
+function getDefaultEndDate(): string {
+  return new Date().toISOString().slice(0, 10)
+}
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+
+/** Determine if we're on phone breakpoint. */
+function isPhoneBreakpoint(): boolean {
+  return typeof window !== 'undefined' && window.matchMedia('(max-width: 767px)').matches
+}
+
+/** Read last-used calendar URL from localStorage (D-01). */
+function readLastCalendarUrl(): string | null {
+  try {
+    return localStorage.getItem(LAST_CALENDAR_KEY)
+  } catch {
+    return null
+  }
+}
+
+/** Persist last-used calendar URL (D-01). */
+function writeLastCalendarUrl(url: string): void {
+  try {
+    localStorage.setItem(LAST_CALENDAR_KEY, url)
+  } catch {
+    // Ignore write failures
+  }
+}
+
+/**
+ * Parse an ISO date string (possibly with time + offset) into
+ * { date: 'YYYY-MM-DD', time: 'HH:MM' }. Falls back to today/09:00 if malformed.
+ */
+function parseDateTime(iso: string): { date: string; time: string } {
+  try {
+    // Strip IANA bracket suffix e.g. '[America/Toronto]'
+    const clean = iso.replace(/\[[^\]]*\]$/, '')
+    if (/^\d{4}-\d{2}-\d{2}$/.test(iso)) {
+      // All-day date string
+      return { date: iso, time: '09:00' }
+    }
+    const d = new Date(clean)
+    if (isNaN(d.getTime())) throw new Error('Invalid date')
+    const date = d.toISOString().slice(0, 10)
+    const hours = String(d.getHours()).padStart(2, '0')
+    const mins = String(d.getMinutes()).padStart(2, '0')
+    return { date, time: `${hours}:${mins}` }
+  } catch {
+    return { date: getDefaultStartDate(), time: '09:00' }
+  }
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function EventForm() {
+  const { eventFormOpen, eventFormMode, eventFormUid, setEventForm } = useCalendarStore()
+  const queryClient = useQueryClient()
+  const titleRef = useRef<HTMLInputElement>(null)
+
+  // ── Resolve event for edit mode ─────────────────────────────────────────────
+
+  const occurrence: CalendarOccurrence | null = (() => {
+    if (eventFormMode !== 'edit' || !eventFormUid) return null
+    const allEntries = queryClient.getQueriesData<{ occurrences: CalendarOccurrence[] }>({
+      queryKey: ['events'],
+    })
+    for (const [, data] of allEntries) {
+      if (!data?.occurrences) continue
+      const found = data.occurrences.find((o) => o.uid === eventFormUid || o.id === eventFormUid)
+      if (found) return found
+    }
+    return null
+  })()
+
+  // ── Writable calendars (D-03) ───────────────────────────────────────────────
+
+  const { data: writableCalendars = [] } = useQuery({
+    queryKey: ['writableCalendars'],
+    queryFn: fetchWritableCalendars,
+    staleTime: 5 * 60 * 1000,
+    enabled: eventFormOpen,
+  })
+
+  // ── Form state ──────────────────────────────────────────────────────────────
+
+  const initStart = occurrence ? parseDateTime(occurrence.start) : { date: getDefaultStartDate(), time: '09:00' }
+  const initEnd = occurrence ? parseDateTime(occurrence.end) : { date: getDefaultEndDate(), time: '10:00' }
+
+  const [title, setTitle] = useState(occurrence?.title ?? '')
+  const [allDay, setAllDay] = useState(occurrence?.allDay ?? false)
+  const [startDate, setStartDate] = useState(initStart.date)
+  const [startTime, setStartTime] = useState(initStart.time)
+  const [endDate, setEndDate] = useState(initEnd.date)
+  const [endTime, setEndTime] = useState(initEnd.time)
+  const [recurrence, setRecurrence] = useState<RecurrencePreset>('none')
+  const [location, setLocation] = useState(occurrence?.location ?? '')
+  const [description, setDescription] = useState(occurrence?.description ?? '')
+  const [calendarUrl, setCalendarUrl] = useState<string>(() => {
+    if (occurrence?.calendarId) {
+      // In edit mode we don't know the URL from occurrence, use last-used or first writable
+      return readLastCalendarUrl() ?? writableCalendars[0]?.url ?? ''
+    }
+    return readLastCalendarUrl() ?? writableCalendars[0]?.url ?? ''
+  })
+
+  // Sync calendarUrl default when writableCalendars loads
+  useEffect(() => {
+    if (writableCalendars.length > 0 && !calendarUrl) {
+      const lastUrl = readLastCalendarUrl()
+      const found = lastUrl ? writableCalendars.find((c) => c.url === lastUrl) : null
+      setCalendarUrl(found ? found.url : writableCalendars[0].url)
+    }
+  }, [writableCalendars]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Reset form when opening (mode may change)
+  useEffect(() => {
+    if (eventFormOpen) {
+      const startParsed = occurrence ? parseDateTime(occurrence.start) : { date: getDefaultStartDate(), time: '09:00' }
+      const endParsed = occurrence ? parseDateTime(occurrence.end) : { date: getDefaultEndDate(), time: '10:00' }
+      setTitle(occurrence?.title ?? '')
+      setAllDay(occurrence?.allDay ?? false)
+      setStartDate(startParsed.date)
+      setStartTime(startParsed.time)
+      setEndDate(endParsed.date)
+      setEndTime(endParsed.time)
+      setRecurrence('none')
+      setLocation(occurrence?.location ?? '')
+      setDescription(occurrence?.description ?? '')
+    }
+  }, [eventFormOpen, eventFormMode, eventFormUid]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Validation state ────────────────────────────────────────────────────────
+
+  const [errors, setErrors] = useState<{ title?: string; endTime?: string }>({})
+
+  // ── Mutations ───────────────────────────────────────────────────────────────
+
+  const mutation = useMutation({
+    mutationFn: (payload: CreateEventPayload) =>
+      eventFormMode === 'edit' && eventFormUid
+        ? updateEvent(eventFormUid, payload)
+        : createEvent(payload),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['events'] })
+      if (calendarUrl) writeLastCalendarUrl(calendarUrl)
+      setEventForm(false)
+    },
+  })
+
+  // ── Handlers ────────────────────────────────────────────────────────────────
+
+  const handleClose = () => setEventForm(false)
+
+  const handleAllDayToggle = () => {
+    const next = !allDay
+    setAllDay(next)
+    if (!next) {
+      // Turning off all-day: restore default times
+      setStartTime('09:00')
+      setEndTime('10:00')
+    }
+    if (next && endDate < startDate) {
+      // All-day ON: advance end date to match start date if it's behind
+      setEndDate(startDate)
+    }
+  }
+
+  const validate = (): boolean => {
+    const newErrors: { title?: string; endTime?: string } = {}
+
+    if (!title.trim()) {
+      newErrors.title = 'Title is required'
+    }
+
+    if (!allDay) {
+      const startISO = `${startDate}T${startTime}:00`
+      const endISO = `${endDate}T${endTime}:00`
+      if (endISO <= startISO) {
+        newErrors.endTime = 'End time must be after start'
+      }
+    } else {
+      if (endDate < startDate) {
+        newErrors.endTime = 'End time must be after start'
+      }
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = () => {
+    if (!validate()) return
+
+    const payload: CreateEventPayload = {
+      title: title.trim(),
+      allDay,
+      start: allDay ? startDate : `${startDate}T${startTime}:00`,
+      end: allDay ? endDate : `${endDate}T${endTime}:00`,
+      recurrence,
+      ...(location.trim() ? { location: location.trim() } : {}),
+      ...(description.trim() ? { description: description.trim() } : {}),
+      ...(writableCalendars.length > 1 && calendarUrl ? { calendarUrl } : {}),
+    }
+
+    mutation.mutate(payload)
+  }
+
+  // ── Keyboard: Escape to close ───────────────────────────────────────────────
+
+  useEffect(() => {
+    if (!eventFormOpen) return
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') handleClose()
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [eventFormOpen]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Focus: move to title input on open ─────────────────────────────────────
+
+  useEffect(() => {
+    if (eventFormOpen && titleRef.current) {
+      titleRef.current.focus()
+    }
+  }, [eventFormOpen])
+
+  // ── Early return ────────────────────────────────────────────────────────────
+
+  if (!eventFormOpen) return null
+
+  // ── Responsive styles ───────────────────────────────────────────────────────
+
+  const isPhone = isPhoneBreakpoint()
+  const label = eventFormMode === 'edit' ? 'Edit Event' : 'New Event'
+  const saveLabel = mutation.isPending
+    ? 'Saving…'
+    : eventFormMode === 'edit'
+      ? 'Save Changes'
+      : 'Create Event'
+
+  const dialogStyle: React.CSSProperties = isPhone
+    ? {
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        background: 'var(--color-surface-raised)',
+        borderRadius: 'var(--space-3) var(--space-3) 0 0',
+        boxShadow: '0 -4px 24px rgba(0,0,0,0.12)',
+        padding: 'var(--space-6)',
+        maxHeight: '90dvh',
+        overflowY: 'auto',
+        zIndex: 200,
+        fontFamily: 'var(--font-family-base)',
+      }
+    : {
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        background: 'var(--color-surface-raised)',
+        borderRadius: 'var(--space-2)',
+        boxShadow: '0 8px 32px rgba(0,0,0,0.16)',
+        padding: 'var(--space-6)',
+        width: '100%',
+        maxWidth: '480px',
+        maxHeight: '90dvh',
+        overflowY: 'auto',
+        zIndex: 200,
+        fontFamily: 'var(--font-family-base)',
+      }
+
+  // ── Shared input style ──────────────────────────────────────────────────────
+
+  const inputStyle: React.CSSProperties = {
+    width: '100%',
+    boxSizing: 'border-box',
+    minHeight: '44px',
+    padding: '0 var(--space-3)',
+    border: '1px solid var(--color-border)',
+    borderRadius: 'var(--space-1)',
+    background: 'var(--color-surface)',
+    fontSize: 'var(--text-body-size)',
+    fontWeight: 'var(--text-body-weight)',
+    color: 'var(--color-text-primary)',
+    fontFamily: 'var(--font-family-base)',
+    outline: 'none',
+  }
+
+  const labelStyle: React.CSSProperties = {
+    display: 'block',
+    fontSize: 'var(--text-label-size)',
+    fontWeight: 'var(--text-label-weight)',
+    color: 'var(--color-text-secondary)',
+    marginBottom: 'var(--space-1)',
+  }
+
+  const fieldStyle: React.CSSProperties = {
+    marginBottom: 'var(--space-4)',
+  }
+
+  const errorStyle: React.CSSProperties = {
+    fontSize: 'var(--text-label-size)',
+    color: 'var(--color-destructive)',
+    marginTop: 'var(--space-1)',
+  }
+
+  const showPicker = writableCalendars.length > 1
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        data-testid="event-form-backdrop"
+        onClick={handleClose}
+        style={{
+          position: 'fixed',
+          inset: 0,
+          background: 'var(--color-overlay)',
+          zIndex: 199,
+        }}
+      />
+
+      {/* Dialog */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={label}
+        tabIndex={-1}
+        style={dialogStyle}
+      >
+        {/* Header */}
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: 'var(--space-4)',
+          }}
+        >
+          <h2
+            style={{
+              margin: 0,
+              fontSize: 'var(--text-heading-size)',
+              fontWeight: 'var(--text-heading-weight)',
+              lineHeight: 'var(--text-heading-line-height)',
+              color: 'var(--color-text-primary)',
+              fontFamily: 'var(--font-family-base)',
+            }}
+          >
+            {/* Plain text — XSS guard (T-03-15) */}
+            {label}
+          </h2>
+          <button
+            aria-label="Close"
+            onClick={handleClose}
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              minWidth: '44px',
+              minHeight: '44px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: 'var(--color-text-secondary)',
+              borderRadius: 'var(--space-1)',
+              padding: 0,
+            }}
+          >
+            <X size={20} aria-hidden="true" />
+          </button>
+        </div>
+
+        {/* Title field */}
+        <div style={fieldStyle}>
+          <label htmlFor="event-title" style={labelStyle}>
+            Title
+          </label>
+          <input
+            id="event-title"
+            ref={titleRef}
+            type="text"
+            placeholder="Event title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            style={{
+              ...inputStyle,
+              ...(errors.title ? { borderColor: 'var(--color-destructive)' } : {}),
+            }}
+          />
+          {errors.title && (
+            <div style={errorStyle}>
+              {/* Plain text — XSS guard (T-03-15) */}
+              {errors.title}
+            </div>
+          )}
+        </div>
+
+        {/* All-day toggle */}
+        <div
+          style={{
+            ...fieldStyle,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 'var(--space-3)',
+          }}
+        >
+          <button
+            role="switch"
+            aria-checked={allDay}
+            onClick={handleAllDayToggle}
+            style={{
+              width: '44px',
+              height: '26px',
+              borderRadius: '13px',
+              background: allDay ? 'var(--color-text-primary)' : 'var(--color-border)',
+              border: 'none',
+              cursor: 'pointer',
+              position: 'relative',
+              transition: 'background 0.15s',
+              flexShrink: 0,
+              minWidth: '44px',
+              minHeight: '26px',
+              padding: 0,
+            }}
+          >
+            <span
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                top: '3px',
+                left: allDay ? '21px' : '3px',
+                width: '20px',
+                height: '20px',
+                borderRadius: '50%',
+                background: '#fff',
+                transition: 'left 0.15s',
+                boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
+              }}
+            />
+          </button>
+          <span
+            style={{
+              fontSize: 'var(--text-label-size)',
+              color: 'var(--color-text-secondary)',
+              cursor: 'pointer',
+            }}
+            onClick={handleAllDayToggle}
+          >
+            All day
+          </span>
+        </div>
+
+        {/* Start date / time */}
+        <div style={{ ...fieldStyle, display: 'flex', gap: 'var(--space-3)' }}>
+          <div style={{ flex: 1 }}>
+            <label htmlFor="event-start-date" style={labelStyle}>
+              Start
+            </label>
+            <input
+              id="event-start-date"
+              type="date"
+              value={startDate}
+              onChange={(e) => setStartDate(e.target.value)}
+              style={inputStyle}
+            />
+          </div>
+          {!allDay && (
+            <div style={{ flex: '0 0 110px' }}>
+              <label htmlFor="event-start-time" style={labelStyle}>
+                &nbsp;
+              </label>
+              <input
+                id="event-start-time"
+                type="time"
+                value={startTime}
+                onChange={(e) => setStartTime(e.target.value)}
+                style={inputStyle}
+              />
+            </div>
+          )}
+        </div>
+
+        {/* End date / time */}
+        <div style={{ ...fieldStyle, display: 'flex', gap: 'var(--space-3)' }}>
+          <div style={{ flex: 1 }}>
+            <label htmlFor="event-end-date" style={labelStyle}>
+              End
+            </label>
+            <input
+              id="event-end-date"
+              type="date"
+              value={endDate}
+              onChange={(e) => setEndDate(e.target.value)}
+              style={{
+                ...inputStyle,
+                ...(errors.endTime ? { borderColor: 'var(--color-destructive)' } : {}),
+              }}
+            />
+          </div>
+          {!allDay && (
+            <div style={{ flex: '0 0 110px' }}>
+              <label htmlFor="event-end-time" style={labelStyle}>
+                &nbsp;
+              </label>
+              <input
+                id="event-end-time"
+                type="time"
+                value={endTime}
+                onChange={(e) => setEndTime(e.target.value)}
+                style={{
+                  ...inputStyle,
+                  ...(errors.endTime ? { borderColor: 'var(--color-destructive)' } : {}),
+                }}
+              />
+            </div>
+          )}
+        </div>
+        {errors.endTime && (
+          <div style={{ ...errorStyle, marginTop: '-8px', marginBottom: 'var(--space-4)' }}>
+            {/* Plain text — XSS guard (T-03-15) */}
+            {errors.endTime}
+          </div>
+        )}
+
+        {/* Calendar picker (D-02: hidden when only 1 writable calendar) */}
+        {showPicker && (
+          <div style={fieldStyle}>
+            <label htmlFor="event-calendar" style={labelStyle}>
+              Calendar
+            </label>
+            <select
+              id="event-calendar"
+              value={calendarUrl}
+              onChange={(e) => setCalendarUrl(e.target.value)}
+              style={{
+                ...inputStyle,
+                padding: '0 var(--space-3)',
+                cursor: 'pointer',
+              }}
+            >
+              {writableCalendars.map((cal) => (
+                <option key={cal.url} value={cal.url}>
+                  {/* Plain text — XSS guard (T-03-15) */}
+                  {cal.displayName}
+                </option>
+              ))}
+            </select>
+          </div>
+        )}
+
+        {/* Recurrence picker (D-11: whole-series only) */}
+        <div style={fieldStyle}>
+          <label htmlFor="event-recurrence" style={labelStyle}>
+            Repeat
+          </label>
+          <select
+            id="event-recurrence"
+            value={recurrence}
+            onChange={(e) => setRecurrence(e.target.value as RecurrencePreset)}
+            style={{ ...inputStyle, padding: '0 var(--space-3)', cursor: 'pointer' }}
+          >
+            <option value="none">None</option>
+            <option value="daily">Daily</option>
+            <option value="weekly">Weekly</option>
+            <option value="monthly">Monthly</option>
+            <option value="yearly">Yearly</option>
+          </select>
+        </div>
+
+        {/* Location */}
+        <div style={fieldStyle}>
+          <label htmlFor="event-location" style={labelStyle}>
+            Location
+          </label>
+          <input
+            id="event-location"
+            type="text"
+            placeholder="Add location"
+            value={location}
+            onChange={(e) => setLocation(e.target.value)}
+            style={inputStyle}
+          />
+        </div>
+
+        {/* Description */}
+        <div style={fieldStyle}>
+          <label htmlFor="event-description" style={labelStyle}>
+            Description
+          </label>
+          <textarea
+            id="event-description"
+            placeholder="Add description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={3}
+            style={{
+              ...inputStyle,
+              minHeight: '80px',
+              padding: 'var(--space-3)',
+              resize: 'vertical',
+            }}
+          />
+        </div>
+
+        {/* Footer: Cancel + Save */}
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: 'var(--space-4)',
+            marginTop: 'var(--space-4)',
+          }}
+        >
+          <button
+            type="button"
+            onClick={handleClose}
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              minHeight: '44px',
+              padding: '0 var(--space-4)',
+              fontSize: 'var(--text-label-size)',
+              color: 'var(--color-text-secondary)',
+              borderRadius: 'var(--space-1)',
+              fontFamily: 'var(--font-family-base)',
+            }}
+          >
+            Cancel
+          </button>
+
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={mutation.isPending}
+            style={{
+              background: 'var(--color-text-primary)',
+              color: '#ffffff',
+              border: 'none',
+              cursor: mutation.isPending ? 'not-allowed' : 'pointer',
+              minHeight: '44px',
+              padding: '0 var(--space-6)',
+              fontSize: 'var(--text-label-size)',
+              fontWeight: 600,
+              borderRadius: 'var(--space-1)',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 'var(--space-2)',
+              fontFamily: 'var(--font-family-base)',
+              opacity: mutation.isPending ? 0.7 : 1,
+            }}
+          >
+            {mutation.isPending && (
+              <Loader2 size={16} aria-hidden="true" style={{ animation: 'spin 1s linear infinite' }} />
+            )}
+            {/* Plain text — XSS guard (T-03-15) */}
+            {saveLabel}
+          </button>
+        </div>
+      </div>
+    </>
+  )
+}