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

Adapt + improve all public pages to the atom design system

Browse Source 
Extended the same design-system treatment to the public site, faithful
to AtomCMS's "atom" theme. New src/components/public/ui.tsx provides the
signature atom building blocks + a scoped CSS layer:
- ContentCard: surface card with a primary-tinted header (icon circle +
  title + subtitle) and padded body — the atom content-card, used as
  every page's header and section wrapper.
- StatBlock / stat-grid, EmptyState, OnlineBadge (online/offline pill),
  RankBadge (medals for the top 3), and responsive .card-grid helpers.

Swept ~45 public pages (home/community/rankings hand-built as the
reference; the rest via parallel agents that read the schema and
preserved every query, server action, auth gate and field name):
heroes → ContentCard headers, lists → card-grids in ContentCards,
"no X" → EmptyState, status → OnlineBadge/RankBadge. The leaderboard
gained Credits/Diamonds/Duckets tabs (usersCurrency).

Behaviour unchanged. Verified on the prod server against amx_test: 15+
public pages render the content-cards/grids with real data, no errors;
computed styles confirm the tinted header, icon circle, medal + online
pills. Fixed an undefined --color-golden ref. tsc 0, vitest 49/49,
next build 0.
This commit is contained in:
Simo committed 2026-06-28 19:28:36 +02:00
1 parent 0de0ac6a3c
commit e9ea19795a
47 files changed
+2264 -1714
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/apply/staff/page.tsx
+61 -59
View File
File diff suppressed because it is too large. Load diff
src/app/apply/team/page.tsx
+56 -56
View File
File diff suppressed because it is too large. Load diff
src/app/badges/page.tsx
+38 -36
View File
@@ -1,3 +1,4 @@
import { ContentCard, EmptyState } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";
export const dynamic = "force-dynamic";
@@ -13,44 +14,45 @@ export default async function BadgesPage() {
.catch(() => []);
return (
<main>
<div className="hero">
<h1 style={{ margin: "0 0 0.35rem" }}>Badges</h1>
<p className="muted" style={{ margin: 0 }}>
The badges you can earn and show off around the hotel.
</p>
</div>
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="🏅"
title="Badges"
subtitle="The badges you can earn and show off around the hotel"
/>
{badges.length === 0 ? (
<p className="muted">No badges available yet.</p>
) : (
<div className="grid cols-3">
{badges.map((badge) => (
<div
key={String(badge.id)}
className="card hover"
style={{ display: "flex", gap: "0.9rem", alignItems: "flex-start" }}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={`${BADGE_IMG_BASE}/${badge.badgeKey}.gif`}
alt={badge.badgeName}
title={badge.badgeKey}
width={40}
height={40}
style={{ flexShrink: 0 }}
/>
<div style={{ minWidth: 0 }}>
<h3 style={{ margin: "0 0 0.25rem" }}>{badge.badgeName}</h3>
<p className="muted" style={{ margin: "0 0 0.35rem", fontFamily: "monospace" }}>
{badge.badgeKey}
</p>
<p style={{ margin: 0, fontSize: "0.9rem" }}>{badge.badgeDescription}</p>
<ContentCard padded={badges.length === 0}>
{badges.length === 0 ? (
<EmptyState icon="🏅">No badges available yet.</EmptyState>
) : (
<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
{badges.map((badge) => (
<div
key={String(badge.id)}
className="card hover"
style={{ display: "flex", gap: "0.9rem", alignItems: "flex-start" }}
>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={`${BADGE_IMG_BASE}/${badge.badgeKey}.gif`}
alt={badge.badgeName}
title={badge.badgeKey}
width={40}
height={40}
style={{ flexShrink: 0 }}
/>
<div style={{ minWidth: 0 }}>
<h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>{badge.badgeName}</h3>
<p className="muted" style={{ margin: "0 0 0.35rem", fontFamily: "monospace" }}>
{badge.badgeKey}
</p>
<p style={{ margin: 0, fontSize: "0.9rem" }}>{badge.badgeDescription}</p>
</div>
</div>
</div>
))}
</div>
)}
))}
</div>
)}
</ContentCard>
</main>
);
}
src/app/banned/page.tsx
+8 -6
View File
@@ -1,3 +1,4 @@
import { ContentCard } from "@/components/public/ui";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
@@ -34,18 +35,19 @@ export default async function BannedPage() {
: `Expires ${new Date(expire * 1000).toISOString().slice(0, 16).replace("T", " ")}.`;
return (
<main style={{ maxWidth: 540, margin: "2rem auto" }}>
<div className="card" style={{ padding: "1.75rem", textAlign: "center" }}>
<h1 style={{ marginTop: 0, color: "var(--color-danger)" }}>You are banned</h1>
<p>Your account has been suspended from the hotel.</p>
<main style={{ maxWidth: 560, margin: "2rem auto" }}>
<ContentCard icon="🚫" title="You are banned" subtitle="Account suspended">
<p style={{ marginTop: 0 }}>Your account has been suspended from the hotel.</p>
{reason ? (
<p>
<strong>Reason:</strong> {reason}
</p>
) : null}
{expiryText ? <p className="muted">{expiryText}</p> : null}
<p className="muted">If you believe this is a mistake, contact the staff team.</p>
</div>
<p className="muted" style={{ marginBottom: 0 }}>
If you believe this is a mistake, contact the staff team.
</p>
</ContentCard>
</main>
);
}
src/app/client/page.tsx
+21 -11
View File
@@ -1,5 +1,6 @@
import { headers } from "next/headers";
import { redirect } from "next/navigation";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { issueSsoTicket } from "@/lib/auth/sso-ticket";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
@@ -30,19 +31,28 @@ export default async function ClientPage() {
: "";
return (
<main>
<h1>Launching {hotelName ?? "Atom"}…</h1>
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="🏨"
title={`Launching ${hotelName ?? "Atom"}…`}
subtitle="Your single sign-on ticket is ready"
/>
{src ? (
<iframe
title="Hotel client"
src={src}
style={{ width: "100%", height: "80vh", border: 0, borderRadius: 10 }}
/>
<ContentCard padded={false}>
<iframe
title="Hotel client"
src={src}
style={{ width: "100%", height: "80vh", border: 0, borderRadius: 10, display: "block" }}
/>
</ContentCard>
) : (
<p className="muted">
No client URL configured (set <code>nitro_client_url</code> in settings). SSO ticket
issued for this session: <code>{ticket}</code>
</p>
<ContentCard icon="🔌" title="No client configured" subtitle="Set nitro_client_url in settings">
<EmptyState icon="🔌">
No client URL configured (set <code>nitro_client_url</code> in settings). SSO ticket
issued for this session: <code>{ticket}</code>
</EmptyState>
</ContentCard>
)}
</main>
);
src/app/community/page.tsx
+49 -14
View File
@@ -1,43 +1,78 @@
import Link from "next/link";
import { ContentCard } from "@/components/public/ui";
export const dynamic = "force-dynamic";
const LINKS = [
{
href: "/rankings",
icon: "🏆",
title: "Rankings",
text: "See the wealthiest players in the hotel, ranked by credits.",
},
{
href: "/staff",
icon: "🛡️",
title: "Staff",
text: "Meet the team that keeps the hotel running every day.",
},
{
href: "/news",
icon: "📰",
title: "News",
text: "The latest announcements, events and updates.",
},
{
href: "/photos",
icon: "📸",
title: "Photos",
text: "Snapshots shared by the community from around the hotel.",
},
{
href: "/guilds",
icon: "🚪",
title: "Guilds",
text: "Browse the groups players have created and joined.",
},
{
href: "/leaderboard",
icon: "📊",
title: "Leaderboards",
text: "Who's on top this season across the hotel's stats.",
},
];
export default function CommunityPage() {
return (
<main>
<div className="hero">
<h1 style={{ margin: "0 0 0.35rem" }}>Community</h1>
<p className="muted" style={{ margin: 0 }}>
Everything happening around the hotel in one place.
</p>
</div>
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="🌍"
title="Community"
subtitle="Everything happening around the hotel in one place"
/>
<div className="grid cols-3">
<div className="card-grid sm-2 lg-3">
{LINKS.map((l) => (
<Link key={l.href} href={l.href} className="card hover" style={{ color: "inherit" }}>
<h3 style={{ margin: "0 0 0.35rem" }}>{l.title}</h3>
<p className="muted" style={{ margin: "0 0 0.75rem" }}>
{l.text}
</p>
<span className="btn btn-outline">Open →</span>
<Link
key={l.href}
href={l.href}
className="content-card hover-lift"
style={{ color: "inherit", textDecoration: "none" }}
>
<div className="content-card-head">
<span className="content-card-icon" aria-hidden>
{l.icon}
</span>
<div className="content-card-head-text">
<p className="content-card-title">{l.title}</p>
</div>
</div>
<div className="content-card-body">
<p className="muted" style={{ margin: "0 0 0.75rem" }}>
{l.text}
</p>
<span className="btn btn-outline">Open →</span>
</div>
</Link>
))}
</div>
src/app/forgot/page.tsx
+10 -6
View File
@@ -1,5 +1,6 @@
import Link from "next/link";
import { requestReset } from "@/actions/password-reset";
import { ContentCard } from "@/components/public/ui";
export default async function ForgotPage({
searchParams,
@@ -9,15 +10,18 @@ export default async function ForgotPage({
const { sent } = await searchParams;
return (
<main style={{ maxWidth: 400, margin: "2rem auto" }}>
<div className="card" style={{ padding: "1.75rem" }}>
<h1 style={{ marginTop: 0, textAlign: "center" }}>Reset password</h1>
<main style={{ maxWidth: 420, margin: "2rem auto" }}>
<ContentCard
icon="🔑"
title="Reset password"
subtitle="We'll email you a secure link to set a new password."
>
{sent ? (
<p className="muted" style={{ textAlign: "center" }}>
<p className="muted" style={{ textAlign: "center", margin: 0 }}>
If that email is registered, a reset link has been sent. Check your inbox.
</p>
) : (
<form action={requestReset} style={{ display: "grid", gap: "0.7rem", marginTop: "1rem" }}>
<form action={requestReset} style={{ display: "grid", gap: "0.7rem" }}>
<input name="email" type="email" placeholder="Your email" autoComplete="email" required />
<button type="submit" className="btn btn-primary">
Send reset link
@@ -27,7 +31,7 @@ export default async function ForgotPage({
<p className="muted" style={{ textAlign: "center", marginBottom: 0, marginTop: "1rem" }}>
<Link href="/login">Back to login</Link>
</p>
</div>
</ContentCard>
</main>
);
}
src/app/friends/page.tsx
+57 -67
View File
File diff suppressed because it is too large. Load diff
src/app/globals.css
+161
View File
File diff suppressed because it is too large. Load diff
src/app/guilds/[id]/forum/new/page.tsx
+44 -42
View File
File diff suppressed because it is too large. Load diff
src/app/guilds/[id]/forum/page.tsx
+23 -18
View File
@@ -1,5 +1,6 @@
import Link from "next/link";
import { notFound } from "next/navigation";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";
export const dynamic = "force-dynamic";
@@ -89,22 +90,26 @@ export default async function GuildForumPage({
const usernameById = new Map(users.map((u) => [u.id, u.username]));
return (
<main>
<p style={{ marginTop: 0 }}>
<main style={{ display: "grid", gap: "1.5rem" }}>
<p style={{ margin: 0 }}>
<Link href={`/guilds/${guild.id}`}>← Back to guild</Link>
</p>
<h1 style={{ marginBottom: "0.25rem" }}>
{guild.name || "Unnamed guild"} — Forum
</h1>
<p className="muted" style={{ marginTop: 0 }}>
{threads.length} {threads.length === 1 ? "thread" : "threads"}
</p>
<ContentCard
icon="🗣️"
title={`${guild.name || "Unnamed guild"} — Forum`}
subtitle={`${threads.length} ${threads.length === 1 ? "thread" : "threads"}`}
action={
<Link href={`/guilds/${guild.id}/forum/new`} className="btn btn-primary">
+ New thread
</Link>
}
/>
{threads.length === 0 ? (
<p className="muted">No threads in this forum yet.</p>
) : (
<div className="card" style={{ padding: 0 }}>
<ContentCard padded={threads.length === 0}>
{threads.length === 0 ? (
<EmptyState icon="🗣️">No threads in this forum yet.</EmptyState>
) : (
<table>
<thead>
<tr>
@@ -125,13 +130,13 @@ export default async function GuildForumPage({
{t.subject?.trim() || "(no subject)"}
</span>
{t.pinned ? (
<span className="muted" style={{ marginLeft: "0.5rem" }}>
· Pinned
<span className="online-badge online" style={{ marginLeft: "0.5rem" }}>
📌 Pinned
</span>
) : null}
{t.locked ? (
<span className="muted" style={{ marginLeft: "0.5rem" }}>
· Locked
<span className="online-badge" style={{ marginLeft: "0.5rem" }}>
🔒 Locked
</span>
) : null}
</td>
@@ -155,8 +160,8 @@ export default async function GuildForumPage({
})}
</tbody>
</table>
</div>
)}
)}
</ContentCard>
</main>
);
}
src/app/guilds/[id]/page.tsx
+85 -62
View File
File diff suppressed because it is too large. Load diff
src/app/guilds/page.tsx
+49 -39
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { excerpt } from "@/lib/format";
import { prisma } from "@/lib/prisma";
@@ -28,45 +29,54 @@ export default async function GuildsPage() {
const guilds = await getGuilds();
return (
<main>
<h1>Guilds</h1>
{guilds.length === 0 ? (
<p className="muted">No guilds yet.</p>
) : (
<div className="grid cols-3">
{guilds.map((g) => (
<Link
key={g.id}
href={`/guilds/${g.id}`}
className="card hover"
style={{
display: "flex",
gap: "0.85rem",
alignItems: "flex-start",
color: "inherit",
textDecoration: "none",
}}
>
{g.badge ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={`https://habbo-stories-content.s3.amazonaws.com/badge-part-images/${g.badge}.gif`}
alt={`${g.name} badge`}
width={40}
height={40}
style={{ flex: "0 0 auto" }}
/>
) : null}
<div style={{ minWidth: 0 }}>
<h3 style={{ margin: "0 0 0.25rem" }}>{g.name || "Unnamed guild"}</h3>
<p className="muted" style={{ margin: 0 }}>
{g.description ? excerpt(g.description, 120) : "No description"}
</p>
</div>
</Link>
))}
</div>
)}
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="🚪"
title="Guilds"
subtitle="Browse the groups players have created and joined"
/>
<ContentCard padded={guilds.length === 0}>
{guilds.length === 0 ? (
<EmptyState icon="🚪">No guilds yet.</EmptyState>
) : (
<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
{guilds.map((g) => (
<Link
key={g.id}
href={`/guilds/${g.id}`}
className="card hover"
style={{
display: "flex",
gap: "0.85rem",
alignItems: "flex-start",
color: "inherit",
textDecoration: "none",
}}
>
{g.badge ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={`https://habbo-stories-content.s3.amazonaws.com/badge-part-images/${g.badge}.gif`}
alt={`${g.name} badge`}
width={40}
height={40}
style={{ flex: "0 0 auto" }}
/>
) : null}
<div style={{ minWidth: 0 }}>
<h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
{g.name || "Unnamed guild"}
</h3>
<p className="muted" style={{ margin: 0 }}>
{g.description ? excerpt(g.description, 120) : "No description"}
</p>
</div>
</Link>
))}
</div>
)}
</ContentCard>
</main>
);
}
src/app/help/[category]/page.tsx
+13 -12
View File
@@ -1,5 +1,6 @@
import Link from "next/link";
import { notFound } from "next/navigation";
import { ContentCard } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";
@@ -93,16 +94,12 @@ export default async function HelpCategoryPage({
const hasButton = Boolean(cat.buttonText && cat.buttonText.trim() !== "");
return (
<main>
<p style={{ margin: "0 0 0.75rem" }}>
<main style={{ display: "grid", gap: "1.5rem" }}>
<p style={{ margin: 0 }}>
<Link href="/help">← Help Center</Link>
</p>
<div className="hero">
<h1 style={{ margin: 0 }}>{title}</h1>
</div>
<article className="card">
<ContentCard icon="❓" title={title} subtitle="Help Center topic">
{imageSrc ? (
// eslint-disable-next-line @next/next/no-img-element
<img
@@ -120,6 +117,7 @@ export default async function HelpCategoryPage({
{/* content is author-supplied HTML in AtomCMS (rendered raw with {!! !!}). */}
<div
style={{ lineHeight: 1.7 }}
// biome-ignore lint/security/noDangerouslySetInnerHtml: author-supplied help content, matches AtomCMS Blade
dangerouslySetInnerHTML={{ __html: content }}
/>
@@ -137,12 +135,15 @@ export default async function HelpCategoryPage({
</a>
</div>
) : null}
</article>
</ContentCard>
{siblings.length > 0 ? (
<section style={{ marginTop: "2rem" }}>
<h2>More help topics</h2>
<div className="grid cols-2">
<ContentCard
icon="🧭"
title="More help topics"
subtitle="Jump to another support topic"
>
<div className="card-grid sm-2 lg-3">
{siblings.map((s) => (
<Link
key={String(s.id)}
@@ -154,7 +155,7 @@ export default async function HelpCategoryPage({
</Link>
))}
</div>
</section>
</ContentCard>
) : null}
</main>
);
src/app/help/page.tsx
+129 -112
View File
File diff suppressed because it is too large. Load diff
src/app/help/tickets/page.tsx
+71 -42
View File
File diff suppressed because it is too large. Load diff
src/app/leaderboard/page.tsx
+14 -12
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { ContentCard, EmptyState, RankBadge } from "@/components/public/ui";
import { avatarImageUrl } from "@/lib/format";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";
@@ -80,13 +81,14 @@ export default async function LeaderboardPage({
]);
return (
<main>
<h1>Leaderboard</h1>
<p className="muted" style={{ marginTop: 0 }}>
Top 20 players by {activeTab.label.toLowerCase()}.
</p>
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="📊"
title="Leaderboard"
subtitle={`Top 20 players by ${activeTab.label.toLowerCase()}`}
/>
<div className="nav" style={{ gap: "0.5rem", marginBottom: "1.25rem" }}>
<div className="nav" style={{ gap: "0.5rem" }}>
{TABS.map((t) => (
<Link
key={t.key}
@@ -98,11 +100,9 @@ export default async function LeaderboardPage({
))}
</div>
<div className="card">
<ContentCard padded={rows.length === 0}>
{rows.length === 0 ? (
<p className="muted" style={{ margin: 0 }}>
No rankings to show yet.
</p>
<EmptyState icon="📊">No rankings to show yet.</EmptyState>
) : (
<table>
<thead>
@@ -121,7 +121,9 @@ export default async function LeaderboardPage({
});
return (
<tr key={`${row.username}-${i}`}>
<td style={{ fontWeight: 800 }}>{i + 1}</td>
<td>
<RankBadge position={i + 1} />
</td>
<td>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
@@ -149,7 +151,7 @@ export default async function LeaderboardPage({
</tbody>
</table>
)}
</div>
</ContentCard>
</main>
);
}
src/app/login/page.tsx
+18 -10
View File
@@ -4,6 +4,7 @@ import Link from "next/link";
import { signIn } from "next-auth/react";
import { type FormEvent, useState } from "react";
import { precheckLogin } from "@/actions/auth-precheck";
import { ContentCard } from "@/components/public/ui";
export default function LoginPage() {
const [username, setUsername] = useState("");
@@ -46,13 +47,17 @@ export default function LoginPage() {
}
return (
<main style={{ maxWidth: 400, margin: "2rem auto" }}>
<div className="card" style={{ padding: "1.75rem" }}>
<h1 style={{ marginTop: 0, textAlign: "center" }}>Sign in</h1>
<p className="muted" style={{ textAlign: "center", marginTop: 0 }}>
{needs2fa ? "Enter the 6-digit code from your authenticator." : "Welcome back — log in to enter the hotel."}
</p>
<form onSubmit={onSubmit} style={{ display: "grid", gap: "0.7rem", marginTop: "1rem" }}>
<main style={{ maxWidth: 420, margin: "2rem auto" }}>
<ContentCard
icon={needs2fa ? "🔒" : "🔑"}
title="Sign in"
subtitle={
needs2fa
? "Enter the 6-digit code from your authenticator."
: "Welcome back — log in to enter the hotel."
}
>
<form onSubmit={onSubmit} style={{ display: "grid", gap: "0.7rem" }}>
<input
value={username}
onChange={(e) => setUsername(e.target.value)}
@@ -111,12 +116,15 @@ export default function LoginPage() {
) : null}
{error ? (
<p style={{ color: "var(--color-danger)", textAlign: "center", marginBottom: 0 }}>{error}</p>
<p style={{ color: "var(--color-danger)", textAlign: "center", marginBottom: 0 }}>
{error}
</p>
) : null}
<p className="muted" style={{ textAlign: "center", marginBottom: 0, marginTop: "1rem" }}>
No account? <Link href="/register">Create one</Link> · <Link href="/forgot">Forgot password?</Link>
No account? <Link href="/register">Create one</Link> ·{" "}
<Link href="/forgot">Forgot password?</Link>
</p>
</div>
</ContentCard>
</main>
);
}
src/app/maintenance/page.tsx
+12 -6
View File
@@ -1,3 +1,4 @@
import { ContentCard } from "@/components/public/ui";
import { siteSettings } from "@/lib/services/site-settings";
export const dynamic = "force-dynamic";
@@ -12,12 +13,17 @@ export default async function MaintenancePage() {
]);
return (
<main style={{ maxWidth: 540, margin: "2rem auto" }}>
<div className="card" style={{ padding: "1.75rem", textAlign: "center" }}>
<h1 style={{ marginTop: 0 }}>{hotel} is under maintenance 🛠️</h1>
<p>{message}</p>
<p className="muted">Staff can still log in.</p>
</div>
<main style={{ maxWidth: 560, margin: "2rem auto" }}>
<ContentCard
icon="🛠️"
title={`${hotel} is under maintenance`}
subtitle="We'll be back shortly"
>
<p style={{ marginTop: 0 }}>{message}</p>
<p className="muted" style={{ marginBottom: 0 }}>
Staff can still log in.
</p>
</ContentCard>
</main>
);
}
src/app/marketplace/page.tsx
+54 -67
View File
File diff suppressed because it is too large. Load diff
src/app/messages/page.tsx
+33 -23
View File
@@ -1,5 +1,6 @@
import Link from "next/link";
import { redirect } from "next/navigation";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { auth } from "@/lib/auth";
import { avatarImageUrl } from "@/lib/format";
import { prisma } from "@/lib/prisma";
@@ -79,23 +80,28 @@ export default async function MessagesPage() {
}
return (
<main>
<h1>Messages</h1>
<p className="muted" style={{ marginTop: "-0.25rem" }}>
Friend requests and offline messages waiting for you.
</p>
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="✉️"
title="Messages"
subtitle="Friend requests and offline messages waiting for you"
/>
{/* ── Pending friend requests ───────────────────────────── */}
<section style={{ marginTop: "1.5rem" }}>
<h2>Friend requests</h2>
<ContentCard
icon="🙋"
title="Friend requests"
subtitle={
requests.length === 0
? "Nobody's asked to be your friend yet"
: `${requests.length} pending request${requests.length === 1 ? "" : "s"}`
}
padded={requests.length === 0}
>
{requests.length === 0 ? (
<div className="card">
<p className="muted" style={{ margin: 0 }}>
No pending friend requests.
</p>
</div>
<EmptyState icon="🙋">No pending friend requests.</EmptyState>
) : (
<div className="grid">
<div className="grid" style={{ padding: "1rem", gap: "0.75rem" }}>
{requests.map((req) => {
const from = userById.get(req.userFromId);
const avatar = avatarImageUrl(imagerBase, from?.look ?? "", {
@@ -141,19 +147,23 @@ export default async function MessagesPage() {
})}
</div>
)}
</section>
</ContentCard>
{/* ── Offline messages ──────────────────────────────────── */}
<section style={{ marginTop: "2rem" }}>
<h2>Offline messages</h2>
<ContentCard
icon="💬"
title="Offline messages"
subtitle={
messages.length === 0
? "Your inbox is empty"
: `${messages.length} message${messages.length === 1 ? "" : "s"} received`
}
padded={messages.length === 0}
>
{messages.length === 0 ? (
<div className="card">
<p className="muted" style={{ margin: 0 }}>
You have no offline messages.
</p>
</div>
<EmptyState icon="💬">You have no offline messages.</EmptyState>
) : (
<div className="grid">
<div className="grid" style={{ padding: "1rem", gap: "0.75rem" }}>
{messages.map((msg) => {
const from = userById.get(msg.userFromId);
const avatar = avatarImageUrl(imagerBase, from?.look ?? "", {
@@ -194,7 +204,7 @@ export default async function MessagesPage() {
})}
</div>
)}
</section>
</ContentCard>
</main>
);
}
src/app/news/[slug]/page.tsx
+33 -27
View File
@@ -1,5 +1,6 @@
import Link from "next/link";
import { notFound } from "next/navigation";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { postComment } from "@/actions/article-comments";
@@ -86,28 +87,30 @@ export default async function ArticlePage({
}
return (
<main>
<p className="muted">
<Link href="/news">← News</Link>
</p>
<h1>{article.title}</h1>
{article.createdAt ? (
<p className="muted">{article.createdAt.toISOString().slice(0, 10)}</p>
) : null}
{article.image ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={article.image}
alt=""
style={{ width: "100%", borderRadius: 10, margin: "1rem 0" }}
/>
) : null}
<div style={{ whiteSpace: "pre-wrap" }}>{article.fullStory}</div>
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="📰"
title={article.title}
subtitle={article.createdAt ? article.createdAt.toISOString().slice(0, 10) : undefined}
action={
<Link className="btn btn-outline" href="/news">
← News
</Link>
}
>
{article.image ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={article.image}
alt=""
style={{ width: "100%", borderRadius: 10, margin: "0 0 1rem" }}
/>
) : null}
<div style={{ whiteSpace: "pre-wrap" }}>{article.fullStory}</div>
</ContentCard>
{/* ── Reactions ─────────────────────────────────────────── */}
<section style={{ marginTop: "2rem" }}>
<h2>Reactions</h2>
<ContentCard icon="💬" title="Reactions" subtitle="Tell us what you think">
{loggedIn ? (
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
{REACTIONS.map((r) => {
@@ -136,9 +139,9 @@ export default async function ArticlePage({
})}
</div>
) : reactionCounts.size === 0 ? (
<p className="muted">
<EmptyState icon="💬">
No reactions yet. <Link href="/login">Log in</Link> to react.
</p>
</EmptyState>
) : (
<>
<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
@@ -156,13 +159,16 @@ export default async function ArticlePage({
</p>
</>
)}
</section>
</ContentCard>
{/* ── Comments ──────────────────────────────────────────── */}
<section style={{ marginTop: "2rem" }}>
<h2>Comments</h2>
<ContentCard
icon="🗨️"
title="Comments"
subtitle={comments.length > 0 ? `${comments.length} so far` : "Join the conversation"}
>
{comments.length === 0 ? (
<p className="muted">No comments yet. Be the first to comment.</p>
<EmptyState icon="🗨️">No comments yet. Be the first to comment.</EmptyState>
) : (
<div className="grid" style={{ marginBottom: "1.5rem" }}>
{comments.map((c) => {
@@ -213,7 +219,7 @@ export default async function ArticlePage({
<Link href="/login">Log in</Link> to leave a comment.
</p>
)}
</section>
</ContentCard>
</main>
);
}
src/app/news/page.tsx
+31 -19
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { excerpt } from "@/lib/format";
import { prisma } from "@/lib/prisma";
@@ -21,25 +22,36 @@ export default async function NewsPage() {
}
return (
<main>
<h1>News</h1>
{articles.length === 0 ? (
<p className="muted">No articles yet.</p>
) : (
<div className="grid">
{articles.map((a) => (
<article key={a.slug} className="card">
<h3 style={{ margin: "0 0 0.25rem" }}>
<Link href={`/news/${a.slug}`}>{a.title}</Link>
</h3>
<p className="muted" style={{ marginTop: 0 }}>
{formatDate(a.createdAt)}
</p>
<p style={{ margin: 0 }}>{excerpt(a.shortStory, 200)}</p>
</article>
))}
</div>
)}
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="📰"
title="News"
subtitle="The latest announcements, events and updates from the hotel"
/>
<ContentCard padded={articles.length === 0}>
{articles.length === 0 ? (
<EmptyState icon="📰">No articles yet.</EmptyState>
) : (
<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
{articles.map((a) => (
<article
key={a.slug}
className="card hover"
style={{ display: "flex", flexDirection: "column" }}
>
<h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
<Link href={`/news/${a.slug}`}>{a.title}</Link>
</h3>
<p className="muted" style={{ margin: "0 0 0.5rem", fontSize: "0.85rem" }}>
{formatDate(a.createdAt)}
</p>
<p style={{ margin: 0 }}>{excerpt(a.shortStory, 200)}</p>
</article>
))}
</div>
)}
</ContentCard>
</main>
);
}
src/app/page.tsx
+50 -27
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { excerpt } from "@/lib/format";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";
@@ -20,13 +21,16 @@ export default async function HomePage() {
}
return (
<main>
<section className="hero">
<h1 style={{ fontSize: 36, marginTop: 0 }}>Welcome to {hotelName}</h1>
<p className="muted" style={{ fontSize: 16 }}>
Your retro hotel, now powered by Next.js. Hang out, collect furni, and meet friends.
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="🏨"
title={`Welcome to ${hotelName}`}
subtitle="Your retro hotel, now powered by Next.js"
>
<p className="muted" style={{ margin: "0 0 0.9rem" }}>
Hang out, collect furni, and meet friends.
</p>
<div style={{ display: "flex", gap: "0.6rem", marginTop: "0.5rem" }}>
<div style={{ display: "flex", gap: "0.6rem", flexWrap: "wrap" }}>
<Link className="btn btn-primary" href="/client">
Enter hotel
</Link>
@@ -34,28 +38,47 @@ export default async function HomePage() {
Latest news
</Link>
</div>
</section>
</ContentCard>
<h2>Latest news</h2>
{articles.length === 0 ? (
<p className="muted">No articles yet.</p>
) : (
<div className="grid cols-2">
{articles.map((a) => (
<article key={a.slug} className="card hover article">
{a.image ? <img className="article-img" src={a.image} alt="" /> : <div className="article-img" />}
<div className="body">
<h3 style={{ margin: "0 0 0.3rem" }}>
<Link href={`/news/${a.slug}`}>{a.title}</Link>
</h3>
<p className="muted" style={{ margin: 0 }}>
{excerpt(a.shortStory, 120)}
</p>
</div>
</article>
))}
</div>
)}
<ContentCard
icon="📰"
title="Latest news"
subtitle="Fresh from the hotel"
action={
<Link className="btn btn-outline" href="/news">
All news →
</Link>
}
>
{articles.length === 0 ? (
<EmptyState icon="📰">No articles yet.</EmptyState>
) : (
<div className="card-grid sm-2 lg-4">
{articles.map((a) => (
<article
key={a.slug}
className="card hover"
style={{ padding: 0, overflow: "hidden" }}
>
{a.image ? (
// biome-ignore lint/performance/noImgElement: external article image
<img className="article-img" src={a.image} alt="" />
) : (
<div className="article-img" />
)}
<div style={{ padding: "0.85rem" }}>
<h3 style={{ margin: "0 0 0.3rem", fontSize: "1rem" }}>
<Link href={`/news/${a.slug}`}>{a.title}</Link>
</h3>
<p className="muted" style={{ margin: 0 }}>
{excerpt(a.shortStory, 110)}
</p>
</div>
</article>
))}
</div>
)}
</ContentCard>
</main>
);
}
src/app/photos/page.tsx
+37 -34
View File
@@ -1,3 +1,4 @@
import { ContentCard, EmptyState } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";
export const dynamic = "force-dynamic";
@@ -29,41 +30,43 @@ export default async function PhotosPage() {
}
return (
<main>
<div className="hero">
<h1>Photos</h1>
<p className="muted" style={{ marginTop: 0 }}>
The latest snapshots taken in the hotel.
</p>
</div>
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="📸"
title="Photos"
subtitle="The latest snapshots taken in the hotel"
/>
{photos.length === 0 ? (
<p className="muted">No photos yet.</p>
) : (
<div className="grid cols-3">
{photos.map((p) => (
<article key={String(p.id)} className="card">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={p.url}
alt={`Photo by user #${p.userId}`}
style={{
width: "100%",
height: "auto",
borderRadius: 4,
display: "block",
}}
/>
<p className="muted" style={{ margin: "0.5rem 0 0" }}>
{formatDate(p.timestamp)}
</p>
<p className="muted" style={{ margin: 0 }}>
by user #{p.userId}
</p>
</article>
))}
</div>
)}
<ContentCard padded={photos.length === 0}>
{photos.length === 0 ? (
<EmptyState icon="📸">No photos yet.</EmptyState>
) : (
<div className="card-grid sm-2 md-3 lg-4" style={{ padding: "1rem" }}>
{photos.map((p) => (
<article key={String(p.id)} className="card hover" style={{ padding: 0, overflow: "hidden" }}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={p.url}
alt={`Photo by user #${p.userId}`}
style={{
width: "100%",
height: "auto",
display: "block",
}}
/>
<div style={{ padding: "0.7rem 0.85rem" }}>
<p className="muted" style={{ margin: 0, fontSize: "0.85rem" }}>
{formatDate(p.timestamp)}
</p>
<p className="muted" style={{ margin: 0, fontSize: "0.85rem" }}>
by user #{p.userId}
</p>
</div>
</article>
))}
</div>
)}
</ContentCard>
</main>
);
}
src/app/radio/apply/page.tsx
+92 -90
View File
File diff suppressed because it is too large. Load diff
src/app/radio/contests/page.tsx
+33 -26
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";
export const dynamic = "force-dynamic";
@@ -17,33 +18,39 @@ export default async function RadioContestsPage() {
.catch(() => []);
return (
<main>
<div className="hero">
<h1 style={{ margin: 0 }}>Radio Contests</h1>
<p className="muted" style={{ margin: "0.5rem 0 0" }}>
Tune in and take part in our latest on-air contests.
</p>
</div>
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="🎉"
title="Radio Contests"
subtitle="Tune in and take part in our latest on-air contests"
/>
{contests.length === 0 ? (
<p className="muted">No contests yet.</p>
) : (
<div className="grid cols-2">
{contests.map((c) => {
const id = c.id.toString();
return (
<article key={id} className="card hover">
<h3 style={{ margin: "0 0 0.25rem" }}>
<Link href={`/radio/contests/${id}`}>Contest #{id}</Link>
</h3>
<p className="muted" style={{ margin: 0 }}>
{formatDate(c.createdAt) || "Date unknown"}
</p>
</article>
);
})}
</div>
)}
<ContentCard padded={contests.length === 0}>
{contests.length === 0 ? (
<EmptyState icon="🎉">No contests yet.</EmptyState>
) : (
<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
{contests.map((c) => {
const id = c.id.toString();
return (
<Link
key={id}
href={`/radio/contests/${id}`}
className="card hover"
style={{ color: "inherit", textDecoration: "none", display: "grid", gap: "0.3rem" }}
>
<h3 style={{ margin: 0, fontSize: "1rem" }}>
<span aria-hidden>🎉</span> Contest #{id}
</h3>
<p className="muted" style={{ margin: 0 }}>
{formatDate(c.createdAt) || "Date unknown"}
</p>
</Link>
);
})}
</div>
)}
</ContentCard>
</main>
);
}
src/app/radio/giveaways/page.tsx
+33 -26
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";
export const dynamic = "force-dynamic";
@@ -17,33 +18,39 @@ export default async function RadioGiveawaysPage() {
.catch(() => []);
return (
<main>
<div className="hero">
<h1 style={{ margin: 0 }}>Radio Giveaways</h1>
<p className="muted" style={{ margin: "0.5rem 0 0" }}>
Listen in for your chance to win in our radio giveaways.
</p>
</div>
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="🎁"
title="Radio Giveaways"
subtitle="Listen in for your chance to win in our radio giveaways"
/>
{giveaways.length === 0 ? (
<p className="muted">No giveaways yet.</p>
) : (
<div className="grid cols-2">
{giveaways.map((g) => {
const id = g.id.toString();
return (
<article key={id} className="card hover">
<h3 style={{ margin: "0 0 0.25rem" }}>
<Link href={`/radio/giveaways/${id}`}>Giveaway #{id}</Link>
</h3>
<p className="muted" style={{ margin: 0 }}>
{formatDate(g.createdAt) || "Date unknown"}
</p>
</article>
);
})}
</div>
)}
<ContentCard padded={giveaways.length === 0}>
{giveaways.length === 0 ? (
<EmptyState icon="🎁">No giveaways yet.</EmptyState>
) : (
<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
{giveaways.map((g) => {
const id = g.id.toString();
return (
<Link
key={id}
href={`/radio/giveaways/${id}`}
className="card hover"
style={{ color: "inherit", textDecoration: "none", display: "grid", gap: "0.3rem" }}
>
<h3 style={{ margin: 0, fontSize: "1rem" }}>
<span aria-hidden>🎁</span> Giveaway #{id}
</h3>
<p className="muted" style={{ margin: 0 }}>
{formatDate(g.createdAt) || "Date unknown"}
</p>
</Link>
);
})}
</div>
)}
</ContentCard>
</main>
);
}
src/app/radio/leaderboard/page.tsx
+14 -12
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { ContentCard, EmptyState, RankBadge } from "@/components/public/ui";
import { avatarImageUrl } from "@/lib/format";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";
@@ -43,22 +44,21 @@ export default async function RadioLeaderboardPage() {
]);
return (
<main>
<h1>Radio Listener Leaderboard</h1>
<p className="muted" style={{ marginTop: 0 }}>
Top 50 listeners by points earned tuning in to the radio.
</p>
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="🏆"
title="Radio Listener Leaderboard"
subtitle="Top 50 listeners by points earned tuning in to the radio"
/>
<div className="card">
<ContentCard padded={rows.length === 0}>
{rows.length === 0 ? (
<p className="muted" style={{ margin: 0 }}>
No listener points to show yet.
</p>
<EmptyState icon="🏆">No listener points to show yet.</EmptyState>
) : (
<table>
<thead>
<tr>
<th style={{ width: "3rem" }}>#</th>
<th style={{ width: "3.5rem" }}>Rank</th>
<th style={{ width: "3.5rem" }}>Avatar</th>
<th>Listener</th>
<th style={{ textAlign: "right" }}>Points</th>
@@ -72,7 +72,9 @@ export default async function RadioLeaderboardPage() {
});
return (
<tr key={`${row.username}-${i}`}>
<td style={{ fontWeight: 800 }}>{i + 1}</td>
<td>
<RankBadge position={i + 1} />
</td>
<td>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
@@ -100,7 +102,7 @@ export default async function RadioLeaderboardPage() {
</tbody>
</table>
)}
</div>
</ContentCard>
</main>
);
}
src/app/radio/page.tsx
+88 -64
View File
File diff suppressed because it is too large. Load diff
src/app/radio/schedule/page.tsx
+13 -11
View File
@@ -1,3 +1,4 @@
import { ContentCard, EmptyState } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";
export const dynamic = "force-dynamic";
@@ -72,16 +73,17 @@ export default async function RadioSchedulePage() {
const hasAny = schedules.length > 0;
return (
<main>
<h1>Radio Schedule</h1>
<p className="muted" style={{ marginTop: 0 }}>
Our weekly line-up of DJs and shows.
</p>
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="🗓️"
title="Radio Schedule"
subtitle="Our weekly line-up of DJs and shows"
/>
{!hasAny ? (
<p className="muted">No shows scheduled yet.</p>
) : (
<div className="card">
<ContentCard padded={!hasAny}>
{!hasAny ? (
<EmptyState icon="🗓️">No shows scheduled yet.</EmptyState>
) : (
<table>
<thead>
<tr>
@@ -125,8 +127,8 @@ export default async function RadioSchedulePage() {
})}
</tbody>
</table>
</div>
)}
)}
</ContentCard>
</main>
);
}
src/app/radio/shouts/page.tsx
+75 -62
View File
File diff suppressed because it is too large. Load diff
src/app/rankings/page.tsx
+42 -44
View File
File diff suppressed because it is too large. Load diff
src/app/rares/[category]/page.tsx
+81 -80
View File
File diff suppressed because it is too large. Load diff
src/app/rares/page.tsx
+38 -35
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";
@@ -39,18 +40,19 @@ export default async function RareValuesPage() {
const badgesBase = (await siteSettings.get("badges_path", "")) ?? "";
return (
<main>
<div className="hero">
<h1 style={{ margin: 0 }}>Rare values</h1>
<p className="muted" style={{ marginBottom: 0 }}>
Get an overview of all of the rares on the hotel, grouped by category.
</p>
</div>
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="💎"
title="Rare values"
subtitle="Get an overview of all of the rares on the hotel, grouped by category."
/>
{categories.length === 0 ? (
<p className="muted">We currently have no rares listed here.</p>
<ContentCard padded={false}>
<EmptyState icon="💎">We currently have no rares listed here.</EmptyState>
</ContentCard>
) : (
<div className="grid cols-3">
<div className="card-grid sm-2 lg-3">
{categories.map((c) => {
const id = String(c.id);
const count = counts.get(id) ?? 0;
@@ -59,33 +61,34 @@ export default async function RareValuesPage() {
<Link
key={id}
href={`/rares/${id}`}
className="card hover"
style={{
display: "flex",
alignItems: "center",
gap: "0.85rem",
textDecoration: "none",
color: "inherit",
}}
className="content-card hover-lift"
style={{ color: "inherit", textDecoration: "none" }}
>
{badgeSrc ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={badgeSrc}
alt={`${c.name} badge`}
width={40}
height={40}
style={{ flexShrink: 0 }}
/>
) : (
<span className="avatar" style={{ width: 40, height: 40, flexShrink: 0 }} />
)}
<span style={{ display: "flex", flexDirection: "column" }}>
<strong>{c.name}</strong>
<span className="muted">
{count} {count === 1 ? "rare" : "rares"}
</span>
</span>
<div className="content-card-head">
{badgeSrc ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={badgeSrc}
alt={`${c.name} badge`}
width={36}
height={36}
style={{ flexShrink: 0 }}
/>
) : (
<span className="content-card-icon" aria-hidden>
💎
</span>
)}
<div className="content-card-head-text">
<p className="content-card-title">{c.name}</p>
<p className="content-card-subtitle">
{count} {count === 1 ? "rare" : "rares"}
</p>
</div>
</div>
<div className="content-card-body">
<span className="btn btn-outline">View rares →</span>
</div>
</Link>
);
})}
src/app/redeem/page.tsx
+16 -22
View File
@@ -1,5 +1,6 @@
import { redirect } from "next/navigation";
import RedeemForm from "./RedeemForm";
import { ContentCard, StatBlock } from "@/components/public/ui";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
@@ -25,36 +26,29 @@ export default async function RedeemPage() {
if (!user) redirect("/login");
return (
<main>
<div className="hero">
<h1 style={{ marginBottom: "0.25rem" }}>Redeem a voucher</h1>
<p className="muted" style={{ margin: 0 }}>
Got a voucher code? Enter it below to add the reward to your account.
</p>
</div>
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="🎟️"
title="Redeem a voucher"
subtitle="Got a voucher code? Enter it below to add the reward to your account."
/>
<div className="grid cols-2">
<div className="card">
<h3 style={{ marginTop: 0 }}>Enter your code</h3>
<div className="card-grid sm-2">
<ContentCard icon="🔑" title="Enter your code">
<RedeemForm />
<p className="muted" style={{ marginBottom: 0 }}>
<p className="muted" style={{ marginBottom: 0, marginTop: "0.85rem" }}>
Each voucher can only be redeemed once per account.
</p>
</div>
</ContentCard>
<div className="card">
<h3 style={{ marginTop: 0 }}>Your balance</h3>
<p style={{ margin: "0 0 0.6rem" }}>
Signed in as <strong>{user.username}</strong>.
</p>
<span className="currency">
<span className="coin credits">cr</span>
{user.credits.toLocaleString()}
</span>
<ContentCard icon="💰" title="Your balance" subtitle={`Signed in as ${user.username}`}>
<div className="stat-grid">
<StatBlock value={user.credits.toLocaleString()} label="Credits" icon="🪙" />
</div>
<p className="muted" style={{ marginBottom: 0, marginTop: "0.85rem" }}>
Redeemed rewards are credited instantly and appear in-game the next time you log in.
</p>
</div>
</ContentCard>
</div>
</main>
);
src/app/register/page.tsx
+9 -8
View File
@@ -1,5 +1,6 @@
import Link from "next/link";
import { register } from "@/actions/register";
import { ContentCard } from "@/components/public/ui";
export default async function RegisterPage({
searchParams,
@@ -9,13 +10,13 @@ export default async function RegisterPage({
const { error } = await searchParams;
return (
<main style={{ maxWidth: 400, margin: "2rem auto" }}>
<div className="card" style={{ padding: "1.75rem" }}>
<h1 style={{ marginTop: 0, textAlign: "center" }}>Create account</h1>
<p className="muted" style={{ textAlign: "center", marginTop: 0 }}>
Join the hotel — it only takes a moment.
</p>
<form action={register} style={{ display: "grid", gap: "0.7rem", marginTop: "1rem" }}>
<main style={{ maxWidth: 420, margin: "2rem auto" }}>
<ContentCard
icon="🎉"
title="Create account"
subtitle="Join the hotel — it only takes a moment."
>
<form action={register} style={{ display: "grid", gap: "0.7rem" }}>
<input name="username" placeholder="Username" autoComplete="username" required />
<input name="mail" type="email" placeholder="Email" autoComplete="email" required />
<input
@@ -37,7 +38,7 @@ export default async function RegisterPage({
<p className="muted" style={{ textAlign: "center", marginBottom: 0, marginTop: "1rem" }}>
Already have an account? <Link href="/login">Sign in</Link>
</p>
</div>
</ContentCard>
</main>
);
}
src/app/reset/page.tsx
+12 -6
View File
@@ -1,5 +1,6 @@
import Link from "next/link";
import { resetPassword } from "@/actions/password-reset";
import { ContentCard } from "@/components/public/ui";
export default async function ResetPage({
searchParams,
@@ -9,10 +10,13 @@ export default async function ResetPage({
const { email = "", token = "", error } = await searchParams;
return (
<main style={{ maxWidth: 400, margin: "2rem auto" }}>
<div className="card" style={{ padding: "1.75rem" }}>
<h1 style={{ marginTop: 0, textAlign: "center" }}>Set a new password</h1>
<form action={resetPassword} style={{ display: "grid", gap: "0.7rem", marginTop: "1rem" }}>
<main style={{ maxWidth: 420, margin: "2rem auto" }}>
<ContentCard
icon="🔐"
title="Set a new password"
subtitle="Choose a strong password you don't use elsewhere."
>
<form action={resetPassword} style={{ display: "grid", gap: "0.7rem" }}>
<input type="hidden" name="email" value={email} />
<input type="hidden" name="token" value={token} />
<input
@@ -27,12 +31,14 @@ export default async function ResetPage({
</button>
</form>
{error ? (
<p style={{ color: "var(--color-danger)", textAlign: "center", marginBottom: 0 }}>{error}</p>
<p style={{ color: "var(--color-danger)", textAlign: "center", marginBottom: 0 }}>
{error}
</p>
) : null}
<p className="muted" style={{ textAlign: "center", marginBottom: 0, marginTop: "1rem" }}>
<Link href="/login">Back to login</Link>
</p>
</div>
</ContentCard>
</main>
);
}
src/app/settings/2fa/page.tsx
+68 -53
View File
File diff suppressed because it is too large. Load diff
src/app/settings/connections/page.tsx
+65 -65
View File
File diff suppressed because it is too large. Load diff
src/app/settings/page.tsx
+49 -41
View File
File diff suppressed because it is too large. Load diff
src/app/shop/page.tsx
+128 -119
View File
File diff suppressed because it is too large. Load diff
src/app/shop/topup/page.tsx
+17 -22
View File
@@ -1,5 +1,6 @@
import { redirect } from "next/navigation";
import TopUpForm from "./TopUpForm";
import { ContentCard, StatBlock } from "@/components/public/ui";
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import { creditsPerUnit, isPayPalConfigured, PAYPAL_CURRENCY } from "@/lib/services/paypal";
@@ -33,23 +34,21 @@ export default async function TopUpPage({
const rate = creditsPerUnit();
return (
<main>
<div className="hero">
<h1 style={{ marginBottom: "0.25rem" }}>Top up with PayPal</h1>
<p className="muted" style={{ margin: 0 }}>
Pay securely with PayPal and your credits are added the moment the payment clears.
</p>
</div>
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard
icon="💳"
title="Top up with PayPal"
subtitle="Pay securely with PayPal and your credits are added the moment the payment clears."
/>
{sp.status === "cancel" ? (
<div className="card" style={{ marginBottom: "1.5rem", borderColor: "var(--color-danger)" }}>
<div className="card" style={{ borderColor: "var(--color-danger)" }}>
<p style={{ margin: 0 }}>Checkout was cancelled — no payment was taken.</p>
</div>
) : null}
<div className="grid cols-2">
<div className="card">
<h3 style={{ marginTop: 0 }}>Choose an amount</h3>
<div className="card-grid sm-2">
<ContentCard icon="🪙" title="Choose an amount">
{configured ? (
<TopUpForm currency={PAYPAL_CURRENCY} creditsPerUnit={rate} />
) : (
@@ -59,22 +58,18 @@ export default async function TopUpPage({
<code>PAYPAL_API</code> for sandbox vs. live).
</p>
)}
</div>
</ContentCard>
<div className="card">
<h3 style={{ marginTop: 0 }}>Your balance</h3>
<p style={{ margin: "0 0 0.6rem" }}>
Signed in as <strong>{user.username}</strong>.
</p>
<span className="currency">
<span className="coin credits">cr</span>
{user.credits.toLocaleString()}
</span>
<ContentCard icon="💰" title="Your balance" subtitle={`Signed in as ${user.username}`}>
<div className="stat-grid">
<StatBlock value={user.credits.toLocaleString()} label="Credits" icon="🪙" />
<StatBlock value={rate.toLocaleString()} label={`Credits per 1.00 ${PAYPAL_CURRENCY}`} />
</div>
<p className="muted" style={{ marginBottom: 0, marginTop: "0.85rem" }}>
You receive <strong>{rate.toLocaleString()}</strong> credits per 1.00 {PAYPAL_CURRENCY}.
Credits appear in-game the next time you log in.
</p>
</div>
</ContentCard>
</div>
</main>
);
src/app/staff/page.tsx
+51 -42
View File
File diff suppressed because it is too large. Load diff
src/app/u/[username]/page.tsx
+41 -31
View File
File diff suppressed because it is too large. Load diff
src/app/verify/page.tsx
+39 -48
View File
@@ -1,5 +1,6 @@
import Link from "next/link";
import { isValidVerificationToken } from "@/actions/email-verify";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { prisma } from "@/lib/prisma";
// Reads + writes the live users table — must never be statically rendered.
@@ -50,54 +51,44 @@ export default async function VerifyPage({
}
return (
<main>
<h1>Email verification</h1>
<div className="card" style={{ marginTop: "1rem" }}>
{status === "verified" ? (
<>
<h2 style={{ marginTop: 0 }}>You're all set</h2>
<p className="muted">
Your email address has been verified. You can now log in and play.
</p>
<p style={{ marginTop: "1rem" }}>
<Link href="/login" className="btn btn-primary">
Go to login
</Link>
</p>
</>
) : status === "already" ? (
<>
<h2 style={{ marginTop: 0 }}>Already verified</h2>
<p className="muted">This email address has already been confirmed.</p>
<p style={{ marginTop: "1rem" }}>
<Link href="/login" className="btn btn-primary">
Go to login
</Link>
</p>
</>
) : status === "unavailable" ? (
<>
<h2 style={{ marginTop: 0 }}>Try again shortly</h2>
<p className="muted">
We couldn't reach the server to verify your email. Please retry the link in a
moment.
</p>
</>
) : (
<>
<h2 style={{ marginTop: 0 }}>Invalid or expired link</h2>
<p className="muted">
This verification link is not valid. Make sure you opened the full link from your
email, or request a new one.
</p>
<p style={{ marginTop: "1rem" }}>
<Link href="/login" className="btn btn-outline">
Back to login
</Link>
</p>
</>
)}
</div>
<main style={{ maxWidth: 480, margin: "2rem auto" }}>
{status === "verified" ? (
<ContentCard icon="✅" title="You're all set" subtitle="Email verified">
<p className="muted" style={{ marginTop: 0 }}>
Your email address has been verified. You can now log in and play.
</p>
<Link href="/login" className="btn btn-primary">
Go to login
</Link>
</ContentCard>
) : status === "already" ? (
<ContentCard icon="✅" title="Already verified" subtitle="Nothing left to do">
<p className="muted" style={{ marginTop: 0 }}>
This email address has already been confirmed.
</p>
<Link href="/login" className="btn btn-primary">
Go to login
</Link>
</ContentCard>
) : status === "unavailable" ? (
<ContentCard icon="⏳" title="Try again shortly" subtitle="Server unreachable">
<p className="muted" style={{ margin: 0 }}>
We couldn't reach the server to verify your email. Please retry the link in a moment.
</p>
</ContentCard>
) : (
<ContentCard icon="📧" title="Email verification" subtitle="Invalid or expired link">
<EmptyState icon="🔗">
This verification link is not valid. Make sure you opened the full link from your email,
or request a new one.
</EmptyState>
<div style={{ textAlign: "center" }}>
<Link href="/login" className="btn btn-outline">
Back to login
</Link>
</div>
</ContentCard>
)}
</main>
);
}
src/components/public/ui.tsx
+103
View File
File diff suppressed because it is too large. Load diff