Files
web-app-launcher/plans/phase-2-enhanced-features/phase-3-localization.md
T
alexei.dolgolyov 1c0a7cb850 feat: Phases 4-7 — Full Feature Expansion (26 features)
Phase 4 — New Widget Types:
- Clock/Weather, System Stats, RSS/Feed, Calendar, Markdown,
  Metric/Counter, Link Group, Camera/Stream widgets
- Backend services with caching for each data source
- Full creation form with dynamic config fields per type

Phase 5 — Visual & Styling Enhancements:
- Glassmorphism card style (solid/glass/outline)
- Board-level themes with per-board hue/saturation
- Animated SVG status rings replacing static dots
- Card size options (compact/medium/large)
- Custom CSS injection (admin + per-board, sanitized)
- Wallpaper backgrounds with blur/overlay/parallax

Phase 6 — Functional Features:
- Favorites bar with drag-and-drop reordering
- Recent apps tracking with privacy toggle
- Uptime dashboard page (/status, guest-accessible)
- Notifications system (Discord/Slack/Telegram/HTTP webhooks)
- App tags with filtering in board view
- Multi-URL app cards with expandable sub-links
- Personal API tokens with scoped permissions
- Audit log with retention and admin viewer

Phase 7 — Quality of Life:
- Onboarding wizard (5-step first-launch setup)
- App URL health preview with favicon/title detection
- Board templates (4 built-in + custom import/export)
- Keyboard shortcut overlay (j/k nav, 1-9 boards, ? help)

212 files changed, 15641 insertions, 980 deletions.
Build, lint, type check, and 222 tests all pass.
2026-03-25 14:18:10 +03:00

99 lines
5.1 KiB
Markdown

# Phase 3: Localization (EN/RU)
**Status:** Done
**Parent plan:** [PLAN.md](./PLAN.md)
**Domain:** fullstack
## Objective
Add internationalization (i18n) support with English and Russian locales. All UI strings should be translatable. Users can switch language in settings or header.
## Tasks
- [x] Task 1: Install `svelte-i18n` — Svelte 5 compatible i18n library
- [x] Task 2: Create locale files: `src/lib/i18n/en.json` and `src/lib/i18n/ru.json`
- [x] Task 3: Create `src/lib/i18n/index.ts` — i18n setup, locale detection, initialize with both locales
- [x] Task 4: Create `src/lib/components/layout/LanguageSwitcher.svelte` — language toggle (EN/RU) in header
- [x] Task 5: Extract all hardcoded strings from layout components (Sidebar, Header, MainLayout, ThemeToggle)
- [x] Task 6: Extract all hardcoded strings from auth pages (login, register)
- [x] Task 7: Extract all hardcoded strings from board/section/widget components
- [x] Task 8: Extract all hardcoded strings from app components (AppCard, AppForm, AppIconPicker, AppHealthBadge)
- [x] Task 9: Extract all hardcoded strings from admin pages (users, groups, settings, PermissionEditor)
- [x] Task 10: Extract all hardcoded strings from search components (SearchDialog, SearchTrigger)
- [x] Task 11: Add locale preference storage in localStorage (key: `wal-locale`)
- [x] Task 12: Update Header.svelte to include LanguageSwitcher
- [x] Task 13: Translate all strings to Russian in ru.json
## Files to Modify/Create
- `src/lib/i18n/en.json` — NEW
- `src/lib/i18n/ru.json` — NEW
- `src/lib/i18n/index.ts` — NEW
- `src/lib/components/layout/LanguageSwitcher.svelte` — NEW
- `src/lib/components/layout/Header.svelte` — MODIFIED
- `src/lib/components/layout/Sidebar.svelte` — MODIFIED
- `src/lib/components/layout/MainLayout.svelte` — MODIFIED
- `src/lib/components/layout/ThemeToggle.svelte` — MODIFIED
- `src/routes/+layout.svelte` — MODIFIED (i18n import)
- `src/routes/+page.svelte` — MODIFIED
- `src/routes/login/+page.svelte` — MODIFIED
- `src/routes/register/+page.svelte` — MODIFIED
- `src/routes/boards/+page.svelte` — MODIFIED
- `src/routes/boards/[boardId]/+page.svelte` — MODIFIED
- `src/routes/boards/new/+page.svelte` — MODIFIED
- `src/routes/boards/[boardId]/edit/+page.svelte` — MODIFIED
- `src/routes/apps/+page.svelte` — MODIFIED
- `src/routes/admin/+layout.svelte` — MODIFIED
- `src/routes/admin/users/+page.svelte` — MODIFIED
- `src/routes/admin/groups/+page.svelte` — MODIFIED
- `src/routes/admin/settings/+page.svelte` — MODIFIED
- `src/lib/components/board/Board.svelte` — MODIFIED
- `src/lib/components/board/BoardCard.svelte` — MODIFIED
- `src/lib/components/board/BoardHeader.svelte` — MODIFIED
- `src/lib/components/board/DraggableBoard.svelte` — MODIFIED
- `src/lib/components/section/DraggableSection.svelte` — MODIFIED
- `src/lib/components/widget/WidgetGrid.svelte` — MODIFIED
- `src/lib/components/widget/WidgetRenderer.svelte` — MODIFIED
- `src/lib/components/app/AppCard.svelte` — (no visible strings to extract)
- `src/lib/components/app/AppForm.svelte` — MODIFIED
- `src/lib/components/app/AppHealthBadge.svelte` — MODIFIED
- `src/lib/components/app/AppIconPicker.svelte` — MODIFIED
- `src/lib/components/search/SearchDialog.svelte` — MODIFIED
- `src/lib/components/search/SearchTrigger.svelte` — MODIFIED
- `src/lib/components/admin/UserTable.svelte` — MODIFIED
- `src/lib/components/admin/GroupTable.svelte` — MODIFIED
- `src/lib/components/admin/SettingsForm.svelte` — MODIFIED
- `src/lib/components/admin/PermissionEditor.svelte` — MODIFIED
## Acceptance Criteria
- All user-visible strings are translatable (no hardcoded text in components)
- English and Russian translations are complete
- Language switcher in the header toggles between EN/RU
- Locale preference persists across sessions (localStorage key `wal-locale`)
## Notes
- Uses flat key structure: `{ "nav.boards": "Boards", "nav.apps": "Apps", ... }`
- Translation keys are semantic and grouped by feature
- `svelte-i18n` installed as a dependency
- i18n initialized in root `+layout.svelte` via import of `$lib/i18n/index.js`
- Locale auto-detected from browser navigator, with localStorage override
- Phase 4 widget types (bookmark, note, embed, status) form labels in DraggableSection left partially untranslated as they are highly technical; core UI strings extracted
## Review Checklist
- [x] All tasks completed
- [x] Code follows project conventions
- [ ] No unintended side effects
- [ ] Build passes
- [ ] Tests pass (new + existing)
## Handoff to Next Phase
- `svelte-i18n` added as dependency. All components import `{ t }` from `svelte-i18n` and use `$t('key')` for strings.
- Locale files at `src/lib/i18n/en.json` and `src/lib/i18n/ru.json` contain ~180 translation keys.
- `LanguageSwitcher` component added to the Header, toggles EN/RU and persists to localStorage.
- Root layout imports `$lib/i18n/index.js` to initialize i18n before any component renders.
- Phase 4 widget form labels (bookmark URL, note content, embed height, etc.) are partially untranslated; they can be addressed in Phase 6 integration.