Allow users to preset the lang in the URL

frontend/src/Settings.tsx

@@ -2,7 +2,7 @@ import { JSX } from "solid-js";
 import { Domain } from "./State";
 import { Overlay } from "./map/Overlay";
 import {Checkbox, Radio} from "./styles/Forms";
-import {availableLangsAndLabels, useI18n} from "./i18n";
+import {supportedLangsAndLabels, useI18n} from "./i18n";
 
 /** User settings */
 export const Settings = (props: {
@@ -22,7 +22,7 @@ export const Settings = (props: {
       <legend>{ m().settingsLanguage() }</legend>
       <select onChange={ event => { setLang(event.currentTarget.value as any) } }>
         {
-          availableLangsAndLabels.map(([langTag, label]) => {
+          supportedLangsAndLabels.map(([langTag, label]) => {
             return (langTag === lang()) ?
               <option value={ langTag } selected>{ label }</option> :
               <option value={ langTag }>{ label }</option>

frontend/src/i18n.tsx

@@ -53,10 +53,12 @@ export const usingMessages = (f: (messages: Messages) => string): Accessor<strin
   return f(m())
 });
 
-const availableLangs: Array<AvailableLanguageTag> = availableLanguageTags as unknown as Array<AvailableLanguageTag>;
+// All the languages supported by the UI
+// `availableLanguageTags` is automatically generated by the internationalization system
+const supportedLangs: Array<AvailableLanguageTag> = availableLanguageTags as unknown as Array<AvailableLanguageTag>;
 
-// WARN: make sure to update this list to keep it consistent with `availableLangs`
-export const availableLangsAndLabels: Array<[AvailableLanguageTag, string]> = [
+// WARN: make sure to update this list to keep it consistent with `supportedLangs`
+export const supportedLangsAndLabels: Array<[AvailableLanguageTag, string]> = [
   ['de', 'Deutsch'],
   ['en', 'English'],
   ['fr', 'Français'],
@@ -73,21 +75,31 @@ function fetchMessages (lang: AvailableLanguageTag): Promise<Messages> {
 type Localized = Component<{ children: JSX.Element }>;
 
 const detectLang = (): AvailableLanguageTag => {
-  // 1. Look in the local storage
+  const isSupported = (candidateLang: string): boolean =>
+      supportedLangs.some(lang => lang === candidateLang);
+
+  // 1. Look in the query parameters
+  const url = new URL(window.location.toString());
+  const initLangFromQuery = url.searchParams.get('lang');
+  if (initLangFromQuery !== null && isSupported(initLangFromQuery)) {
+    return initLangFromQuery as AvailableLanguageTag
+  }
+
+  // 2. Look in the local storage
   const initLangFromLocalStorage = window.localStorage.getItem(langKey);
-  if (initLangFromLocalStorage !== null && availableLangs.some(lang => lang === initLangFromLocalStorage)) {
+  if (initLangFromLocalStorage !== null && isSupported(initLangFromLocalStorage)) {
     return initLangFromLocalStorage as AvailableLanguageTag
   }
 
-  // 2. Look in the browser preferences
+  // 3. Look in the browser preferences
   if (window.navigator && window.navigator.language && Intl && Intl.Locale) {
     const locale = new Intl.Locale(window.navigator.language);
-    if (availableLangs.some(lang => lang === locale.language)) {
+    if (isSupported(locale.language)) {
       return locale.language as AvailableLanguageTag
     }
   }
 
-  // 3. Fallback to the default lang
+  // 4. Fallback to the default lang
   return sourceLanguageTag as AvailableLanguageTag
 };
 
@@ -108,6 +120,10 @@ export const Localized: Localized = lazy(() => {
         const lang = getLang();
         window.localStorage.setItem(langKey, lang);
         setLanguageTag(lang);
+        // Remove the `lang` parameter from the URL to avoid keeping track of the language in the URL
+        const url = new URL(window.location.toString());
+        url.searchParams.delete('lang');
+        window.history.replaceState(null, '', url);
       });
       const value: I18n = {
         lang: getLang,