htmlui icon indicating copy to clipboard operation
htmlui copied to clipboard

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

Open lupusA opened this issue 11 months ago • 14 comments

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 https://github.com/kopia/kopia/issues/3708 and has a dependency to https://github.com/kopia/kopia/pull/3768.

Tasks to be resolved:

  • [x] Language selector should probably use a flag + always language's own name in own script
  • [x] 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
  • [x] 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.
  • [x] 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?
  • [x] Select component has a bug with empty string (getElementyByID) which needs to be fixed
  • [ ] Auto-select the language based on browser/OS regional settings
  • [x] 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)
  • [x] Extract languages and put it in "language.name" that's specified only in a single JSON file
  • [x] Ideally listing language should collect all JSON files to ease the addition of new languages
  • [x] Check for plugin that will flag all string literals that are not translated
  • [x] Check support for localized string formatting

Cheers,

lupusA avatar Mar 08 '24 12:03 lupusA