From f6fb560f40a93383fb9e010f22c59f93512e288a Mon Sep 17 00:00:00 2001
From: benoit74 <benoit74@users.noreply.github.com>
Date: Mon, 4 Nov 2024 13:00:23 +0000
Subject: [PATCH] Add new languages to UI

---
 ui/src/App.vue |  8 +++++---
 ui/src/i18n.ts | 10 +++++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index dfe395a..4300bd5 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -15,9 +15,11 @@ const { smAndDown } = useDisplay()
 
 // compute items for language combobox
 const languageItems = computed(() => {
-  return supportedLanguages.map((lang) => {
-    return { title: lang.display, langCode: lang.code }
-  })
+  return supportedLanguages
+    .map((lang) => {
+      return { title: lang.display, langCode: lang.code }
+    })
+    .sort((a, b) => a.title.toLowerCase().localeCompare(b.title.toLowerCase()))
 })
 
 // and select appropriate one as default value for combobox initialization
diff --git a/ui/src/i18n.ts b/ui/src/i18n.ts
index 067b2fd..0193552 100644
--- a/ui/src/i18n.ts
+++ b/ui/src/i18n.ts
@@ -17,9 +17,17 @@ export type Language = {
 const localesFiles = import.meta.glob('../../locales/*.json')
 
 // Add more supported languages here
+// Do not mind about ordering, it is done in UI
+// If language is RTL, do not forget to also update `rtl_language_codes` constant in `api/src/zimitfrontend/constants.py`
+// Some languages below are commented out because they have started but not yet completed (we target close to 100% translated before using the translation)
+// You can check this at https://translatewiki.net/w/i.php?title=Special:MessageGroupStats/kiwix-zimit-frontend&suppresscomplete=0#sortable:3=desc
 export const supportedLanguages: Language[] = [
   { code: 'en', display: 'English', rtl: false }, // Keep default first in array
-  { code: 'fa', display: 'Persian', rtl: true }
+  { code: 'fa', display: 'Persian', rtl: true },
+  { code: 'fr', display: 'French', rtl: false }
+  //  { code: 'ko', display: 'Korean', rtl: false },
+  //  { code: 'lb', display: 'Luxembourgish', rtl: false },
+  //  { code: 'mk', display: 'Macedonian', rtl: false }
 ]
 
 // Check if browser language is supported, otherwise fallback to English