chore(react/settings): port language selection

apps/client/src/widgets/type_widgets/content_widget.tsx

@@ -41,6 +41,7 @@ import AppearanceSettings from "./options/appearance.jsx";
 import { renderReactWidget } from "../react/ReactBasicWidget.jsx";
 import ImageSettings from "./options/images.jsx";
 import AdvancedSettings from "./options/advanced.jsx";
+import InternationalizationOptions from "./options/i18n.jsx";
 
 const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -118,10 +119,7 @@ const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", ((typeof NoteContextA
         ShareSettingsOptions,
         NetworkConnectionsOptions
     ],
-    _optionsLocalization: [
+    _optionsLocalization: <InternationalizationOptions />,
-        LocalizationOptions,
-        LanguageOptions
-    ],
     _optionsAdvanced: <AdvancedSettings />,
     _backendLog: [
         BackendLogWidget

apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx

@@ -0,0 +1,15 @@
+import { ComponentChildren } from "preact";
+
+interface OptionsRowProps {
+    label: string;
+    children: ComponentChildren;
+}
+
+export default function OptionsRow({ label, children }: OptionsRowProps) {
+    return (
+        <div className="option-row">
+            <label>{label}</label>
+            {children}
+        </div>
+    );
+}

apps/client/src/widgets/type_widgets/options/i18n.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from "preact/hooks";
+import { getAvailableLocales, t } from "../../../services/i18n";
+import FormSelect from "../../react/FormSelect";
+import OptionsRow from "./components/OptionsRow";
+import OptionsSection from "./components/OptionsSection";
+import { useTriliumOption } from "../../react/hooks";
+
+export default function InternationalizationOptions() {
+    return (
+        <OptionsSection title={t("i18n.title")}>
+            <LocalizationOptions />
+        </OptionsSection>
+    )
+}
+
+function LocalizationOptions() {
+    const locales = useMemo(() =>
+        getAvailableLocales().filter(locale => !locale.contentOnly)
+    , []);
+
+    const [ locale, setLocale ] = useTriliumOption("locale");
+
+    return (
+        <OptionsRow label={t("i18n.language")}>
+            <FormSelect
+                values={locales}
+                keyProperty="id" titleProperty="name"                
+                currentValue={locale} onChange={setLocale}
+            />
+        </OptionsRow>
+    )
+}

apps/client/src/widgets/type_widgets/options/i18n/i18n.ts

@@ -6,14 +6,7 @@ import type { OptionMap, Locale } from "@triliumnext/commons";
 
 const TPL = /*html*/`
 <div class="options-section">
-    <h4>${t("i18n.title")}</h4>
-
     <div class="locale-options-container">
-        <div class="option-row">
-            <label for="locale-select">${t("i18n.language")}</label>
-            <select id="locale-select" class="locale-select form-select"></select>
-        </div>
-
         <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>
@@ -123,12 +116,6 @@ export default class LocalizationOptions extends OptionsWidget {
 
         this.$minDaysRow = this.$widget.find(".min-days-row");
 
-        this.$localeSelect = this.$widget.find(".locale-select");
-        this.$localeSelect.on("change", async () => {
-            const newLocale = this.$localeSelect.val();
-            await server.put(`options/locale/${newLocale}`);
-        });
-
         this.$formattingLocaleSelect = this.$widget.find(".formatting-locale-select");
         this.$formattingLocaleSelect.on("change", async () => {
             const newLocale = this.$formattingLocaleSelect.val();
@@ -169,19 +156,6 @@ export default class LocalizationOptions extends OptionsWidget {
     async optionsLoaded(options: OptionMap) {
         const allLocales = getAvailableLocales();
 
-        function buildLocaleItem(locale: Locale, value: string) {
-            return $("<option>")
-                .attr("value", value)
-                .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, locale.id));
-        }
-        this.$localeSelect.val(options.locale);
-
         // Build list of Electron locales.
         this.$formattingLocaleSelect.empty();
         for (const locale of allLocales.filter(l => l.electronLocale)) {