Add internationalization (i18n) support with react-i18next

[ztjhz]

This PR only lays out the i18n foundation (only some text have been translated to English).

Translations are organized in JSON files located at public/locales/{{lang}}/translation.json, where {{lang}} represents the language code (e.g., en, ja, es).

To support a new language:

• Create a new directory: Inside public/locales, create a folder named with the language code of the new language. For example, for Japanese, create public/locales/ja.
• Add the translation file: Inside the newly created language directory, add a translation.json file. This file will contain the key-value pairs for the translated strings.

Usage Examples

Inside Components:

import { useTranslation } from "react-i18next";

const Component = () => {
  const { t } = useTranslation();

  return <h1>{t('sampleKey')}</h1>;
};

Outside Components:

import i18n from './i18n'; // Assuming your i18n setup is in i18n.ts or i18n.js

const translatedText = i18n.t('sampleKey');

[graphemecluster]

Honestly, I would prefer a library that sticks on ICU MessageFormat since the Intl.MessageFormat proposal will eventually be a part of the ES spec. What do @syimyuzya @untunt @ayaka14732 think?

Additionally, before we can move on, we will need to decide on whether:

• to remove the English translations temporarily and merge anyway; or
• to merge into an alternative branch, nk2028:i18n

since English users will see messages in two languages at the same time as not all messages are translated.

[graphemecluster]

Remove this line since it’s self-explanatory

[graphemecluster]

This will need to follow assetLocation in vite.config.ts since we also have vite.cos.config.ts for production

[graphemecluster]

This is unnecessary, i18n.ts would have already been imported in App.ts

[graphemecluster]

I think this should be put into i18n.ts since nothing is related to the App component.

Suggested change

	document.documentElement.lang = i18n.language;
	i18n.on("languageChanged", lng => {
	document.documentElement.lang = lng;
	});
	document.title = t("tshetUinhAutoderiver");
	document.documentElement.lang = i18n.language;
	document.title = i18n.t("tshetUinhAutoderiver");
	i18n.on("languageChanged", lng => {
	document.documentElement.lang = lng;
	document.title = i18n.t("tshetUinhAutoderiver");
	});

[graphemecluster]

t will be a dependency in these cases

[graphemecluster]

This is tricky, we will need a functional component like

function Translation({ message, ...options }) {
  const { t } = useTranslation();
  return t(message, options);
}

to get the messages sync with the language chosen (I am new to the i18next library and I haven’t think of how to type the component correctly yet, but I believe this should be what react-i18next provide. I wonder if there are alternative i18n libraries that provide such components.)

[graphemecluster]

This line should be at the top of the file

[graphemecluster]

Members and I will need to decide on how the messages should be organised into groups

[graphemecluster]

@syimyuzya @untunt @ayaka14732 Perhaps let’s have a meeting soon?

[graphemecluster]

There should be at least one empty line between import groups - eslint(import/order)
This line should be in the previous group