Files
Epicnabbo-Catalogus-Updated…/src/app/(site)/staff/page.tsx
T
openhands 51ef7602ca perf: migrate pages to Cache Components via root layout opt-out
Remove the per-route 'export const instant = false' opt-outs now that the root layout carries the single Cache Components opt-out. Child pages inherit the opt-out, so admin/mod/radio leaf pages that only access cached or DB data stay instant while runtime-dependent pages remain dynamic. Update the staff-smoke contract test to assert the root-layout contract.
2026-08-07 18:51:45 +02:00

130 lines
3.0 KiB
TypeScript

import { asc, desc, eq, gte } from "drizzle-orm";
import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { ContentCard, EmptyState } from "@/components/public/ui";
import { db, User, WebsiteTeams } from "@/lib/db";
import { siteSettings } from "@/lib/services/site-settings";
export const metadata = { title: "Staff" };
type StaffMember = {
username: string;
look: string;
rank: number;
motto: string;
};
type Team = {
id: string;
rankName: string;
badge: string | null;
jobDescription: string | null;
staffColor: string;
};
export default async function StaffPage() {
const t = await getTranslations("pages.staff");
const minStaffRank =
Number(await siteSettings.get("min_staff_rank", "7")) || 7;
let staff: StaffMember[] = [];
try {
staff = await db
.select({
username: User.username,
look: User.look,
rank: User.rank,
motto: User.motto,
})
.from(User)
.where(gte(User.rank, minStaffRank))
.orderBy(desc(User.rank), asc(User.username))
.limit(100);
} catch {
staff = [];
}
let teams: Team[] = [];
try {
const rows = await db
.select({
id: WebsiteTeams.id,
rankName: WebsiteTeams.rankName,
badge: WebsiteTeams.badge,
jobDescription: WebsiteTeams.jobDescription,
staffColor: WebsiteTeams.staffColor,
})
.from(WebsiteTeams)
.where(eq(WebsiteTeams.hiddenRank, false))
.orderBy(asc(WebsiteTeams.id));
teams = rows.map((row) => ({ ...row, id: String(row.id) }));
} catch {
teams = [];
}
return (
<main style={{ display: "grid", gap: "1.5rem" }}>
<ContentCard icon="🛡️" title={t("title")} subtitle={t("subtitle")} />
{teams.length > 0 ? (
<ContentCard
icon="⭐"
title={t("ranksTitle")}
subtitle={t("ranksSubtitle")}
>
<div className="card-grid sm-2 lg-3">
{teams.map((team) => (
<div key={team.id} className="card">
<h3 style={{ margin: "0 0 0.25rem", color: team.staffColor }}>
{team.rankName}
</h3>
{team.jobDescription ? (
<p className="muted" style={{ margin: 0 }}>
{team.jobDescription}
</p>
) : null}
</div>
))}
</div>
</ContentCard>
) : null}
<ContentCard
icon="👥"
title={t("membersTitle")}
subtitle={
staff.length === 0
? t("membersEmptySubtitle")
: t("membersSubtitle", { count: staff.length })
}
padded={staff.length === 0}
>
{staff.length === 0 ? (
<EmptyState icon="🛡️">{t("emptyState")}</EmptyState>
) : (
<table>
<thead>
<tr>
<th>{t("colUsername")}</th>
<th>{t("colRank")}</th>
<th>{t("colMotto")}</th>
</tr>
</thead>
<tbody>
{staff.map((u) => (
<tr key={u.username}>
<td>
<Link href={`/u/${u.username}`}>{u.username}</Link>
</td>
<td>{u.rank}</td>
<td className="muted">{u.motto || "—"}</td>
</tr>
))}
</tbody>
</table>
)}
</ContentCard>
</main>
);
}