Fix: setting the language does not overwrite the user setting anymore

Logic/State/UserRelatedState.ts

@@ -36,6 +36,7 @@ export default class UserRelatedState {
     public readonly showAllQuestionsAtOnce: UIEventSource<boolean>
     public readonly showTags: UIEventSource<"no" | undefined | "always" | "yes">;
     public readonly homeLocation: FeatureSource
+    public readonly language: UIEventSource<string>
     /**
      * The number of seconds that the GPS-locations are stored in memory.
      * Time in seconds
@@ -83,6 +84,7 @@ export default class UserRelatedState {
                     "Either 'true' or 'false'. If set, all questions will be shown all at once",
             })
         )
+        this.language = this.osmConnection.GetPreference("language")
         this.showTags = <UIEventSource<any>>this.osmConnection.GetPreference("show_tags")
 
         this.mangroveIdentity = new MangroveIdentity(
@@ -181,7 +183,7 @@ export default class UserRelatedState {
     }
 
     private InitializeLanguage(availableLanguages?: string[]) {
-        Locale.language.syncWith(this.osmConnection.GetPreference("language"))
+        this.language.addCallbackAndRunD(language => Locale.language.setData(language))
         Locale.language.addCallback((currentLanguage) => {
             if (Locale.showLinkToWeblate.data) {
                 return true // Disable auto switching as we are in translators mode

UI/AllThemesGui.ts

@@ -27,7 +27,7 @@ export default class AllThemesGui {
             })
             const state = new UserRelatedState(osmConnection)
             const intro = new Combine([
-                new LanguagePicker(Translations.t.index.title.SupportedLanguages(), "").SetClass(
+                new LanguagePicker(Translations.t.index.title.SupportedLanguages(), state.language).SetClass(
                     "flex absolute top-2 right-3"
                 ),
                 new IndexText(),

UI/LanguagePicker.ts

@@ -7,29 +7,30 @@ import { Translation } from "./i18n/Translation"
 import Lazy from "./Base/Lazy"
 import Toggle from "./Input/Toggle"
 import LanguageUtils from "../Utils/LanguageUtils"
+import {UIEventSource} from "../Logic/UIEventSource";
 
 export default class LanguagePicker extends Toggle {
-    constructor(languages: string[], label: string | BaseUIElement = "") {
+    constructor(languages: string[], assignTo: UIEventSource<string>) {
         console.log("Constructing a language pîcker for languages", languages)
         if (languages === undefined || languages.length <= 1) {
             super(undefined, undefined, undefined)
         } else {
-            const normalPicker = LanguagePicker.dropdownFor(languages, label)
+            const normalPicker = LanguagePicker.dropdownFor(languages, assignTo ?? Locale.language)
-            const fullPicker = new Lazy(() => LanguagePicker.dropdownFor(allLanguages, label))
+            const fullPicker = new Lazy(() => LanguagePicker.dropdownFor(allLanguages, assignTo ?? Locale.language))
             super(fullPicker, normalPicker, Locale.showLinkToWeblate)
             const allLanguages: string[] = LanguageUtils.usedLanguagesSorted
         }
     }
 
-    private static dropdownFor(languages: string[], label: string | BaseUIElement): BaseUIElement {
+    private static dropdownFor(languages: string[], assignTo: UIEventSource<string>): BaseUIElement {
         return new DropDown(
-            label,
+            undefined,
             languages
                 .filter((lang) => lang !== "_context")
                 .map((lang) => {
                     return { value: lang, shown: LanguagePicker.hybrid(lang) }
                 }),
-            Locale.language
+           assignTo
         )
     }
 

UI/ProfessionalGui.ts

@@ -8,6 +8,7 @@ import BaseUIElement from "./BaseUIElement"
 import LanguagePicker from "./LanguagePicker"
 import TableOfContents from "./Base/TableOfContents"
 import LeftIndex from "./Base/LeftIndex"
+import Locale from "./i18n/Locale";
 
 class Snippet extends Toggleable {
     constructor(translations, ...extraContent: BaseUIElement[]) {
@@ -89,8 +90,7 @@ class ProfessionalGui extends LeftIndex {
             }).SetClass("subtle"),
 
             new LanguagePicker(
-                Translations.t.professional.title.SupportedLanguages(),
+                Translations.t.professional.title.SupportedLanguages(), Locale.language
-                ""
             )?.SetClass("mt-4 self-end flex-col"),
         ].map((el) => el?.SetClass("pl-4"))
 

UI/SpecialVisualization.ts

@@ -68,6 +68,7 @@ export interface SpecialVisualizationState {
         readonly mangroveIdentity: MangroveIdentity
         readonly showAllQuestionsAtOnce: UIEventSource<boolean>
         readonly preferencesAsTags: Store<Record<string, string>>
+        readonly language: UIEventSource<string>
     }
     readonly lastClickObject: WritableFeatureSource
 

UI/i18n/Locale.ts

@@ -12,21 +12,23 @@ export default class Locale {
     public static language: UIEventSource<string> = Locale.setup()
 
     private static setup() {
-        const source = LocalStorageSource.Get("language", "en")
+        const browserLanguage =navigator.languages?.[0] ?? navigator.language ?? "en"
+        const source = LocalStorageSource.Get("language", browserLanguage)
         if (!Utils.runningFromConsole) {
             // @ts-ignore
             window.setLanguage = function (language: string) {
                 source.setData(language)
             }
         }
-        source.syncWith(
+        if(QueryParameters.wasInitialized("language")){
-            QueryParameters.GetQueryParameter(
+           const qp = QueryParameters.GetQueryParameter(
                 "language",
                 undefined,
                 "The language to display mapcomplete in. Will be ignored in case a logged-in-user did set their language before. If the specified language does not exist, it will default to the first language in the theme."
-            ),
+            )
-            true
+            Locale.language.setData(qp.data)
-        )
+        }
+
         QueryParameters.GetBooleanQueryParameter(
             "fs-translation-mode",
             false,