feat: use full region name

Author: hamster1963

bun.lockb

@@ -24,8 +24,8 @@
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-switch": "^1.1.2",
-    "@tanstack/react-query": "^5.62.14",
-    "@tanstack/react-query-devtools": "^5.62.14",
+    "@tanstack/react-query": "^5.62.15",
+    "@tanstack/react-query-devtools": "^5.62.15",
     "@tanstack/react-table": "^8.20.6",
     "@trivago/prettier-plugin-sort-imports": "^5.2.1",
     "@types/d3-geo": "^3.1.0",
@@ -36,6 +36,7 @@
     "d3-geo": "^3.1.1",
     "dayjs": "^1.11.13",
     "framer-motion": "^12.0.0-alpha.2",
+    "i18n-iso-countries": "^7.13.0",
     "i18next": "^24.2.0",
     "lucide-react": "^0.460.0",
     "luxon": "^3.5.0",

package.json

@@ -7,6 +7,8 @@ import { useWebSocketContext } from "@/hooks/use-websocket-context"
 import { formatBytes } from "@/lib/format"
 import { cn, formatNezhaInfo } from "@/lib/utils"
 import { NezhaWebsocketResponse } from "@/types/nezha-api"
+import countries from "i18n-iso-countries"
+import enLocale from "i18n-iso-countries/langs/en.json"
 import { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
@@ -77,6 +79,8 @@ export default function ServerDetailOverview({ server_id }: { server_id: string
     // @ts-expect-error CustomBackgroundImage is a global variable
     (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
 
+  countries.registerLocale(enLocale)
+
   return (
     <div
       className={cn({
@@ -168,7 +172,7 @@ export default function ServerDetailOverview({ server_id }: { server_id: string
               <section className="flex flex-col items-start gap-0.5">
                 <p className="text-xs text-muted-foreground">{t("serverDetail.region")}</p>
                 <section className="flex items-start gap-1">
-                  <div className="text-xs text-start">{country_code?.toUpperCase()}</div>
+                  <div className="text-xs text-start">{countries.getName(country_code?.toUpperCase(), "en")}</div>
                   {country_code && <ServerFlag className="text-[11px] -mt-[1px]" country_code={country_code} />}
                 </section>
               </section>