busya/ss-tools
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
7a12ed09310830f3e55b102715d23279e76dda66
ss-tools/specs/001-unify-frontend-style/tasks.md

7.4 KiB
Raw Blame History

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