feat(guides): add structured image-first editor

app/admin/page.tsx

@@ -1,91 +1,23 @@
-import Link from "next/link";
-import { EyeIcon, FileTextIcon, LayoutTemplateIcon, PlusIcon } from "lucide-react";
 import { redirect } from "next/navigation";
 import { connection } from "next/server";
 
-import { AdminSidebar } from "@/components/admin/admin-sidebar";
-import { LiveRefresh } from "@/components/live-refresh";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { StructuredDashboard } from "@/components/admin/structured-dashboard";
 import { getAdminSession } from "@/lib/auth/server";
-import { loadAdminNavigation } from "@/lib/content/loaders";
+import { getActiveCatalog, getLatestCatalogSyncJob, listGuideCards } from "@/lib/guides/queries";
 
 export default async function AdminPage() {
   await connection();
   if (!(await getAdminSession())) redirect("/admin/login");
-  const navigation = await loadAdminNavigation();
-
+  const [guides, trash, syncJob, catalog] = await Promise.all([
+    listGuideCards(),
+    listGuideCards(true),
+    getLatestCatalogSyncJob(),
+    getActiveCatalog(),
+  ]);
   return (
-    <SidebarProvider>
-      {process.env.BUZZ_DEMO_MODE === "true" ? null : (
-        <LiveRefresh endpoint="/api/events/admin" />
-      )}
-      <AdminSidebar navigation={navigation} />
-      <SidebarInset>
-        <header className="flex min-h-14 items-center gap-3 border-b px-4">
-          <SidebarTrigger />
-          <div className="min-w-0 flex-1">
-            <h1 className="font-heading font-semibold">ภาพรวมเนื้อหา</h1>
-            <p className="text-xs text-muted-foreground">ตัวละคร หน้า และสถานะการเผยแพร่</p>
-          </div>
-          <Button variant="outline" render={<Link href="/admin/templates" />}>
-            <LayoutTemplateIcon />เทมเพลต
-          </Button>
-        </header>
-        <main className="mx-auto w-full max-w-6xl space-y-8 p-4 sm:p-6 lg:p-8">
-          <div className="flex flex-wrap items-end justify-between gap-4">
-            <div>
-              <p className="text-sm font-medium text-primary">คลังคู่มือ</p>
-              <h2 className="mt-1 font-heading text-2xl font-semibold">ตัวละครทั้งหมด</h2>
-            </div>
-            <Button render={<Link href="/admin/templates" />}><PlusIcon />สร้างจากเทมเพลต</Button>
-          </div>
-          {navigation.characters.length > 0 ? (
-            <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
-              {navigation.characters.map((character) => (
-                <Card key={character.id}>
-                  <CardHeader>
-                    <CardTitle>{character.nameTh}</CardTitle>
-                    <CardDescription>{character.nameEn ?? character.slug}</CardDescription>
-                    <CardAction>
-                      <Badge variant={character.visible ? "default" : "outline"}>
-                        {character.visible ? "เผยแพร่" : "ซ่อน"}
-                      </Badge>
-                    </CardAction>
-                  </CardHeader>
-                  <CardContent className="space-y-2">
-                    {character.pages.map((page) => (
-                      <div key={page.id} className="flex min-h-11 items-center gap-2 rounded-lg border px-3">
-                        <FileTextIcon className="size-4 text-muted-foreground" />
-                        <Link href={`/admin/${character.slug}/${page.slug}`} className="min-w-0 flex-1 truncate text-sm font-medium hover:text-primary">
-                          {page.title}
-                        </Link>
-                        <Badge variant="outline">v{page.version}</Badge>
-                        {page.visible && character.visible ? (
-                          <Button variant="ghost" size="icon-xs" render={<Link href={`/${character.slug}/${page.slug}`} target="_blank" />} aria-label={`เปิด ${page.title}`}>
-                            <EyeIcon />
-                          </Button>
-                        ) : null}
-                      </div>
-                    ))}
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          ) : (
-            <Card className="border-dashed"><CardContent className="grid min-h-48 place-items-center text-center text-muted-foreground">ยังไม่มีตัวละคร เริ่มต้นด้วยเทมเพลตที่เตรียมไว้</CardContent></Card>
-          )}
-        </main>
-      </SidebarInset>
-    </SidebarProvider>
+    <main className="mx-auto flex w-full max-w-7xl flex-col gap-8 p-4 sm:p-6 lg:p-8">
+      <header><p className="text-sm font-medium text-primary">Buzz Sheet Admin</p><h1 className="font-heading text-3xl font-semibold">Guide Dashboard</h1><p className="mt-2 text-muted-foreground">จัดการ Guide แบบภาพ-first และบันทึกขึ้นเว็บไซต์ทันที</p></header>
+      <StructuredDashboard guides={guides} trash={trash} syncJob={syncJob} catalogVersion={catalog?.version ?? null} />
+    </main>
   );
 }