2 files changed, 153 insertions(+), 0 deletions(-)

M app/javascript/flavours/glitch/features/local_settings/page/index.jsx
A app/javascript/flavours/glitch/features/local_settings/page/language_selector.jsx

@@ 9,6 9,7 @@ import ImmutablePropTypes from "react-immutable-proptypes";
 
 //  Our imports
 import LocalSettingsPageItem from "./item";
+import LanguageSelector from "./language_selector";
 
 //  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 


@@ 61,6 62,7 @@ class LocalSettingsPage extends PureComponent {
         >
           <FormattedMessage id='settings.theme' defaultMessage='Theme' />
         </LocalSettingsPageItem>
+        <LanguageSelector />
         <LocalSettingsPageItem
           settings={settings}
           item={["show_reply_count"]}

@@ 0,0 1,151 @@
+import { PureComponent } from "react";
+
+import { FormattedMessage } from "react-intl";
+
+const LOCALE_STORAGE_KEY = "masto-fe-locale";
+
+// Native language names for all available locales
+const LOCALE_NAMES = {
+  af: "Afrikaans",
+  an: "Aragonés",
+  ar: "العربية",
+  ast: "Asturianu",
+  be: "Беларуская",
+  bg: "Български",
+  bn: "বাংলা",
+  br: "Brezhoneg",
+  bs: "Bosanski",
+  ca: "Català",
+  ckb: "سۆرانی",
+  co: "Corsu",
+  cs: "Čeština",
+  cy: "Cymraeg",
+  da: "Dansk",
+  de: "Deutsch",
+  el: "Ελληνικά",
+  en: "English",
+  "en-GB": "English (UK)",
+  eo: "Esperanto",
+  es: "Español",
+  "es-AR": "Español (Argentina)",
+  "es-MX": "Español (México)",
+  et: "Eesti",
+  eu: "Euskara",
+  fa: "فارسی",
+  fi: "Suomi",
+  fo: "Føroyskt",
+  fr: "Français",
+  "fr-QC": "Français (Québec)",
+  fy: "Frysk",
+  ga: "Gaeilge",
+  gd: "Gàidhlig",
+  gl: "Galego",
+  he: "עברית",
+  hi: "हिन्दी",
+  hr: "Hrvatski",
+  hu: "Magyar",
+  hy: "Հայերեն",
+  id: "Bahasa Indonesia",
+  ig: "Igbo",
+  io: "Ido",
+  is: "Íslenska",
+  it: "Italiano",
+  ja: "日本語",
+  ka: "ქართული",
+  kab: "Taqbaylit",
+  kk: "Қазақша",
+  kn: "ಕನ್ನಡ",
+  ko: "한국어",
+  ku: "Kurmancî",
+  kw: "Kernewek",
+  la: "Latina",
+  lt: "Lietuvių",
+  lv: "Latviešu",
+  mk: "Македонски",
+  ml: "മലയാളം",
+  mr: "मराठी",
+  ms: "Bahasa Melayu",
+  my: "ဗမာ",
+  nl: "Nederlands",
+  nn: "Norsk Nynorsk",
+  no: "Norsk",
+  oc: "Occitan",
+  pa: "ਪੰਜਾਬੀ",
+  pl: "Polski",
+  "pt-BR": "Português (Brasil)",
+  "pt-PT": "Português (Portugal)",
+  ro: "Română",
+  ru: "Русский",
+  sa: "संस्कृतम्",
+  sc: "Sardu",
+  sco: "Scots",
+  si: "සිංහල",
+  sk: "Slovenčina",
+  sl: "Slovenščina",
+  sq: "Shqip",
+  sr: "Српски",
+  "sr-Latn": "Srpski (latinica)",
+  sv: "Svenska",
+  szl: "Ślůnsko",
+  ta: "தமிழ்",
+  tai: "Tai",
+  te: "తెలుగు",
+  th: "ไทย",
+  tr: "Türkçe",
+  tt: "Татарча",
+  ug: "ئۇيغۇرچە",
+  uk: "Українська",
+  ur: "اردو",
+  uz: "Ўзбек",
+  vi: "Tiếng Việt",
+  zgh: "ⵜⴰⵎⴰⵣⵉⵖⵜ",
+  "zh-CN": "简体中文",
+  "zh-HK": "繁體中文 (香港)",
+  "zh-TW": "繁體中文 (臺灣)",
+};
+
+export default class LanguageSelector extends PureComponent {
+
+  state = {
+    currentLocale: localStorage.getItem(LOCALE_STORAGE_KEY) || document.documentElement.lang || "en",
+  };
+
+  handleChange = (e) => {
+    const locale = e.target.value;
+    localStorage.setItem(LOCALE_STORAGE_KEY, locale);
+    this.setState({ currentLocale: locale });
+    // Reload to apply the new locale
+    window.location.reload();
+  };
+
+  render() {
+    const { currentLocale } = this.state;
+
+    const sortedLocales = Object.entries(LOCALE_NAMES).sort((a, b) =>
+      a[1].localeCompare(b[1])
+    );
+
+    return (
+      <div className='glitch local-settings__page__item radio_buttons'>
+        <fieldset>
+          <legend>
+            <FormattedMessage id='settings.language' defaultMessage='Language' />
+          </legend>
+          <select
+            id='mastodon-settings--language'
+            className='setting-text'
+            value={currentLocale}
+            onChange={this.handleChange}
+          >
+            {sortedLocales.map(([code, name]) => (
+              <option key={code} value={code}>
+                {name}
+              </option>
+            ))}
+          </select>
+        </fieldset>
+      </div>
+    );
+  }
+
+}