Add localization

[nicolocastro89]

Setup the basic structure for translating the app using i18next-react.
Started the localization for the hero-panel.
Also added a selector in the top right of the navbar to switch between languages.
For the moment only did part of the italian.

[bstrackany]

Is this supposed to be hard-coded to Devil?

[nicolocastro89]

Right this was before the suggestion to start with hero panel and I had forgotten. I updated it and will check it works

[bstrackany]

I'm assuming stuff from HeroLogic is not currently localized (which is fine by me, just checking)

[nicolocastro89]

yeap I just did the "Speed" name for now

[nicolocastro89]

I tried adding the translation to the speed modes.. but don't know how to display them 😅

[bstrackany]

Running this locally for testing. Some quick feedback:

• Nice work so far splitting out the language and keeping the code clean.
• Home screen text of "In addition, you can quickly look up rules at any time using the Reference button at the bottom right of the screen." is untranslated.
• The language switcher feels a little hard to tap on mobile, give it some left margin (see screenshot below)

• For the language/locale switcher I'd suggest putting the languages with locale abbreviations. Eg "English (US)" and "Italiano (IT)"

• Does the locale switcher auto-detect browser locale settings? That would be ideal (eg use i18next-browser-languagedetector in your config.ts). If you can auto-detect it then I'd vote for moving the switcher to the footer instead of the header.
• The locale switcher doesn't seem to remember my setting, it seems to be hard-coded to US english. I picked Italian, closed the browser, then opened it again and it showed English again. It should remember my language setting (probably in local storage) and default to that when I open the browser again. I believe language detector can be configured to auto-save (and auto-load) from local storage.
• I thought I noticed a layout issue with some of the larger italian words, but it seems okay for now.
• I'm torn on which flag icon to use for the English version, though I guess if it's en-US then it makes sense. I'm most used to seeing the British flag not the US flag, but I'll defer to Andy on his preference (esp since I think he's in the UK :). I'm assuming the default is en-US not en-GB.
• Lastly, more of a general note, but I think some of the translations (eg "Dimensione" instead of "size") might end up too long for the UI in some sections or screen resolutions, so there might need to be either two language keys (eg size vs sizeCompact) or else shorter translations used or else tweaks to the UI or code to accommodate longer words. This will spring up more with German and Russian, but still good to keep in mind.

[nicolocastro89]

Thanks for looking into it i'll address the various points

Home screen text of "In addition, you can quickly look up rules at any time using the Reference button at the bottom right of the screen." is untranslated.

had translated it but forgot to put the t function

The language switcher feels a little hard to tap on mobile, give it some left margin (see screenshot below)

Added a 1em left margin

For the language/locale switcher I'd suggest putting the languages with locale abbreviations. Eg "English (US)" and "Italiano (IT)"

done

I'm torn on which flag icon to use for the English version, though I guess if it's en-US then it makes sense. I'm most used to seeing the British flag not the US flag, but I'll defer to Andy on his preference (esp since I think he's in the UK :). I'm assuming the default is en-US not en-GB.

Added both for now even if there is no difference. If someone decides they enjoy changingt he various color<->colour etc. they can now :)

Lastly, more of a general note, but I think some of the translations (eg "Dimensione" instead of "size") might end up too long for the UI in some sections or screen resolutions, so there might need to be either two language keys (eg size vs sizeCompact) or else shorter translations used or else tweaks to the UI or code to accommodate longer words. This will spring up more with German and Russian, but still good to keep in mind.

this is a good point. Personally I think the best place to handle this would be in code (albeit the hardest maybe) as you said it will spring up with other languages, and it's unreasonable to expect translators to check if the word they use fits in the space or not

Does the locale switcher auto-detect browser locale settings? That would be ideal (eg use i18next-browser-languagedetector in your config.ts). If you can auto-detect it then I'd vote for moving the switcher to the footer instead of the header.
The locale switcher doesn't seem to remember my setting, it seems to be hard-coded to US english. I picked Italian, closed the browser, then opened it again and it showed English again. It should remember my language setting (probably in local storage) and default to that when I open the browser again. I believe language detector can be configured to auto-save (and auto-load) from local storage.

I think both of these can be fixed with i18next-browser-languagedetector so will do that next