feat : better ui

app/[character]/[page]/page.tsx

@@ -11,7 +11,7 @@ export async function generateMetadata({ params }: { params: Params }): Promise<
   await connection();
   const { character, page } = await params;
   const guide = await getCachedPublicGuide(character);
-  return guide ? { title: `${page} — ${guide.name} Build Guide`, description: guide.overview } : { title: "ไม่พบ Guide" };
+  return guide ? { title: `${page} — ${guide.name} — คู่มือ`, description: guide.overview } : { title: "ไม่พบไกด์" };
 }
 
 export default async function GuideSectionPage({ params }: { params: Params }) {

app/[character]/page.tsx

@@ -15,8 +15,8 @@ export async function generateMetadata({
   await connection();
   const guide = await getCachedPublicGuide((await params).character);
   return guide
-    ? { title: `${guide.name} Build Guide`, description: guide.overview }
-    : { title: "ไม่พบ Guide" };
+    ? { title: `${guide.name} — คู่มือ`, description: guide.overview }
+    : { title: "ไม่พบไกด์" };
 }
 
 export default async function GuideOverviewPage({

app/api/guides/[guideId]/artifacts/image/route.tsx

@@ -36,11 +36,29 @@ function metric(value: string): string {
 }
 
 function statLabel(value: string): string {
-  return value === "EM"
-    ? "Elemental Mastery"
-    : value === "ER"
-      ? "Energy Recharge"
-      : value;
+  const labels: Record<string, string> = {
+    HP: "พลังชีวิต",
+    ATK: "พลังโจมตี",
+    DEF: "พลังป้องกัน",
+    EM: "ความชำนาญธาตุ",
+    ER: "ฟื้นฟูพลังงาน",
+    "CRIT RATE": "อัตราคริ",
+    "CRIT DAMAGE": "ความแรงคริ",
+    "ATK%": "พลังโจมตี%",
+    "HP%": "พลังชีวิต%",
+    "DEF%": "พลังป้องกัน%",
+    "CRIT Rate%/CRIT DMG%": "อัตราคริ/ความแรงคริ",
+    "Pyro DMG%": "ความเสียหายธาตุไฟ%",
+    "Hydro DMG%": "ความเสียหายธาตุน้ำ%",
+    "Cryo DMG%": "ความเสียหายธาตุน้ำแข็ง%",
+    "Electro DMG%": "ความเสียหายธาตุไฟฟ้า%",
+    "Anemo DMG%": "ความเสียหายธาตุลม%",
+    "Geo DMG%": "ความเสียหายธาตุดิน%",
+    "Dendro DMG%": "ความเสียหายธาตุไม้%",
+    "Physical DMG%": "ความเสียหายกายภาพ%",
+    "Healing Bonus%": "โบนัสการรักษา%",
+  };
+  return labels[value] ?? value;
 }
 
 async function pngDataUrl(url: string): Promise<string | null> {
@@ -72,7 +90,7 @@ export async function GET(
 ) {
   const { guideId } = await context.params;
   const guide = await getCachedPublicArtifactExport(guideId);
-  if (!guide) return new Response("Guide not found", { status: 404 });
+  if (!guide) return new Response("ไม่พบไกด์", { status: 404 });
   const talents = normalizeTalentPriorities(guide.profile?.talents ?? []);
 
   const [fonts, groupAssets, statIconAssets, talentAssets, targetStatAssets] = await Promise.all([
@@ -131,7 +149,7 @@ export async function GET(
           อาร์ติแฟกต์และสเตตัสที่แนะนำ
         </div>
         <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>
-          Artifacts &amp; Stats
+          อาร์ติแฟกต์และค่าสถานะ
         </div>
       </div>
 
@@ -150,7 +168,7 @@ export async function GET(
               }}
             >
               <div style={{ display: "flex", padding: "16px 20px", fontSize: 22, fontWeight: 700 }}>
-                {group.name}
+                {group.name === "Late Game" ? "เลทเกม" : group.name}
               </div>
               <div style={{ display: "flex", flexDirection: "column", padding: "0 20px 14px" }}>
                 {group.rows.map((row, rowIndex) => (
@@ -188,15 +206,15 @@ export async function GET(
           <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 16 }}>
             <div style={{ display: "flex", flexDirection: "column", overflow: "hidden", border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25" }}>
               <div style={{ display: "flex", justifyContent: "center", background: "#ddb45a", color: "#211a0d", padding: "14px 20px", fontSize: 24, fontWeight: 700 }}>
-                Artifact Stats
+                ออฟหลัก
               </div>
               <div style={{ display: "flex" }}>
                 {[
-                  { label: "Sands", values: profile.sands, icon: statIconAssets[0] },
-                  { label: "Goblet", values: profile.goblet, icon: statIconAssets[1] },
-                  { label: "Circlet", values: profile.circlet, icon: statIconAssets[2] },
+                  { label: "นาฬิกา", values: profile.sands, icon: statIconAssets[0] },
+                  { label: "ถ้วย", values: profile.goblet, icon: statIconAssets[1] },
+                  { label: "หัว", values: profile.circlet, icon: statIconAssets[2] },
                 ].map((stat) => (
-                  <div key={stat.label} style={{ display: "flex", flex: 1, minHeight: 176, flexDirection: "column", alignItems: "center", gap: 10, borderRight: stat.label === "Circlet" ? "none" : "1px solid #34343d", padding: "16px 10px", textAlign: "center" }}>
+                  <div key={stat.label} style={{ display: "flex", flex: 1, minHeight: 176, flexDirection: "column", alignItems: "center", gap: 10, borderRight: stat.label === "มงกุฎ" ? "none" : "1px solid #34343d", padding: "16px 10px", textAlign: "center" }}>
                     <img src={stat.icon} alt="" width={48} height={48} style={{ objectFit: "contain" }} />
                     <div style={{ display: "flex", fontSize: 17, fontWeight: 700 }}>{stat.label}</div>
                     <div style={{ display: "flex", width: "100%", borderTop: "1px solid #34343d" }} />
@@ -210,7 +228,7 @@ export async function GET(
 
             {profile.substats.length ? (
                 <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, border: "1px solid #34343d", borderRadius: 14, background: "#1d1d25", padding: "16px", fontSize: 14, textAlign: "center" }}>
-                <strong>Stat Priority:</strong>
+                <strong>ลำดับค่าสถานะ:</strong>
                 <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
                   {profile.substats.map((stat, index) => <span key={`${stat}-${index}`} style={{ color: statPriorityColor(index) }}>{statLabel(stat)}</span>)}
                 </div>
@@ -222,7 +240,7 @@ export async function GET(
                 <div style={{ display: "flex", fontSize: 20, fontWeight: 700 }}>รายละเอียดเพิ่มเติม</div>
                 {profile.targets.length ? (
                   <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
-                    <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>Target Stats</div>
+                    <div style={{ display: "flex", color: "#b9b9c2", fontSize: 14, fontWeight: 700 }}>ค่าสถานะเป้าหมาย</div>
                     {profile.targets.map((target, index) => {
                       const iconIndex = targetStatOptions.findIndex((stat) => stat === normalizeTargetStat(target.stat));
                       return (
@@ -241,7 +259,7 @@ export async function GET(
                         <div key={talent.type} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                           {talentAssets[index] ? <img src={talentAssets[index]!} alt="" width={42} height={42} style={{ objectFit: "contain" }} /> : null}
                           <span style={{ display: "flex", flexDirection: "column", gap: 2 }}>
-                            <span>{talent.type}{talent.level ? ` Lv.${talent.level}+` : ""}</span>
+                            <span>{talent.type}{talent.level ? ` เลเวล ${talent.level}+` : ""}</span>
                             <span style={{ color: "#b9b9c2", fontSize: 13, fontWeight: 400 }}>{talentTypeLabel(talent.type)}</span>
                           </span>
                           {index < talents.length - 1 ? <span>{talent.relationToNext === "gte" ? ">=" : ">"}</span> : null}
@@ -269,7 +287,7 @@ export async function GET(
       fonts: fonts.length ? fonts : undefined,
       headers: {
         "Cache-Control": "no-store",
-        "Content-Disposition": imageContentDisposition(`${guide.guideName} Artifacts`, "artifacts"),
+        "Content-Disposition": imageContentDisposition(`${guide.guideName} อาร์ติแฟกต์`, "artifacts"),
         "Content-Type": "image/png",
       },
     },

app/api/guides/[guideId]/weapons/image/route.tsx

@@ -50,7 +50,7 @@ export async function GET(
 ) {
   const { guideId } = await context.params;
   const guide = await getCachedPublicWeaponExport(guideId);
-  if (!guide) return new Response("Guide not found", { status: 404 });
+  if (!guide) return new Response("ไม่พบไกด์", { status: 404 });
 
   const [fonts, weaponImages] = await Promise.all([
     anuphanFonts,
@@ -77,7 +77,7 @@ export async function GET(
       <div style={{ position: "relative", zIndex: 1, display: "flex", flex: 1, flexDirection: "column", gap: 14 }}>
       <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, marginBottom: 6 }}>
         <div style={{ display: "flex", color: "#f0b72f", fontSize: 16, fontWeight: 700 }}>อาวุธที่แนะนำ</div>
-        <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>Weapons</div>
+        <div style={{ display: "flex", fontSize: 38, fontWeight: 700 }}>อาวุธ</div>
       </div>
       {guide.weapons.map((row, index) => (
         <div
@@ -140,7 +140,7 @@ export async function GET(
       fonts: fonts.length ? fonts : undefined,
       headers: {
         "Cache-Control": "no-store",
-        "Content-Disposition": imageContentDisposition(`${guide.guideName} Weapons`, "weapons"),
+        "Content-Disposition": imageContentDisposition(`${guide.guideName} อาวุธ`, "weapons"),
         "Content-Type": "image/png",
       },
     },

app/api/teams/[teamId]/image/route.tsx

@@ -51,7 +51,7 @@ export async function GET(
 ) {
   const { teamId } = await context.params;
   const team = await getCachedPublicTeamExport(teamId);
-  if (!team) return new Response("Team not found", { status: 404 });
+  if (!team) return new Response("ไม่พบทีม", { status: 404 });
 
   const total = team.members.reduce(
     (sum, member) => sum + Number(member.damage),
@@ -135,7 +135,7 @@ export async function GET(
               </div>
               <div style={{ display: "flex", flex: 1, flexDirection: "column", gap: 6 }}>
                 <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-                  <div style={{ display: "flex", fontSize: 20, fontWeight: 600 }}>C{member.constellation} · {member.character.name}</div>
+                  <div style={{ display: "flex", fontSize: 20, fontWeight: 600 }}>C{member.constellation} {member.character.name}</div>
                   <div style={{ display: "flex", color: "#d9f6f2", fontSize: 18 }}>{amount(damage)}</div>
                 </div>
                 <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
@@ -161,11 +161,11 @@ export async function GET(
       </div>
 
       <div style={{ display: "flex", flex: 1, flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 6, padding: "16px 0", textAlign: "center", color: "#d1e9e6", fontSize: 18, lineHeight: 1.45 }}>
-        <div style={{ display: "flex", color: "#82d6ce", fontSize: 15, fontWeight: 700 }}>Team Rotation</div>
+        <div style={{ display: "flex", color: "#82d6ce", fontSize: 15, fontWeight: 700 }}>Rotation</div>
         <div style={{ display: "flex" }}>{team.combo}</div>
       </div>
       <div style={{ display: "flex", justifyContent: "center", gap: 16, borderTop: "1px solid #28555a", paddingTop: 20, fontSize: 26, fontWeight: 700 }}>
-        <span style={{ color: "#f0c95f" }}>DPS: {amount(dps)}</span>
+        <span style={{ color: "#f0c95f" }}>DPS): {amount(dps)}</span>
         <span style={{ color: "#688c90" }}>|</span>
         <span>DPR: {amount(total)}</span>
       </div>

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Anuphan, Geist_Mono } from "next/font/google";
 
 import { DeploymentUpdateNotifier } from "@/components/deployment-update-notifier";
+import { PageProgress } from "@/components/page-progress";
 import { Toaster } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 
@@ -37,6 +38,7 @@ export default function RootLayout({ children }: LayoutProps<"/">) {
     >
       <body className="flex min-h-full flex-col">
         <TooltipProvider>
+          <PageProgress />
           {children}
           <DeploymentUpdateNotifier deploymentId={deploymentId} />
           <Toaster richColors closeButton position="bottom-right" />

app/page.tsx

@@ -15,13 +15,13 @@ export default async function HomePage() {
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 py-10 sm:px-6 sm:py-14">
         <header className="max-w-3xl">
           <p className="text-sm font-medium text-primary">
-            Genshin Impact Build Guides
+            คู่มือการจัดตัวละครเกนชินอิมแพกต์
           </p>
           <h1 className="mt-2 font-heading text-4xl font-semibold">
             เลือกตัวละครแล้วส่องดูได้เลย
           </h1>
           <p className="mt-3 text-lg leading-8 text-muted-foreground">
-            ไกด์ตัวละคร Weapons, Artifacts, Constellations และ Team Calc
+            ไกด์ตัวละคร อาวุธ อาร์ติแฟกต์ กลุ่มดาว และคำนวณทีม
           </p>
         </header>
         <StructuredDirectory guides={guides} />