Add svelte-i18n translation support to language-chooser-svelte-daisyui

[Copilot]

Adds internationalization to the Svelte language chooser component, reusing the existing /locales PO files shared with the React component. Supports all 28 languages from available-locales.json.

Changes

• PO to JSON converter - scripts/po-to-json.ts converts gettext PO files to JSON format for svelte-i18n runtime. Run via npm run l10n:po-to-json after Crowdin syncs.

• i18n setup - Registered all locales in src/lib/i18n/index.ts, initialized asynchronously before app mount to prevent format errors.

• Component translations - Wrapped UI strings with $_() in:

  • LanguageChooser.svelte - "Choose Language", "Search by name, code, or country", etc.
  • CustomizationModal.svelte - Modal titles, button labels
  • UnlistedLanguageForm.svelte - Form labels, validation messages
  • CustomizationForm.svelte - Field labels

• UI language selector - Added dropdown to App.svelte with bindable uiLanguage prop matching React component API.

• Fallback handling - Missing translations fall back to English source strings to prevent runtime errors.

Usage

<script>
  import { locale } from 'svelte-i18n';
  let uiLanguage = 'es';
</script>

<App bind:uiLanguage />

Documentation

Updated README-l10n.md with Svelte workflow:

• When to run npm run l10n:po-to-json
• Difference between React (LingUI) and Svelte (svelte-i18n) approaches
• JSON files committed to repo (similar to compiled .ts files for React)

Screenshots

English UI with language selector:

Spanish modal showing translated strings:

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add translations to language-chooser-svelte-daisyui using svelte-i18n and shared /locales</issue_title>
<issue_description>## Background
The language-chooser-react-mui component in this monorepo uses LingUI and shares translation files in the /locales folder (in gettext PO format), with translations managed via Crowdin. There are currently 29 supported languages, as listed in available-locales.json.

Task

Add translation support to the language-chooser-svelte-daisyui component using svelte-i18n. The Svelte app should:

• Reuse the translation files from the shared /locales folder (gettext PO files) already used by the React component
• Load available languages from available-locales.json
• Support the same locales as the React app
• Take a prop for uiLanguage to select the current UI language, matching the React API
• All UI strings in the Svelte component should be translatable via svelte-i18n
• Include a dropdown on the main page that sets the interface language

Implementation notes

• Do not duplicate translation files; read directly from /locales/{locale}/messages.po
• Use the same workflow for updating/adding translations (Crowdin, PO files)
• If svelte-i18n requires a different runtime format, add a build step to convert or load PO files as needed
• Document the workflow for contributors to add/update translations
• Target branch for this work: ui-controller

Acceptance Criteria

• All UI strings in language-chooser-svelte-daisyui are translatable and loaded from the shared /locales folder
• The component supports all languages listed in available-locales.json
• No duplicated translation files
• Documentation is updated to describe the translation workflow
• A dropdown in App.svelte allows users to change the interface language.

---

References:

• sillsdev/EthnoLib/locales
• sillsdev/EthnoLib/available-locales.json
• sillsdev/EthnoLib/README-l10n.md
• svelte-i18n
• Crowdin integration

---

This issue tracks translation support for the Svelte language chooser and should be completed on the uicontroller branch.</issue_description>

<agent_instructions>To run the Svelte app, use nx dev @ethnolib/language-chooser-svelte-daisyui</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Add translations to language-chooser-svelte-daisyui using svelte-i18n and shared /locales #7

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.