fix: use currency icons in public balances

src/app/(site)/leaderboard/page.tsx

@@ -2,6 +2,10 @@ import { desc, eq, inArray } from "drizzle-orm";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState, RankBadge } from "@/components/public/ui";
+import {
+	CurrencyIcon,
+	type CurrencyKind,
+} from "@/components/shared/currency-icon";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { db, User, UsersCurrency, UsersSettings } from "@/lib/db";
 
@@ -10,12 +14,12 @@ export const metadata = { title: "Leaderboard" };
 // Currency type ids (see UsersCurrency in src/db/schema.ts):
 //   Credits = -1 (lives on users.credits), Duckets = 0, Diamonds = 5.
 const TABS = [
-	{ key: "credits", label: "Credits", coin: "credits" },
-	{ key: "diamonds", label: "Diamonds", coin: "diamonds" },
-	{ key: "duckets", label: "Duckets", coin: "duckets" },
-	{ key: "achievement", label: "Achievement", coin: "" },
-	{ key: "respects", label: "Respects", coin: "" },
-	{ key: "onlinetime", label: "Online Time", coin: "" },
+	{ key: "credits", label: "Credits" },
+	{ key: "diamonds", label: "Diamonds" },
+	{ key: "duckets", label: "Duckets" },
+	{ key: "achievement", label: "Achievement" },
+	{ key: "respects", label: "Respects" },
+	{ key: "onlinetime", label: "Online Time" },
 ] as const;
 
 type TabKey = (typeof TABS)[number]["key"];
@@ -155,7 +159,6 @@ export default async function LeaderboardPage({
 	const active: TabKey = TABS.some((tab) => tab.key === type)
 		? (type as TabKey)
 		: "credits";
-	const activeTab = TABS.find((tab) => tab.key === active) ?? TABS[0];
 
 	const rows = await (active === "credits"
 		? loadCreditsRows()
@@ -166,10 +169,10 @@ export default async function LeaderboardPage({
 					SETTINGS_FIELD[active as keyof typeof SETTINGS_FIELD],
 				));
 
-	const valueOnly =
-		active === "achievement" ||
-		active === "respects" ||
-		active === "onlinetime";
+	const activeCurrency: CurrencyKind | null =
+		active === "credits" || active === "diamonds" || active === "duckets"
+			? active
+			: null;
 
 	return (
 		<main style={{ display: "grid", gap: "1.5rem" }}>
@@ -226,16 +229,20 @@ export default async function LeaderboardPage({
 											</Link>
 										</td>
 										<td style={{ textAlign: "right" }}>
-											{valueOnly ? (
-												<strong>{formatValue(active, row.value)}</strong>
-											) : (
+											{activeCurrency ? (
 												<span
 													className="currency"
 													style={{ display: "inline-flex" }}
 												>
-													<span className={`coin ${activeTab.coin}`} />
+													<CurrencyIcon
+														kind={activeCurrency}
+														size={22}
+														alt=""
+													/>
 													{row.value.toLocaleString()}
 												</span>
+											) : (
+												<strong>{formatValue(active, row.value)}</strong>
 											)}
 										</td>
 									</tr>