implement language setting

dist/index.js

@@ -5580,6 +5580,11 @@
       }
     }
   };
+  var languageNames = {
+    en: "English",
+    de: "Deutsch",
+    es: "Espa\xF1ol"
+  };
   var Languages = /* @__PURE__ */ ((Languages2) => {
     Languages2["English"] = "en";
     Languages2["German"] = "de";
@@ -6269,7 +6274,7 @@
       this.storageModel.write(path, newValue);
     }
     // load
-    loadUsernam() {
+    loadUsername() {
       const path = StorageModel.getPath(
         "settings" /* SettingsModel */,
         filePaths.settingsModel.username
@@ -6296,8 +6301,9 @@
     // init
     constructor(storageModel2) {
       this.storageModel = storageModel2;
-      this.loadUsernam();
+      this.loadUsername();
       this.loadFirstDayofWeek();
+      this.loadLanguage();
     }
     static getSystemLanguage() {
       switch (navigator.language.substring(0, 2)) {
@@ -6323,6 +6329,7 @@
       this.selectedModalPage = new State(
         0 /* Appearance */
       );
+      this.requiresReload = new State(false);
       this.firstDayOfWeek = new State("0");
       this.language = new State("en" /* English */);
       // guards
@@ -6346,6 +6353,9 @@
       };
       this.hideSettingsModal = () => {
         this.isShowingSettingsModal.value = false;
+        if (this.requiresReload.value == true) {
+          window.location.reload();
+        }
       };
       this.showModalPage = (page) => {
         this.selectedModalPage.value = page;
@@ -6353,7 +6363,12 @@
       this.username.value = coreViewModel2.settingsModel.username;
       this.usernameInput.value = coreViewModel2.settingsModel.username;
       this.firstDayOfWeek.value = coreViewModel2.settingsModel.firstDayOfWeek;
+      this.language.value = coreViewModel2.settingsModel.language;
       this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
+      this.language.subscribeSilent((newValue) => {
+        this.coreViewModel.settingsModel.setLanguage(newValue);
+        this.requiresReload.value = true;
+      });
     }
   };
 
@@ -6801,9 +6816,9 @@
       )
     )), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "language"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, coreViewModel2.translations.settings.language), /* @__PURE__ */ createElement("select", { "bind:value": settingsViewModel2.language }, ...[...Object.values(Languages)].map(
       (language, i) => Option(
+        languageNames[language],
         language,
-        i.toString(),
+        language == settingsViewModel2.language.value
-        i.toString() == settingsViewModel2.language.value
       )
     )), /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_drop_down"))));
   }

src/Model/Global/settingsModel.ts

@@ -30,7 +30,7 @@ export default class SettingsModel {
         this.storageModel.write(path, newValue);
     }
 
-    setLanguage(newValue: Languages): void {
+    setLanguage(newValue: string): void {
         this.language = newValue;
         const path = StorageModel.getPath(
             StorageModelSubPaths.SettingsModel,
@@ -40,7 +40,7 @@ export default class SettingsModel {
     }
 
     // load
-    loadUsernam(): void {
+    loadUsername(): void {
         const path = StorageModel.getPath(
             StorageModelSubPaths.SettingsModel,
             filePaths.settingsModel.username,
@@ -71,8 +71,9 @@ export default class SettingsModel {
     constructor(storageModel: StorageModel) {
         this.storageModel = storageModel;
 
-        this.loadUsernam();
+        this.loadUsername();
         this.loadFirstDayofWeek();
+        this.loadLanguage();
     }
 
     static getSystemLanguage(): Languages {

src/View/Modals/settingsModal.tsx

@@ -1,6 +1,6 @@
 import * as React from "bloatless-react";
 
-import { Languages } from "../translations";
+import { languageNames, Languages } from "../translations";
 import SettingsViewModel, {
     SettingsModalPages,
 } from "../../ViewModel/Global/settingsViewModel";
@@ -158,9 +158,9 @@ function SettingsRegionalPane(
                     <select bind:value={settingsViewModel.language}>
                         {...[...Object.values(Languages)].map((language, i) =>
                             Option(
+                                languageNames[language],
                                 language,
-                                i.toString(),
+                                language ==
-                                i.toString() ==
                                     settingsViewModel.language.value,
                             ),
                         )}

src/View/translations.ts

@@ -828,6 +828,12 @@ export const allTranslations: {
     },
 };
 
+export const languageNames = {
+    en: "English",
+    de: "Deutsch",
+    es: "Español",
+}
+
 export type Translations = typeof englishTranslations;
 export enum Languages {
     English = "en",

src/ViewModel/Global/settingsViewModel.ts

@@ -12,9 +12,10 @@ export default class SettingsViewModel {
     selectedModalPage: React.State<SettingsModalPages> = new React.State(
         SettingsModalPages.Appearance,
     );
+    requiresReload = new React.State<boolean>(false);
 
     firstDayOfWeek: React.State<string> = new React.State("0");
-    language: React.State<Languages> = new React.State(Languages.English);
+    language: React.State<Languages|string> = new React.State(Languages.English);
 
     // guards
     cannotSetName: React.State<boolean> = React.createProxyState(
@@ -44,6 +45,9 @@ export default class SettingsViewModel {
 
     hideSettingsModal = (): void => {
         this.isShowingSettingsModal.value = false;
+        if (this.requiresReload.value == true) {
+            window.location.reload();
+        }
     };
 
     showModalPage = (page: SettingsModalPages): void => {
@@ -55,9 +59,14 @@ export default class SettingsViewModel {
         this.username.value = coreViewModel.settingsModel.username;
         this.usernameInput.value = coreViewModel.settingsModel.username;
         this.firstDayOfWeek.value = coreViewModel.settingsModel.firstDayOfWeek;
+        this.language.value = coreViewModel.settingsModel.language;
 
         // subscriptions
         this.firstDayOfWeek.subscribe(this.setFirstDayofWeek);
+        this.language.subscribeSilent((newValue) => {
+            this.coreViewModel.settingsModel.setLanguage(newValue);
+            this.requiresReload.value = true;
+        })
     }
 }