4fb3e12e15
The audit flagged /bureau as the hardest page to navigate: 80+ case cards
in a flat grid with no way to narrow them down. Now the reader gets a
filterable browser.
- New lib/cases.ts (server) — shared loader for the case library; pulls
cases off disk, derives the originating agency from the slug prefix
(DoW, FBI, NASA, CIA, DoE, ODNI, DoD, Other) and the incident year via
a tight 19xx/20xx regex that requires non-digit boundaries so embedded
ID numbers don't get mistaken for years (e.g. doc-2070-... no longer
pretends to be a 2070 incident).
- New CaseLibraryBrowser (client) — search input (matches title + opening
in either language), agency chips with live counts, decade chips, sort
dropdown (Most recent / Year ↑ / Year ↓ / A–Z), result count, and a
clear-filters affordance. All four state pieces sync to the URL so a
filtered view is bookmarkable.
- /bureau page rewritten: magazine hero ("89 declassified cases,
narrated.") + dynamic case count + lead, then the browser.
- Cards in the browser carry an eyebrow ("YEAR · AGENCY") so the reader
sees provenance at a glance.
- CaseLibrary (homepage) refactored to consume the shared loader; behaviour
on / unchanged.
Verified live: agency=FBI filter narrows to 23 cases; sort=year-desc places
modern cases first; chip counts reflect filtered population.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
44 lines
2 KiB
TypeScript
44 lines
2 KiB
TypeScript
/**
|
|
* /bureau — Case file library.
|
|
*
|
|
* Magazine hero + filterable browser. The previous flat 80-card grid had no
|
|
* way to navigate; the new browser carries search, agency chips, decade
|
|
* chips, and sort, all URL-synced.
|
|
*/
|
|
import { BureauNav } from "@/components/bureau-nav";
|
|
import { CaseLibraryBrowser } from "@/components/case-library-browser";
|
|
import { getLocale } from "@/components/locale-toggle";
|
|
import { loadCases } from "@/lib/cases";
|
|
|
|
export const runtime = "nodejs";
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export default async function BureauPage() {
|
|
const locale = (await getLocale()) === "en" ? "en" : "pt-br";
|
|
const cases = await loadCases(locale);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0a0e1a] text-[#e7ecf3]">
|
|
<BureauNav locale={locale} crumbs={[{ label: locale === "en" ? "case files" : "casos" }]} />
|
|
<main id="main" className="mx-auto max-w-5xl px-4 md:px-8 py-10 md:py-14">
|
|
<header className="mb-8 md:mb-10">
|
|
<div className="text-[10px] font-mono uppercase tracking-[0.18em] text-[#e0c080] mb-3">
|
|
{locale === "en" ? "The case files" : "Os arquivos do caso"}
|
|
</div>
|
|
<h1 className="font-display text-3xl md:text-5xl font-semibold leading-[1.05] tracking-tight text-[#e7ecf3] mb-4">
|
|
{locale === "en"
|
|
? `${cases.length} declassified cases, narrated.`
|
|
: `${cases.length} casos desclassificados, narrados.`}
|
|
</h1>
|
|
<p className="text-[16px] md:text-[17px] text-[#cbd2dd] leading-relaxed font-light max-w-2xl">
|
|
{locale === "en"
|
|
? "Stories assembled from primary documents — memos, debriefs, intelligence reports — with every claim linked back to the source page."
|
|
: "Histórias montadas a partir de documentos primários — memorandos, debriefings, relatórios de inteligência — com cada afirmação vinculada à página-fonte."}
|
|
</p>
|
|
</header>
|
|
|
|
<CaseLibraryBrowser locale={locale} cases={cases} />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|