From bc787213f48c34efe43e1b514652d0aa4006a537 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 2 Mar 2025 21:47:53 +0200
Subject: [PATCH] feat(options/language): display list of languages

---
 .../type_widgets/options/appearance/i18n.ts   |  2 +-
 .../type_widgets/options/i18n/language.ts     | 28 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/options/appearance/i18n.ts b/src/public/app/widgets/type_widgets/options/appearance/i18n.ts
index 7d1c54f0f..acdd66d23 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/i18n.ts
+++ b/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;
 }
diff --git a/src/public/app/widgets/type_widgets/options/i18n/language.ts b/src/public/app/widgets/type_widgets/options/i18n/language.ts
index eb19ba0a6..c57a91560 100644
--- a/src/public/app/widgets/type_widgets/options/i18n/language.ts
+++ b/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));
+        }
     }
 
 }