From ba19fc7cf3d81fc1f63de1f2e389e7f9cd922844 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 14 Aug 2025 23:31:57 +0300
Subject: [PATCH] chore(react/settings): port formatting locale

---
 .../src/widgets/type_widgets/options/i18n.tsx | 41 +++++++++++++------
 .../widgets/type_widgets/options/i18n/i18n.ts | 11 -----
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/i18n.tsx b/apps/client/src/widgets/type_widgets/options/i18n.tsx
index c39677919..03a8f74ba 100644
--- a/apps/client/src/widgets/type_widgets/options/i18n.tsx
+++ b/apps/client/src/widgets/type_widgets/options/i18n.tsx
@@ -4,29 +4,46 @@ import FormSelect from "../../react/FormSelect";
 import OptionsRow from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
 import { useTriliumOption } from "../../react/hooks";
+import type { Locale } from "@triliumnext/commons";
+import { isElectron } from "../../../services/utils";
 
 export default function InternationalizationOptions() {
     return (
-        <OptionsSection title={t("i18n.title")}>
+        <>
             <LocalizationOptions />
-        </OptionsSection>
+        </>
     )
 }
 
 function LocalizationOptions() {
-    const locales = useMemo(() =>
-        getAvailableLocales().filter(locale => !locale.contentOnly)
-    , []);
+    const { uiLocales, formattingLocales: contentLocales } = useMemo(() => {
+        const allLocales = getAvailableLocales();        
+        return {
+            uiLocales: allLocales.filter(locale => !locale.contentOnly),
+            formattingLocales: allLocales.filter(locale => locale.electronLocale),
+        }
+    }, []);
 
     const [ locale, setLocale ] = useTriliumOption("locale");
+    const [ formattingLocale, setFormattingLocale ] = useTriliumOption("formattingLocale");
 
     return (
-        <OptionsRow label={t("i18n.language")}>
-            <FormSelect
-                values={locales}
-                keyProperty="id" titleProperty="name"                
-                currentValue={locale} onChange={setLocale}
-            />
-        </OptionsRow>
+        <OptionsSection title={t("i18n.title")}>
+            <OptionsRow label={t("i18n.language")}>
+                <LocaleSelector locales={uiLocales} currentValue={locale} onChange={setLocale} />
+            </OptionsRow>
+
+            {isElectron() && <OptionsRow label={t("i18n.formatting-locale")}>
+                <LocaleSelector locales={contentLocales} currentValue={formattingLocale} onChange={setFormattingLocale} />
+            </OptionsRow>}
+        </OptionsSection>
     )
+}
+
+function LocaleSelector({ locales, currentValue, onChange }: { locales: Locale[], currentValue: string, onChange: (newLocale: string) => void }) {
+    return <FormSelect
+        values={locales}
+        keyProperty="id" titleProperty="name"                
+        currentValue={currentValue} onChange={onChange}
+    />;
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/i18n/i18n.ts b/apps/client/src/widgets/type_widgets/options/i18n/i18n.ts
index f04a0c11d..3b1c1f9dd 100644
--- a/apps/client/src/widgets/type_widgets/options/i18n/i18n.ts
+++ b/apps/client/src/widgets/type_widgets/options/i18n/i18n.ts
@@ -7,11 +7,6 @@ import type { OptionMap, Locale } from "@triliumnext/commons";
 const TPL = /*html*/`
 <div class="options-section">
     <div class="locale-options-container">
-        <div class="option-row electron-only">
-            <label for="formatting-locale-select">${t("i18n.formatting-locale")}</label>
-            <select id="formatting-locale-select" class="formatting-locale-select form-select"></select>
-        </div>
-
         <div class="option-row">
             <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">
@@ -116,12 +111,6 @@ export default class LocalizationOptions extends OptionsWidget {
 
         this.$minDaysRow = this.$widget.find(".min-days-row");
 
-        this.$formattingLocaleSelect = this.$widget.find(".formatting-locale-select");
-        this.$formattingLocaleSelect.on("change", async () => {
-            const newLocale = this.$formattingLocaleSelect.val();
-            await server.put(`options/formattingLocale/${newLocale}`);
-        });
-
         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);