# 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.