From d141985ea39352769bd6a7f43600613ff27c841d Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Sun, 14 Apr 2024 15:55:46 +0200
Subject: [PATCH] feat(i18n): use same languages names in display and
 translations sections

---
 components/settings/SettingsTranslations.vue |  5 ++--
 composables/{langugage.ts => language.ts}    |  0
 iso-639-1.d.ts                               |  8 ++++++
 modules/iso-639-1.ts                         | 30 ++++++++++++++++++++
 nuxt.config.ts                               |  1 +
 5 files changed, 41 insertions(+), 3 deletions(-)
 rename composables/{langugage.ts => language.ts} (100%)
 create mode 100644 iso-639-1.d.ts
 create mode 100644 modules/iso-639-1.ts

diff --git a/components/settings/SettingsTranslations.vue b/components/settings/SettingsTranslations.vue
index 05483b89..c25d7a61 100644
--- a/components/settings/SettingsTranslations.vue
+++ b/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>
diff --git a/composables/langugage.ts b/composables/language.ts
similarity index 100%
rename from composables/langugage.ts
rename to composables/language.ts
diff --git a/iso-639-1.d.ts b/iso-639-1.d.ts
new file mode 100644
index 00000000..f5480205
--- /dev/null
+++ b/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
+}
diff --git a/modules/iso-639-1.ts b/modules/iso-639-1.ts
new file mode 100644
index 00000000..f9dbab26
--- /dev/null
+++ b/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);  
+}
+`
+        }
+      },
+    })
+  },
+})
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8d77a0f1..79e9150a 100644
--- a/nuxt.config.ts
+++ b/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',