remco/EpicNext-Cms
1
1 Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
remco committed 2026-07-01 15:59:02 +02:00
1 parent 16096eff0f
commit d6ccc250f6
20 files changed
+936 -140
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

prisma/schema.prisma
+11 -3
View File
@@ -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
+36
View File
@@ -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
+74 -36
View File
File diff suppressed because it is too large. Load diff
src/app/globals.css
+81 -7
View File
File diff suppressed because it is too large. Load diff
src/app/leaderboard/page.tsx
+64 -8
View File
File diff suppressed because it is too large. Load diff
src/app/radio/layout.tsx
+82
View File
@@ -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
+143
View File
File diff suppressed because it is too large. Load diff
src/components/language-switcher.tsx
+12 -3
View File
@@ -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
+56
View File
@@ -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
+109
View File
File diff suppressed because it is too large. Load diff
src/components/navigation.tsx
+109 -75
View File
File diff suppressed because it is too large. Load diff
src/components/public/ui.tsx
+57
View File
@@ -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
+1 -1
View File
@@ -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
+11 -7
View File
@@ -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
+3
View File
@@ -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
+39
View File
@@ -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
+3
View File
@@ -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
+3
View File
@@ -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
+3
View File
@@ -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
+39
View File
@@ -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",