alexei.dolgolyov
1c0a7cb850
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.
5.1 KiB
5.1 KiB
Phase 3: Localization (EN/RU)
Status: Done Parent plan: 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
- Task 1: Install
svelte-i18n— Svelte 5 compatible i18n library - Task 2: Create locale files:
src/lib/i18n/en.jsonandsrc/lib/i18n/ru.json - Task 3: Create
src/lib/i18n/index.ts— i18n setup, locale detection, initialize with both locales - Task 4: Create
src/lib/components/layout/LanguageSwitcher.svelte— language toggle (EN/RU) in header - Task 5: Extract all hardcoded strings from layout components (Sidebar, Header, MainLayout, ThemeToggle)
- Task 6: Extract all hardcoded strings from auth pages (login, register)
- Task 7: Extract all hardcoded strings from board/section/widget components
- Task 8: Extract all hardcoded strings from app components (AppCard, AppForm, AppIconPicker, AppHealthBadge)
- Task 9: Extract all hardcoded strings from admin pages (users, groups, settings, PermissionEditor)
- Task 10: Extract all hardcoded strings from search components (SearchDialog, SearchTrigger)
- Task 11: Add locale preference storage in localStorage (key:
wal-locale) - Task 12: Update Header.svelte to include LanguageSwitcher
- Task 13: Translate all strings to Russian in ru.json
Files to Modify/Create
src/lib/i18n/en.json— NEWsrc/lib/i18n/ru.json— NEWsrc/lib/i18n/index.ts— NEWsrc/lib/components/layout/LanguageSwitcher.svelte— NEWsrc/lib/components/layout/Header.svelte— MODIFIEDsrc/lib/components/layout/Sidebar.svelte— MODIFIEDsrc/lib/components/layout/MainLayout.svelte— MODIFIEDsrc/lib/components/layout/ThemeToggle.svelte— MODIFIEDsrc/routes/+layout.svelte— MODIFIED (i18n import)src/routes/+page.svelte— MODIFIEDsrc/routes/login/+page.svelte— MODIFIEDsrc/routes/register/+page.svelte— MODIFIEDsrc/routes/boards/+page.svelte— MODIFIEDsrc/routes/boards/[boardId]/+page.svelte— MODIFIEDsrc/routes/boards/new/+page.svelte— MODIFIEDsrc/routes/boards/[boardId]/edit/+page.svelte— MODIFIEDsrc/routes/apps/+page.svelte— MODIFIEDsrc/routes/admin/+layout.svelte— MODIFIEDsrc/routes/admin/users/+page.svelte— MODIFIEDsrc/routes/admin/groups/+page.svelte— MODIFIEDsrc/routes/admin/settings/+page.svelte— MODIFIEDsrc/lib/components/board/Board.svelte— MODIFIEDsrc/lib/components/board/BoardCard.svelte— MODIFIEDsrc/lib/components/board/BoardHeader.svelte— MODIFIEDsrc/lib/components/board/DraggableBoard.svelte— MODIFIEDsrc/lib/components/section/DraggableSection.svelte— MODIFIEDsrc/lib/components/widget/WidgetGrid.svelte— MODIFIEDsrc/lib/components/widget/WidgetRenderer.svelte— MODIFIEDsrc/lib/components/app/AppCard.svelte— (no visible strings to extract)src/lib/components/app/AppForm.svelte— MODIFIEDsrc/lib/components/app/AppHealthBadge.svelte— MODIFIEDsrc/lib/components/app/AppIconPicker.svelte— MODIFIEDsrc/lib/components/search/SearchDialog.svelte— MODIFIEDsrc/lib/components/search/SearchTrigger.svelte— MODIFIEDsrc/lib/components/admin/UserTable.svelte— MODIFIEDsrc/lib/components/admin/GroupTable.svelte— MODIFIEDsrc/lib/components/admin/SettingsForm.svelte— MODIFIEDsrc/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-i18ninstalled as a dependency- i18n initialized in root
+layout.sveltevia 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
- All tasks completed
- Code follows project conventions
- No unintended side effects
- Build passes
- Tests pass (new + existing)
Handoff to Next Phase
svelte-i18nadded as dependency. All components import{ t }fromsvelte-i18nand use$t('key')for strings.- Locale files at
src/lib/i18n/en.jsonandsrc/lib/i18n/ru.jsoncontain ~180 translation keys. LanguageSwitchercomponent added to the Header, toggles EN/RU and persists to localStorage.- Root layout imports
$lib/i18n/index.jsto 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.