# 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