feat: language picker

packages/app/src/IntlProvider.tsx

@@ -1,5 +1,9 @@
 import { type ReactNode } from "react";
+import { useSelector } from "react-redux";
 import { IntlProvider as ReactIntlProvider } from "react-intl";
+
+import { RootState } from "State/Store";
+
 import enMessages from "translations/en.json";
 import esMessages from "translations/es.json";
 import zhMessages from "translations/zh.json";
@@ -37,10 +41,8 @@ const getMessages = (locale: string) => {
 };
 
 export const IntlProvider = ({ children }: { children: ReactNode }) => {
-  const getLocale = () => {
-    return (navigator.languages && navigator.languages[0]) || navigator.language || DEFAULT_LOCALE;
-  };
-  const locale = getLocale();
+  const lang = useSelector((s: RootState) => s.login.preferences.language);
+  const locale = lang ?? getLocale();
 
   return (
     <ReactIntlProvider locale={locale} messages={getMessages(locale)}>
@@ -48,3 +50,7 @@ export const IntlProvider = ({ children }: { children: ReactNode }) => {
     </ReactIntlProvider>
   );
 };
+
+export const getLocale = () => {
+  return (navigator.languages && navigator.languages[0]) || navigator.language || DEFAULT_LOCALE;
+};

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

@@ -21,6 +21,34 @@ const PreferencesPage = () => {
         <FormattedMessage {...messages.Preferences} />
       </h3>
 
+      <div className="card flex">
+        <div className="flex f-col f-grow">
+          <div>
+            <FormattedMessage defaultMessage="Language" />
+          </div>
+        </div>
+        <div>
+          <select
+            value={perf.language}
+            onChange={e =>
+              dispatch(
+                setPreferences({
+                  ...perf,
+                  language: e.target.value,
+                } as UserPreferences)
+              )
+            }
+            style={{ textTransform: "capitalize" }}>
+            {["en", "ja", "es", "hu", "zh", "fr", "ar"].sort().map(a => (
+              <option value={a}>
+                {new Intl.DisplayNames([a], {
+                  type: "language",
+                }).of(a)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
       <div className="card flex">
         <div className="flex f-col f-grow">
           <div>

packages/app/src/State/Login.ts

@@ -21,6 +21,11 @@ export interface NotificationRequest {
 }
 
 export interface UserPreferences {
+  /**
+   * User selected language
+   */
+  language?: "en" | "ja" | "es" | "hu" | "zh" | "fr" | "ar";
+
   /**
    * Enable reactions / reposts / zaps
    */

packages/app/src/lang.json

@@ -786,6 +786,9 @@
   "xmcVZ0": {
     "defaultMessage": "Search"
   },
+  "y1Z3or": {
+    "defaultMessage": "Language"
+  },
   "yCmnnm": {
     "defaultMessage": "Read global from",
     "description": "Label for reading global feed from specific relays"

packages/app/src/translations/en.json

@@ -256,6 +256,7 @@
   "xKflGN": "{username}''s Follows on Nostr",
   "xbVgIm": "Automatically load media",
   "xmcVZ0": "Search",
+  "y1Z3or": "Language",
   "yCmnnm": "Read global from",
   "zFegDD": "Contact",
   "zINlao": "Owner",