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
+  id         BigInt    @id @default(autoincrement()) @db.UnsignedBigInt
-  createdAt DateTime? @map("created_at") @db.Timestamp(0)
+  userId     BigInt?   @map("user_id") @db.UnsignedBigInt
-  updatedAt DateTime? @map("updated_at") @db.Timestamp(0)
+  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/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/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"
+          className="absolute right-0 mt-1 min-w-[160px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
-          style={{ backgroundColor: "var(--color-dropdown)" }}
+          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/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"
+                className="absolute right-0 mt-1 min-w-[180px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
-                style={{ backgroundColor: "var(--color-dropdown)" }}
+                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"
+              className="absolute right-0 mt-1 min-w-[200px] rounded-xl shadow-xl z-50 py-2 border backdrop-blur-md"
-              style={{ backgroundColor: "var(--color-dropdown)" }}
+              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)",
+                    backgroundColor: "color-mix(in srgb, var(--button-danger-color) 12%, transparent)",
-                    color: "var(--button-danger-text-color)",
+                    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",