feat(editor): add responsive visual workspace

2026-08-28 19:40:22 +00:00
parent 33d2812d2e
commit 2ddbd374ae
9 changed files with 1392 additions and 3 deletions
@@ -0,0 +1,22 @@
+import { notFound, redirect } from "next/navigation";
+import { connection } from "next/server";
+
+import { EditorWorkspace } from "@/components/admin/editor-workspace";
+import { getAdminSession } from "@/lib/auth/server";
+import { loadAdminNavigation, loadAdminPage } from "@/lib/content/loaders";
+
+export default async function AdminEditorPage({
+  params,
+}: {
+  params: Promise<{ character: string; page: string }>;
+}) {
+  await connection();
+  if (!(await getAdminSession())) redirect("/admin/login");
+  const { character, page } = await params;
+  const [snapshot, navigation] = await Promise.all([
+    loadAdminPage(character, page),
+    loadAdminNavigation(),
+  ]);
+  if (!snapshot) notFound();
+  return <EditorWorkspace snapshot={snapshot} navigation={navigation} />;
+}
@@ -1,10 +1,15 @@
 "use server";

-import { z } from "zod";
+import * as z from "zod";

 import type { AutosaveResponse } from "@/lib/editor/autosave";
-import { savePageDraft } from "@/lib/content/mutations";
-import type { PageSnapshot } from "@/lib/content/types";
+import {
+  createNamedRevision,
+  saveDataSourceVersion,
+  savePageDraft,
+} from "@/lib/content/mutations";
+import { dataSourceSnapshotSchema } from "@/lib/content/data-source";
+import type { DataSourceSnapshot, PageSnapshot } from "@/lib/content/types";
 import { requireAdmin } from "@/lib/auth/server";

 const serializedBlockSchema = z.strictObject({
@@ -69,3 +74,61 @@ export async function saveEditorPage(input: unknown): Promise<EditorSaveResult>
    };
  }
 }
+
+export async function saveEditorDataSource(
+  input: unknown,
+): Promise<AutosaveResponse<DataSourceSnapshot>> {
+  const admin = await requireAdmin();
+  const parsed = dataSourceSnapshotSchema.safeParse(input);
+  if (!parsed.success) {
+    return {
+      status: "validation-error",
+      issues: parsed.error.issues.map((issue) => issue.message),
+    };
+  }
+  if (process.env.BUZZ_DEMO_MODE === "true") {
+    return {
+      status: "saved",
+      version: parsed.data.version + 1,
+      snapshot: { ...parsed.data, version: parsed.data.version + 1 },
+    };
+  }
+  try {
+    const result = await saveDataSourceVersion({
+      ...parsed.data,
+      expectedVersion: parsed.data.version,
+      authorId: admin.user.id,
+    });
+    if (result.status === "accepted") {
+      return {
+        status: "saved",
+        version: result.value.version,
+        snapshot: result.value,
+      };
+    }
+    if (result.status === "not-found") {
+      return { status: "validation-error", issues: ["ไม่พบแหล่งข้อมูล"] };
+    }
+    return result;
+  } catch (cause) {
+    return {
+      status: "transient-error",
+      message: cause instanceof Error ? cause.message : "บันทึกข้อมูลไม่สำเร็จ",
+    };
+  }
+}
+
+export async function createEditorRevision(
+  pageId: string,
+  label: string,
+): Promise<{ status: "saved"; id: string } | { status: "error" }> {
+  const admin = await requireAdmin();
+  const parsed = z.string().uuid().safeParse(pageId);
+  const safeLabel = z.string().trim().min(1).max(160).safeParse(label);
+  if (!parsed.success || !safeLabel.success) return { status: "error" };
+  if (process.env.BUZZ_DEMO_MODE === "true") {
+    return { status: "saved", id: crypto.randomUUID() };
+  }
+  const id = await createNamedRevision(parsed.data, safeLabel.data, admin.user.id);
+  return id ? { status: "saved", id } : { status: "error" };
+}
@@ -0,0 +1,14 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AdminLoading() {
+  return (
+    <div className="flex min-h-svh">
+      <Skeleton className="hidden w-64 rounded-none md:block" />
+      <div className="flex-1 space-y-5 p-6">
+        <Skeleton className="h-12 w-full" />
+        <Skeleton className="h-36 w-full" />
+        <Skeleton className="h-72 w-full" />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,87 @@
+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 { 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 { getAdminSession } from "@/lib/auth/server";
+import { loadAdminNavigation } from "@/lib/content/loaders";
+
+export default async function AdminPage() {
+  await connection();
+  if (!(await getAdminSession())) redirect("/admin/login");
+  const navigation = await loadAdminNavigation();
+
+  return (
+    <SidebarProvider>
+      <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>
+  );
+}