Introduce Internationalization

[julkascript]

Requirements:

• Supported languages:
  • Bulgarian
  • English
• Default: Bulgarian
• The user can switch between languages
• The user's choice is stored in the local storage for persistence or other persistent store method
• Split the internationalization to different files, separated by pages, and common pages:
  • Buy
  • Sell
  • Trade
  • About
  • Profile
  • Common

% UI/UX design in progress

Additional tips:

• Do not translate yugioh-related text/words (card names, sets, etc.)
• Do not translate “Cardow” in all its usages

@RyotaMitaraiWeb I want to leave the architecture/setup more flexible, so it's more fun for you. Let me know if you want to discuss this.

[RyotaMitaraiWeb]

this is going to be my first time dealing with internalization, so gonna leave these thoughts here for transparency:

• will probably use i18next, since it seems to be the most popular tool for translating React apps
• I am not sure how much the platform is aiming to appeal to an international audience, but I think the default language should be whatever the browser detects with a fallback to English. The latter is mostly because we don't want to put non-Bulgarian speakers in a Bulgarian environment.
• I will probably have to do some tweaking to the changelog and FAQ; most likely, I will replace the contents of the arrays with their respective keys and then get their translations within the components where they are used.

[julkascript]

• Sure, i18next is perfect
• I agree with what you said. Do it this way, lmk how it goes.
• Yes and if you struggle with translation, phrasing or anything, don’t hesitate to ask me directly, or in PRs.

[RyotaMitaraiWeb]

integration has been going well so far (managed to get it working + saving the language in localStorage comes right out of the box), I currently need translations for all TCG-related terms, as I am not well-versed with the Bulgarian TCG community and wouldn't know what would be an appropriate translation for them. Some examples:

• "Trading card game"
• "listing"
• the different card conditions, like "Poor", "Played" (including them here, since they seem to be actual terms within the TCG communities)

(the list isn't exhaustive, feel free to include anything that may not be obvious to an outsider)

[julkascript]

integration has been going well so far (managed to get it working + saving the language in localStorage comes right out of the box), I currently need translations for all TCG-related terms, as I am not well-versed with the Bulgarian TCG community and wouldn't know what would be an appropriate translation for them. Some examples:

• "Trading card game"
• "listing"
• the different card conditions, like "Poor", "Played" (including them here, since they seem to be actual terms within the TCG communities)

(the list isn't exhaustive, feel free to include anything that may not be obvious to an outsider)

• TCG - TCG
• Lising - обява
• Listed - видим
• Condition (Състояние) - Poor (Влошено), Played (Играно), Good (Добро), Excellent (Отлично)
• Post - публикуване/публикувай
• Trade - размяна
• Set - Издание
• Rarity - Рядкост
• Achievement - Постижение

[RyotaMitaraiWeb]

I am pretty much done with the translations (as far as I am concerned, at least) and the only thing left is to implement something with which the language can be changed. I decided to brainstorm some ideas for a potential design (if you had something else in mind, feel free to share, I didn't spend a lot of time on the wireframes, so nothing of value is going to waste):

https://www.figma.com/design/DTnEVV4abr1f2FIFBckWlt/Change-language?node-id=0-1&t=IQk7qcMXUjsqPHq0-1

I have provided some comments with more details in the wireframe.

My personal preference would be variant 1-1 (full text + outline), followed by variant 1-4 (minimalist + outline), and variant 2 for the mobile design, but I am open to anything.

[julkascript]

Thanks for the design input. I would personally prefer the language select to be in the side menu because it’s not going to be used much (probably almost never), because we want to immediately show BG content to BG users and EN to all others. Usually I would put buttons/items in the navigation that are used more often (for a platform web app like ours).

But if I had to pick from what you did, I’d go for the super minimalistic variant .3 or .4

If you don’t feel like playing with this anymore, I am also fine with sticking it in the navbar for now with any of the variants.

[RyotaMitaraiWeb]

I will need some clarification, because our desktop layout currently doesn't have a side menu, as far as I am understanding the suggestion.

An alternative is to have a footer as part of the app layout and put the language select there (alongside with other stuff we may want to add), I could spin up a wireframe if desired

[julkascript]

Nevermind. For now, let’s proceed with any of the variants 3, 4 or 1-1. If we need, we can change it up in a later stage.