alexei.dolgolyov/web-app-launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity
Files
477c0e4d5220aec89b6a796e6b6a1d55ea207ffd
web-app-launcher/plans/phase-2-enhanced-features/phase-3-localization.md
T
alexei.dolgolyov 477c0e4d52 feat(phase2): localization EN/RU + additional widget types 
- Add svelte-i18n with 224 translation keys (English + Russian)
- Language switcher in header (EN/RU toggle, persists to localStorage)
- Extract all hardcoded strings from 37 component/page files
- Add 4 new widget types: Bookmark, Note (markdown), Embed (iframe), Status
- WidgetRenderer dispatches by type, WidgetGrid supports full-width widgets
- Type-specific config forms in board editor
- Install marked for markdown rendering
2026-03-24 23:18:05 +03:00

5.1 KiB
Raw Blame History

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.json and src/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 — 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

  • All tasks completed
  • 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.
Reference in New Issue View Git Blame Copy Permalink