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

2026-07-01 15:59:02 +02:00
1 parent 16096eff0f
commit d6ccc250f6
@@ -1,81 +1,113 @@
 "use client";

-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
-import { ContentCard, EmptyState } from "@/components/public/ui";
+import { useTranslations } from "next-intl";
+import { ContentCard, EmptyState, SkeletonCard } from "@/components/public/ui";

 export default function ClientPage() {
+  const t = useTranslations("pages.client");
  const [ticket, setTicket] = useState<string | null>(null);
+  const [clientUrl, setClientUrl] = useState("/nitro-client/");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
-  const [hotelName, setHotelName] = useState("Hubbly");
+  const [errorType, setErrorType] = useState<"auth" | "generic" | null>(null);
+  const [hotelName, setHotelName] = useState("");
  const [launched, setLaunched] = useState(false);
+  const fetchedRef = useRef(false);

  useEffect(() => {
+    if (fetchedRef.current) return;
+    fetchedRef.current = true;
+
    async function fetchTicket() {
      try {
        const res = await fetch("/api/client/sso");
-        if (!res.ok) throw new Error("Failed to get SSO ticket");
+        if (res.status === 401) {
+          setErrorType("auth");
+          setError(t("errors.unauthorized"));
+          return;
+        }
+        if (!res.ok) throw new Error("SSO fetch failed");
        const data = await res.json();
        setTicket(data.ticket);
        setHotelName(data.hotelName);
+        if (data.clientUrl) setClientUrl(data.clientUrl);
      } catch (e) {
-        setError("Could not generate login ticket");
+        setErrorType("generic");
+        setError(t("errors.generic"));
      } finally {
        setLoading(false);
      }
    }
    fetchTicket();
-  }, []);
+  }, [t]);
+
+  const openClient = useCallback((tk: string) => {
+    const sep = clientUrl.includes("?") ? "&" : "?";
+    const fullUrl = `${clientUrl}${sep}sso=${encodeURIComponent(tk)}`;
+    window.open(fullUrl, "_blank", "noopener,noreferrer");
+  }, [clientUrl]);

  useEffect(() => {
    if (ticket && !launched) {
      setLaunched(true);
-      const clientUrl = `/nitro-client/?sso=${encodeURIComponent(ticket)}`;
-      const fullUrl = `${window.location.origin}${clientUrl}`;
-      window.open(fullUrl, "_blank", "noopener,noreferrer");
+      openClient(ticket);
    }
-  }, [ticket, launched]);
+  }, [ticket, launched, openClient]);

+  // ── Loading ──
  if (loading) {
    return (
-      <div className="flex min-h-screen flex-col" style={{ backgroundColor: "var(--color-background)" }}>
-        <header
-          className="flex h-14 items-center justify-between border-b px-4"
-          style={{ backgroundColor: "var(--color-navbar)", borderColor: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)" }}
-        >
-          <div className="flex items-center gap-4">
-            <span className="font-bold text-lg">{hotelName}</span>
-            <span className="text-sm text-gray-500">Loading client…</span>
-          </div>
-        </header>
-        <main className="flex-1 flex items-center justify-center">
-          <ContentCard icon="⏳" title="Loading" subtitle="Generating SSO ticket…" />
-        </main>
+      <div className="flex min-h-screen flex-col items-center justify-center" style={{ backgroundColor: "var(--color-background)", padding: "2rem" }}>
+        <SkeletonCard lines={2} />
      </div>
    );
  }

-  if (error || !ticket) {
+  // ── Error (auth) ──
+  if (errorType === "auth") {
    return (
      <div className="flex min-h-screen flex-col" style={{ backgroundColor: "var(--color-background)" }}>
        <header
-          className="flex h-14 items-center justify-between border-b px-4"
+          className="flex h-14 items-center border-b px-4"
          style={{ backgroundColor: "var(--color-navbar)", borderColor: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)" }}
        >
-          <div className="flex items-center gap-4">
-            <span className="font-bold text-lg">{hotelName}</span>
-          </div>
+          <span className="font-bold text-lg">{hotelName || "Atom"}</span>
        </header>
        <main className="flex-1 flex items-center justify-center">
-          <ContentCard icon="⚠" title="Error" subtitle={error ?? "No SSO ticket"}>
-            <EmptyState icon="⚠">{error ?? "Could not generate SSO ticket"}</EmptyState>
+          <ContentCard icon="🔒" title={t("title")} subtitle={t("errors.unauthorized")}>
+            <div style={{ textAlign: "center", marginTop: "1rem" }}>
+              <Link href="/login" className="btn btn-primary">
+                {t("errors.loginRedirect")}
+              </Link>
+            </div>
          </ContentCard>
        </main>
      </div>
    );
  }

+  // ── Error (generic) ──
+  if (errorType === "generic" || !ticket) {
+    return (
+      <div className="flex min-h-screen flex-col" style={{ backgroundColor: "var(--color-background)" }}>
+        <header
+          className="flex h-14 items-center border-b px-4"
+          style={{ backgroundColor: "var(--color-navbar)", borderColor: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)" }}
+        >
+          <span className="font-bold text-lg">{hotelName || "Atom"}</span>
+        </header>
+        <main className="flex-1 flex items-center justify-center">
+          <ContentCard icon="⚠" title={t("title")} subtitle={error ?? t("errors.generic")}>
+            <EmptyState icon="⚠">{error ?? t("errors.generic")}</EmptyState>
+          </ContentCard>
+        </main>
+      </div>
+    );
+  }
+
+  // ── Success (client launched) ──
  return (
    <div className="flex min-h-screen flex-col" style={{ backgroundColor: "var(--color-background)" }}>
      <header
@@ -88,19 +120,25 @@ export default function ClientPage() {
      >
        <div className="flex items-center gap-4">
          <span className="font-bold text-lg">{hotelName}</span>
-          <span className="text-sm" style={{ color: "var(--color-navbar-text)" }}>Connected</span>
+          <span className="text-sm" style={{ color: "var(--color-navbar-text)" }}>
+            {t("connected")}
+          </span>
        </div>
      </header>
      <main className="flex-1 flex items-center justify-center" style={{ backgroundColor: "var(--color-background)" }}>
        <ContentCard>
          <div style={{ textAlign: "center" }}>
            <h1 style={{ fontSize: "1.75rem", fontWeight: 700, marginBottom: "0.5rem" }}>
-              Welcome to {hotelName}
+              {t("welcome", { hotel: hotelName })}
            </h1>
            <p style={{ color: "var(--color-text-muted)", marginBottom: "2rem" }}>
-              Opening the client in a new tab… If it doesn't open,{" "}
-              <a href={`/nitro-client/?sso=${encodeURIComponent(ticket)}`} target="_blank" rel="noopener noreferrer">
-                click here
+              {t("openingClient")} {t("fallbackLink")}{" "}
+              <a
+                href={`${clientUrl}${clientUrl.includes("?") ? "&" : "?"}sso=${encodeURIComponent(ticket)}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {t("fallbackClick")}
              </a>.
            </p>
          </div>
@@ -108,4 +146,4 @@ export default function ClientPage() {
      </main>
    </div>
  );
-}
+}
@@ -110,16 +110,36 @@ body {
 /* ── Atom theme components ────────────────────────────────── */
@layer components {
  .nav-item {
-    @apply flex h-auto md:h-[60px] items-center text-[14px] font-semibold uppercase transition duration-200 ease-in-out md:border-b-4! md:border-transparent! md:hover:border-b-[#eeb425]!;
-    color: var(--color-navbar-text, #1e293b);
+    @apply flex h-auto md:h-[54px] items-center text-[13px] font-bold transition-all duration-150 ease-in-out px-3 md:px-4 relative;
+    color: var(--color-navbar-text, #64748b);
+    letter-spacing: 0.03em;
+    text-transform: uppercase;
+  }
+  .nav-item::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%) scaleX(0);
+    width: 70%;
+    height: 3px;
+    border-radius: 3px 3px 0 0;
+    background-color: var(--color-primary, #eeb425);
+    transition: transform 0.2s ease-in-out;
+  }
+  .nav-item:hover::after {
+    transform: translateX(-50%) scaleX(1);
+  }
+  .nav-item:hover {
+    color: var(--color-primary, #eeb425);
  }
  .dropdown-item {
-    @apply block py-2 px-4 font-semibold transition duration-200;
+    @apply block py-2 px-4 text-sm font-semibold transition-all duration-100 rounded-lg mx-1;
    color: var(--color-text);
  }
  .dropdown-item:hover {
-    background-color: var(--color-primary, #eeb425);
-    color: var(--button-text-color, #1a1a2e);
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary, #eeb425);
  }
 }

@@ -164,10 +184,14 @@ body {
 }

 .site-bg {
-  background: url("/assets/images/background-light.jpg") no-repeat fixed right bottom;
+  background:
+    linear-gradient(to bottom, rgba(255,255,255,0.88), rgba(248,250,252,0.95)),
+    url("/assets/images/background-light.jpg") no-repeat fixed center / cover;
 }
 .app.dark .site-bg {
-  background: url("/assets/images/background-dark.jpg") no-repeat fixed right bottom;
+  background:
+    linear-gradient(to bottom, rgba(15,17,23,0.92), rgba(15,17,23,0.97)),
+    url("/assets/images/background-dark.jpg") no-repeat fixed center / cover;
 }

 .article-body {
@@ -858,3 +882,53 @@ td {
  background: color-mix(in srgb, #f97316 20%, transparent);
  border-color: #f97316;
 }
+
+/* ── Radio sidebar ──────────────────────────────────────────── */
+.radio-layout {
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-start;
+}
+.radio-sidebar {
+  flex: none;
+  width: 200px;
+  position: sticky;
+  top: 5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.radio-sidebar-link:hover {
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+  text-decoration: none;
+}
+@media (max-width: 48rem) {
+  .radio-layout {
+    flex-direction: column;
+  }
+  .radio-sidebar {
+    position: static;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent);
+    overflow-x: auto;
+  }
+  .radio-sidebar-head {
+    display: none;
+  }
+  .radio-sidebar-link {
+    font-size: 0.82rem;
+    padding: 0.35rem 0.6rem;
+    white-space: nowrap;
+  }
+}
+
+/* ── Skeleton shimmer animation ─────────────────────────────── */
+@keyframes shimmer {
+  0% { opacity: 0.6; }
+  50% { opacity: 1; }
+  100% { opacity: 0.6; }
+}
@@ -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>
                );
@@ -0,0 +1,82 @@
+import { getTranslations } from "next-intl/server";
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+const RADIO_SIDEBAR_LINKS = [
+  { key: "schedule", href: "/radio/schedule", icon: "🗓️" },
+  { key: "shouts", href: "/radio/shouts", icon: "📣" },
+  { key: "requests", href: "/radio/requests", icon: "🎵" },
+  { key: "apply", href: "/radio/apply", icon: "🎤" },
+  { key: "leaderboard", href: "/radio/leaderboard", icon: "🏆" },
+] as const;
+
+const SIDEBAR_KEYS = RADIO_SIDEBAR_LINKS.map((l) => l.key);
+
+export default async function RadioLayout({ children }: { children: ReactNode }) {
+  const t = await getTranslations("pages.radio");
+
+  return (
+    <div className="radio-layout" style={{ display: "flex", gap: "1.5rem", alignItems: "flex-start" }}>
+      <aside
+        className="radio-sidebar"
+        style={{
+          flex: "none",
+          width: "200px",
+          position: "sticky",
+          top: "5rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.25rem",
+        }}
+      >
+        <Link
+          href="/radio"
+          className="radio-sidebar-head"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: "0.5rem",
+            padding: "0.55rem 0.75rem",
+            fontWeight: 700,
+            fontSize: "1rem",
+            color: "var(--color-text)",
+            textDecoration: "none",
+            borderBottom: "1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent)",
+            marginBottom: "0.25rem",
+          }}
+        >
+          <span aria-hidden style={{ fontSize: "1.2rem" }}>📻</span>
+          Radio
+        </Link>
+        {RADIO_SIDEBAR_LINKS.map((link) => (
+          <Link
+            key={link.href}
+            href={link.href}
+            className="radio-sidebar-link"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              padding: "0.5rem 0.75rem",
+              borderRadius: "8px",
+              color: "var(--color-text)",
+              textDecoration: "none",
+              fontSize: "0.9rem",
+              transition: "background 0.15s",
+            }}
+          >
+            <span aria-hidden style={{ flex: "none", fontSize: "1rem" }}>{link.icon}</span>
+            {link.key === "schedule" ? t("linkSchedule") :
+             link.key === "shouts" ? t("linkShouts") :
+             link.key === "requests" ? t("linkRequests") :
+             link.key === "apply" ? t("linkApply") :
+             t("linkLeaderboard")}
+          </Link>
+        ))}
+      </aside>
+      <section style={{ flex: 1, minWidth: 0 }}>
+        {children}
+      </section>
+    </div>
+  );
+}
@@ -0,0 +1,143 @@
+import { getTranslations } from "next-intl/server";
+import { ContentCard, EmptyState } from "@/components/public/ui";
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import { submitRequest } from "@/actions/radio-requests";
+
+export const dynamic = "force-dynamic";
+
+function formatDate(d: Date | null | undefined): string {
+  return d ? d.toISOString().slice(0, 16).replace("T", " ") : "";
+}
+
+const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] as const;
+
+function formatDay(d: Date): string {
+  return DAYS[d.getUTCDay()] ?? "";
+}
+
+export default async function RadioRequestsPage() {
+  const t = await getTranslations("pages.radioRequests");
+  const genericT = await getTranslations("pages.radio");
+
+  const [requests, session] = await Promise.all([
+    prisma.radioSongRequests
+      .findMany({
+        orderBy: { createdAt: "desc" },
+        take: 50,
+      })
+      .catch(() => []),
+    auth(),
+  ]);
+
+  const isLoggedIn = Boolean(session?.user?.id);
+
+  const userIds = Array.from(new Set(requests.map((r) => Number(r.userId))));
+  const users = userIds.length
+    ? await prisma.user
+        .findMany({
+          where: { id: { in: userIds } },
+          select: { id: true, username: true },
+        })
+        .catch(() => [])
+    : [];
+  const userById = new Map(users.map((u) => [u.id, u.username]));
+
+  return (
+    <>
+      <ContentCard
+        icon="🎵"
+        title={genericT("linkRequests")}
+        subtitle={genericT("linkRequestsText")}
+      />
+
+      {isLoggedIn ? (
+        <ContentCard icon="✍️" title={t("formTitle")} subtitle={t("formSubtitle")}>
+          <form action={submitRequest}>
+            <div className="card-grid sm-2">
+              <div>
+                <label htmlFor="songTitle" className="muted">{t("songLabel")}</label>
+                <input
+                  id="songTitle"
+                  name="songTitle"
+                  type="text"
+                  required
+                  maxLength={255}
+                  placeholder={t("songPlaceholder")}
+                  style={{ width: "100%", marginTop: "0.3rem" }}
+                />
+              </div>
+              <div>
+                <label htmlFor="artist" className="muted">{t("artistLabel")}</label>
+                <input
+                  id="artist"
+                  name="artist"
+                  type="text"
+                  maxLength={255}
+                  placeholder={t("artistPlaceholder")}
+                  style={{ width: "100%", marginTop: "0.3rem" }}
+                />
+              </div>
+            </div>
+            <button type="submit" className="btn btn-primary" style={{ marginTop: "1rem" }}>
+              {t("submitButton")}
+            </button>
+          </form>
+        </ContentCard>
+      ) : (
+        <ContentCard padded>
+          <EmptyState icon="🔒">{t("loginToRequest")}</EmptyState>
+        </ContentCard>
+      )}
+
+      <ContentCard
+        icon="📋"
+        title={t("latestTitle")}
+        subtitle={t("latestSubtitle")}
+        padded={requests.length === 0}
+      >
+        {requests.length === 0 ? (
+          <EmptyState icon="🎵">{t("empty")}</EmptyState>
+        ) : (
+          <table>
+            <thead>
+              <tr>
+                <th>{t("colSong")}</th>
+                <th>{t("colArtist")}</th>
+                <th>{t("colRequester")}</th>
+                <th>{t("colDate")}</th>
+                <th>{t("colStatus")}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {requests.map((r) => {
+                const requester = userById.get(Number(r.userId));
+                const isPlayed = r.isPlayed;
+                const isApproved = r.isApproved;
+                let status = t("statusPending");
+                if (isPlayed) status = t("statusPlayed");
+                else if (isApproved) status = t("statusApproved");
+
+                return (
+                  <tr key={String(r.id)}>
+                    <td>{r.songTitle || <span className="muted">—</span>}</td>
+                    <td>{r.artist || <span className="muted">—</span>}</td>
+                    <td>
+                      {requester ? (
+                        <span>{requester}</span>
+                      ) : (
+                        <span className="muted">#{String(r.userId)}</span>
+                      )}
+                    </td>
+                    <td className="muted">{r.submittedAt ? formatDate(r.submittedAt) : "—"}</td>
+                    <td>{status}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </ContentCard>
+    </>
+  );
+}