feat(i18n): make admin and catalog components translatable

src/app/admin/moderation/cfh/[id]/cfh-detail.tsx

@@ -11,6 +11,7 @@ import {
 	VolumeX,
 	Zap,
 } from "lucide-react";
+import { useTranslations } from "next-intl";
 import { useState } from "react";
 import {
 	assignCfhTicket,
@@ -36,16 +37,14 @@ import { Textarea } from "@/components/ui/textarea";
 import { useServerAction } from "@/hooks/use-server-action";
 import { formatDate } from "@/lib/format-date";
 
-const CFH_STATES: Record<number, { label: string; class: string }> = {
+const CFH_STATES: Record<number, { class: string }> = {
 	0: {
-		label: "Open",
 		class: "bg-[var(--admin-error-subtle)] text-[var(--admin-error)]",
 	},
 	1: {
-		label: "Picked",
 		class: "bg-[var(--admin-warning-subtle)] text-[var(--admin-warning)]",
 	},
-	2: { label: "Closed", class: "bg-muted text-muted-foreground" },
+	2: { class: "bg-muted text-muted-foreground" },
 };
 
 interface UserInfo {
@@ -97,11 +96,18 @@ export function CfhDetail({
 	userLinkMode?: "admin" | "public";
 }) {
 	void currentUserId;
+	const t = useTranslations("pages.admin.moderation.cfh.id.cfhDetail");
 	const { run, isPending } = useServerAction();
 	const [alertMsg, setAlertMsg] = useState("");
 	const [muteDuration, setMuteDuration] = useState(10);
 
 	const state = CFH_STATES[ticket.state] ?? CFH_STATES[0];
+	const stateKey =
+		ticket.state === 1
+			? "statePicked"
+			: ticket.state === 2
+				? "stateClosed"
+				: "stateOpen";
 
 	function userHref(user: UserInfo) {
 		if (userLinkMode === "public") {
@@ -122,17 +128,22 @@ export function CfhDetail({
 				<div className="flex-1">
 					<div className="flex items-center gap-2 mb-1">
 						<span className="text-sm text-muted-foreground font-mono">
-							CFH #{ticket.id}
+							{t("cfhId", { id: ticket.id })}
 						</span>
-						<Badge className={state.class}>{state.label}</Badge>
+						<Badge className={state.class}>{t(stateKey)}</Badge>
 						<span className="text-xs text-muted-foreground">
-							Type {ticket.type} · Category {ticket.category}
+							{t("typeCategory", {
+								type: ticket.type,
+								category: ticket.category,
+							})}
 						</span>
 					</div>
-					<h1 className="text-xl font-bold">Call For Help Report</h1>
+					<h1 className="text-xl font-bold">{t("title")}</h1>
 					<p className="text-xs text-muted-foreground">
-						{formatDate(new Date(ticket.timestamp * 1000))} · Room #
-						{ticket.roomId}
+						{t("roomMeta", {
+							when: formatDate(new Date(ticket.timestamp * 1000)),
+							room: ticket.roomId,
+						})}
 					</p>
 				</div>
 			</div>
@@ -145,12 +156,12 @@ export function CfhDetail({
 						<CardHeader className="pb-2">
 							<CardTitle className="text-sm flex items-center gap-2">
 								<MessageSquare className="h-4 w-4" />
-								Report Message
+								{t("reportMessage")}
 							</CardTitle>
 						</CardHeader>
 						<CardContent>
 							<p className="text-sm leading-relaxed whitespace-pre-wrap">
-								{ticket.issue || "No description provided."}
+								{ticket.issue || t("noDescription")}
 							</p>
 						</CardContent>
 					</Card>