perf : cache

app/admin/[character]/[page]/page.tsx

@@ -10,9 +10,9 @@ import { AdminHeader } from "@/components/admin/admin-header";
 import { EditorPresence } from "@/components/admin/editor-presence";
 import { Button } from "@/components/ui/button";
 import { getAdminSession } from "@/lib/auth/server";
+import { getCachedCatalogOptions } from "@/lib/cache/catalog";
 import { toTeamDraft } from "@/lib/guides/team-draft";
 import {
-  getCatalogOptions,
   getAdminGuideContent,
   getGuideEditorHeader,
 } from "@/lib/guides/queries";
@@ -54,7 +54,7 @@ export default async function StructuredEditorPage({
     ?? guide.sections.find((section) => section.slug === page)?.title
     ?? page;
   const [catalog, content] = await Promise.all([
-    getCatalogOptions(),
+    getCachedCatalogOptions(),
     getAdminGuideContent(guide.slug, page),
   ]);
   if (!catalog || !content) notFound();

app/admin/[character]/comment/page.tsx

@@ -0,0 +1,57 @@
+import { Suspense } from "react";
+import Link from "next/link";
+import { ArrowLeftIcon } from "lucide-react";
+import { notFound, redirect } from "next/navigation";
+import { connection } from "next/server";
+
+import { AdminHeader } from "@/components/admin/admin-header";
+import { GuideSectionNav } from "@/components/admin/guide-section-nav";
+import { CommentBoardContent } from "@/components/comments/comment-board-content";
+import { CommentBoardSkeleton } from "@/components/comments/comment-skeleton";
+import { Button } from "@/components/ui/button";
+import Image from "@/components/ui/resilient-image";
+import { getAdminSession } from "@/lib/auth/server";
+import { getGuideEditorHeader } from "@/lib/guides/queries";
+
+export const instant = false;
+
+export default async function GuideCommentPage({
+  params,
+}: {
+  params: Promise<{ character: string }>;
+}) {
+  await connection();
+  if (!(await getAdminSession())) redirect("/auth/login?next=%2Fadmin");
+  const { character } = await params;
+  const guide = await getGuideEditorHeader(character);
+  if (!guide) notFound();
+  const extras = guide.sections
+    .filter((section) => section.kind === "extra")
+    .map(({ id, slug, title }) => ({ id, slug, title }));
+
+  return (
+    <div className="min-h-svh">
+      <AdminHeader />
+      <main lang="en" className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 pb-4 sm:px-6 sm:pb-6 lg:px-8 lg:pb-8">
+        <div className="flex flex-col">
+          <header className="flex items-center gap-4">
+            <Button variant="ghost" size="icon" render={<Link href="/admin" />} nativeButton={false} aria-label="Back to dashboard">
+              <ArrowLeftIcon />
+            </Button>
+            <div className="relative size-16 shrink-0 overflow-hidden rounded-lg border">
+              <Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
+            </div>
+            <div className="min-w-0">
+              <p className="text-sm text-muted-foreground">{guide.name}</p>
+              <h1 className="font-heading text-3xl font-semibold">Comment</h1>
+            </div>
+          </header>
+          <GuideSectionNav guideId={guide.id} characterKey={guide.characterKey} current="comment" extras={extras} />
+        </div>
+        <Suspense fallback={<CommentBoardSkeleton />}>
+          <CommentBoardContent target={`guide:${guide.id}`} />
+        </Suspense>
+      </main>
+    </div>
+  );
+}