Update frontend/viewer/src/locales (#1855)

* Update frontend/viewer/src/locales

* change i18n file format to .po files which are better supported by Crowdin

---------

Co-authored-by: Kevin Hahn <kevin_hahn@sil.org>

Author: imnasnainaec

backend/FwLite/Taskfile.yml

@@ -14,7 +14,7 @@ tasks:
     dir: ./FwLiteWeb
     cmd: dotnet watch --no-hot-reload
   web-prod:
-    deps: [ ui:build-viewer-app ]
+    deps: [ ui:build-viewer ]
     dir: ./FwLiteWeb
     cmd: dotnet run -- --FwLite:UseDevAssets=false
   web-chaos:

frontend/viewer/README.md

@@ -1,34 +1,41 @@
 Typical development workflow should be to run `task fw-lite-web` in the repo root.
 
-### i18n 
+### i18n
 
 We're using a different library here from the lexbox UI. The core lib is https://lingui.dev/
 with a Svelte plugin https://github.com/HenryLie/svelte-i18n-lingui
 
 Basic usage looks like this:
+
 ```sveltehtml
 <span>{$t`Logout`}</span>
 ```
-for the english text 'Logout'. Then to make localization files run:
+
+for the English text 'Logout'. Then to make localization files, run:
+
 ```bash
 pnpm run i18n:extract
 ```
+
 This will update the files under `/src/locales/`. If you want, you can then feed those files to an AI and it will translate them for you.
 
 #### Adding a new language
-The `/src/locales/` folder contains one file per language, named using its language code (e.g. `es.json` for Spanish).
-You must update `frontend/viewer/lingui.config.ts` with the additional language code, then run `pnpm run i18n:extract` to generate the new locale file
+
+The `/src/locales/` folder contains one file per language, named using its language code (e.g., `es.json` for Spanish).
+You must update `frontend/viewer/lingui.config.ts` with the additional language code, then run `pnpm run i18n:extract` to generate the new locale file.
 
 #### Advanced Usage
 
-for formatted values you can do this:
+For formatted values you can do this:
+
 ```sveltehtml
 <span>{$t`Hello ${name}, how are you today?`}</span>
 ```
 
 ### ShadCN
 
-add a new component
+Add a new component with this:
+
 ```bash
 pnpx shadcn-svelte@next add context-menu
 ```

frontend/viewer/lingui.config.ts

@@ -1,10 +1,8 @@
 import {jstsExtractor, svelteExtractor} from 'svelte-i18n-lingui/extractor';
 
 import {defineConfig} from '@lingui/cli';
-import {formatter} from '@lingui/format-json';
 
 export default defineConfig({
-  format: formatter({style: 'lingui'}),
   locales: ['en', 'es', 'fr', 'ko', 'id'],
   sourceLocale: 'en',
   catalogs: [

frontend/viewer/src/lib/i18n/index.ts

@@ -6,7 +6,7 @@ export async function setLanguage(lang: string): Promise<void> {
   const wasDefault = lang === 'default';
   if (!lang || wasDefault) lang = localStorage.getItem('locale') ?? 'en';
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const {messages} = await import(`../../locales/${lang}.json?lingui`);
+  const {messages} = await import(`../../locales/${lang}.po?lingui`);
   locale.set(lang, messages);
   //only save when the user changes locale
   if (!wasDefault) localStorage.setItem('locale', lang);