fete/specs/019-ical-download/tasks.md

Tasks: iCal Download

Input: Design documents from /specs/019-ical-download/ Prerequisites: plan.md, spec.md

Tests: TDD is mandated by the project constitution. Tests are written first and must fail before implementation.

Organization: Single user story (US1). Foundational phase covers the two pure utility modules; US1 phase covers component integration.

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)
• Include exact file paths in descriptions

---

Phase 1: Foundational (Pure Utilities)

Purpose: iCal generation and slug utility — pure functions with no UI dependencies

Tests (RED)

• T001 [P] Write unit tests for slugify (umlaut transliteration, special chars, max length, empty input) in frontend/src/utils/__tests__/slugify.spec.ts
• T002 [P] Write unit tests for iCal generation (required fields, optional LOCATION/DESCRIPTION omission, UTF-8 text escaping, UID format, deterministic output, DTSTAMP) in frontend/src/composables/__tests__/useIcalDownload.spec.ts

Implementation (GREEN)

• T003 Implement slugify utility in frontend/src/utils/slugify.ts — ASCII transliteration (ä→ae, ü→ue, ö→oe, ß→ss), lowercase, non-ASCII removal, hyphens for spaces/special chars, collapse consecutive hyphens, max 60 chars
• T004 Implement generateIcs() function and useIcalDownload() composable in frontend/src/composables/useIcalDownload.ts — RFC 5545 VEVENT with UID ({eventToken}@fete), DTSTAMP, DTSTART (UTC), SUMMARY, SEQUENCE:0, optional LOCATION/DESCRIPTION, Blob download with text/calendar MIME type, slugified filename

Checkpoint: npm run test:unit passes — both utilities work in isolation

---

Phase 2: User Story 1 — Download event as calendar file (Priority: P1) 🎯 MVP

Goal: Calendar icon button in the bottom action bar for all user roles (attendee pre-RSVP, attendee post-RSVP, organizer). Tap triggers .ics download. Not shown for cancelled events.

Independent Test: View any active event → tap calendar button → .ics file downloads → opens in calendar app.

Tests (RED)

• T005 Write E2E test for calendar download button in frontend/e2e/ical-download.spec.ts — verify button visible for pre-RSVP visitor, post-RSVP attendee, and organizer; verify button NOT visible for cancelled event; verify download triggers with correct filename

Implementation (GREEN)

• T006 [US1] Add calendar button and calendar emit to RsvpBar in frontend/src/components/RsvpBar.vue — pre-RSVP state: glow-border + glass-inner icon button after CTA; post-RSVP state: glassmorphic icon button right of status bar
• T007 [US1] Add calendar button for organizer view in frontend/src/views/EventDetailView.vue — fixed bottom position next to existing "Cancel event" button, consistent glassmorphic styling
• T008 [US1] Wire calendar download handler in frontend/src/views/EventDetailView.vue — import useIcalDownload, call on @calendar emit from RsvpBar and on organizer button click, pass event data

Checkpoint: All acceptance scenarios pass — any user on an active event can download a valid .ics file with 1 tap

---

Phase 3: Polish & Cross-Cutting Concerns

• T009 Verify calendar button layout does not disrupt existing RsvpBar on 320px–768px viewports (visual check via browser-interactive-testing skill)

---

Dependencies & Execution Order

Phase Dependencies

• Foundational (Phase 1): No dependencies — can start immediately
• US1 (Phase 2): Depends on Phase 1 completion (T003, T004 must be done)
• Polish (Phase 3): Depends on Phase 2 completion

Within Phases

• T001 and T002 are parallel (different files)
• T003 before T004 (useIcalDownload imports slugify)
• T005 can be written before T006–T008 (TDD: test fails first)
• T006 and T007 are parallel (different files)
• T008 depends on T006 and T007 (wires them together)

Parallel Opportunities

# Phase 1 tests (parallel):
T001: slugify unit tests
T002: iCal generation unit tests

# Phase 2 implementation (parallel after T005):
T006: RsvpBar calendar button
T007: Organizer calendar button

---

Implementation Strategy

MVP (Single Pass)

1. Complete Phase 1: Write tests → implement slugify → implement iCal generation
2. Complete Phase 2: Write E2E → add buttons to RsvpBar + organizer view → wire handler
3. Complete Phase 3: Visual verification
4. DONE: Single user story, single deliverable

---

Notes

• No backend changes required — all client-side
• Zero new dependencies — hand-rolled iCal generation
• generateIcs() must be a pure function (deterministic, no side effects) for easy testing
• useIcalDownload() wraps generateIcs() + Blob download trigger
• Calendar SVG icon: use a calendar outline matching the existing date/time meta icon style