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

prisma/schema.prisma

@@ -2139,9 +2139,17 @@ model RadioListenerPoints {
 }
 
 model RadioSongRequests {
-  id        BigInt    @id @default(autoincrement()) @db.UnsignedBigInt
-  createdAt DateTime? @map("created_at") @db.Timestamp(0)
-  updatedAt DateTime? @map("updated_at") @db.Timestamp(0)
+  id         BigInt    @id @default(autoincrement()) @db.UnsignedBigInt
+  userId     BigInt?   @map("user_id") @db.UnsignedBigInt
+  songTitle  String?   @map("song_title") @db.VarChar(255)
+  artist     String?   @map("artist") @db.VarChar(255)
+  isApproved Boolean   @default(false) @map("is_approved")
+  isPlayed   Boolean   @default(false) @map("is_played")
+  votes      Int       @default(0)
+  submittedAt DateTime? @map("submitted_at") @db.Timestamp(0)
+  playedAt   DateTime? @map("played_at") @db.Timestamp(0)
+  createdAt  DateTime? @map("created_at") @db.Timestamp(0)
+  updatedAt  DateTime? @map("updated_at") @db.Timestamp(0)
 
   @@map("radio_song_requests")
 }

src/actions/radio-requests.ts

@@ -0,0 +1,36 @@
+"use server";
+
+import { revalidatePath } from "next/cache";
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+
+const SONG_MAX = 255;
+const ARTIST_MAX = 255;
+
+export async function submitRequest(formData: FormData): Promise<void> {
+  const session = await auth();
+  const userId = Number(session?.user?.id);
+  if (!Number.isInteger(userId) || userId <= 0) return;
+
+  const songTitle = String(formData.get("songTitle") ?? "").trim().slice(0, SONG_MAX);
+  const artist = String(formData.get("artist") ?? "").trim().slice(0, ARTIST_MAX);
+  if (!songTitle && !artist) return;
+
+  const now = new Date();
+  try {
+    await prisma.radioSongRequests.create({
+      data: {
+        userId: BigInt(userId),
+        songTitle: songTitle || null,
+        artist: artist || null,
+        submittedAt: now,
+        createdAt: now,
+        updatedAt: now,
+      },
+    });
+  } catch {
+    return;
+  }
+
+  revalidatePath("/radio/requests");
+}

src/app/client/page.tsx

@@ -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>
   );
-}
+}

src/app/globals.css

@@ -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; }
+}

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

src/app/radio/layout.tsx

@@ -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>
+  );
+}

src/app/radio/requests/page.tsx

@@ -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>
+    </>
+  );
+}

src/components/language-switcher.tsx

@@ -58,15 +58,15 @@ export function LanguageSwitcher() {
 
       {open && (
         <div
-          className="absolute right-0 mt-1 min-w-[160px] rounded-md shadow-lg z-50 py-1"
-          style={{ backgroundColor: "var(--color-dropdown)" }}
+          className="absolute right-0 mt-1 min-w-[160px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
+          style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
         >
           {LOCALES.map((l) => (
             <button
               key={l.code}
               type="button"
               onClick={() => switchLocale(l.code)}
-              className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-semibold transition-colors ${
+              className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-medium transition-all duration-100 rounded-lg mx-1 ${
                 l.code === locale ? "opacity-100" : "opacity-70 hover:opacity-100"
               }`}
               style={{
@@ -74,6 +74,15 @@ export function LanguageSwitcher() {
                 background: "none",
                 border: "none",
                 cursor: "pointer",
+                width: "calc(100% - 8px)",
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--color-primary) 10%, transparent)";
+                e.currentTarget.style.color = "var(--color-primary)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = "transparent";
+                e.currentTarget.style.color = "var(--color-text)";
               }}
             >
               <img

src/components/mobile-nav.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useState } from "react";
+
+export function MobileNav({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg transition-colors duration-150"
+        style={{ color: "var(--color-navbar-text)" }}
+        aria-label={open ? "Sluit menu" : "Open menu"}
+      >
+        <svg className="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          {open ? (
+            <>
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </>
+          ) : (
+            <>
+              <line x1="3" y1="6" x2="21" y2="6" />
+              <line x1="3" y1="12" x2="21" y2="12" />
+              <line x1="3" y1="18" x2="21" y2="18" />
+            </>
+          )}
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          className="fixed inset-0 z-30 md:hidden"
+          onClick={() => setOpen(false)}
+          style={{ backgroundColor: "rgba(0,0,0,0.4)" }}
+        />
+      )}
+
+      <div
+        className={`${open ? "max-h-[80vh] opacity-100" : "max-h-0 opacity-0 pointer-events-none md:pointer-events-auto"} overflow-hidden transition-all duration-300 ease-in-out md:!max-h-none md:!opacity-100 md:!overflow-visible md:flex md:items-center md:gap-x-1 w-full md:w-auto`}
+      >
+        <div
+          className="flex flex-col md:flex-row md:items-center gap-y-0.5 p-3 md:p-0 rounded-xl md:rounded-none border md:border-0 shadow-lg md:shadow-none mt-2 md:mt-0"
+          style={{
+            backgroundColor: "var(--color-navbar)",
+            borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+          }}
+        >
+          {children}
+        </div>
+      </div>
+    </>
+  );
+}

src/components/navbar-color-picker.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const COLORS = [
+  { name: "Wit", value: "#ffffff", text: "#1e293b" },
+  { name: "Zwart", value: "#0f172a", text: "#f8fafc" },
+  { name: "Donker", value: "#1e293b", text: "#f8fafc" },
+  { name: "Grijs", value: "#f1f5f9", text: "#1e293b" },
+  { name: "Amber", value: "#f59e0b", text: "#1e293b" },
+  { name: "Goud", value: "#eab308", text: "#1e293b" },
+  { name: "Oranje", value: "#ea580c", text: "#ffffff" },
+  { name: "Rood", value: "#ef4444", text: "#ffffff" },
+  { name: "Roze", value: "#ec4899", text: "#ffffff" },
+  { name: "Paars", value: "#8b5cf6", text: "#ffffff" },
+  { name: "Indigo", value: "#6366f1", text: "#ffffff" },
+  { name: "Blauw", value: "#3b82f6", text: "#ffffff" },
+  { name: "Cyaan", value: "#06b6d4", text: "#ffffff" },
+  { name: "Groen", value: "#22c55e", text: "#1e293b" },
+  { name: "Olijf", value: "#84cc16", text: "#1e293b" },
+];
+
+export function NavbarColorPicker() {
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState(() => {
+    if (typeof document === "undefined") return 0;
+    const current = getComputedStyle(document.documentElement).getPropertyValue("--color-navbar").trim();
+    const idx = COLORS.findIndex((c) => c.value === current);
+    return idx >= 0 ? idx : 0;
+  });
+
+  function apply(index: number) {
+    const c = COLORS[index];
+    if (!c) return;
+    document.documentElement.style.setProperty("--color-navbar", c.value);
+    document.documentElement.style.setProperty("--color-navbar-text", c.text);
+    try {
+      localStorage.setItem("navbarColor", c.value);
+      localStorage.setItem("navbarTextColor", c.text);
+    } catch { }
+    setActive(index);
+    setOpen(false);
+  }
+
+  useEffect(() => {
+    const saved = localStorage.getItem("navbarColor");
+    const savedText = localStorage.getItem("navbarTextColor");
+    if (saved && savedText) {
+      document.documentElement.style.setProperty("--color-navbar", saved);
+      document.documentElement.style.setProperty("--color-navbar-text", savedText);
+      const idx = COLORS.findIndex((c) => c.value === saved);
+      if (idx >= 0) setActive(idx);
+    }
+  }, []);
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="nav-item cursor-pointer px-2"
+        aria-label="Navbar kleur"
+        title="Navbar kleur"
+      >
+        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="13.5" cy="6.5" r="0.5" fill="currentColor" />
+          <circle cx="17.5" cy="10.5" r="0.5" fill="currentColor" />
+          <circle cx="8.5" cy="7.5" r="0.5" fill="currentColor" />
+          <circle cx="6.5" cy="12.5" r="0.5" fill="currentColor" />
+          <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.93 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-1 0-.83.67-1.5 1.5-1.5H16c3.31 0 6-2.69 6-6 0-5.5-4.5-10-10-10z" />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          className="absolute right-0 mt-1 min-w-[200px] rounded-xl shadow-xl z-50 py-3 px-2 border backdrop-blur-md"
+          style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
+        >
+          <div className="text-xs font-semibold uppercase tracking-wider mb-2 px-2" style={{ color: "var(--color-text-muted)" }}>Navbar kleur</div>
+          <div className="grid grid-cols-5 gap-1.5">
+            {COLORS.map((c, i) => (
+              <button
+                key={c.name}
+                type="button"
+                onClick={() => apply(i)}
+                className="flex flex-col items-center gap-1 p-1.5 rounded-lg transition-all duration-100"
+                title={c.name}
+                style={{
+                  background: i === active ? "color-mix(in srgb, var(--color-primary) 12%, transparent)" : "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                }}
+                onMouseEnter={(e) => {
+                  if (i !== active) e.currentTarget.style.backgroundColor = "color-mix(in srgb, var(--color-text-muted) 8%, transparent)";
+                }}
+                onMouseLeave={(e) => {
+                  if (i !== active) e.currentTarget.style.backgroundColor = "transparent";
+                }}
+              >
+                <span className="block w-6 h-6 rounded-full border-2 shrink-0" style={{ backgroundColor: c.value, borderColor: i === active ? "var(--color-primary)" : "color-mix(in srgb, var(--color-text-muted) 20%, transparent)" }} />
+                <span className="text-[10px] font-medium leading-tight text-center" style={{ color: "var(--color-text-muted)" }}>{c.name}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/navigation.tsx

@@ -2,6 +2,8 @@ import { getTranslations } from "next-intl/server";
 import Link from "next/link";
 import { auth } from "@/lib/auth";
 import { LanguageSwitcher } from "@/components/language-switcher";
+import { MobileNav } from "@/components/mobile-nav";
+import { NavbarColorPicker } from "@/components/navbar-color-picker";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 
 export async function Navigation() {
@@ -10,85 +12,117 @@ export async function Navigation() {
   const isStaff = (session?.user?.rank ?? 0) >= 7;
 
   return (
-    <nav className="relative shadow-sm" style={{ backgroundColor: "var(--color-navbar)" }}>
-      <div className="mx-auto flex min-h-[60px] max-w-7xl flex-wrap items-center px-4 gap-x-1 md:gap-x-2">
-        <Link href="/" className="nav-item">
-          <img src="/assets/images/icons/navigation/me.png" alt="" className="mr-1 hidden w-5 h-5 lg:inline-block" />
-          {t("home")}
-        </Link>
+    <nav className="sticky top-0 z-40 shadow-sm" style={{ backgroundColor: "var(--color-navbar)" }}>
+      <div className="relative mx-auto flex min-h-[56px] max-w-7xl items-center px-4 md:px-6 gap-x-1">
+        <div className="absolute bottom-0 left-0 right-0 h-[3px]" style={{ backgroundColor: "var(--color-primary, #eeb425)" }} />
+      
+        <div className="flex items-center gap-x-1 md:gap-x-1 flex-1 md:flex-none">
+          <Link href="/" className="nav-item shrink-0">
+            <img src="/assets/images/icons/navigation/me.png" alt="" className="w-5 h-5 mr-1.5" />
+            <span className="hidden sm:inline">{t("home")}</span>
+            <span className="sm:hidden">{t("home")}</span>
+          </Link>
+        </div>
 
-        <details className="relative">
-          <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
-            <img src="/assets/images/icons/navigation/community.png" alt="" className="mr-1 hidden w-5 h-5 lg:inline-block" />
-            {t("community")}
-          </summary>
-          <div
-            className="absolute left-0 mt-1 min-w-[190px] rounded-md shadow-lg z-50 py-1"
-            style={{ backgroundColor: "var(--color-dropdown)" }}
-          >
-            <Link href="/news" className="dropdown-item">{t("articles")}</Link>
-            <Link href="/photos" className="dropdown-item">{t("photos")}</Link>
-            <Link href="/staff" className="dropdown-item">{t("staff")}</Link>
-            <Link href="/rankings" className="dropdown-item">{t("rankings")}</Link>
-            <Link href="/guilds" className="dropdown-item">{t("guilds")}</Link>
+        <MobileNav>
+          <Link href="/" className="nav-item md:hidden">
+            <img src="/assets/images/icons/navigation/me.png" alt="" className="w-5 h-5 mr-1.5" />
+            {t("home")}
+          </Link>
+
+          <details className="relative group md:flex">
+            <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
+              <img src="/assets/images/icons/navigation/community.png" alt="" className="w-5 h-5 mr-1.5" />
+              {t("community")}
+              <svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+            </summary>
+              <div
+                className="md:absolute static left-0 mt-1.5 md:min-w-[200px] rounded-xl md:shadow-xl z-50 py-2 border backdrop-blur-md md:ml-0 ml-4"
+                style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
+              >
+                <Link href="/news" className="dropdown-item">{t("articles")}</Link>
+                <Link href="/photos" className="dropdown-item">{t("photos")}</Link>
+                <Link href="/staff" className="dropdown-item">{t("staff")}</Link>
+                <Link href="/rankings" className="dropdown-item">{t("rankings")}</Link>
+                <Link href="/guilds" className="dropdown-item">{t("guilds")}</Link>
+              </div>
+          </details>
+
+          <details className="relative group md:flex">
+            <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
+              <img src="/assets/images/icons/navigation/shop.png" alt="" className="w-5 h-5 mr-1.5" />
+              {t("shop")}
+              <svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+            </summary>
+            <div
+              className="md:absolute left-0 mt-1.5 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
+              style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
+            >
+              <Link href="/shop" className="dropdown-item">{t("shop")}</Link>
+              <Link href="/marketplace" className="dropdown-item">{t("market")}</Link>
+              <Link href="/rares" className="dropdown-item">{t("rareValues")}</Link>
+            </div>
+          </details>
+
+          <Link href="/leaderboard" className="nav-item">
+            <img src="/assets/images/icons/navigation/leaderboards.png" alt="" className="w-5 h-5 mr-1.5" />
+            {t("leaderboards")}
+          </Link>
+
+          <Link href="/radio" className="nav-item">
+            <img src="/assets/images/icons/navigation/bb.png" alt="" className="w-5 h-5 mr-1.5" />
+            {t("radio")}
+          </Link>
+
+          <details className="relative group md:flex">
+            <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
+              <img src="/assets/images/icons/navigation/rules.gif" alt="" className="w-5 h-5 mr-1.5" />
+              {t("assistance")}
+              <svg className="ml-auto md:ml-1 w-3 h-3 transition-transform duration-200 group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /></svg>
+            </summary>
+            <div
+              className="md:absolute left-0 mt-1.5 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
+              style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
+            >
+              <Link href="/help" className="dropdown-item">{t("helpCenter")}</Link>
+              {session?.user ? (
+                <Link href="/help/tickets" className="dropdown-item">{t("myTickets")}</Link>
+              ) : null}
+              <Link href="/badges" className="dropdown-item">{t("badges")}</Link>
+              <Link href="/draw-badge" className="dropdown-item">{t("drawBadge")}</Link>
+            </div>
+          </details>
+
+          {session?.user ? (
+            <>
+              <Link href="/friends" className="nav-item">
+                <img src="/assets/images/icons/navigation/goody.png" alt="" className="w-5 h-5 mr-1.5" />
+                {t("friends")}
+              </Link>
+              <Link href="/messages" className="nav-item">
+                <img src="/assets/images/icons/navigation/bb.png" alt="" className="w-5 h-5 mr-1.5" />
+                {t("messages")}
+              </Link>
+            </>
+          ) : null}
+
+          {isStaff ? (
+            <Link href="/admin" className="nav-item">
+              <img src="/assets/images/icons/navigation/home.png" alt="" className="w-5 h-5 mr-1.5" />
+              {t("admin")}
+            </Link>
+          ) : null}
+
+          <div className="flex items-center gap-x-1 pt-2 mt-2 border-t md:hidden" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}>
+            <LanguageSwitcher />
+            <NavbarColorPicker />
+            <ThemeSwitcher />
           </div>
-        </details>
+        </MobileNav>
 
-        <details className="relative">
-          <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
-            <img src="/assets/images/icons/navigation/shop.png" alt="" className="mr-1 hidden w-5 h-5 lg:inline-block" />
-            {t("shop")}
-          </summary>
-          <div
-            className="absolute left-0 mt-1 min-w-[190px] rounded-md shadow-lg z-50 py-1"
-            style={{ backgroundColor: "var(--color-dropdown)" }}
-          >
-            <Link href="/shop" className="dropdown-item">{t("shop")}</Link>
-            <Link href="/marketplace" className="dropdown-item">{t("market")}</Link>
-            <Link href="/rares" className="dropdown-item">{t("rareValues")}</Link>
-          </div>
-        </details>
-
-        <Link href="/leaderboard" className="nav-item">
-          <img src="/assets/images/icons/navigation/leaderboards.png" alt="" className="mr-1 hidden w-5 h-5 lg:inline-block" />
-          {t("leaderboards")}
-        </Link>
-
-        <Link href="/radio" className="nav-item">
-          {t("radio")}
-        </Link>
-
-        <details className="relative">
-          <summary className="nav-item list-none cursor-pointer [&::-webkit-details-marker]:hidden">
-            <img src="/assets/images/icons/navigation/rules.gif" alt="" className="mr-1 hidden w-5 h-5 lg:inline-block" />
-            {t("assistance")}
-          </summary>
-          <div
-            className="absolute left-0 mt-1 min-w-[190px] rounded-md shadow-lg z-50 py-1"
-            style={{ backgroundColor: "var(--color-dropdown)" }}
-          >
-            <Link href="/help" className="dropdown-item">{t("helpCenter")}</Link>
-            {session?.user ? (
-              <Link href="/help/tickets" className="dropdown-item">{t("myTickets")}</Link>
-            ) : null}
-            <Link href="/badges" className="dropdown-item">{t("badges")}</Link>
-            <Link href="/draw-badge" className="dropdown-item">{t("drawBadge")}</Link>
-          </div>
-        </details>
-
-        {session?.user ? (
-          <>
-            <Link href="/friends" className="nav-item">{t("friends")}</Link>
-            <Link href="/messages" className="nav-item">{t("messages")}</Link>
-          </>
-        ) : null}
-
-        {isStaff ? (
-          <Link href="/admin" className="nav-item">{t("admin")}</Link>
-        ) : null}
-
-        <div className="ml-auto flex items-center gap-x-2">
+        <div className="ml-auto flex items-center gap-x-1 hidden md:flex">
           <LanguageSwitcher />
+          <NavbarColorPicker />
           <ThemeSwitcher />
         </div>
       </div>

src/components/public/ui.tsx

@@ -101,3 +101,60 @@ export function RankBadge({ position }: { position: number }) {
     </span>
   );
 }
+
+/* ── Skeleton loaders ────────────────────────────────────────── */
+
+export function Skeleton({ className, style }: { className?: string; style?: React.CSSProperties }) {
+  return (
+    <div
+      className={className}
+      style={{
+        ...style,
+        backgroundColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+        borderRadius: "6px",
+        animation: "shimmer 1.5s ease-in-out infinite",
+      }}
+    />
+  );
+}
+
+export function SkeletonCard({ lines = 3 }: { lines?: number }) {
+  return (
+    <div className="content-card" style={{ padding: "1rem" }}>
+      <div className="content-card-head" style={{ margin: "-1rem -1rem 1rem" }}>
+        <Skeleton style={{ width: "44px", height: "44px", borderRadius: "999px" }} />
+        <div style={{ flex: 1, display: "grid", gap: "0.35rem" }}>
+          <Skeleton style={{ height: "16px", width: "60%" }} />
+          <Skeleton style={{ height: "12px", width: "40%" }} />
+        </div>
+      </div>
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton key={i} style={{ height: "12px", width: `${85 - i * 10}%`, marginBottom: "0.6rem" }} />
+      ))}
+    </div>
+  );
+}
+
+export function SkeletonTable({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="content-card" style={{ padding: "0.5rem 1rem 1rem" }}>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} style={{ display: "flex", alignItems: "center", gap: "0.75rem", padding: "0.6rem 0", borderTop: i > 0 ? "1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent)" : undefined }}>
+          {i === 0 ? (
+            <>
+              <Skeleton style={{ height: "12px", width: "30%" }} />
+              <Skeleton style={{ height: "12px", width: "20%" }} />
+              <Skeleton style={{ height: "12px", width: "25%", marginLeft: "auto" }} />
+            </>
+          ) : (
+            <>
+              <Skeleton style={{ width: "28px", height: "28px", borderRadius: "8px" }} />
+              <Skeleton style={{ height: "14px", width: "35%" }} />
+              <Skeleton style={{ height: "14px", width: "20%", marginLeft: "auto" }} />
+            </>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/theme-switcher.tsx

@@ -30,7 +30,7 @@ export function ThemeSwitcher() {
     <button
       type="button"
       onClick={toggle}
-      className="nav-item cursor-pointer"
+      className="nav-item cursor-pointer text-lg leading-none px-2"
       aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
       title={dark ? "Light mode" : "Dark mode"}
     >

src/components/top-header.tsx

@@ -67,8 +67,8 @@ export async function TopHeader() {
                 Administration
               </summary>
               <div
-                className="absolute right-0 mt-1 min-w-[180px] rounded-md shadow-lg z-50 py-1"
-                style={{ backgroundColor: "var(--color-dropdown)" }}
+                className="absolute right-0 mt-1 min-w-[180px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
+                style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
               >
                 <Link href="/admin" className="dropdown-item">
                   Admin panel
@@ -90,8 +90,8 @@ export async function TopHeader() {
               <span className="-ml-2 font-semibold">{session.user.name}</span>
             </summary>
             <div
-              className="absolute right-0 mt-1 min-w-[180px] rounded-md shadow-lg z-50 py-1"
-              style={{ backgroundColor: "var(--color-dropdown)" }}
+              className="absolute right-0 mt-1 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
+              style={{ backgroundColor: "color-mix(in srgb, var(--color-dropdown) 97%, transparent)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}
             >
               <Link href="/me" className="dropdown-item">
                 My dashboard
@@ -108,6 +108,7 @@ export async function TopHeader() {
               <Link href="/settings/sessions" className="dropdown-item">
                 Login activity
               </Link>
+              <div className="h-px my-1 mx-3" style={{ backgroundColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
               <form
                 action={async () => {
                   "use server";
@@ -116,10 +117,13 @@ export async function TopHeader() {
               >
                 <button
                   type="submit"
-                  className="dropdown-item w-full text-center"
+                  className="dropdown-item w-full text-center mx-1 rounded-lg"
                   style={{
-                    backgroundColor: "var(--button-danger-color)",
-                    color: "var(--button-danger-text-color)",
+                    backgroundColor: "color-mix(in srgb, var(--button-danger-color) 12%, transparent)",
+                    color: "var(--button-danger-color)",
+                    border: "none",
+                    cursor: "pointer",
+                    width: "calc(100% - 8px)",
                   }}
                 >
                   Logout

src/messages/de.json

@@ -57,6 +57,9 @@
       "tab_credits": "Credits",
       "tab_diamonds": "Diamanten",
       "tab_duckets": "Duckets",
+      "tab_achievement": "Errungenschaften",
+      "tab_respects": "Respekt",
+      "tab_onlinetime": "Online-Zeit",
       "emptyState": "Noch keine Ranglisten zu sehen.",
       "colAvatar": "Avatar",
       "colPlayer": "Spieler"

src/messages/en.json

@@ -57,6 +57,9 @@
       "tab_credits": "Credits",
       "tab_diamonds": "Diamonds",
       "tab_duckets": "Duckets",
+      "tab_achievement": "Achievements",
+      "tab_respects": "Respects",
+      "tab_onlinetime": "Online Time",
       "emptyState": "No rankings to show yet.",
       "colAvatar": "Avatar",
       "colPlayer": "Player"
@@ -472,6 +475,42 @@
       "colListener": "Listener",
       "colPoints": "Points"
     },
+    "radioRequests": {
+      "formTitle": "Submit a request",
+      "formSubtitle": "Ask the DJ to play your favourite track",
+      "songLabel": "Song",
+      "songPlaceholder": "Title of the song",
+      "artistLabel": "Artist",
+      "artistPlaceholder": "Name of the artist (optional)",
+      "submitButton": "Submit request",
+      "loginToRequest": "Log in to submit a request.",
+      "latestTitle": "Recent requests",
+      "latestSubtitle": "The most recently requested songs",
+      "empty": "No requests yet.",
+      "colSong": "Song",
+      "colArtist": "Artist",
+      "colRequester": "Requester",
+      "colDate": "Date",
+      "colStatus": "Status",
+      "statusPending": "Pending",
+      "statusApproved": "Approved",
+      "statusPlayed": "Played"
+    },
+    "client": {
+      "title": "Nitro client",
+      "loading": "Loading client…",
+      "generatingTicket": "Generating SSO ticket…",
+      "connected": "Connected",
+      "welcome": "Welcome to {hotel}",
+      "openingClient": "Opening the client in a new tab…",
+      "fallbackLink": "If it doesn't open,",
+      "fallbackClick": "click here",
+      "errors": {
+        "unauthorized": "You need to be logged in to open the client.",
+        "generic": "Could not generate SSO ticket",
+        "loginRedirect": "Log in"
+      }
+    },
     "radioApply": {
       "title": "Apply to be a Radio DJ",
       "subtitle": "Tell us about yourself and why you'd be a great fit for the airwaves",

src/messages/es.json

@@ -57,6 +57,9 @@
       "tab_credits": "Créditos",
       "tab_diamonds": "Diamantes",
       "tab_duckets": "Duckets",
+      "tab_achievement": "Logros",
+      "tab_respects": "Respetos",
+      "tab_onlinetime": "Tiempo en línea",
       "emptyState": "Aún no hay clasificaciones que mostrar.",
       "colAvatar": "Avatar",
       "colPlayer": "Jugador"

src/messages/fr.json

@@ -57,6 +57,9 @@
       "tab_credits": "Crédits",
       "tab_diamonds": "Diamants",
       "tab_duckets": "Duckets",
+      "tab_achievement": "Succès",
+      "tab_respects": "Respects",
+      "tab_onlinetime": "Temps en ligne",
       "emptyState": "Aucun classement à afficher pour le moment.",
       "colAvatar": "Avatar",
       "colPlayer": "Joueur"

src/messages/it.json

@@ -57,6 +57,9 @@
       "tab_credits": "Crediti",
       "tab_diamonds": "Diamanti",
       "tab_duckets": "Duckets",
+      "tab_achievement": "Trofei",
+      "tab_respects": "Rispetti",
+      "tab_onlinetime": "Tempo online",
       "emptyState": "Ancora nessuna classifica da mostrare.",
       "colAvatar": "Avatar",
       "colPlayer": "Giocatore"

src/messages/nl.json

@@ -57,6 +57,9 @@
       "tab_credits": "Credits",
       "tab_diamonds": "Diamanten",
       "tab_duckets": "Duckets",
+      "tab_achievement": "Prestaties",
+      "tab_respects": "Respect",
+      "tab_onlinetime": "Online tijd",
       "emptyState": "Nog geen klassementen om te tonen.",
       "colAvatar": "Avatar",
       "colPlayer": "Speler"
@@ -472,6 +475,42 @@
       "colListener": "Luisteraar",
       "colPoints": "Punten"
     },
+    "radioRequests": {
+      "formTitle": "Dien een verzoekje in",
+      "formSubtitle": "Vraag de DJ om jouw favoriete nummer te draaien",
+      "songLabel": "Nummer",
+      "songPlaceholder": "Titel van het nummer",
+      "artistLabel": "Artiest",
+      "artistPlaceholder": "Naam van de artiest (optioneel)",
+      "submitButton": "Verzoek indienen",
+      "loginToRequest": "Log in om een verzoekje in te dienen.",
+      "latestTitle": "Recente verzoekjes",
+      "latestSubtitle": "De meest recente aangevraagde nummers",
+      "empty": "Nog geen verzoekjes ingediend.",
+      "colSong": "Nummer",
+      "colArtist": "Artiest",
+      "colRequester": "Aanvrager",
+      "colDate": "Datum",
+      "colStatus": "Status",
+      "statusPending": "In afwachting",
+      "statusApproved": "Goedgekeurd",
+      "statusPlayed": "Gedraaid"
+    },
+    "client": {
+      "title": "Nitro client",
+      "loading": "Client laden…",
+      "generatingTicket": "SSO-ticket genereren…",
+      "connected": "Verbonden",
+      "welcome": "Welkom bij {hotel}",
+      "openingClient": "De client wordt geopend in een nieuw tabblad…",
+      "fallbackLink": "Als het niet opent,",
+      "fallbackClick": "klik hier",
+      "errors": {
+        "unauthorized": "Je moet ingelogd zijn om de client te openen.",
+        "generic": "Kon geen SSO-ticket genereren",
+        "loginRedirect": "Inloggen"
+      }
+    },
     "radioApply": {
       "title": "Solliciteer als Radio DJ",
       "subtitle": "Vertel ons over jezelf en waarom je een geweldige aanwinst zou zijn voor de radio",