fete/specs/009-list-events/tasks.md

Tasks: Event List on Home Page

Input: Design documents from /specs/009-list-events/ Prerequisites: plan.md, spec.md, research.md, data-model.md

Tests: Unit tests (Vitest) and E2E tests (Playwright) are included per constitution (Principle II: Test-Driven Methodology).

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: Setup (Shared Infrastructure)

Purpose: Composable extensions and utility functions shared across all user stories

• T000 Rename router param :token to :eventToken in frontend/src/router/index.ts and update all references in EventDetailView.vue, EventStubView.vue, and their test files (consistency with StoredEvent.eventToken field name)
• T001 Add isValidStoredEvent type guard and validation filter to frontend/src/composables/useEventStorage.ts (FR-010)
• T002 Add removeEvent(eventToken: string) function to frontend/src/composables/useEventStorage.ts (needed by US3)
• T003 [P] Create useRelativeTime composable in frontend/src/composables/useRelativeTime.ts (Intl.RelativeTimeFormat wrapper, FR-002)
• T004 [P] Add unit tests for isValidStoredEvent and removeEvent in frontend/src/composables/__tests__/useEventStorage.spec.ts
• T005 [P] Create unit tests for useRelativeTime in frontend/src/composables/__tests__/useRelativeTime.spec.ts

Checkpoint: Composable layer complete — all shared logic tested and available for components.

---

Phase 2: User Story 1 — View My Events (Priority: P1) 🎯 MVP

Goal: Home page shows all stored events in a sorted list with title and relative time. Tapping navigates to event detail.

Independent Test: Simulate localStorage entries, visit home page, verify all events appear sorted with correct titles and relative times. Tap an event and verify navigation to /events/:eventToken.

Unit Tests for User Story 1

• T006 [P] [US1] Create unit tests for EventCard component in frontend/src/components/__tests__/EventCard.spec.ts — include test cases for isPast prop (faded styling) and role badge rendering (organizer vs. attendee)
• T007 [P] [US1] Create unit tests for EventList component in frontend/src/components/__tests__/EventList.spec.ts

Implementation for User Story 1

• T008 [P] [US1] Create EventCard.vue component in frontend/src/components/EventCard.vue — displays title, relative time, role badge; emits click for navigation
• T009 [US1] Create EventList.vue component in frontend/src/components/EventList.vue — reads events from composable, validates, sorts (upcoming asc, past desc), renders EventCard list
• T010 [US1] Refactor HomeView.vue in frontend/src/views/HomeView.vue — integrate EventList, conditionally show list when events exist
• T011 [US1] Add event card and list styles to frontend/src/assets/main.css

E2E Tests for User Story 1

• T012 [US1] Create E2E test file frontend/e2e/home-events.spec.ts — tests: events displayed with title and relative time, sorted correctly, click navigates to detail page

Checkpoint: MVP complete — returning users see their events and can navigate to details.

---

Phase 3: User Story 2 — Empty State (Priority: P2)

Goal: New users with no stored events see an inviting empty state with a "Create Event" call-to-action.

Independent Test: Clear localStorage, visit home page, verify empty state message and "Create Event" button are visible.

Unit Tests for User Story 2

• T013 [P] [US2] Create unit tests for EmptyState component in frontend/src/components/__tests__/EmptyState.spec.ts

Implementation for User Story 2

• T014 [US2] Create EmptyState.vue component in frontend/src/components/EmptyState.vue — shows message and "Create Event" RouterLink
• T015 [US2] Update HomeView.vue in frontend/src/views/HomeView.vue — show EmptyState when no valid events, show EventList otherwise
• T016 [US2] Add empty state styles to frontend/src/assets/main.css

E2E Tests for User Story 2

• T017 [US2] Add E2E tests to frontend/e2e/home-events.spec.ts — tests: empty state shown when no events, hidden when events exist

Checkpoint: Home page handles both new and returning users.

---

Phase 4: User Story 4 — Past Events Appear Faded (Priority: P2)

Goal: Events whose date/time has passed appear with reduced visual prominence (muted colors, lower contrast) while remaining interactive.

Independent Test: Have both future and past events in localStorage, verify past events display faded while remaining clickable.

Implementation for User Story 4

• T018 [US4] Add .event-card--past modifier class with opacity: 0.6; filter: saturate(0.5) to frontend/src/components/EventCard.vue or frontend/src/assets/main.css
• T019 [US4] Pass isPast computed property to EventCard in EventList.vue and apply modifier class in frontend/src/components/EventCard.vue

E2E Tests for User Story 4

• T020 [US4] Add E2E tests to frontend/e2e/home-events.spec.ts — tests: past events have faded class, upcoming events do not, past events remain clickable

Checkpoint: Visual hierarchy distinguishes upcoming from past events.

---

Phase 5: User Story 3 — Remove Event from List (Priority: P3)

Goal: Users can remove events from their local list via delete icon (and later swipe) with confirmation.

Independent Test: Have multiple events, remove one via delete icon, verify it disappears while others remain.

Unit Tests for User Story 3

• T021 [P] [US3] Create unit tests for ConfirmDialog component in frontend/src/components/__tests__/ConfirmDialog.spec.ts

Implementation for User Story 3

• T022 [US3] Create ConfirmDialog.vue component in frontend/src/components/ConfirmDialog.vue — teleport-to-body modal with confirm/cancel, focus trapping, Escape key
• T023 [US3] Add delete icon button to EventCard.vue in frontend/src/components/EventCard.vue — emits delete event with eventToken (FR-006a)
• T024 [US3] Wire delete flow in EventList.vue in frontend/src/components/EventList.vue — listen for delete event, show ConfirmDialog, call removeEvent() on confirm
• T025 [US3] Add delete icon and confirm dialog styles to frontend/src/assets/main.css

E2E Tests for User Story 3

• T026 [US3] Add E2E tests to frontend/e2e/home-events.spec.ts — tests: delete icon visible, confirmation dialog appears, confirm removes event, cancel keeps event

Checkpoint: Users can manage their event list.

---

Phase 6: User Story 5 — Visual Distinction for Event Roles (Priority: P3)

Goal: Events show a badge indicating whether the user is the organizer or an attendee.

Independent Test: Have events with organizerToken and rsvpToken in localStorage, verify different badges displayed.

Implementation for User Story 5

• T027 [US5] Add role badge (Organizer/Attendee) to EventCard.vue in frontend/src/components/EventCard.vue — derive from organizerToken/rsvpToken presence
• T028 [US5] Add role badge styles to frontend/src/assets/main.css

E2E Tests for User Story 5

• T029 [US5] Add E2E tests to frontend/e2e/home-events.spec.ts — tests: organizer badge shown for events with organizerToken, attendee badge for events with rsvpToken only

Checkpoint: Role distinction visible at a glance.

---

Phase 7: Polish & Cross-Cutting Concerns

Purpose: FAB, swipe gesture, accessibility, and final polish

• T030 Create CreateEventFab.vue in frontend/src/components/CreateEventFab.vue — fixed FAB at bottom-right, navigates to /create (FR-011)
• T031 Add FAB to HomeView.vue in frontend/src/views/HomeView.vue — visible when events exist (empty state has its own CTA)
• T032 Add FAB styles to frontend/src/assets/main.css
• T033 Implement swipe-to-delete gesture on EventCard in frontend/src/components/EventCard.vue — native Touch API (FR-006b)
• T034 Accessibility review: verify ARIA labels, keyboard navigation (Tab/Enter/Escape), focus trapping in ConfirmDialog, WCAG AA contrast on faded cards
• T035 Add E2E tests for FAB to frontend/e2e/home-events.spec.ts — tests: FAB visible when events exist, navigates to create page

---

Dependencies & Execution Order

Phase Dependencies

• Phase 1 (Setup): No dependencies — start immediately
• Phase 2 (US1): Depends on T001, T003 (validation + relative time composable)
• Phase 3 (US2): Depends on T001 (validation); can run in parallel with US1
• Phase 4 (US4): Depends on Phase 2 completion (EventCard must exist)
• Phase 5 (US3): Depends on Phase 2 completion (EventList must exist) + T002 (removeEvent)
• Phase 6 (US5): Depends on Phase 2 completion (EventCard must exist)
• Phase 7 (Polish): Depends on Phases 2–6 completion

User Story Dependencies

• US1 (P1): Depends only on Phase 1 — no other story dependencies
• US2 (P2): Depends only on Phase 1 — independent of US1 but shares HomeView
• US4 (P2): Depends on US1 (extends EventCard with past styling)
• US3 (P3): Depends on US1 (extends EventList with delete flow)
• US5 (P3): Depends on US1 (extends EventCard with role badge)

Parallel Opportunities

• T003 + T004 + T005 can all run in parallel (different files)
• T006 + T007 can run in parallel (different test files)
• T008 can run in parallel with T006/T007 (component vs test files)
• US4, US5 can start in parallel once US1 is done (both extend EventCard independently)

---

Implementation Strategy

MVP First (User Story 1 Only)

1. Complete Phase 1: Setup composables
2. Complete Phase 2: US1 — EventCard, EventList, HomeView refactor
3. STOP and VALIDATE: Test the event list end-to-end
4. Deploy/demo if ready

Incremental Delivery

1. Phase 1 → Composable layer ready
2. Phase 2 (US1) → Event list works → MVP!
3. Phase 3 (US2) → Empty state for new users
4. Phase 4 (US4) → Past events faded
5. Phase 5 (US3) → Remove events from list
6. Phase 6 (US5) → Role badges
7. Phase 7 → FAB, swipe, accessibility polish

---

Notes

• [P] tasks = different files, no dependencies
• [Story] label maps task to specific user story for traceability
• This is a frontend-only feature — no backend changes needed
• All data comes from existing useEventStorage composable (localStorage)
• E2E tests consolidated in single file home-events.spec.ts with separate describe blocks per story