138 lines
7.4 KiB
Markdown
138 lines
7.4 KiB
Markdown
# 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 |