chore(nc-gui): narrow down language types

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

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { Language } from '~/lib'
 import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
-import { loadLocaleMessages } from '~/plugins/a.i18n'
+import { setI18nLanguage } from '~/plugins/a.i18n'
 
-const { $e, vueApp } = useNuxtApp()
+const { $e } = useNuxtApp()
 
 const { lang: currentLang } = useGlobal()
 
-const { availableLocales = ['en'], locale } = useI18n()
+const { locale } = useI18n()
 
 const languages = $computed(() => Object.entries(Language).sort())
 
@@ -23,12 +23,10 @@ function applyDirection() {
 }
 
 async function changeLanguage(lang: string) {
-  if (!availableLocales.includes(lang)) {
-    await loadLocaleMessages(vueApp.i18n, lang)
-  }
+  const nextLang = lang as keyof typeof Language
 
-  currentLang.value = lang
-  locale.value = lang
+  await setI18nLanguage(nextLang)
+  currentLang.value = nextLang
 
   applyDirection()
 
@@ -38,12 +36,6 @@ async function changeLanguage(lang: string) {
 onMounted(() => {
   applyDirection()
 })
-
-defineExpose({
-  languages,
-  currentLang,
-  changeLanguage,
-})
 </script>
 
 <template>

packages/nc-gui/composables/useGlobal/state.ts

@@ -4,7 +4,7 @@ import type { JwtPayload } from 'jwt-decode'
 import type { AppInfo, State, StoredState } from './types'
 import { BASE_URL } from '~/lib'
 import { computed, ref, toRefs, useCounter, useNuxtApp, useTimestamp } from '#imports'
-import type { User } from '~/lib'
+import type { Language, User } from '~/lib'
 
 export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
   /** get the preferred languages of a user, according to browser settings */
@@ -25,7 +25,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
    * If the user has not set a preferred language, we fall back to 'en'.
    * If the user has set a preferred language, we try to find a matching locale in the available locales.
    */
-  const preferredLanguage = preferredLanguages.reduce((locale, language) => {
+  const preferredLanguage = preferredLanguages.reduce<keyof typeof Language>((locale, language) => {
     /** split language to language and code, e.g. en-GB -> [en, GB] */
     const [lang, code] = language.split(/[_-]/)
 
@@ -41,7 +41,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     const availableLocale = availableLocales[0]
 
     /** if we found a matching locale, return it */
-    if (availableLocale) locale = availableLocale
+    if (availableLocale) locale = availableLocale as keyof typeof Language
 
     return locale
   }, 'en' /** fallback locale */)

packages/nc-gui/composables/useGlobal/types.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef, Ref, ToRefs } from 'vue'
 import type { WritableComputedRef } from '@vue/reactivity'
 import type { JwtPayload } from 'jwt-decode'
-import type { User } from '~/lib'
+import type { Language, User } from '~/lib'
 import type { useCounter } from '#imports'
 
 export interface FeedbackForm {
@@ -30,7 +30,7 @@ export interface AppInfo {
 export interface StoredState {
   token: string | null
   user: User | null
-  lang: string
+  lang: keyof typeof Language
   darkMode: boolean
   feedbackForm: FeedbackForm
   filterAutoSave: boolean

packages/nc-gui/layouts/base.vue

@@ -102,9 +102,7 @@ hooks.hook('page:finish', () => {
       <a-tooltip placement="bottom">
         <template #title> Switch language</template>
 
-        <Transition name="layout">
-          <GeneralLanguage v-if="!signedIn" class="nc-lang-btn" />
-        </Transition>
+        <GeneralLanguage class="nc-lang-btn" />
       </a-tooltip>
 
       <div class="w-full h-full overflow-hidden">

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

@@ -1,7 +1,7 @@
 import { defineNuxtPlugin } from 'nuxt/app'
 import { createI18n } from 'vue-i18n'
 import { nextTick } from 'vue'
-import type { NocoI18n } from '~/lib'
+import type { Language, NocoI18n } from '~/lib'
 
 let globalI18n: NocoI18n
 
@@ -18,11 +18,15 @@ export const createI18nPlugin = async (): Promise<NocoI18n> =>
 
 export const getI18n = () => globalI18n
 
-export function setI18nLanguage(i18n: NocoI18n, locale: string): void {
+export async function setI18nLanguage(locale: keyof typeof Language, i18n = globalI18n) {
+  if (!i18n.global.availableLocales.includes(locale)) {
+    await loadLocaleMessages(locale)
+  }
+
   i18n.global.locale.value = locale
 }
 
-export async function loadLocaleMessages(i18n: NocoI18n, locale: string) {
+export async function loadLocaleMessages(locale: keyof typeof Language, i18n: NocoI18n = globalI18n) {
   // load locale messages with dynamic import
   const messages = await import(`../lang/${locale}.json`)
 

packages/nc-gui/plugins/state.ts

@@ -13,19 +13,18 @@ import { loadLocaleMessages, setI18nLanguage } from '~/plugins/a.i18n'
  * console.log($state.lang.value) // 'en'
  * ```
  */
-export default defineNuxtPlugin(async (nuxtApp) => {
+export default defineNuxtPlugin(async () => {
   const state = useGlobal()
 
   const { api } = useApi()
 
-  const i18n = nuxtApp.vueApp.i18n
-
   const currentLang = state.lang.value
 
-  await loadLocaleMessages(i18n, currentLang)
+  /** force load initial locale messages */
+  await loadLocaleMessages(currentLang)
 
   /** set i18n locale to stored language */
-  setI18nLanguage(i18n, state.lang.value)
+  await setI18nLanguage(currentLang)
 
   try {
     state.appInfo.value = await api.utils.appInfo()