From bc648e981eb534d274a09ad03b9268a62eca862b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 11 Aug 2024 07:46:27 +0300
Subject: [PATCH] client: Add language switcher in settings

---
 .../widgets/type_widgets/content_widget.js    |  2 +
 .../type_widgets/options/appearance/i18n.js   | 39 +++++++++++++++++++
 src/routes/api/options.ts                     |  3 +-
 3 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 src/public/app/widgets/type_widgets/options/appearance/i18n.js

diff --git a/src/public/app/widgets/type_widgets/content_widget.js b/src/public/app/widgets/type_widgets/content_widget.js
index fe7f105af..6c2ddc0cb 100644
--- a/src/public/app/widgets/type_widgets/content_widget.js
+++ b/src/public/app/widgets/type_widgets/content_widget.js
@@ -32,6 +32,7 @@ import DatabaseAnonymizationOptions from "./options/advanced/database_anonymizat
 import BackendLogWidget from "./content/backend_log.js";
 import AttachmentErasureTimeoutOptions from "./options/other/attachment_erasure_timeout.js";
 import RibbonOptions from "./options/appearance/ribbon.js";
+import LocalizationOptions from "./options/appearance/i18n.js";
 
 const TPL = `<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -54,6 +55,7 @@ const TPL = `<div class="note-detail-content-widget note-detail-printable">
 
 const CONTENT_WIDGETS = {
     _optionsAppearance: [
+        LocalizationOptions,
         ThemeOptions,
         FontsOptions,
         ZoomFactorOptions,
diff --git a/src/public/app/widgets/type_widgets/options/appearance/i18n.js b/src/public/app/widgets/type_widgets/options/appearance/i18n.js
new file mode 100644
index 000000000..fcc26f3b0
--- /dev/null
+++ b/src/public/app/widgets/type_widgets/options/appearance/i18n.js
@@ -0,0 +1,39 @@
+import OptionsWidget from "../options_widget.js";
+import server from "../../../../services/server.js";
+import utils from "../../../../services/utils.js";
+
+const TPL = `
+<div class="options-section">
+    <h4>Localization</h4>
+
+    <div class="form-group row">
+        <div class="col-6">
+            <label>Language</label>
+            <select class="locale-select form-control"></select>
+        </div>
+    </div>
+</div>
+`;
+
+export default class LocalizationOptions extends OptionsWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$localeSelect = this.$widget.find(".locale-select");
+        this.$localeSelect.on("change", async() => {
+            const newLocale = this.$localeSelect.val();
+            await server.put(`options/locale/${newLocale}`);
+            utils.reloadFrontendApp("locale change");
+        });
+    }
+
+    async optionsLoaded(options) {
+        const availableLocales = await server.get("options/locales");
+        for (const locale of availableLocales) {
+            this.$localeSelect.append($("<option>")
+                .attr("value", locale.id)
+                .text(locale.name));
+        }
+
+        this.$localeSelect.val(options.locale);
+    }
+}
\ No newline at end of file
diff --git a/src/routes/api/options.ts b/src/routes/api/options.ts
index d7ea7520a..5c6c2aa26 100644
--- a/src/routes/api/options.ts
+++ b/src/routes/api/options.ts
@@ -58,7 +58,8 @@ const ALLOWED_OPTIONS = new Set([
     'customSearchEngineName',
     'customSearchEngineUrl',
     'promotedAttributesOpenInRibbon',
-    'editedNotesOpenInRibbon'
+    'editedNotesOpenInRibbon',
+    'locale'
 ]);
 
 function getOptions() {