fix(public): distinguish unavailable data from empty results and missing pages

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

@@ -2,10 +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 { PublicLoadError } from "@/components/public/load-error";
 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 { publicReadFailure } from "@/lib/services/public-read";
 import { siteSettings } from "@/lib/services/site-settings";
 import styles from "./staff.module.css";
 
@@ -22,21 +24,6 @@ export async function generateMetadata(): Promise<Metadata> {
 	};
 }
 
-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 =
@@ -55,7 +42,7 @@ export default async function StaffPage() {
 			.where(gte(User.rank, minStaffRank))
 			.orderBy(desc(User.rank), asc(User.username))
 			.limit(100)
-			.catch((): StaffMember[] | null => null),
+			.catch(publicReadFailure("staff.members")),
 		db
 			.select({
 				id: WebsiteTeams.id,
@@ -68,7 +55,7 @@ export default async function StaffPage() {
 			.where(eq(WebsiteTeams.hiddenRank, false))
 			.orderBy(asc(WebsiteTeams.id))
 			.then((rows) => rows.map((row) => ({ ...row, id: String(row.id) })))
-			.catch((): Team[] => []),
+			.catch(publicReadFailure("staff.teams")),
 	]);
 
 	return (
@@ -131,32 +118,38 @@ export default async function StaffPage() {
 					</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>
+			{teams === null ? (
+				<SurfaceCard className={styles.notice}>
+					<PublicLoadError href="/staff" />
+				</SurfaceCard>
+			) : (
+				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>
 	);