feat(news): add searchable paginated publication archive

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

@@ -4,21 +4,70 @@ import Link from "@/components/link";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { excerpt } from "@/lib/format";
 import { formatDate } from "@/lib/format-date";
-import { getNewsList } from "@/lib/services/news-list";
+import { logger } from "@/lib/logger";
+import { loadNewsArchive } from "@/lib/services/news-archive";
 
 export const metadata = { title: "News" };
 
-export default async function NewsPage() {
+export default async function NewsPage({
+	searchParams,
+}: {
+	searchParams: Promise<{ q?: string; page?: string; order?: string }>;
+}) {
 	const t = await getTranslations("pages.news");
 
-	const articles = await getNewsList(30);
+	const params = await searchParams;
+	const result = await loadNewsArchive({
+		search: params.q,
+		page: Number(params.page ?? 1),
+		order: params.order,
+	}).catch((error) => {
+		logger.error("Public news archive failed", { module: "news", error });
+		return null;
+	});
+	const articles = result?.rows ?? [];
+	const href = (page: number) =>
+		`/news?${new URLSearchParams({ q: result?.search ?? params.q ?? "", order: result?.order ?? "newest", page: String(page) })}`;
 
 	return (
 		<main className="page-grid">
 			<ContentCard icon="📰" title={t("title")} subtitle={t("subtitle")} />
 
+			<ContentCard>
+				<form
+					action="/news"
+					method="GET"
+					className="flex flex-wrap items-end gap-3"
+				>
+					<label className="flex min-w-0 flex-1 flex-col gap-1">
+						{t("searchLabel")}
+						<input
+							name="q"
+							defaultValue={params.q}
+							maxLength={191}
+							className="input w-full"
+						/>
+					</label>
+					<label className="flex flex-col gap-1">
+						{t("orderLabel")}
+						<select
+							name="order"
+							defaultValue={params.order === "oldest" ? "oldest" : "newest"}
+							className="input"
+						>
+							<option value="newest">{t("newest")}</option>
+							<option value="oldest">{t("oldest")}</option>
+						</select>
+					</label>
+					<button type="submit" className="btn btn-primary">
+						{t("apply")}
+					</button>
+				</form>
+			</ContentCard>
 			<ContentCard padded={articles.length === 0}>
-				{articles.length === 0 ? (
+				{!result ? (
+					<p role="alert">{t("loadError")}</p>
+				) : articles.length === 0 ? (
 					<EmptyState icon="📰">{t("noArticles")}</EmptyState>
 				) : (
 					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
@@ -82,7 +131,10 @@ export default async function NewsPage() {
 									</h3>
 									<p
 										className="muted"
-										style={{ margin: "0.35rem 0 0.6rem", fontSize: "0.78rem" }}
+										style={{
+											margin: "0.35rem 0 0.6rem",
+											fontSize: "0.78rem",
+										}}
 									>
 										{formatDate(a.createdAt, "date", "")}
 									</p>
@@ -103,6 +155,36 @@ export default async function NewsPage() {
 					</div>
 				)}
 			</ContentCard>
+			{result && (
+				<ContentCard>
+					<nav
+						aria-label={t("pagination")}
+						className="flex flex-wrap items-center justify-between gap-3"
+					>
+						{result.page > 1 ? (
+							<Link href={href(result.page - 1)} className="btn">
+								{t("previous")}
+							</Link>
+						) : (
+							<span />
+						)}
+						<span>
+							{t("pageSummary", {
+								page: result.page,
+								pages: result.lastPage,
+								total: result.total,
+							})}
+						</span>
+						{result.page < result.lastPage ? (
+							<Link href={href(result.page + 1)} className="btn">
+								{t("next")}
+							</Link>
+						) : (
+							<span />
+						)}
+					</nav>
+				</ContentCard>
+			)}
 		</main>
 	);
 }