use locale string for lang selection

packages/app/src/IntlProvider.tsx

@@ -3,46 +3,65 @@ import { IntlProvider as ReactIntlProvider } from "react-intl";
 
 import { ReadPreferences } from "State/Login";
 import enMessages from "translations/en.json";
-import esMessages from "translations/es.json";
+import esMessages from "translations/es_ES.json";
-import zhMessages from "translations/zh.json";
+import zhMessages from "translations/zh_CN.json";
-import jaMessages from "translations/ja.json";
+import twMessages from "translations/zh_TW.json";
-import frMessages from "translations/fr.json";
+import jaMessages from "translations/ja_JP.json";
-import huMessages from "translations/hu.json";
+import frMessages from "translations/fr_FR.json";
-import idMessages from "translations/id.json";
+import huMessages from "translations/hu_HU.json";
-import arMessages from "translations/ar.json";
+import idMessages from "translations/id_ID.json";
-import itMessages from "translations/it.json";
+import arMessages from "translations/ar_SA.json";
-import deMessages from "translations/de.json";
+import itMessages from "translations/it_IT.json";
-import ruMessages from "translations/ru.json";
+import deMessages from "translations/de_DE.json";
+import ruMessages from "translations/ru_RU.json";
 
-const DEFAULT_LOCALE = "en-US";
+const DefaultLocale = "en-US";
 
 const getMessages = (locale: string) => {
   const truncatedLocale = locale.toLowerCase().split(/[_-]+/)[0];
 
-  switch (truncatedLocale) {
+  const matchLang = (lng: string) => {
-    case "es":
+    switch (lng) {
-      return esMessages;
+      case "es-ES":
-    case "zh":
+      case "es":
-      return zhMessages;
+        return esMessages;
-    case "ja":
+      case "zh-CN":
-      return jaMessages;
+      case "zh-Hans-CN":
-    case "fr":
+      case "zh":
-      return frMessages;
+        return zhMessages;
-    case "hu":
+      case "zh-TW":
-      return huMessages;
+        return twMessages;
-    case "id":
+      case "ja-JP":
-      return idMessages;
+      case "ja":
-    case "ar":
+        return jaMessages;
-      return arMessages;
+      case "fr-FR":
-    case "it":
+      case "fr":
-      return itMessages;
+        return frMessages;
-    case "de":
+      case "hu-HU":
-      return deMessages;
+      case "hu":
-    case "ru":
+        return huMessages;
-      return ruMessages;
+      case "id-ID":
-    default:
+      case "id":
-      return enMessages;
+        return idMessages;
-  }
+      case "ar-SA":
+      case "ar":
+        return arMessages;
+      case "it-IT":
+      case "it":
+        return itMessages;
+      case "de-DE":
+      case "de":
+        return deMessages;
+      case "ru-RU":
+      case "ru":
+        return ruMessages;
+      case DefaultLocale:
+      case "en":
+        return enMessages;
+    }
+  };
+
+  return matchLang(locale) ?? matchLang(truncatedLocale) ?? enMessages;
 };
 
 export const IntlProvider = ({ children }: { children: ReactNode }) => {
@@ -57,5 +76,5 @@ export const IntlProvider = ({ children }: { children: ReactNode }) => {
 };
 
 export const getLocale = () => {
-  return (navigator.languages && navigator.languages[0]) || navigator.language || DEFAULT_LOCALE;
+  return (navigator.languages && navigator.languages[0]) ?? navigator.language ?? DefaultLocale;
 };

packages/app/src/Pages/settings/Preferences.tsx

@@ -40,7 +40,7 @@ const PreferencesPage = () => {
               )
             }
             style={{ textTransform: "capitalize" }}>
-            {["en", "ja", "es", "hu", "zh", "fr", "ar", "it", "id", "de", "ru"].sort().map(a => (
+            {["en", "ja", "es", "hu", "zh-CN", "zh-TW", "fr", "ar", "it", "id", "de", "ru"].sort().map(a => (
               <option value={a}>
                 {new Intl.DisplayNames([a], {
                   type: "language",

packages/app/src/State/Login.ts

@@ -27,7 +27,7 @@ export interface UserPreferences {
   /**
    * User selected language
    */
-  language?: "en" | "ja" | "es" | "hu" | "zh" | "fr" | "ar" | "it" | "id" | "de" | "ru";
+  language?: string;
 
   /**
    * Enable reactions / reposts / zaps