# Tasks: Frontend Style Unification

**Input**: Design docs from `specs/001-unify-frontend-style/`  
**Prerequisites**: plan.md, spec.md, ux_reference.md, research.md, data-model.md, contracts/modules.md, quickstart.md

## Phase 1: Setup (Project Initialization)

- [ ] T001 Define style-unification scope matrix for target routes/components in specs/001-unify-frontend-style/quickstart.md
- [ ] T002 Create conformance review checklist baseline in specs/001-unify-frontend-style/quickstart.md
- [ ] T003 Prepare implementation notes for exception handling workflow in specs/001-unify-frontend-style/research.md

---

## Phase 2: Foundational (Blocking Prerequisites)

- [ ] T004 Define canonical page-shell pattern and shared layout rules in frontend/src/lib/components/layout/PageHeader.svelte
- [ ] T005 [P] Define standardized card/container pattern alignment in frontend/src/lib/components/ui/Card.svelte
- [ ] T006 [P] Define standardized action/button hierarchy rules in frontend/src/lib/components/ui/Button.svelte
- [ ] T007 Define canonical state feedback pattern (loading/empty/error/success) in frontend/src/lib/components/ui/StateBlock.svelte
- [ ] T008 Align core shared terminology keys for UI statuses/actions in frontend/src/lib/i18n/index.ts
- [ ] T009 Document deferred exceptions tracking template in specs/001-unify-frontend-style/data-model.md

**Checkpoint**: Foundational style primitives and contracts are in place; user-story delivery can proceed independently.

---

## Phase 3: User Story 1 - Consistent Visual Foundation (Priority: P1)

**Goal**: Unify visual primitives and shared UI presentation across key pages.

**Independent Test**: Open dashboards/tasks/reports/settings and verify typography, spacing, card/container style, and buttons follow one baseline.

- [ ] T010 [US1] Apply unified visual baseline to dashboards page structure in frontend/src/routes/dashboards/+page.svelte
- [ ] T011 [US1] Apply unified visual baseline to tasks page structure in frontend/src/routes/tasks/+page.svelte
- [ ] T012 [US1] Apply unified visual baseline to reports page structure in frontend/src/routes/reports/+page.svelte
- [ ] T013 [US1] Apply unified visual baseline to settings page structure in frontend/src/routes/settings/+page.svelte
- [ ] T014 [P] [US1] Refactor shared card usage to canonical container rules in frontend/src/lib/components/reports/ReportCard.svelte
- [ ] T015 [P] [US1] Refactor shared input/control spacing to baseline rules in frontend/src/lib/components/ui/Input.svelte
- [ ] T016 [US1] Preserve functional behavior while applying visual refactor in frontend/src/routes/tasks/+page.svelte
- [ ] T017 [US1] Verify implementation matches ux_reference.md (Happy Path & Errors) in specs/001-unify-frontend-style/ux_reference.md

---

## Phase 4: User Story 2 - Unified Navigation and Page Shells (Priority: P2)

**Goal**: Standardize shell/navigation structure so orientation is predictable across sections.

**Independent Test**: Navigate across at least three top-level pages and confirm consistent shell hierarchy and action placement.

- [ ] T018 [US2] Standardize top shell layout behavior for navigation/title/action regions in frontend/src/lib/components/layout/TopNavbar.svelte
- [ ] T019 [US2] Standardize breadcrumbs pattern and hierarchy rendering in frontend/src/lib/components/layout/Breadcrumbs.svelte
- [ ] T020 [US2] Align sidebar navigation visual/state consistency with shell patterns in frontend/src/lib/components/layout/Sidebar.svelte
- [ ] T021 [US2] Align global task drawer shell integration with unified layout rhythm in frontend/src/lib/components/layout/TaskDrawer.svelte
- [ ] T022 [P] [US2] Align dashboards route shell contract usage in frontend/src/routes/dashboards/+page.svelte
- [ ] T023 [P] [US2] Align tasks route shell contract usage in frontend/src/routes/tasks/+page.svelte
- [ ] T024 [P] [US2] Align reports route shell contract usage in frontend/src/routes/reports/+page.svelte
- [ ] T025 [US2] Verify implementation matches ux_reference.md (Happy Path & Errors) in specs/001-unify-frontend-style/ux_reference.md

---

## Phase 5: User Story 3 - Predictable Feedback and States (Priority: P3)

**Goal**: Ensure loading/empty/error/success feedback is consistent in style, tone, and recovery guidance.

**Independent Test**: Trigger state feedback on targeted modules and confirm canonical message/placement/recovery consistency.

- [ ] T026 [US3] Implement canonical loading/empty/error/success blocks for reports experience in frontend/src/routes/reports/+page.svelte
- [ ] T027 [US3] Implement canonical loading/empty/error/success blocks for tasks experience in frontend/src/routes/tasks/+page.svelte
- [ ] T028 [US3] Align report detail feedback states to canonical patterns in frontend/src/lib/components/reports/ReportDetailPanel.svelte
- [ ] T029 [P] [US3] Align report card status messaging and emphasis consistency in frontend/src/lib/components/reports/ReportCard.svelte
- [ ] T030 [US3] Normalize user-facing status/recovery terminology via i18n keys in frontend/src/lib/i18n/locales/en.json
- [ ] T031 [P] [US3] Normalize user-facing status/recovery terminology via i18n keys in frontend/src/lib/i18n/locales/ru.json
- [ ] T032 [US3] Verify implementation matches ux_reference.md (Happy Path & Errors) in specs/001-unify-frontend-style/ux_reference.md

---

## Final Phase: Polish & Cross-Cutting Concerns

- [ ] T033 Run route-level visual conformance walkthrough and update checklist in specs/001-unify-frontend-style/quickstart.md
- [ ] T034 [P] Verify no critical flow regressions on dashboards/tasks/reports/settings in frontend/src/routes/dashboards/+page.svelte
- [ ] T035 [P] Verify accessibility-visible focus/contrast constraints on updated components in frontend/src/lib/components/ui/Button.svelte
- [ ] T036 Update deferred exceptions and follow-up actions in specs/001-unify-frontend-style/data-model.md
- [ ] T037 Finalize implementation notes and readiness summary in specs/001-unify-frontend-style/plan.md

---

## Dependencies & Execution Order

### Phase Dependencies

- Setup (Phase 1) → required before Foundational (Phase 2)
- Foundational (Phase 2) → required before all User Story phases
- US1 (Phase 3) → MVP baseline
- US2 (Phase 4) depends on foundational + US1 visual baseline
- US3 (Phase 5) depends on foundational; can proceed after shell patterns are stable
- Final Phase depends on completion of selected story scope

### User Story Dependencies

- **US1 (P1)**: Independent MVP slice
- **US2 (P2)**: Builds on consistent primitives from US1
- **US3 (P3)**: Can be implemented after foundational state blocks; best after US1/US2 alignment for consistency

---

## Parallel Execution Opportunities

- T005, T006 can run in parallel after T004
- T014 and T015 can run in parallel in US1
- T022, T023, T024 can run in parallel in US2
- T029, T031 can run in parallel in US3
- T034 and T035 can run in parallel in Final Phase

---

## Implementation Strategy

### MVP First (US1)

1. Complete Phases 1–2
2. Deliver US1 (consistent visual foundation) with T017 UX verification
3. Validate quickstart conformance for core routes

### Incremental Delivery

1. Add US2 shell/navigation unification + T025 verification
2. Add US3 feedback/state consistency + T032 verification
3. Complete polish and final conformance/regression checks

### Format Validation

All tasks follow required checklist format:

- `- [ ]`
- Task ID (`Txxx`)
- `[P]` marker only where parallelizable
- `[USx]` label on user-story tasks
- Explicit file path per task