immich feat(web): add i18n support for web interface

I think it will be good if the web interface can be to translate to mutli languages. Could you consider to add this function?

I have do some research and below package maybe helpful to do that, the most powerful feature this package provides is it's strong-typed, and prevents us from making mistakes. https://github.com/ivanhofer/typesafe-i18n

Base on this, I have created this sample branch to give a demo. What this demo have done:

Base language setup as English, using current messages on page/components.
Translated home page and users settings page for Chinese.
Added a language switcher on the right top, adjusted button order so theme button and language button always on the right, and will not have a position left and right when the words changes.
Use localStorage to store user language selected.

Current issues:

When page refresh it seems will load English first and then change to the language stored.
For the language swithcher I used a new UI library daisyUI, as it is hard for me to build one from scratch.
The heavy work it to replace all things need to be translated with variable, and orgnized them properly.
Need to run npm run typesafe-i18n in another command line during development, so it will monitor i18n file changes and hot load. A new package seems can solve this (named concurrently), but which will bring in a new pacakage, and modify the start scripts.

I think after all variables defined / replaced for English, the translations for other language can be easily done. Thanks a lot~

Jun 10 '23 16:06 tuutoo

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
immich	⬜️ Ignored (Inspect)			Jun 10, 2023 4:25pm

Jun 10 '23 16:06 vercel[bot]

Did I read the code correct when there is no way to have a word both f.ex. "administration" and "Administration" the key administration always goes to Administration?

Jun 12 '23 19:06 clearminds

For this issue, I think we can do this with string conversion in js like below.

Jun 13 '23 11:06 tuutoo

Different languages could have different rules here

Jun 13 '23 12:06 clearminds

We have a translation platform we are already using for the mobile app. Can also use the translations from there with this library?

Looks like this package doesn't support flutter out-of-the-box.

Maybe someone can write a script to generate from web used i18n-file to mobile solution(json) file. When generate json file, the sytax may be different between this 2 packages and need to be taken into consideration.

f.ex. the plural rules of this 2 packages looks different.

typesafe-i18n use: https://github.com/ivanhofer/typesafe-i18n/tree/main/packages/runtime#plural

easy_localization use: https://pub.dev/packages/easy_localization

another one is the date format syntax difference

The namedArgs of 2 packages seems using the same syntax.

Unless we can solve sytax issue between 2 packages when generating files, personally I suggest to use this library directly.

Jun 13 '23 13:06 tuutoo

I meant the opposite. We already have a translation platform and translations for the mobile app. The web solution should build on top of that existing solution.