7.4 KiB
7.4 KiB
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)
- Complete Phases 1–2
- Deliver US1 (consistent visual foundation) with T017 UX verification
- Validate quickstart conformance for core routes
Incremental Delivery
- Add US2 shell/navigation unification + T025 verification
- Add US3 feedback/state consistency + T032 verification
- 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