chore: refactor settings route

app/(app)/(reader)/essays/page.tsx

@@ -0,0 +1,59 @@
+export const dynamic = "force-dynamic";
+
+import type { Metadata } from "next";
+import Link from "next/link";
+import { PageHeader } from "@/components/layout/page-header";
+import { buildOgMeta } from "@/lib/og";
+import { bffList } from "@/lib/bff";
+import { EssaysGrid } from "./essays-grid";
+
+export function generateMetadata(): Metadata {
+  return buildOgMeta({
+    title: "Essays",
+    detail: "Standalone essays by Śrīla Prabhupāda",
+    quote:
+      "Foundational essays on the science of Kṛṣṇa consciousness by His Divine Grace A.C. Bhaktivedanta Swami Prabhupāda.",
+  });
+}
+
+async function getAllEssays() {
+  return bffList<{
+    slug: string;
+    title: string;
+    year: number | null;
+    group: string | null;
+  }>("/essays");
+}
+
+export default async function EssaysPage() {
+  const essays = await getAllEssays();
+
+  const items = essays.map((essay) => ({
+    slug: essay.slug,
+    title: essay.title,
+    year: essay.year,
+    group: essay.group,
+    href: `/essays/${essay.slug}`,
+  }));
+
+  return (
+    <div className="min-h-screen bg-background">
+      <PageHeader>
+        <Link
+          href="/"
+          className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          &larr; Home
+        </Link>
+        <h1 className="mt-3 text-3xl font-bold text-foreground">Essays</h1>
+        <p className="mt-1 text-muted-foreground">
+          Standalone essays by Śrīla Prabhupāda
+        </p>
+      </PageHeader>
+
+      <main className="max-w-5xl mx-auto px-6 py-8">
+        <EssaysGrid essays={items} />
+      </main>
+    </div>
+  );
+}