ss-tools/specs/013-unify-frontend-css/tasks.md

Implementation Tasks: Unify Frontend CSS & Localization

Branch: 013-unify-frontend-css

Phase 1: Setup & Infrastructure

Goal: Initialize the i18n system and component structure.

• T001 Initialize i18n locales directory and JSON files in frontend/src/lib/i18n/locales/ru.json and frontend/src/lib/i18n/locales/en.json
• T002 Implement i18n store with LocalStorage persistence in frontend/src/lib/i18n/index.ts
• T003 Create UI component directory structure in frontend/src/lib/ui/ and frontend/src/lib/ui/index.ts
• T004 [P] Configure Tailwind utility classes for design tokens (if strictly needed beyond defaults) in frontend/tailwind.config.js

Phase 2: Foundational Components (User Stories 1 & 2)

Goal: Create the core standardized components required for visual consistency. User Story: US1 (Consistent Visual Experience) & US2 (Efficient Design Updates)

• T005 [P] [US1] Create Button component with variants in frontend/src/lib/ui/Button.svelte
• T006 [P] [US1] Create Input component with label/error support in frontend/src/lib/ui/Input.svelte
• T007 [P] [US1] Create Select component in frontend/src/lib/ui/Select.svelte
• T008 [P] [US1] Create Card container component in frontend/src/lib/ui/Card.svelte
• T009 [P] [US1] Create PageHeader component in frontend/src/lib/ui/PageHeader.svelte
• T010 [US1] Export all components from frontend/src/lib/ui/index.ts

Phase 3: Internationalization Support (User Story 3)

Goal: Enable language switching and translation. User Story: US3 (Multi-language Support)

• T011 [US3] Create LanguageSwitcher component in frontend/src/lib/ui/LanguageSwitcher.svelte
• T012 [US3] Integrate LanguageSwitcher into the main layout frontend/src/routes/+layout.svelte
• T013 [US3] Populate ru.json and en.json with initial common terms (Save, Cancel, Dashboard, Settings)

Phase 4: Migration - Dashboard & Settings (User Story 1)

Goal: Apply new components to key pages to prove consistency. User Story: US1 (Consistent Visual Experience)

• T014 [US1] Refactor frontend/src/routes/+page.svelte (Dashboard) to use PageHeader and Card
• T015 [US1] Refactor frontend/src/routes/settings/+page.svelte (Settings) to use Button, Input, and Select
• T016 [US1] Refactor frontend/src/routes/tools/* pages to use standardized components
• T017 [US1] Replace hardcoded text in Dashboard, Settings, and Tools with $t store keys

Phase 5: Polish & Cross-Cutting Concerns

Goal: Final cleanup and verification.

• T018 Verify all hardcoded colors are removed from refactored pages
• T019 Ensure LocalStorage persistence works for language selection
• T020 Check responsiveness of new components on mobile view
• T021 [US3] Verify UI stability and text alignment with long RU translations (overflow check)
• T022 [US3] Implement fallback to default language if translation key or LocalStorage is missing

Dependencies

1. Phase 1 (Infrastructure) MUST be completed first.
2. Phase 2 (Components) depends on Phase 1.
3. Phase 3 (i18n UI) depends on Phase 1 (Store) and Phase 2 (Select/Button components).
4. Phase 4 (Migration) depends on Phase 2 and Phase 3.

Parallel Execution Examples

• Components: T005 (Button), T006 (Input), T007 (Select), and T008 (Card) can be built simultaneously by different developers.
• Migration: T014 (Dashboard) and T015 (Settings) can be refactored in parallel once components are ready.

Implementation Strategy

1. MVP: Build the i18n store and the Button component. Refactor one small page to prove the concept.
2. Expansion: Build remaining components (Input, Select).
3. Rollout: Systematically refactor pages one by one.