71 lines
3.8 KiB
Markdown
71 lines
3.8 KiB
Markdown
# 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. |