feat(ui): Add multi-language support for kopia-ui

[lupusA]

Hi,

this PR adds the multi-language support feature to kopia-ui. Users can select their language in the preference tab.
The following languages are supported:

• English
• German
• French
• Polish
• Russian
• Italian
• Spanish
• Japanese (Maybe)

This PR also adds new libaries and dependencies (i18next, react-i18next, i18next-http-backend)
The PR will close kopia/kopia#3708 and has a dependency to kopia/kopia#3768.

Tasks to be resolved:

• Language selector should probably use a flag + always language's own name in own script
• Language selector should be located in upper-right corner and be always visible so that users can immediately switch to their language with 2 clicks
• i18next needs to be initialized first before rendering
• Navbar needs to be refreshed when changing language. Potentially we need a change as the component is updated via context currently.
• Provide a full (machine-based) translation for the mentioned languages
• Can we make the drop-down only show the flag icon for the selected language when not expanded?
• Select component has a bug with empty string (getElementyByID) which needs to be fixed
• Auto-select the language based on browser/OS regional settings
• Add a build-test that ensures that all translations are always available in all languages
• Document the process for adding new text in the UI (which will need translations)
• Add a translation guide that explains the context in which each text appears (e.g. the word "Stop" can be a verb or a noun)
• Extract languages and put it in "language.name" that's specified only in a single JSON file
• Ideally listing language should collect all JSON files to ease the addition of new languages
• Check for plugin that will flag all string literals that are not translated
• Check support for localized string formatting

Cheers,

[jkowalski]

This is promising, i took it for a quick spin. Some first impressions/questions/ideas:

• language selector should probably use a flag + always language's own name in own script (so it's 🇬🇧 English 🇩🇪 Deutsch, 🇵🇱 polski, 🇷🇺 Русский)

• i don't undeerstand why Language is its own section in Preferences, it probably just makes sense to put the language selector in upper-right corner and be always visible so that folks can immediately switch to their language with 2 clicks.

• translating some terminology will be hard

• I will try to translate this into Polish (looks very difficult)

• can this auto-select the language based on browser/OS regional settings?

• instead of adding all those languages initially we should start with 3-4 languages folks on core team can speak natively and provide translations for

• can we add a build-test that ensures that all translations are always available in all languages?

• we should probably we add a test that ensures all i18n.t have corresponding entries in JSON files? also, dangling translations that are no longer used and/or lists missing words

• what should be the process for adding new text in the UI (which will need translations)?

• we should add a translation guide that explains the context in which each text appears (e.g. the word "Stop" can be a verb or a noun)

• the following should be replaced with a single "language.name" that's specified only in a single JSON file, so that adding a new language requires only specifying its own native name and not updating any other translations.

	"lang.en": "English",
	"lang.de": "German",
	"lang.es": "Spanish",
	"lang.fr": "French",
	"lang.ru": "Russian",
	"lang.jp": "Japanese",
	"lang.it": "Italian",
	"lang.pl": "Polish",

• ideally listing language should collect all JSON files, instead of hardcoding it, so that it's easier to add new languages.
• there's a lot of hard cases where we build strings dynamically, including formatting of time, etc, in particular in the policy editor and snapshot list

[jkowalski]

@lupusA this is looking very nice, I found a few minor things:

1. the language selector needs to be wider and/or have non-breaking spaces between the flag and the text, otherwise i'm seeing this:

2. Can we make the drop-down only show the flag icon for the selected language when not expanded?

3. After changing the language, some the translations take ~3-5s to change. We probably need to trigger some additional refresh.

[julio-lopez]

Suggested change

	"tab.repository": "Repositorio",
	"tab.repository": "Depósito",

[julio-lopez]

I guess either one works.

[julio-lopez]

Not sure what a good word would be here, but "Instantáneas" does not work.

I would probably say something like "copias de respaldo"

[julio-lopez]

this is shorter

Suggested change

	"snapshot.header.snapshot.owner": "Propietario",
	"snapshot.header.snapshot.owner": "Dueño",

[julio-lopez]

Suggested change

	"user.interface.appearance.hint": "Selecciona el tamaño de fuente",
	"user.interface.appearance.hint": "Selecciona el tamaño de letra",

[julio-lopez]

Suggested change

	"repository.feedback.read.only": "El repositorio es de solo lectura",
	"repository.feedback.read.only": "El repositorio es de sólo lectura",

[lupusA]

@lupusA this is looking very nice, I found a few minor things:

1. the language selector needs to be wider and/or have non-breaking spaces between the flag and the text, otherwise i'm seeing this:

2. Can we make the drop-down only show the flag icon for the selected language when not expanded?

3. After changing the language, some the translations take ~3-5s to change. We probably need to trigger some additional refresh.

There are a couple of things that aren't perfect right now. I will try to fix them first and add them to the list.
Thanks for the feedback.

Cheers,

[NavyStack]

Could you kindly consider adding support for Korean as well? I'll be responsible for translating into Korean.
Additionally, I'm also capable of providing Japanese translations.

[lupusA]

Hi @NavyStack,

supporting additional languages will be easy. You just have to create a PR with the translation and a little adjustment to the language.json file. Thats all :-)

[NavyStack]

Thanks! I will make a PR soon.

[lupusA]

Thanks! I will make a PR soon.

By the way, japenese will be added in the initial commit. But it will be a machine-based translation :-)

Cheers,

[NavyStack]

@lupusA
Opened a PR that reflects the Korean translation.
Please confirm. lupusA#1

We tried to be consistent with words and distinguish subtle differences in meaning.
Where possible, please put full stops in the original English text.

Thanks.

[hudishijie]

考虑中文么

[mcthesw]

I can be responsible for translating Simplified Chinese.
Chinese can generally be divided into Simplified Chinese and Traditional Chinese. So how should I fill in the code and value in languages.json? I usually see Simplified Chinese represented as zh-CN and Traditional Chinese represented as zh-HK

[lupusA]

I will work on it again next week. I am currently busy in private matters.

I need to refactor the translation keys again, to provide a good basis for further translations.

@NavyStack
I will incorporate your changes as well.

[NavyStack]

@lupusA ,
Don't worry about the Korean translation.
Even if you make a lot of changes, the Korean translation will be quick.

Cheers.

[NavyStack]

@lupusA I will be reset hard from English key.

[inschrift-spruch-raum]

• the following should be replaced with a single "language.name" that's specified only in a single JSON file, so that adding a new language requires only specifying its own native name and not updating any other translations.

	"lang.en": "English",
	"lang.de": "German",
	"lang.es": "Spanish",
	"lang.fr": "French",
	"lang.ru": "Russian",
	"lang.jp": "Japanese",
	"lang.it": "Italian",
	"lang.pl": "Polish",

I think naming needs to follow certain international norms because a language may have multiple variants

for example,

English -> en-US / en-UK
Chinese -> zh-CN / zh-HK