feat(i18n): use same languages names in display and translations sections (settings/language)

components/settings/SettingsTranslations.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import ISO6391 from 'iso-639-1'
+import { getDisplayName, supportedTranslationLanguages } from 'virtual:iso-639-1'
 
-const supportedTranslationLanguages = ISO6391.getLanguages([...supportedTranslationCodes])
 const userSettings = useUserSettings()
 
 const language = ref<string | null>(null)
@@ -37,7 +36,7 @@ function removeDisabledTranslation(code: string) {
       <div class="ms-4">
         <ul>
           <li v-for="langCode in userSettings.disabledTranslationLanguages" :key="langCode" class="flex items-center">
-            <div>{{ ISO6391.getNativeName(langCode) }}</div>
+            <div>{{ getDisplayName(langCode) }}</div>
             <button class="btn-text" type="button" :title="$t('settings.language.translations.remove')" @click.prevent="removeDisabledTranslation(langCode)">
               <span class="block i-ri:close-line" aria-hidden="true" />
             </button>

iso-639-1.d.ts

@@ -0,0 +1,8 @@
+declare module 'virtual:iso-639-1' {
+  export interface AvailableLanguages {
+    code: string
+    nativeName: string
+  }
+  export const supportedTranslationLanguages: AvailableLanguages[]
+  export function getDisplayName(code: string): string
+}

modules/iso-639-1.ts

@@ -0,0 +1,30 @@
+import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
+import { currentLocales } from '../config/i18n'
+
+const virtualName = 'virtual:iso-639-1'
+const resolvedVirtualName = `\0${virtualName}`
+
+export default defineNuxtModule({
+  setup() {
+    addVitePlugin({
+      name: 'elk:iso-639-1',
+      enforce: 'pre',
+      resolveId(id) {
+        return id === virtualName ? resolvedVirtualName : null
+      },
+      async load(id) {
+        if (id === resolvedVirtualName) {
+          return `const languagesNames = ${JSON.stringify(currentLocales.reduce((acc, l) => {
+              acc[l.code] = l.name as string
+              return acc
+          }, {} as Record<string, string>))};
+export const supportedTranslationLanguages = Object.entries(languagesNames).map(([code, nativeName]) => ({ code, nativeName }));          
+export function getDisplayName(code) {
+  return languagesNames[code] ?? new Intl.DisplayNames([code], { type: 'language' }).of(code);  
+}
+`
+        }
+      },
+    })
+  },
+})

nuxt.config.ts

@@ -27,6 +27,7 @@ export default defineNuxtConfig({
     '@nuxt/test-utils/module',
     ...(isDevelopment || isWindows) ? [] : ['nuxt-security'],
     '~/modules/emoji-mart-translation',
+    '~/modules/iso-639-1',
     '~/modules/purge-comments',
     '~/modules/build-env',
     '~/modules/tauri/index',