feat(settings): display option to adjust formatting locale

src/public/app/widgets/type_widgets/options/i18n/i18n.ts

@@ -3,6 +3,7 @@ import server from "../../../../services/server.js";
 import utils from "../../../../services/utils.js";
 import { getAvailableLocales, t } from "../../../../services/i18n.js";
 import type { OptionMap } from "../../../../../../services/options_interface.js";
+import type { Locale } from "../../../../../../services/i18n.js";
 
 const TPL = `
 <div class="options-section">
@@ -14,6 +15,13 @@ const TPL = `
             <select id="locale-select" class="locale-select form-select"></select>
         </div>
 
+        <div class="col-6">
+            <label for="formatting-locale-select">${t("i18n.formatting-locale")}</label>
+            <select id="formatting-locale-select" class="formatting-locale-select form-select"></select>
+        </div>
+    </div>
+
+    <div class="form-group row">
         <div class="col-6">
             <label id="first-day-of-week-label">${t("i18n.first-day-of-the-week")}</label>
             <div role="group" aria-labelledby="first-day-of-week-label" style="margin-top: .33em;">
@@ -35,6 +43,7 @@ const TPL = `
 export default class LocalizationOptions extends OptionsWidget {
 
     private $localeSelect!: JQuery<HTMLElement>;
+    private $formattingLocaleSelect!: JQuery<HTMLElement>;
 
     doRender() {
         this.$widget = $(TPL);
@@ -46,6 +55,8 @@ export default class LocalizationOptions extends OptionsWidget {
             utils.reloadFrontendApp("locale change");
         });
 
+        this.$formattingLocaleSelect = this.$widget.find(".formatting-locale-select");
+
         this.$widget.find(`input[name="first-day-of-week"]`).on("change", () => {
             const firstDayOfWeek = String(this.$widget.find(`input[name="first-day-of-week"]:checked`).val());
             this.updateOption("firstDayOfWeek", firstDayOfWeek);
@@ -53,14 +64,27 @@ export default class LocalizationOptions extends OptionsWidget {
     }
 
     async optionsLoaded(options: OptionMap) {
-        const availableLocales = getAvailableLocales().filter(l => !l.contentOnly);
-        this.$localeSelect.empty();
+        const allLocales = getAvailableLocales();
 
-        for (const locale of availableLocales) {
-            this.$localeSelect.append($("<option>").attr("value", locale.id).text(locale.name));
+        function buildLocaleItem(locale: Locale) {
+            return $("<option>")
+                .attr("value", locale.id)
+                .text(locale.name)
         }
 
+        // Build list of UI locales.
+        this.$localeSelect.empty();
+        for (const locale of allLocales.filter(l => !l.contentOnly)) {
+            this.$localeSelect.append(buildLocaleItem(locale));
+        }
         this.$localeSelect.val(options.locale);
+
+        // Build list of Electron locales.
+        this.$formattingLocaleSelect.empty();
+        for (const locale of allLocales.filter(l => l.electronLocale)) {
+            this.$formattingLocaleSelect.append(buildLocaleItem(locale));
+        }
+
         this.$widget.find(`input[name="first-day-of-week"][value="${options.firstDayOfWeek}"]`)
                     .prop("checked", "true");
     }

src/public/translations/en/translation.json

@@ -1242,7 +1242,8 @@
     "language": "Language",
     "first-day-of-the-week": "First day of the week",
     "sunday": "Sunday",
-    "monday": "Monday"
+    "monday": "Monday",
+    "formatting-locale": "Formats (date, numbers)"
   },
   "backup": {
     "automatic_backup": "Automatic backup",

src/services/i18n.ts

@@ -13,12 +13,15 @@ export interface Locale {
     rtl?: boolean;
     /** `true` if the language is not supported by the application as a display language, but it is selectable by the user for the content. */
     contentOnly?: boolean;
+    /** The value to pass to `--lang` for the Electron instance in order to set it as a locale. Not setting it will hide it from the list of supported locales. */
+    electronLocale?: string;
 }
 
 const LOCALES: Locale[] = [
     {
         id: "en",
-        name: "English"
+        name: "English",
+        electronLocale: "en"
     },
     {
         id: "de",