feat: public events/polls, friends graph, captcha, SSE hardening, and admin UX

Ship product gaps: register/vote pages, friend add/accept/decline/remove, email verify TTL, captcha on login/forgot, soft-fail user actions, SSE abort/shared client, Commando Centrum error toasts, admin delete for events/polls, and IT/NL i18n fills. Co-authored-by: Cursor <[email protected]>
2026-07-21 21:08:33 +02:00
1 parent 2ff08e5127
commit ed7db6e048
@@ -0,0 +1,133 @@
+import Image from "next/image";
+import Link from "next/link";
+import { getTranslations } from "next-intl/server";
+import { ContentCard, EmptyState } from "@/components/public/ui";
+import { excerpt, slugify } from "@/lib/format";
+import { formatDate } from "@/lib/format-date";
+import { prisma } from "@/lib/prisma";
+
+export const revalidate = 60;
+
+export const metadata = { title: "Events" };
+
+export default async function EventsPage() {
+	const t = await getTranslations("pages.events");
+
+	const events = await prisma.websiteEvent
+		.findMany({
+			where: { status: { in: ["published", "completed"] } },
+			orderBy: { startsAt: "desc" },
+			take: 50,
+			include: {
+				type: { select: { name: true, color: true, slug: true } },
+				_count: { select: { registrations: true } },
+			},
+		})
+		.catch(() => []);
+
+	return (
+		<main style={{ display: "grid", gap: "1.5rem" }}>
+			<ContentCard icon="📅" title={t("title")} subtitle={t("subtitle")} />
+
+			<ContentCard padded={events.length === 0}>
+				{events.length === 0 ? (
+					<EmptyState icon="📅">{t("empty")}</EmptyState>
+				) : (
+					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
+						{events.map((event) => {
+							const href = `/events/${slugify(event.title)}-${event.id}`;
+							const spots =
+								event.maxPlayers != null
+									? t("spots", {
+											count: event._count.registrations,
+											max: event.maxPlayers,
+										})
+									: t("registered", { count: event._count.registrations });
+
+							return (
+								<Link
+									key={event.id}
+									href={href}
+									className="card hover"
+									style={{
+										display: "flex",
+										flexDirection: "column",
+										textDecoration: "none",
+										padding: 0,
+										overflow: "hidden",
+										color: "inherit",
+									}}
+								>
+									{event.image ? (
+										<div
+											style={{
+												position: "relative",
+												width: "100%",
+												aspectRatio: "16/9",
+											}}
+										>
+											<Image
+												src={event.image}
+												alt=""
+												fill
+												style={{ objectFit: "cover" }}
+												unoptimized
+											/>
+										</div>
+									) : (
+										<div
+											style={{
+												width: "100%",
+												aspectRatio: "16/9",
+												backgroundColor:
+													event.type.color ||
+													"color-mix(in srgb, var(--color-primary) 10%, var(--color-navbar))",
+											}}
+										/>
+									)}
+									<div
+										style={{
+											padding: "1rem 1.1rem",
+											flex: 1,
+											display: "flex",
+											flexDirection: "column",
+											gap: "0.35rem",
+										}}
+									>
+										<p
+											className="muted"
+											style={{ margin: 0, fontSize: "0.75rem" }}
+										>
+											{event.type.name}
+											{event.status === "completed"
+												? ` · ${t("statusCompleted")}`
+												: ""}
+										</p>
+										<h3 style={{ margin: 0, fontSize: "1.05rem" }}>
+											{event.title}
+										</h3>
+										<p
+											className="muted"
+											style={{ margin: 0, fontSize: "0.85rem" }}
+										>
+											{formatDate(event.startsAt, "datetime", "")}
+										</p>
+										<p style={{ margin: 0, fontSize: "0.88rem", lineHeight: 1.5 }}>
+											{excerpt(event.description, 120)}
+										</p>
+										<p
+											className="muted"
+											style={{ margin: "auto 0 0", fontSize: "0.8rem" }}
+										>
+											{spots}
+										</p>
+									</div>
+								</Link>
+							);
+						})}
+					</div>
+				)}
+			</ContentCard>
+		</main>
+	);
+}