feat: refine letters UI

app/letters/recipient/[name]/page.tsx

@@ -1,10 +1,8 @@
 export const dynamic = "force-dynamic";
 
-import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getLettersByRecipient } from "@/lib/letters";
-import { PageHeader } from "@/components/page-header";
-import { Card, CardContent } from "@/components/ui/card";
+import { FilterYearBrowser } from "../../filter-year-browser";
 
 export default async function LettersByRecipientPage({
   params,
@@ -17,49 +15,23 @@ export default async function LettersByRecipientPage({
   const letters = await getLettersByRecipient(name);
   if (letters.length === 0) notFound();
 
+  const serialized = letters.map((l) => ({
+    slug: l.slug,
+    recipientDisplay: l.recipientDisplay,
+    date: l.date,
+    year: l.year,
+    month: l.month,
+    location: l.location,
+  }));
+
   return (
     <div className="min-h-screen bg-background">
-      <PageHeader>
-        <Link
-          href="/letters?view=recipient"
-          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
-        >
-          &larr; Letters by Recipient
-        </Link>
-        <h1 className="mt-3 text-3xl font-bold text-foreground">
-          Letters to or including {name}
-        </h1>
-        <p className="mt-1 text-muted-foreground">
-          {letters.length} {letters.length === 1 ? "letter" : "letters"}
-        </p>
-      </PageHeader>
-
-      <main className="max-w-3xl mx-auto px-6 py-8">
-        <Card className="divide-y divide-border">
-          <CardContent className="p-0">
-            <ul className="divide-y divide-border">
-              {letters.map((letter) => (
-                <li key={letter.slug}>
-                  <Link
-                    href={`/letters/${letter.slug}`}
-                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-5 py-4 gap-1 sm:gap-4 hover:bg-muted transition-colors"
-                  >
-                    <div className="min-w-0">
-                      <p className="font-medium text-foreground">
-                        To: {letter.recipientDisplay}
-                      </p>
-                      <p className="text-sm text-muted-foreground">
-                        {letter.date || "Undated"}
-                        {letter.location ? ` · ${letter.location}` : ""}
-                      </p>
-                    </div>
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </CardContent>
-        </Card>
-      </main>
+      <FilterYearBrowser
+        letters={serialized}
+        filterName={name}
+        filterType="recipient"
+        totalCount={letters.length}
+      />
     </div>
   );
 }