feat: use full region name

app/(main)/ClientComponents/detail/NetworkChart.tsx

@@ -27,7 +27,13 @@ interface ResultItem {
   [key: string]: number
 }
 
-export function NetworkChartClient({ server_id, show }: { server_id: number; show: boolean }) {
+export function NetworkChartClient({
+  server_id,
+  show,
+}: {
+  server_id: number
+  show: boolean
+}) {
   const t = useTranslations("NetworkChartClient")
   const { data, error } = useSWR<NezhaAPIMonitor[]>(
     `/api/monitor?server_id=${server_id}`,

app/(main)/ClientComponents/detail/ServerDetailChartClient.tsx

@@ -84,7 +84,13 @@ export default function ServerDetailChartClient({
   )
 }
 
-function CpuChart({ history, data }: { history: ServerDataWithTimestamp[]; data: NezhaAPISafe }) {
+function CpuChart({
+  history,
+  data,
+}: {
+  history: ServerDataWithTimestamp[]
+  data: NezhaAPISafe
+}) {
   const [cpuChartData, setCpuChartData] = useState([] as cpuChartData[])
   const hasInitialized = useRef(false)
   const [historyLoaded, setHistoryLoaded] = useState(false)
@@ -309,7 +315,13 @@ function ProcessChart({
   )
 }
 
-function MemChart({ data, history }: { data: NezhaAPISafe; history: ServerDataWithTimestamp[] }) {
+function MemChart({
+  data,
+  history,
+}: {
+  data: NezhaAPISafe
+  history: ServerDataWithTimestamp[]
+}) {
   const t = useTranslations("ServerDetailChartClient")
   const [memChartData, setMemChartData] = useState([] as memChartData[])
   const hasInitialized = useRef(false)
@@ -463,7 +475,13 @@ function MemChart({ data, history }: { data: NezhaAPISafe; history: ServerDataWi
   )
 }
 
-function DiskChart({ data, history }: { data: NezhaAPISafe; history: ServerDataWithTimestamp[] }) {
+function DiskChart({
+  data,
+  history,
+}: {
+  data: NezhaAPISafe
+  history: ServerDataWithTimestamp[]
+}) {
   const t = useTranslations("ServerDetailChartClient")
   const [diskChartData, setDiskChartData] = useState([] as diskChartData[])
   const hasInitialized = useRef(false)

app/(main)/ClientComponents/detail/ServerDetailClient.tsx

@@ -7,11 +7,16 @@ import { ServerDetailLoading } from "@/components/loading/ServerDetailLoading"
 import { Badge } from "@/components/ui/badge"
 import { Card, CardContent } from "@/components/ui/card"
 import { cn, formatBytes } from "@/lib/utils"
+import countries from "i18n-iso-countries"
 import { useTranslations } from "next-intl"
 import { notFound, useRouter } from "next/navigation"
 import { useEffect, useState } from "react"
 
-export default function ServerDetailClient({ server_id }: { server_id: number }) {
+export default function ServerDetailClient({
+  server_id,
+}: {
+  server_id: number
+}) {
   const t = useTranslations("ServerDetailClient")
   const router = useRouter()
 
@@ -56,6 +61,8 @@ export default function ServerDetailClient({ server_id }: { server_id: number })
 
   if (!data) return <ServerDetailLoading />
 
+  countries.registerLocale(require("i18n-iso-countries/langs/en.json"))
+
   return (
     <div>
       <div
@@ -134,20 +141,24 @@ export default function ServerDetailClient({ server_id }: { server_id: number })
             </section>
           </CardContent>
         </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+        {data?.host.CountryCode && (
-          <CardContent className="px-1.5 py-1">
+          <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-            <section className="flex flex-col items-start gap-0.5">
+            <CardContent className="px-1.5 py-1">
-              <p className="text-xs text-muted-foreground">{t("Region")}</p>
+              <section className="flex flex-col items-start gap-0.5">
-              <section className="flex items-start gap-1">
+                <p className="text-xs text-muted-foreground">{t("Region")}</p>
-                <div className="text-xs text-start">{data?.host.CountryCode.toUpperCase()}</div>
+                <section className="flex items-start gap-1">
-                <ServerFlag
+                  <div className="text-xs text-start">
-                  className="text-[11px] -mt-[1px]"
+                    {countries.getName(data?.host.CountryCode, "en")}
-                  country_code={data?.host.CountryCode}
+                  </div>
-                />
+                  <ServerFlag
+                    className="text-[11px] -mt-[1px]"
+                    country_code={data?.host.CountryCode}
+                  />
+                </section>
               </section>
-            </section>
+            </CardContent>
-          </CardContent>
+          </Card>
-        </Card>
+        )}
       </section>
       <section className="flex flex-wrap gap-2 mt-1">
         {data?.host.Platform && (

app/layout.tsx

@@ -45,7 +45,11 @@ export const viewport: Viewport = {
   userScalable: false,
 }
 
-export default async function LocaleLayout({ children }: { children: React.ReactNode }) {
+export default async function LocaleLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
   const locale = await getLocale()
   const messages = await getMessages()
 

components/ServerCard.tsx

@@ -9,7 +9,11 @@ import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils"
 import { useTranslations } from "next-intl"
 import Link from "next/link"
 
-export default function ServerCard({ serverInfo }: { serverInfo: NezhaAPISafe }) {
+export default function ServerCard({
+  serverInfo,
+}: {
+  serverInfo: NezhaAPISafe
+}) {
   const t = useTranslations("ServerCard")
   const { id, name, country_code, online, cpu, up, down, mem, stg, host } =
     formatNezhaInfo(serverInfo)

components/ServerCardInline.tsx

@@ -10,7 +10,11 @@ import Link from "next/link"
 
 import { Separator } from "./ui/separator"
 
-export default function ServerCardInline({ serverInfo }: { serverInfo: NezhaAPISafe }) {
+export default function ServerCardInline({
+  serverInfo,
+}: {
+  serverInfo: NezhaAPISafe
+}) {
   const t = useTranslations("ServerCard")
   const { id, name, country_code, online, cpu, up, down, mem, stg, host } =
     formatNezhaInfo(serverInfo)

components/Switch.tsx

@@ -19,7 +19,10 @@ export default function Switch({
   const scrollRef = useRef<HTMLDivElement>(null)
   const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()))
   const t = useTranslations("ServerListClient")
-  const [indicator, setIndicator] = useState<{ x: number; w: number }>({ x: 0, w: 0 })
+  const [indicator, setIndicator] = useState<{ x: number; w: number }>({
+    x: 0,
+    w: 0,
+  })
 
   useEffect(() => {
     const savedTag = sessionStorage.getItem("selectedTag")

components/TabSwitch.tsx

@@ -14,7 +14,10 @@ export default function TabSwitch({
   setCurrentTab: (tab: string) => void
 }) {
   const t = useTranslations("TabSwitch")
-  const [indicator, setIndicator] = useState<{ x: number; w: number }>({ x: 0, w: 0 })
+  const [indicator, setIndicator] = useState<{ x: number; w: number }>({
+    x: 0,
+    w: 0,
+  })
   const tabRefs = useRef<(HTMLDivElement | null)[]>([])
 
   useEffect(() => {

components/ThemeSwitcher.tsx

@@ -37,19 +37,25 @@ export function ModeToggle() {
       </DropdownMenuTrigger>
       <DropdownMenuContent className="flex flex-col gap-0.5" align="end">
         <DropdownMenuItem
-          className={cn("rounded-b-[5px]", { "gap-3 bg-muted font-semibold": theme === "light" })}
+          className={cn("rounded-b-[5px]", {
+            "gap-3 bg-muted font-semibold": theme === "light",
+          })}
           onSelect={(e) => handleSelect(e, "light")}
         >
           {t("Light")} {theme === "light" && <CheckCircleIcon className="size-4" />}
         </DropdownMenuItem>
         <DropdownMenuItem
-          className={cn("rounded-[5px]", { "gap-3 bg-muted font-semibold": theme === "dark" })}
+          className={cn("rounded-[5px]", {
+            "gap-3 bg-muted font-semibold": theme === "dark",
+          })}
           onSelect={(e) => handleSelect(e, "dark")}
         >
           {t("Dark")} {theme === "dark" && <CheckCircleIcon className="size-4" />}
         </DropdownMenuItem>
         <DropdownMenuItem
-          className={cn("rounded-t-[5px]", { "gap-3 bg-muted font-semibold": theme === "system" })}
+          className={cn("rounded-t-[5px]", {
+            "gap-3 bg-muted font-semibold": theme === "system",
+          })}
           onSelect={(e) => handleSelect(e, "system")}
         >
           {t("System")} {theme === "system" && <CheckCircleIcon className="size-4" />}

lib/serverFetch.tsx

@@ -126,7 +126,11 @@ export async function GetServerMonitor({ server_id }: { server_id: number }) {
   }
 }
 
-export async function GetServerIP({ server_id }: { server_id: number }): Promise<string> {
+export async function GetServerIP({
+  server_id,
+}: {
+  server_id: number
+}): Promise<string> {
   let nezhaBaseUrl = getEnv("NezhaBaseUrl")
   if (!nezhaBaseUrl) {
     console.error("NezhaBaseUrl is not set")

package.json

@@ -40,6 +40,7 @@
     "d3-selection": "^3.0.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "flag-icons": "^7.2.3",
+    "i18n-iso-countries": "^7.13.0",
     "lucide-react": "^0.454.0",
     "luxon": "^3.5.0",
     "maxmind": "^4.3.23",
@@ -73,7 +74,7 @@
     "postcss": "^8.4.49",
     "tailwindcss": "^4.0.0-beta.8",
     "typescript": "^5.7.2",
-    "vercel": "^39.2.4"
+    "vercel": "^39.2.5"
   },
   "overrides": {
     "react-is": "^19.0.0-rc-69d4b800-20241021"