feat: RTL Support for RTL Languages (Hebrew, Arabic) (#2832)

* add language direction to locale generation

* apply language direction when setting language

---------

Co-authored-by: boc-the-git <3479092+boc-the-git@users.noreply.github.com>

frontend/composables/use-locales/available-locales.ts

@@ -4,195 +4,234 @@ export const LOCALES = [
     name: "繁體中文 (Chinese traditional)",
     value: "zh-TW",
     progress: 28,
+    dir: "ltr",
   },
   {
     name: "简体中文 (Chinese simplified)",
     value: "zh-CN",
     progress: 65,
+    dir: "ltr",
   },
   {
     name: "Tiếng Việt (Vietnamese)",
     value: "vi-VN",
     progress: 2,
+    dir: "ltr",
   },
   {
     name: "Українська (Ukrainian)",
     value: "uk-UA",
     progress: 99,
+    dir: "ltr",
   },
   {
     name: "Türkçe (Turkish)",
     value: "tr-TR",
     progress: 50,
+    dir: "ltr",
   },
   {
     name: "Svenska (Swedish)",
     value: "sv-SE",
     progress: 71,
+    dir: "ltr",
   },
   {
     name: "српски (Serbian)",
     value: "sr-SP",
     progress: 4,
+    dir: "ltr",
   },
   {
     name: "Slovenian",
     value: "sl-SI",
     progress: 49,
+    dir: "ltr",
   },
   {
     name: "Slovak",
     value: "sk-SK",
     progress: 97,
+    dir: "ltr",
   },
   {
     name: "Pусский (Russian)",
     value: "ru-RU",
     progress: 99,
+    dir: "ltr",
   },
   {
     name: "Română (Romanian)",
     value: "ro-RO",
     progress: 32,
+    dir: "ltr",
   },
   {
     name: "Português (Portuguese)",
     value: "pt-PT",
     progress: 99,
+    dir: "ltr",
   },
   {
     name: "Português do Brasil (Brazilian Portuguese)",
     value: "pt-BR",
     progress: 98,
+    dir: "ltr",
   },
   {
     name: "Polski (Polish)",
     value: "pl-PL",
     progress: 97,
+    dir: "ltr",
   },
   {
     name: "Norsk (Norwegian)",
     value: "no-NO",
     progress: 85,
+    dir: "ltr",
   },
   {
     name: "Nederlands (Dutch)",
     value: "nl-NL",
     progress: 98,
+    dir: "ltr",
   },
   {
     name: "Latvian",
     value: "lv-LV",
     progress: 1,
+    dir: "ltr",
   },
   {
     name: "Lithuanian",
     value: "lt-LT",
     progress: 97,
+    dir: "ltr",
   },
   {
     name: "한국어 (Korean)",
     value: "ko-KR",
     progress: 5,
+    dir: "ltr",
   },
   {
     name: "日本語 (Japanese)",
     value: "ja-JP",
     progress: 11,
+    dir: "ltr",
   },
   {
     name: "Italiano (Italian)",
     value: "it-IT",
     progress: 96,
+    dir: "ltr",
   },
   {
     name: "Magyar (Hungarian)",
     value: "hu-HU",
     progress: 99,
+    dir: "ltr",
   },
   {
     name: "Croatian",
     value: "hr-HR",
     progress: 97,
+    dir: "ltr",
   },
   {
     name: "עברית (Hebrew)",
     value: "he-IL",
     progress: 99,
+    dir: "rtl",
   },
   {
     name: "Galician",
     value: "gl-ES",
     progress: 1,
+    dir: "ltr",
   },
   {
     name: "Français (French)",
     value: "fr-FR",
     progress: 99,
+    dir: "ltr",
   },
   {
     name: "French, Canada",
     value: "fr-CA",
     progress: 97,
+    dir: "ltr",
   },
   {
     name: "Suomi (Finnish)",
     value: "fi-FI",
     progress: 95,
+    dir: "ltr",
   },
   {
     name: "Español (Spanish)",
     value: "es-ES",
     progress: 76,
+    dir: "ltr",
   },
   {
     name: "American English",
     value: "en-US",
     progress: 100.0,
+    dir: "ltr",
   },
   {
     name: "British English",
     value: "en-GB",
     progress: 4,
+    dir: "ltr",
   },
   {
     name: "Ελληνικά (Greek)",
     value: "el-GR",
     progress: 35,
+    dir: "ltr",
   },
   {
     name: "Deutsch (German)",
     value: "de-DE",
     progress: 99,
+    dir: "ltr",
   },
   {
     name: "Dansk (Danish)",
     value: "da-DK",
     progress: 100,
+    dir: "ltr",
   },
   {
     name: "Čeština (Czech)",
     value: "cs-CZ",
     progress: 66,
+    dir: "ltr",
   },
   {
     name: "Català (Catalan)",
     value: "ca-ES",
     progress: 61,
+    dir: "ltr",
   },
   {
     name: "Bulgarian",
     value: "bg-BG",
     progress: 99,
+    dir: "ltr",
   },
   {
     name: "العربية (Arabic)",
     value: "ar-SA",
     progress: 16,
+    dir: "rtl",
   },
   {
     name: "Afrikaans (Afrikaans)",
     value: "af-ZA",
     progress: 96,
+    dir: "ltr",
   },
 ]

frontend/composables/use-locales/use-locales.ts

@@ -4,14 +4,31 @@ import { LOCALES } from "./available-locales";
 export const useLocales = () => {
   const { i18n, $vuetify } = useContext();
 
+  function getLocale(value: string) {
+    const currentLocale = LOCALES.filter((locale) => locale.value === value);
+    return currentLocale.length ? currentLocale[0] : null;
+  }
+
   const locale = computed<string>({
     get() {
-      $vuetify.lang.current = i18n.locale; // dirty hack
+      // dirty hack
+      $vuetify.lang.current = i18n.locale;
+      const currentLocale = getLocale(i18n.locale);
+      if (currentLocale) {
+        $vuetify.rtl = currentLocale.dir === "rtl";
+      }
+
       return i18n.locale;
     },
     set(value) {
       i18n.setLocale(value);
-      $vuetify.lang.current = value; // this does not persist after window reload :-(
+
+      // this does not persist after window reload :-(
+      $vuetify.lang.current = value;
+      const currentLocale = getLocale(value);
+      if (currentLocale) {
+        $vuetify.rtl = currentLocale.dir === "rtl";
+      }
 
       // Reload the page to update the language - not all strings are reactive
       window.location.reload();