feat(staff): present members in responsive profile cards

src/app/(site)/staff/page.tsx

@@ -2,9 +2,12 @@ import { asc, desc, eq, gte } from "drizzle-orm";
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import Link from "@/components/link";
-import { ContentCard, EmptyState } from "@/components/public/ui";
+import { ProfileImage } from "@/components/shared/profile-image";
+import { SurfaceCard } from "@/components/surface-card";
 import { db, User, WebsiteTeams } from "@/lib/db";
+import { avatarImageUrl } from "@/lib/format";
 import { siteSettings } from "@/lib/services/site-settings";
+import styles from "./staff.module.css";
 
 export async function generateMetadata(): Promise<Metadata> {
 	const t = await getTranslations("pages.staff");
@@ -52,7 +55,7 @@ export default async function StaffPage() {
 			.where(gte(User.rank, minStaffRank))
 			.orderBy(desc(User.rank), asc(User.username))
 			.limit(100)
-			.catch((): StaffMember[] => []),
+			.catch((): StaffMember[] | null => null),
 		db
 			.select({
 				id: WebsiteTeams.id,
@@ -69,71 +72,92 @@ export default async function StaffPage() {
 	]);
 
 	return (
-		<main className="page-grid">
-			<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>
-				) : (
-					<div className="table-scroll">
-						<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 table-cell-truncate">
-											{u.motto || "—"}
-										</td>
-									</tr>
-								))}
-							</tbody>
-						</table>
-					</div>
+		<main className={styles.page}>
+			<SurfaceCard className={styles.hero}>
+				<div>
+					<h1>{t("title")}</h1>
+					<p>{t("subtitle")}</p>
+				</div>
+				{staff && staff.length > 0 && (
+					<span className={styles.count}>
+						{t("membersSubtitle", { count: staff.length })}
+					</span>
 				)}
-			</ContentCard>
+			</SurfaceCard>
+			<section aria-labelledby="staff-members">
+				<h2 id="staff-members" className={styles.heading}>
+					{t("membersTitle")}
+				</h2>
+				{staff === null ? (
+					<SurfaceCard className={styles.notice}>
+						<p role="alert">{t("loadError")}</p>
+						<Link href="/staff" className="btn btn-outline">
+							{t("retry")}
+						</Link>
+					</SurfaceCard>
+				) : staff.length === 0 ? (
+					<SurfaceCard className={styles.notice}>
+						<p>{t("emptyState")}</p>
+					</SurfaceCard>
+				) : (
+					<ul className={styles.grid}>
+						{staff.map((member) => (
+							<li key={member.username}>
+								<Link
+									href={`/u/${encodeURIComponent(member.username)}`}
+									className={styles.member}
+								>
+									<ProfileImage
+										src={avatarImageUrl(member.look, {
+											size: "m",
+											direction: 2,
+											headDirection: 3,
+										})}
+										alt={member.username}
+										width={64}
+										height={110}
+										className={styles.avatar}
+									/>
+									<div className={styles.identity}>
+										<h3>{member.username}</h3>
+										<p>{member.motto || t("noMotto")}</p>
+										<span className={styles.profile}>
+											{t("viewProfile")} <span aria-hidden="true">→</span>
+										</span>
+									</div>
+								</Link>
+							</li>
+						))}
+					</ul>
+				)}
+			</section>
+			{teams.length > 0 && (
+				<section aria-labelledby="staff-teams">
+					<h2 id="staff-teams" className={styles.heading}>
+						{t("ranksTitle")}
+					</h2>
+					<p className={styles.subtitle}>{t("ranksSubtitle")}</p>
+					<ul className={styles.grid}>
+						{teams.map((team) => (
+							<li key={team.id}>
+								<SurfaceCard className={styles.team}>
+									<span
+										className={styles.accent}
+										style={{
+											backgroundColor: /^#[0-9a-f]{6}$/i.test(team.staffColor)
+												? team.staffColor
+												: "var(--color-primary)",
+										}}
+										aria-hidden="true"
+									/>
+									<h3>{team.rankName}</h3>
+									{team.jobDescription && <p>{team.jobDescription}</p>}
+								</SurfaceCard>
+							</li>
+						))}
+					</ul>
+				</section>
+			)}
 		</main>
 	);
 }