feat(options/language): store list of languages

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

@@ -28,15 +28,33 @@ export default class LanguageOptions extends OptionsWidget {
         this.$languagesContainer = this.$widget.find(".options-languages");
     }
 
+    async save() {
+        const enabledLanguages: string[] = [];
+
+        this.$languagesContainer.find("input:checked").each((i, el) => {
+            const languageId = $(el).attr("data-language-id");
+            if (languageId) {
+                enabledLanguages.push(languageId);
+            }
+        });
+
+        await this.updateOption("languages", JSON.stringify(enabledLanguages));
+    }
+
     async optionsLoaded(options: OptionMap) {
         const availableLocales = await server.get<Locale[]>("options/locales");
+        const enabledLanguages = (JSON.parse(options.languages) as string[]);
 
         this.$languagesContainer.empty();
         for (const locale of availableLocales) {
-            const checkbox = $(`<label class="tn-checkbox">`)
+            const checkbox = $('<input type="checkbox" class="form-check-input">')
-                .append($('<input type="checkbox" class="form-check-input">'))
+                .attr("data-language-id", locale.id)
+                .prop("checked", enabledLanguages.includes(locale.id));
+            const wrapper = $(`<label class="tn-checkbox">`)
+                .append(checkbox)
+                .on("change", () => this.save())
                 .append(locale.name);
-            this.$languagesContainer.append($("<li>").append(checkbox));
+            this.$languagesContainer.append($("<li>").append(wrapper));
         }
     }
 

src/routes/api/options.ts

@@ -71,6 +71,7 @@ const ALLOWED_OPTIONS = new Set([
     "editedNotesOpenInRibbon",
     "locale",
     "firstDayOfWeek",
+    "languages",
     "textNoteEditorType",
     "textNoteEditorMultilineToolbar",
     "layoutOrientation",

src/services/options_init.ts

@@ -124,7 +124,7 @@ const defaultOptions: DefaultOption[] = [
     { name: "highlightsList", value: '["bold","italic","underline","color","bgColor"]', isSynced: true },
     { name: "checkForUpdates", value: "true", isSynced: true },
     { name: "disableTray", value: "false", isSynced: false },
-    { name: "eraseUnusedAttachmentsAfterSeconds", value: "2592000", isSynced: true }, // default 30 days  
+    { name: "eraseUnusedAttachmentsAfterSeconds", value: "2592000", isSynced: true }, // default 30 days
     { name: "eraseUnusedAttachmentsAfterTimeScale", value: "86400", isSynced: true }, // default 86400 seconds = Day
     { name: "customSearchEngineName", value: "DuckDuckGo", isSynced: true },
     { name: "customSearchEngineUrl", value: "https://duckduckgo.com/?q={keyword}", isSynced: true },
@@ -134,6 +134,7 @@ const defaultOptions: DefaultOption[] = [
     // Internationalization
     { name: "locale", value: "en", isSynced: true },
     { name: "firstDayOfWeek", value: "1", isSynced: true },
+    { name: "languages", value: "[]", isSynced: true },
 
     // Code block configuration
     {

src/services/options_interface.ts

@@ -71,6 +71,7 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions<KeyboardActi
     eraseUnusedAttachmentsAfterSeconds: number;
     eraseUnusedAttachmentsAfterTimeScale: number;
     firstDayOfWeek: number;
+    languages: string;
 
     initialized: boolean;
     isPasswordSet: boolean;