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.
168 lines
5.1 KiB
TypeScript
168 lines
5.1 KiB
TypeScript
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";
|
|
|
|
type ThreadRow = {
|
|
id: number;
|
|
openerId: number | null;
|
|
subject: string | null;
|
|
postsCount: number | null;
|
|
createdAt: number | null;
|
|
updatedAt: number | null;
|
|
pinned: number | null;
|
|
locked: number | null;
|
|
};
|
|
|
|
function formatTimestamp(ts: number | null | undefined): string {
|
|
if (!ts) return "";
|
|
return new Date(ts * 1000).toISOString().slice(0, 10);
|
|
}
|
|
|
|
export default async function GuildForumPage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ id: string }>;
|
|
}) {
|
|
const { id } = await params;
|
|
const guildId = Number(id);
|
|
if (!Number.isInteger(guildId) || guildId <= 0) notFound();
|
|
|
|
// Guild header (read-only). A DB hiccup degrades to notFound rather than 500.
|
|
let guild: { id: number; name: string; badge: string } | null = null;
|
|
try {
|
|
guild = await prisma.guilds.findUnique({
|
|
where: { id: guildId },
|
|
select: { id: true, name: true, badge: true },
|
|
});
|
|
} catch {
|
|
guild = null;
|
|
}
|
|
|
|
if (!guild) notFound();
|
|
|
|
// Threads for this guild. Pinned first, then most-recently active.
|
|
let threads: ThreadRow[] = [];
|
|
try {
|
|
threads = await prisma.guildsForumsThreads.findMany({
|
|
where: { guildId: guild.id, state: 0 },
|
|
orderBy: [{ pinned: "desc" }, { updatedAt: "desc" }, { id: "desc" }],
|
|
take: 100,
|
|
select: {
|
|
id: true,
|
|
openerId: true,
|
|
subject: true,
|
|
postsCount: true,
|
|
createdAt: true,
|
|
updatedAt: true,
|
|
pinned: true,
|
|
locked: true,
|
|
},
|
|
});
|
|
} catch {
|
|
threads = [];
|
|
}
|
|
|
|
// Resolve opener usernames in one query (no relation exists in the schema, so
|
|
// join the users table manually by id). Falls back to the raw author id.
|
|
const openerIds = Array.from(
|
|
new Set(
|
|
threads
|
|
.map((t) => t.openerId ?? 0)
|
|
.filter((v) => v > 0),
|
|
),
|
|
);
|
|
|
|
let users: { id: number; username: string }[] = [];
|
|
try {
|
|
users = openerIds.length
|
|
? await prisma.user.findMany({
|
|
where: { id: { in: openerIds } },
|
|
select: { id: true, username: true },
|
|
})
|
|
: [];
|
|
} catch {
|
|
users = [];
|
|
}
|
|
|
|
const usernameById = new Map(users.map((u) => [u.id, u.username]));
|
|
|
|
return (
|
|
<main style={{ display: "grid", gap: "1.5rem" }}>
|
|
<p style={{ margin: 0 }}>
|
|
<Link href={`/guilds/${guild.id}`}>← Back to guild</Link>
|
|
</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>
|
|
}
|
|
/>
|
|
|
|
<ContentCard padded={threads.length === 0}>
|
|
{threads.length === 0 ? (
|
|
<EmptyState icon="🗣️">No threads in this forum yet.</EmptyState>
|
|
) : (
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th style={{ padding: "0.6rem 0.75rem" }}>Subject</th>
|
|
<th style={{ padding: "0.6rem 0.75rem" }}>Author</th>
|
|
<th style={{ padding: "0.6rem 0.75rem" }}>Posts</th>
|
|
<th style={{ padding: "0.6rem 0.75rem" }}>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{threads.map((t) => {
|
|
const opener = t.openerId ?? 0;
|
|
const username = opener > 0 ? usernameById.get(opener) : undefined;
|
|
return (
|
|
<tr key={t.id}>
|
|
<td style={{ padding: "0.6rem 0.75rem" }}>
|
|
<span style={{ fontWeight: 700 }}>
|
|
{t.subject?.trim() || "(no subject)"}
|
|
</span>
|
|
{t.pinned ? (
|
|
<span className="online-badge online" style={{ marginLeft: "0.5rem" }}>
|
|
📌 Pinned
|
|
</span>
|
|
) : null}
|
|
{t.locked ? (
|
|
<span className="online-badge" style={{ marginLeft: "0.5rem" }}>
|
|
🔒 Locked
|
|
</span>
|
|
) : null}
|
|
</td>
|
|
<td style={{ padding: "0.6rem 0.75rem" }}>
|
|
{username ? (
|
|
<Link href={`/u/${username}`}>{username}</Link>
|
|
) : (
|
|
<span className="muted">
|
|
{opener > 0 ? `User #${opener}` : "Unknown"}
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td style={{ padding: "0.6rem 0.75rem" }}>
|
|
{t.postsCount ?? 0}
|
|
</td>
|
|
<td className="muted" style={{ padding: "0.6rem 0.75rem" }}>
|
|
{formatTimestamp(t.createdAt)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</ContentCard>
|
|
</main>
|
|
);
|
|
}
|