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

[userquin]

This PR includes a new virtual module to use it instead iso-639-1 dependency: since translations showing only configured languages in conf/i18n.ts module, we just use them via the virtual module.

We cannot remove iso-639-1 dependency, it is being used in composables/language.ts (also renamed) and publish widgets (languages and fuse).

We can decide if we change the languages names to use Intl.DisplayNames/iso-639-1 ones: for example including only country names when added to the country variant entry in conf/i18n.ts module.

Language Names with Country Variants in Firefox

console.table([ 'ar-EG',
  'ca-ES',
  'ca-valencia',
  'ckb',
  'cs-CZ',
  'de-DE',
  'en-GB',
  'en-US',
  'es-419',
  'es-ES',
  'eu-ES',
  'fa-IR',
  'fi-FI',
  'fr-FR',
  'gl-ES',
  'hu-HU',
  'id-ID',
  'it-IT',
  'ja-JP',
  'ko-KR',
  'nl-NL',
  'pl-PL',
  'pt-BR',
  'pt-PT',
  'ru-RU',
  'th-TH',
  'tl-PH',
  'tr-TR',
  'uk-UA',
  'vi-VN',
  'zh-CN',
  'zh-TW'
].reduce((acc, l) => {
  acc[l] = new Intl.DisplayNames(
    [l],
    { type: 'language', languageDisplay: 'standard', localeMatcher: 'lookup' },
  ).of(l)
  return acc
}, {}))

closes #2814

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	d141985
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/661be1d453a31900086cdeb6
😎 Deploy Preview	https://deploy-preview-2817--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	d141985
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/661be1d4c64ed20008c74013

[userquin]

Maybe we can use use locales from useI18n() directly...

[shuuji3]

I just noticed that we can use lang+country code (e.g. en-US) for the "Display Language" section but we should use only lang code (e.g. en) without country variants for the "Hide Translation" setting.

Before

see: https://main.elk.zone/settings/language

After

see: https://deploy-preview-2817--elk-zone.netlify.app/settings/language

---

This is because Mastodon's status object only has two characters of lang code such as en and es so we can only filter by lang code.

ref. Status - Mastodon documentation - https://docs.joinmastodon.org/entities/Status/#language

example:

{
  ...
  id: "112225445529039980",
  content: "<p>Hello</p>",
  language: "en",
  media_attachments: [],
  ...
}

[shuuji3]

Maybe we can use use locales from useI18n() directly...

If this can simplify code, maybe it's a good idea?

[shuuji3]

Also, do we want to use the new function getDisplayName() in the "Display Language" section too?

elk/components/settings/SettingsLanguage.vue

Lines 10 to 16 in 55037f0

	<template>
	<select v-model="userSettings.language">
	<option v-for="item in locales" :key="item.code" :value="item.code" :selected="userSettings.language === item.code">
	{{ item.name }}
	</option>
	</select>
	</template>

+import { getDisplayName } from 'virtual:iso-639-1'

...

-       {{ item.name }} 
+       {{ getDisplayName(item.code) }}

[userquin]

Also, do we want to use the new function getDisplayName() in the "Display Language" section too?

No, those locales come from conf/i18n.ts module and so the name is the name configured there.

[shuuji3]

OK, will we adjust countryLocaleVariants in config/i18n.ts after this change? I thought using the same method could provide consistent naming instead of hardcoding.

[shuuji3]

We could also consider other languages in the "Hide translation" list (please refer to #2843). Although there is no need to include them in this PR, it may affect how we organize the language names.