From cd16254dbce5623cc47ac1ab04e59b4db8f1d13c Mon Sep 17 00:00:00 2001
From: ccbikai <ccbikai@gmail.com>
Date: Sun, 11 May 2025 14:41:37 +0800
Subject: [PATCH] feat: use locale for Intl.DisplayNames rendering

Updates formatting of country and language names to respect the user's locale instead of hardcoding to English ('en').

Includes commented placeholder for future timezone support via Intl.TimeZone API.
---
 .../dashboard/analysis/metrics/name/Index.vue       | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/components/dashboard/analysis/metrics/name/Index.vue b/app/components/dashboard/analysis/metrics/name/Index.vue
index d213243..0a9626f 100644
--- a/app/components/dashboard/analysis/metrics/name/Index.vue
+++ b/app/components/dashboard/analysis/metrics/name/Index.vue
@@ -10,19 +10,28 @@ defineProps({
   },
 })
 
+const locale = useI18n().locale
+
 function formatName(name, type) {
   if (!name || typeof Intl === 'undefined')
     return name
 
   try {
     if (type === 'country') {
-      const regionNames = new Intl.DisplayNames(['en'], { type: 'region' })
+      const regionNames = new Intl.DisplayNames([locale.value], { type: 'region' })
       return `${getFlag(name)} ${regionNames.of(name)}`
     }
     if (type === 'language') {
-      const languageNames = new Intl.DisplayNames(['en'], { type: 'language' })
+      const languageNames = new Intl.DisplayNames([locale.value], { type: 'language' })
       return languageNames.of(name)
     }
+
+    // TODO: Add support for timezone
+    // if (type === 'timezone' && typeof Intl.TimeZone === 'function') {
+    //   const tz = new Intl.TimeZone(name)
+    //   return tz.getDisplayName(locale.value, { type: 'long' })
+    // }
+
     return name
   }
   catch (e) {