From 316a1eecfab122830024e7f401de9de9ae710310 Mon Sep 17 00:00:00 2001
From: gunshiz <spsshop1047@gmail.com>
Date: Mon, 14 Sep 2026 17:43:29 +0700
Subject: [PATCH] fix(ui) : keep technical labels English and compact badges

---
 components/admin/admin-header.tsx         | 21 ++++----
 components/admin/guide-section-editor.tsx | 16 +++---
 components/admin/structured-dashboard.tsx |  2 +-
 components/public/material-poster.tsx     |  2 +-
 components/public/site-header.tsx         |  6 +--
 components/public/team-search.tsx         |  6 +--
 lib/guides/export-text.test.tsx           | 11 ++++-
 lib/guides/export-text.ts                 | 59 ++++++++++++-----------
 8 files changed, 66 insertions(+), 57 deletions(-)

diff --git a/components/admin/admin-header.tsx b/components/admin/admin-header.tsx
index b36c28d..9425229 100644
--- a/components/admin/admin-header.tsx
+++ b/components/admin/admin-header.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useTranslation } from "@/components/i18n/locale-provider";
+import { exportText } from "@/lib/guides/export-text";
 import { LanguageDropdown } from "@/components/i18n/language-dropdown";
 import Image from "next/image";
 import Link from "next/link";
@@ -19,7 +19,6 @@ import { Button } from "@/components/ui/button";
 import { authClient } from "@/lib/auth/client";
 
 export function AdminHeader() {
-  const { t } = useTranslation();
   const pathname = usePathname();
   const router = useRouter();
 
@@ -31,10 +30,10 @@ export function AdminHeader() {
           className="mr-auto flex min-h-11 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           <Image src="/icon.png" alt="" width={36} height={36} className="size-9 object-contain" />
-          <span className="hidden sm:inline">{t("ไกด์เกนชินไม่ใช่เกมมือถือ")}</span>
+          <span className="hidden sm:inline">{exportText("watermark")}</span>
         </Link>
         <LanguageDropdown />
-        <nav aria-label={t("Admin navigation")} className="flex items-center gap-1">
+        <nav aria-label="Admin navigation" className="flex items-center gap-1">
           <Button
             variant={pathname === "/admin/glossary" ? "secondary" : "ghost"}
             size="sm"
@@ -42,7 +41,7 @@ export function AdminHeader() {
             render={<Link href="/admin/glossary" />}
           >
             <BookOpenIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">{t("Glossary")}</span>
+            <span className="hidden sm:inline">Glossary</span>
           </Button>
           <Button
             variant={pathname === "/admin/register" ? "secondary" : "ghost"}
@@ -51,7 +50,7 @@ export function AdminHeader() {
             render={<Link href="/admin/register" />}
           >
             <UserPlusIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">{t("Accounts")}</span>
+            <span className="hidden sm:inline">Accounts</span>
           </Button>
           <Button
             variant={pathname === "/admin" ? "secondary" : "ghost"}
@@ -60,7 +59,7 @@ export function AdminHeader() {
             render={<Link href="/admin" />}
           >
             <LayoutDashboardIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">{t("Dashboard")}</span>
+            <span className="hidden sm:inline">Dashboard</span>
           </Button>
           <Button
             variant={pathname === "/admin/create" ? "secondary" : "ghost"}
@@ -69,7 +68,7 @@ export function AdminHeader() {
             render={<Link href="/admin/create" />}
           >
             <PlusIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">{t("New Guide")}</span>
+            <span className="hidden sm:inline">New Guide</span>
           </Button>
           <Button
             variant={
@@ -80,21 +79,21 @@ export function AdminHeader() {
             render={<Link href="/admin/generate/image" />}
           >
             <ImageIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">{t("Image Generator")}</span>
+            <span className="hidden sm:inline">Image Generator</span>
           </Button>
           <Button
             variant="ghost"
             size="icon-sm"
             nativeButton={false}
             render={<Link href="/" target="_blank" />}
-            aria-label={t("เปิดหน้าเว็บไซต์")}
+            aria-label="Open website"
           >
             <ExternalLinkIcon />
           </Button>
           <Button
             variant="ghost"
             size="icon-sm"
-            aria-label={t("ออกจากระบบ")}
+            aria-label="Sign out"
             onClick={() =>
               authClient.signOut({
                 fetchOptions: {
diff --git a/components/admin/guide-section-editor.tsx b/components/admin/guide-section-editor.tsx
index b653173..5a6dffa 100644
--- a/components/admin/guide-section-editor.tsx
+++ b/components/admin/guide-section-editor.tsx
@@ -1597,7 +1597,7 @@ function WeaponEditor({ guide, weapons, characters, initial }: EditorBase) {
                                       key={refinement}
                                       value={`R${refinement}`}
                                     >
-                                      {t("R")}{" "}{refinement}
+                                      {`R${refinement}`}
                                     </ToggleGroupItem>
                                   ))}
                                 </ToggleGroup>
@@ -2689,7 +2689,7 @@ function ConstellationEditor({
                         />
                       ) : null}
                       <CardTitle>
-                        {t("C")}{" "}{row.level} · {row.name}
+                        {`C${row.level}`} · {row.name}
                       </CardTitle>
                       <CardDescription>{row.description}</CardDescription>
                     </CardHeader>
@@ -3685,7 +3685,7 @@ function TeamEditor({
                                                   aria-label={t("Constellation ของตัวละครตำแหน่ง {index}", { index: memberIndex + 1 })}
                                                 >
                                                   <SelectValue>
-                                                    {t("C")}{" "}{member.constellation}
+                                                    {`C${member.constellation}`}
                                                   </SelectValue>
                                                 </SelectTrigger>
                                                 <SelectContent>
@@ -3696,7 +3696,7 @@ function TeamEditor({
                                                           key={constellation}
                                                           value={String(constellation)}
                                                         >
-                                                          {t("C")}{" "}{constellation}
+                                                          {`C${constellation}`}
                                                         </SelectItem>
                                                       ),
                                                     )}
@@ -3723,7 +3723,7 @@ function TeamEditor({
                                                   aria-label={t("Refinement ของอาวุธตำแหน่ง {index}", { index: memberIndex + 1 })}
                                                 >
                                                   <SelectValue>
-                                                    {t("R")}{" "}{member.refinement}
+                                                    {`R${member.refinement}`}
                                                   </SelectValue>
                                                 </SelectTrigger>
                                                 <SelectContent>
@@ -3734,7 +3734,7 @@ function TeamEditor({
                                                           key={refinement}
                                                           value={String(refinement)}
                                                         >
-                                                          {t("R")}{" "}{refinement}
+                                                          {`R${refinement}`}
                                                         </SelectItem>
                                                       ),
                                                     )}
@@ -4144,8 +4144,8 @@ function TeamEditor({
                                         </div>
                                       </div>
                                       <div className="mt-2 flex items-center justify-center gap-1">
-                                        <Badge variant="secondary">{t("C")}{" "}{member.constellation}</Badge>
-                                        <Badge variant="secondary">{t("R")}{" "}{member.refinement}</Badge>
+                                        <Badge variant="secondary">{`C${member.constellation}`}</Badge>
+                                        <Badge variant="secondary">{`R${member.refinement}`}</Badge>
                                       </div>
                                       <p className="mt-1 truncate text-sm font-medium">{character?.name ?? member.characterName}</p>
                                       <p className="mt-1 text-sm font-semibold">{Number(member.damage).toLocaleString(locale)}</p>
diff --git a/components/admin/structured-dashboard.tsx b/components/admin/structured-dashboard.tsx
index 0d9dd59..00afa5d 100644
--- a/components/admin/structured-dashboard.tsx
+++ b/components/admin/structured-dashboard.tsx
@@ -228,7 +228,7 @@ export function StructuredDashboard({
                 </CardDescription>
                 <CardAction>
                   <div className="flex flex-col items-end gap-1">
-                    <Badge variant="secondary">{t("v")}{" "}{guide.version}</Badge>
+                    <Badge variant="secondary">{`v${guide.version}`}</Badge>
                     {(presence?.editorsByGuide[guide.id] ?? []).map((editor) => (
                       <Badge key={editor.userId} variant="outline">
                         {editor.name}
diff --git a/components/public/material-poster.tsx b/components/public/material-poster.tsx
index e6e1da5..37b3f42 100644
--- a/components/public/material-poster.tsx
+++ b/components/public/material-poster.tsx
@@ -194,7 +194,7 @@ export function MaterialPoster({
       />
 
       <div className="absolute inset-x-[4%] top-[5%]" style={{ fontFamily: "Kanit Poster", fontWeight: 800, fontStyle: "italic" }}>
-        <h2 className="text-[7cqw] leading-none" style={{ textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>{t("BASE STATS")}</h2>
+        <h2 className="text-[7cqw] leading-none" style={{ textShadow: "-6px 14px 0 rgba(0,0,0,0.59)" }}>BASE STATS</h2>
         <div className="mt-[4%] flex w-[53%] flex-col gap-[1.2cqw]">
           {Array.from({ length: 4 }, (_, index) => {
             const stat = stats[index];
diff --git a/components/public/site-header.tsx b/components/public/site-header.tsx
index ddcb18e..710a4d6 100644
--- a/components/public/site-header.tsx
+++ b/components/public/site-header.tsx
@@ -1,4 +1,4 @@
-import { Text } from "@/components/i18n/text";
+import { exportText } from "@/lib/guides/export-text";
 import { LanguageDropdown } from "@/components/i18n/language-dropdown";
 import Image from "next/image";
 import Link from "next/link";
@@ -18,7 +18,7 @@ async function AdminEditLink({ editHref }: { editHref: string }) {
       nativeButton={false}
       render={<Link href={editHref} />}
     >
-      <Text message="ไปหน้าแก้ไข" /></Button>
+      Edit this page</Button>
   ) : null;
 }
 
@@ -31,7 +31,7 @@ export function SiteHeader({ editHref = "/admin", guideId }: { editHref?: string
           className="mr-auto flex min-h-11 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           <Image src="/icon.png" alt="" width={36} height={36} className="size-9 object-contain" />
-          <span className="hidden sm:inline"><Text message="ไกด์เกนชินไม่ใช่เกมมือถือ" /></span>
+          <span className="hidden sm:inline">{exportText("watermark")}</span>
         </Link>
         <LanguageDropdown />
         <nav aria-label="Public navigation" className="flex items-center gap-1">
diff --git a/components/public/team-search.tsx b/components/public/team-search.tsx
index 80bf8c7..37039e1 100644
--- a/components/public/team-search.tsx
+++ b/components/public/team-search.tsx
@@ -197,7 +197,7 @@ function TeamExportImage({ team }: { team: Team }) {
                 <div className="flex items-center justify-between gap-4">
                   <span className="flex min-w-0 items-baseline gap-3 text-[36px] font-semibold">
                     <span className="truncate">{member.character.name}</span>
-                    <span className="shrink-0 text-[28px] text-[#f0c95f]">{t("C")}{" "}{member.constellation}{t("R")}{" "}{member.refinement}</span>
+                    <span className="shrink-0 text-[28px] text-[#f0c95f]">{`C${member.constellation}`}{`R${member.refinement}`}</span>
                   </span>
                   <span className="shrink-0 text-[36px]">{damage.toLocaleString(locale)}</span>
                 </div>
@@ -333,8 +333,8 @@ function TeamCard({
                 </div>
               </div>
               <div className="mt-2 flex items-center justify-center gap-1">
-                <Badge variant="secondary">{t("C")}{" "}{member.constellation}</Badge>
-                <Badge variant="secondary">{t("R")}{" "}{member.refinement}</Badge>
+                <Badge variant="secondary">{`C${member.constellation}`}</Badge>
+                <Badge variant="secondary">{`R${member.refinement}`}</Badge>
               </div>
               <p className="mt-1 truncate text-sm font-medium">
                 {member.character.name}
diff --git a/lib/guides/export-text.test.tsx b/lib/guides/export-text.test.tsx
index 63adead..0ca2d1d 100644
--- a/lib/guides/export-text.test.tsx
+++ b/lib/guides/export-text.test.tsx
@@ -22,7 +22,16 @@ describe("export translations", () => {
     expect(exportText("weaponTitle", { name: "Raiden" })).toBe("Raiden Weapons");
     expect(exportText("rotation", { seconds: "20.5" })).toBe("Rotation duration: 20.5 seconds");
     expect(exportText("weaponTitle", { name: "{seconds}" })).toBe("{seconds} Weapons");
-    expect(exportText("condition", { index: 2 }, "th")).toBe("เงื่อนไข 2");
+    expect(exportText("condition", { index: 2 }, "th")).toBe("Condition 2");
+  });
+
+  it("keeps technical labels in English while localising export controls", () => {
+    for (const key of ["materials", "materialLevel", "weaponTitle", "talents", "mainStats", "teamDamage"] as const) {
+      expect(exportText(key, { name: "Raiden", level: 90 }, "th")).toBe(exportText(key, { name: "Raiden", level: 90 }, "en"));
+    }
+    expect(exportText("materials", {}, "th")).toBe("MATERIALS");
+    expect(exportText("materialLevel", { level: 90 }, "th")).toBe("LV.90");
+    expect(exportText("exportImage", {}, "th")).toBe("ส่งออกภาพ");
   });
 
   it("uses English stat names for exports while retaining Thai page labels and custom values", () => {
diff --git a/lib/guides/export-text.ts b/lib/guides/export-text.ts
index e42deab..05ffdda 100644
--- a/lib/guides/export-text.ts
+++ b/lib/guides/export-text.ts
@@ -53,6 +53,7 @@ const english = {
 
 export type ExportMessageKey = keyof typeof english;
 
+// Technical headings and labels use English in every locale.
 const thai: Record<ExportMessageKey, string> = {
   exportImage: "ส่งออกภาพ",
   withoutNote: "ส่งออกภาพโดยไม่รวมโน้ต",
@@ -60,47 +61,47 @@ const thai: Record<ExportMessageKey, string> = {
   exportError: "ส่งออกภาพไม่สำเร็จ กรุณาลองอีกครั้ง",
   damageTitle: "เลือกประเภทดาเมจ",
   damageDescription: "เลือกค่าที่ต้องการใช้สร้างภาพเปรียบเทียบอาวุธ",
-  overallDamage: "ดาเมจทั้งทีม",
-  personalDamage: "ดาเมจส่วนตัว",
-  weaponTitle: "อาวุธของ {name}",
-  condition: "เงื่อนไข {index}",
+  overallDamage: english.overallDamage,
+  personalDamage: english.personalDamage,
+  weaponTitle: english.weaponTitle,
+  condition: english.condition,
   sectionTitle: "เลือกข้อมูลสำหรับส่งออก",
   sectionDescription: "เลือกได้หลายส่วน หรือเลือกทั้งหมดเพื่อส่งออกทุกส่วน",
   allSections: "ทั้งหมด",
-  tierlist: "อันดับอาร์ติแฟกต์",
-  bestStats: "ออฟหลักและออฟรองที่ดีที่สุด",
-  targetStats: "ค่าสถานะเป้าหมาย",
-  talents: "ลำดับการอัพพรสวรรค์",
+  tierlist: english.tierlist,
+  bestStats: english.bestStats,
+  targetStats: english.targetStats,
+  talents: english.talents,
   addNote: "รวมโน้ต",
-  recommendedCondition: "เงื่อนไขค่าสถานะแนะนำ",
-  targetCondition: "เงื่อนไขค่าสถานะเป้าหมาย",
-  mainStats: "ออฟหลักที่ดีที่สุด",
-  substats: "ออฟรองที่ดีที่สุด",
-  sands: "นาฬิกา",
-  goblet: "ถ้วย",
-  circlet: "หัว",
-  artifactRecommendation: "อาร์ติแฟกต์และสแตทที่แนะนำ",
-  artifactTitle: "อาร์ติแฟกต์และค่าสถานะ",
-  lateGame: "เลทเกม",
-  earlyGame: "ต้นเกม",
-  minimumStats: "ค่าสถานะต่ำๆที่ควรจะปั้นไว้",
-  level: "เลเวล {level}+",
-  normalAttack: "ตีปกติ",
-  skill: "สกิลธาตุ",
-  burst: "ท่าไม้ตาย",
+  recommendedCondition: english.recommendedCondition,
+  targetCondition: english.targetCondition,
+  mainStats: english.mainStats,
+  substats: english.substats,
+  sands: english.sands,
+  goblet: english.goblet,
+  circlet: english.circlet,
+  artifactRecommendation: english.artifactRecommendation,
+  artifactTitle: english.artifactTitle,
+  lateGame: english.lateGame,
+  earlyGame: english.earlyGame,
+  minimumStats: english.minimumStats,
+  level: english.level,
+  normalAttack: english.normalAttack,
+  skill: english.skill,
+  burst: english.burst,
   note: "โน็ต",
   extraGuide: "คู่มือเสริม",
   missingItem: "ไม่พบรายการ",
-  constellationTitle: "กลุ่มดาวของ {name}",
-  teamDamage: "ดาเมจทั้งทีม",
-  rotation: "ระยะเวลาโรเทชั่น {seconds} วิ",
+  constellationTitle: english.constellationTitle,
+  teamDamage: english.teamDamage,
+  rotation: english.rotation,
   teamCredit: "Genshin isnt Mobile Game",
   watermark: "Genshin isnt Mobile Game",
   disclaimer: "ไม่สามารถเอาไปเปรียบเทียบกับการคำนวณของ TC ท่านอื่นๆได้\nเพราะแต่ละคนใช้สแตทในการคำนวณที่ไม่เหมือนกัน\nและตารางที่เห็นอาจมีการเปลี่ยนแปลงได้ในอนาคต",
   overviewDownloaded: "ดาวน์โหลดภาพ Overview แล้ว",
   downloadPng: "ดาวน์โหลด PNG {width}×{height}",
-  materials: "วัสดุ",
-  materialLevel: "เลเวล {level}"
+  materials: english.materials,
+  materialLevel: english.materialLevel
 };
 
 export const exportMessages = { en: english, th: thai };