fix(ui) : keep technical labels English and compact badges

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: {

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>

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}

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];

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">

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}