feat: mobile nav, radio layout/requests, leaderboard tabs, client i18n, habbo background, navbar fixes

src/app/leaderboard/page.tsx

@@ -9,21 +9,34 @@ export const dynamic = "force-dynamic";
 
 export const metadata = { title: "Leaderboard" };
 
-// AtomCMS-faithful currency type ids (see prisma/schema.prisma UsersCurrency):
+// Currency type ids (see prisma/schema.prisma UsersCurrency):
 //   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: "" },
 ] as const;
 
 type TabKey = (typeof TABS)[number]["key"];
 
-const CURRENCY_TYPE: Record<Exclude<TabKey, "credits">, number> = {
+const CURRENCY_TYPE: Record<"diamonds" | "duckets", number> = {
   diamonds: 5,
   duckets: 0,
 };
 
+function formatValue(key: TabKey, value: number): string {
+  if (key === "onlinetime") {
+    const hours = Math.floor(value / 3600);
+    const days = Math.floor(hours / 24);
+    if (days > 0) return `${days}d ${hours % 24}h`;
+    return `${hours}h`;
+  }
+  return value.toLocaleString();
+}
+
 type Row = { username: string; look: string; value: number };
 
 async function loadCreditsRows(): Promise<Row[]> {
@@ -67,6 +80,41 @@ async function loadCurrencyRows(type: number): Promise<Row[]> {
   }
 }
 
+async function loadSettingsRows(
+  field: "achievementScore" | "respectsReceived" | "onlineTime" | "hofPoints",
+): Promise<Row[]> {
+  try {
+    const top = await prisma.usersSettings.findMany({
+      orderBy: { [field]: "desc" },
+      take: 20,
+      select: { userId: true, [field]: true },
+    });
+    if (top.length === 0) return [];
+
+    const users = await prisma.user.findMany({
+      where: { id: { in: top.map((t) => t.userId) } },
+      select: { id: true, username: true, look: true },
+    });
+    const byId = new Map(users.map((u) => [u.id, u]));
+
+    return (top as unknown as Array<{ userId: number; [k: string]: unknown }>)
+      .map((t) => {
+        const u = byId.get(t.userId as number);
+        if (!u) return null;
+        return { username: u.username, look: u.look, value: Number(t[field] ?? 0) };
+      })
+      .filter((r): r is Row => r !== null);
+  } catch {
+    return [];
+  }
+}
+
+const SETTINGS_FIELD: Record<"achievement" | "respects" | "onlinetime", "achievementScore" | "respectsReceived" | "onlineTime"> = {
+  achievement: "achievementScore",
+  respects: "respectsReceived",
+  onlinetime: "onlineTime",
+};
+
 export default async function LeaderboardPage({
   searchParams,
 }: {
@@ -80,10 +128,14 @@ export default async function LeaderboardPage({
   const [rows, imagerBase] = await Promise.all([
     active === "credits"
       ? loadCreditsRows()
-      : loadCurrencyRows(CURRENCY_TYPE[active as Exclude<TabKey, "credits">]),
+      : active === "diamonds" || active === "duckets"
+        ? loadCurrencyRows(CURRENCY_TYPE[active])
+        : loadSettingsRows(SETTINGS_FIELD[active as keyof typeof SETTINGS_FIELD]),
     siteSettings.get("habbo_imaging_url", "https://www.habbo.com/habbo-imaging/avatarimage"),
   ]);
 
+  const valueOnly = active === "achievement" || active === "respects" || active === "onlinetime";
+
   return (
     <main style={{ display: "grid", gap: "1.5rem" }}>
       <ContentCard
@@ -92,7 +144,7 @@ export default async function LeaderboardPage({
         subtitle={t("subtitle", { currency: t(`tab_${active}`).toLowerCase() })}
       />
 
-      <div className="nav" style={{ gap: "0.5rem" }}>
+      <div className="nav" style={{ gap: "0.5rem", flexWrap: "wrap" }}>
         {TABS.map((t2) => (
           <Link
             key={t2.key}
@@ -144,10 +196,14 @@ export default async function LeaderboardPage({
                       </Link>
                     </td>
                     <td style={{ textAlign: "right" }}>
-                      <span className="currency" style={{ display: "inline-flex" }}>
-                        <span className={`coin ${activeTab.coin}`} />
-                        {row.value.toLocaleString()}
-                      </span>
+                      {valueOnly ? (
+                        <strong>{formatValue(active, row.value)}</strong>
+                      ) : (
+                        <span className="currency" style={{ display: "inline-flex" }}>
+                          <span className={`coin ${activeTab.coin}`} />
+                          {row.value.toLocaleString()}
+                        </span>
+                      )}
                     </td>
                   </tr>
                 );