feat(options/language): display list of languages

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

@@ -26,7 +26,7 @@ const TPL = `
 `;
 
 // TODO: Deduplicate with server.
-interface Locale {
+export interface Locale {
     id: string;
     name: string;
 }

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

@@ -1,17 +1,43 @@
 import OptionsWidget from "../options_widget.js";
+import type { OptionMap } from "../../../../../../services/options_interface.js";
+import server from "../../../../services/server.js";
+import type { Locale } from "../appearance/i18n.js";
 
 const TPL = `
 <div class="options-section">
     <h4>Languages</h4>
 
-    The list of languages should go here.
+    <ul class="options-languages">
+    </ul>
+
+    <style>
+        ul.options-languages {
+            list-style-type: none;
+            margin-bottom: 0;
+        }
+    </style>
 </div>
 `;
 
 export default class LanguageOptions extends OptionsWidget {
 
+    private $languagesContainer!: JQuery<HTMLElement>;
+
     doRender() {
         this.$widget = $(TPL);
+        this.$languagesContainer = this.$widget.find(".options-languages");
+    }
+
+    async optionsLoaded(options: OptionMap) {
+        const availableLocales = await server.get<Locale[]>("options/locales");
+
+        this.$languagesContainer.empty();
+        for (const locale of availableLocales) {
+            const checkbox = $(`<label class="tn-checkbox">`)
+                .append($('<input type="checkbox" class="form-check-input">'))
+                .append(locale.name);
+            this.$languagesContainer.append($("<li>").append(checkbox));
+        }
     }
 
 }