fix(nc-gui): apply ltr/rtl direction on language switch

packages/nc-gui/components/general/language/Menu.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Language } from '~/lib'
-import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
+import { useGlobal, useI18n, useNuxtApp } from '#imports'
 import { setI18nLanguage } from '~/plugins/a.i18n'
 
 const { $e } = useNuxtApp()
@@ -11,31 +11,14 @@ const { locale } = useI18n()
 
 const languages = $computed(() => Object.entries(Language).sort() as [keyof typeof Language, Language][])
 
-const isRtlLang = $computed(() => ['fa', 'ar'].includes(currentLang.value))
-
-function applyDirection() {
-  const targetDirection = isRtlLang ? 'rtl' : 'ltr'
-  const oppositeDirection = targetDirection === 'ltr' ? 'rtl' : 'ltr'
-
-  document.body.classList.remove(oppositeDirection)
-  document.body.classList.add(targetDirection)
-  document.body.style.direction = targetDirection
-}
-
 async function changeLanguage(lang: string) {
   const nextLang = lang as keyof typeof Language
 
   await setI18nLanguage(nextLang)
   currentLang.value = nextLang
 
-  applyDirection()
-
   $e('c:navbar:lang', { lang })
 }
-
-onMounted(() => {
-  applyDirection()
-})
 </script>
 
 <template>

packages/nc-gui/plugins/a.i18n.ts

@@ -1,5 +1,6 @@
 import { createI18n } from 'vue-i18n'
-import { defineNuxtPlugin, nextTick } from '#imports'
+import { isClient } from '@vueuse/core'
+import { applyLanguageDirection, defineNuxtPlugin, nextTick } from '#imports'
 import type { Language, NocoI18n } from '~/lib'
 import { LanguageAlias } from '~/lib'
 
@@ -24,6 +25,8 @@ export async function setI18nLanguage(locale: keyof typeof Language, i18n = glob
   }
 
   i18n.global.locale.value = locale
+
+  if (isClient) applyLanguageDirection(locale)
 }
 
 export async function loadLocaleMessages(

packages/nc-gui/utils/viewUtils.ts

@@ -7,6 +7,7 @@ import MdiCalendarIcon from '~icons/mdi/calendar'
 import MdiGalleryIcon from '~icons/mdi/camera-image'
 import MdiKanbanIcon from '~icons/mdi/tablet-dashboard'
 import MdiEyeIcon from '~icons/mdi/eye-circle-outline'
+import type { Language } from '~/lib'
 
 export const viewIcons: Record<number | string, { icon: any; color: string }> = {
   [ViewTypes.GRID]: { icon: MdiGridIcon, color: '#8f96f2' },
@@ -23,3 +24,17 @@ export const viewTypeAlias: Record<number, string> = {
   [ViewTypes.GALLERY]: 'gallery',
   [ViewTypes.KANBAN]: 'kanban',
 }
+
+const isRtlLang = (lang: keyof typeof Language) => ['fa', 'ar'].includes(lang)
+
+const rtl = 'rtl'
+const ltr = 'ltr'
+
+export function applyLanguageDirection(lang: keyof typeof Language) {
+  const targetDirection = isRtlLang(lang) ? rtl : ltr
+  const oppositeDirection = targetDirection === ltr ? rtl : ltr
+
+  document.body.classList.remove(oppositeDirection)
+  document.body.classList.add(targetDirection)
+  document.body.style.direction = targetDirection
+}