Files
Epicnabbo-Catalogus-Updated…/src/app/guilds/[id]/forum/page.tsx
T
Simo e9ea19795a Adapt + improve all public pages to the atom design system
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.
2026-06-28 19:28:36 +02:00

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