add localization support

[L1cardo]

#463
Works well on macOS, but need to be tested on Win and Linux.

[justinlampley]

Overall it looks very good!

I'll look at doing a more comprehensive review later, but there are a few things I noticed after a quick look through the changes.

• There are a few missing entries from the translations file, like ConfiguratorView.SelectFirmwareVersionFirst and SerialDeviceSelect.ManualSelection. There may be more, but those are the ones I immediately noticed.

• For more complex text that includes react components, look at using the Trans component provided by react-i18next (https://react.i18next.com/latest/trans-component). An example of where that component would be useful is the error message in the BuildResponse component. Instead of breaking out the text into multiple translation entries and interweaving those between the link components, you can embed the components in the text which gives translators the flexibility of where the link components appear within the text for a particular language. As an example, here is the build response error alert using the Trans component.

  <Alert sx={styles.errorMessage} severity="error">
	<AlertTitle>
	  {toTitle(
		response?.errorType ?? BuildFirmwareErrorType.GenericError
	  )}
	</AlertTitle>
	<p>
	  <Trans
		i18nKey="BuildResponse.ErrorMessage"
		defaults="An error has occured, see the above log for the exact error message. If you have not already done so, visit <ExpressLRSLink>Expresslrs.org</ExpressLRSLink> and read the <FlashingGuideLink>Flashing Guide</FlashingGuideLink> for your particular device as well as the <TroubleshootingGuideLink>Troubleshooting Guide</TroubleshootingGuideLink>.  If you are still having issues after reviewing the documentation, please copy the build logs above to an online paste site and post in the #help-and-support channel on the <DiscordLink>ExpressLRS Discord</DiscordLink> with a link to the logs and other relevant information like your device, which flashing method you were using, and what steps you have already taken to resolve the issue."
		components={{
		  ExpressLRSLink: (
			<DocumentationLink url="https://www.expresslrs.org/" />
		  ),
		  FlashingGuideLink: (
			<DocumentationLink url="https://www.expresslrs.org/quick-start/getting-started/" />
		  ),
		  TroubleshootingGuideLink: (
			<DocumentationLink url="https://www.expresslrs.org/quick-start/troubleshooting/#flashingupdating" />
		  ),
		  DiscordLink: (
			<DocumentationLink url="https://discord.gg/dS6ReFY" />
		  ),
		}}
	  />
	</p>
  </Alert>

• yarn.lock was changed a lot and the registry was changed from yarnpkg.com to npmjs.org, the only changes that should have occurred in this file is the addition of the new packages to support react-i18next. It is quite strange that running yarn install to add the new packages would have changed the lock file that much.

[L1cardo]

1. added missing localization entries
2. fixed typos
3. improved complex text that includes react components

[L1cardo]

1. Removed default text value for <Trans> component
2. Fixed a typo in translation file en.json
3. Improved one zh-CN localization.

[jurgelenas]

@L1cardo can you please look into making translation type-safe according to https://www.i18next.com/overview/typescript ?

[jurgelenas]

I have created a project on crowdin.com: https://crowdin.com/project/expresslrs-configurator

Will work on this: https://support.crowdin.com/github-integration/

[L1cardo]

1. renamed i18n.ts to index.ts
2. removed TODO: translations
3. i18next debug true when only 'debug'
4. made translation type-safe
5. added settings view and a simple language switcher(I am really unfamiliar with ts coding, so this was very difficult for me, I wanted to add a drop down menu but I failed, so maybe really "programmers" can work on this)

[L1cardo]

I have created a project on crowdin.com: crowdin.com/project/expresslrs-configurator

Will work on this: support.crowdin.com/github-integration

For github and crowding integration, crowdin official integration only sync at the first time and we should manually sync every time after. https://support.crowdin.com/github-integration/#uploading-translations-from-repo.
For auto sync, you can take a look at how BetaFlight does.
https://github.com/betaflight/betaflight-configurator/blob/master/.github/workflows/translations-pr.yml
https://github.com/betaflight/betaflight-configurator/blob/master/.github/workflows/translations-upload.yml

[L1cardo]

make ELRS Configurator title localizable

[L1cardo]

Fixed icon and title are not aligned center.

Before:

After:

[jurgelenas]

@L1cardo can you resolve merge conflicts?

[L1cardo]

1. resolved conflicts and update to latest code base
2. added mising localizations

[L1cardo]

1. added language switcher and system info
2. added src/@types and node_modules/@types

[L1cardo]

I forgot to add i18n to resources or distribution app won't have i18n files, really sorry for that.
Here is the solution:

1. ExpressLRS-Configurator/src/i18n/index.ts

   Line 13 in f6ccf9a

   loadPath: './i18n/{{lng}}/translation.json',

   
   This should be loadPath: process.env.NODE_ENV === 'production' ? '../src/i18n/{{lng}}/translation.json' : './i18n/{{lng}}/translation.json',

2. ExpressLRS-Configurator/package.json

   Line 145 in f6ccf9a

   "extraResources": [

   
   Should add "./src/i18n/**" to extraResources