create-nextblock 0.0.1

package/templates/nextblock-template/app/cms/revisions/JsonDiffView.tsx

@@ -0,0 +1,86 @@
+// apps/nextblock/app/cms/revisions/JsonDiffView.tsx
+"use client";
+
+import React, { useMemo } from 'react';
+import { compare, type Operation } from 'fast-json-patch';
+
+interface JsonDiffViewProps {
+  oldValue: string;
+  newValue: string;
+  leftTitle?: string;
+  rightTitle?: string;
+}
+
+function getByPointer(obj: any, pointer: string): any {
+  if (!pointer || pointer === '/') return obj;
+  const parts = pointer.split('/').slice(1).map(p => p.replace(/~1/g, '/').replace(/~0/g, '~'));
+  let cur = obj;
+  for (const part of parts) {
+    if (cur == null) return undefined;
+    cur = cur[part];
+  }
+  return cur;
+}
+
+function safeStringify(v: any): string {
+  try {
+    return JSON.stringify(v, null, 2);
+  } catch {
+    return String(v);
+  }
+}
+
+export default function JsonDiffView({ oldValue, newValue, leftTitle = 'Current', rightTitle = 'Selected' }: JsonDiffViewProps) {
+  const { ops, oldObj } = useMemo(() => {
+    let a: any = null, b: any = null;
+    try { a = JSON.parse(oldValue); } catch { a = oldValue; }
+    try { b = JSON.parse(newValue); } catch { b = newValue; }
+    const operations: Operation[] = compare(a, b);
+    return { ops: operations, oldObj: a };
+  }, [oldValue, newValue]);
+
+  return (
+    <div className="border rounded">
+      <div className="flex items-center justify-between px-3 py-2 border-b text-sm text-muted-foreground">
+        <div>{leftTitle}</div>
+        <div>{rightTitle}</div>
+      </div>
+      <div className="p-3 text-sm space-y-2">
+        <div className="flex items-center gap-3 text-xs text-muted-foreground">
+          <span className="inline-flex items-center gap-1"><span className="inline-block w-3 h-3 rounded bg-green-200 border border-green-300" /> Current</span>
+          <span className="inline-flex items-center gap-1"><span className="inline-block w-3 h-3 rounded bg-red-200 border border-red-300" /> Selected Version</span>
+        </div>
+        {ops.length === 0 && (
+          <div className="text-muted-foreground">No differences.</div>
+        )}
+        {ops.map((op, idx) => {
+          const oldAtPath = op.op !== 'add' ? getByPointer(oldObj, op.path) : undefined;
+          const oldStr = op.op !== 'add' ? safeStringify(oldAtPath) : '';
+          const newStr = op.op !== 'remove' ? safeStringify((op as any).value) : '';
+          return (
+            <div key={idx} className="rounded border">
+              <div className="px-2 py-1 border-b flex items-center gap-2 text-xs">
+                <span className="uppercase tracking-wide font-semibold">{op.op}</span>
+                <code className="text-muted-foreground break-all">{op.path || '/'}</code>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2">
+                {op.op !== 'add' && (
+                  <div className="p-2 border-r md:border-r">
+                    <div className="text-xs text-muted-foreground mb-1">Current</div>
+                    <pre className="whitespace-pre-wrap break-words text-green-800 bg-green-50 rounded p-2 m-0">{oldStr}</pre>
+                  </div>
+                )}
+                {op.op !== 'remove' && (
+                  <div className="p-2">
+                    <div className="text-xs text-muted-foreground mb-1">Selected Version</div>
+                    <pre className="whitespace-pre-wrap break-words text-red-800 bg-red-50 rounded p-2 m-0">{newStr}</pre>
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/revisions/RevisionHistoryButton.tsx

@@ -0,0 +1,201 @@
+// apps/nextblock/app/cms/revisions/RevisionHistoryButton.tsx
+"use client";
+
+import { useEffect, useState, useTransition } from 'react';
+import { Button } from "@nextblock-cms/ui";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@nextblock-cms/ui";
+import { listPageRevisions, listPostRevisions, restorePageVersion, restorePostVersion, comparePageVersion, comparePostVersion } from './actions';
+import { useRouter } from 'next/navigation';
+import JsonDiffView from './JsonDiffView';
+import { formatDistanceToNow } from 'date-fns';
+import { toast } from 'react-hot-toast';
+
+type ParentType = 'page' | 'post';
+
+interface RevisionHistoryButtonProps {
+  parentType: ParentType;
+  parentId: number;
+}
+
+type RevisionItem = {
+  id: number;
+  version: number;
+  revision_type: 'snapshot' | 'diff';
+  created_at: string;
+  author_id: string | null;
+  author?: { full_name?: string | null; username?: string | null } | null;
+};
+
+export default function RevisionHistoryButton({ parentType, parentId }: RevisionHistoryButtonProps) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [revisions, setRevisions] = useState<RevisionItem[] | null>(null);
+  const [currentVersion, setCurrentVersion] = useState<number | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
+  const router = useRouter();
+
+  const [compareLoading, setCompareLoading] = useState(false);
+  const [activeCompareVersion, setActiveCompareVersion] = useState<number | null>(null);
+  const [leftText, setLeftText] = useState<string | null>(null);
+  const [rightText, setRightText] = useState<string | null>(null);
+  useEffect(() => {
+    if (!open) return;
+    setLoading(true);
+    setError(null);
+    (async () => {
+      try {
+        if (parentType === 'page') {
+          const res = await listPageRevisions(parentId);
+        if ('error' in res) {
+          setError(res.error ?? 'Unknown error');
+          setRevisions(null);
+          setCurrentVersion(null);
+        } else {
+          setRevisions(res.revisions as unknown as RevisionItem[]);
+          setCurrentVersion((res as any).currentVersion ?? null);
+        }
+        } else {
+          const res = await listPostRevisions(parentId);
+          if ('error' in res) { setError(res.error ?? 'Unknown error'); setRevisions(null); setCurrentVersion(null); }
+          else { setRevisions(res.revisions as unknown as RevisionItem[]); setCurrentVersion((res as any).currentVersion ?? null); }
+        }
+      } catch (e: unknown) {
+        setError(e instanceof Error ? e.message : 'Failed to load revisions');
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, [open, parentId, parentType]);
+
+  const handleRestore = (version: number) => {
+    setMessage(null);
+    setError(null);
+    startTransition(async () => {
+      try {
+        const res = parentType === 'page'
+          ? await restorePageVersion(parentId, version)
+          : await restorePostVersion(parentId, version);
+        if ('error' in res) {
+          setError(res.error ?? 'Unknown error');
+          toast.error(res.error ?? 'Failed to restore version');
+          return;
+        }
+        setMessage('Version restored successfully.');
+        toast.success('Version restored successfully');
+        // refresh current page to fetch restored content
+        router.refresh();
+        // Close the dialog after a short delay
+        setTimeout(() => setOpen(false), 800);
+      } catch (e: unknown) {
+        setError(e instanceof Error ? e.message : 'Failed to restore version');
+        toast.error(e instanceof Error ? e.message : 'Failed to restore version');
+      }
+    });
+  };
+
+  type CompareResult = { success: true; current: unknown; target: unknown } | { error: string };
+  const handleCompare = async (version: number) => {
+    setError(null);
+    setMessage(null);
+    setActiveCompareVersion(version);
+    setCompareLoading(true);
+    try {
+      const res: CompareResult = parentType === 'page'
+        ? await comparePageVersion(parentId, version)
+        : await comparePostVersion(parentId, version);
+      if ('error' in res) {
+        setError(res.error);
+        setLeftText(null);
+        setRightText(null);
+      } else {
+        const left = JSON.stringify(res.current, null, 2);
+        const right = JSON.stringify(res.target, null, 2);
+        setLeftText(left);
+        setRightText(right);
+      }
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to load comparison');
+    } finally {
+      setCompareLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <Button variant="outline" onClick={() => setOpen(true)}>Revision History</Button>
+      <DialogContent className="max-w-2xl h-[95vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Revision History</DialogTitle>
+          <DialogDescription>
+            Browse and restore previous versions.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3">
+          {loading && <div className="text-sm text-muted-foreground">Loading revisions…</div>}
+          {error && <div className="text-sm text-red-600">{error}</div>}
+          {message && <div className="text-sm text-green-600">{message}</div>}
+
+          {(!loading && revisions && revisions.length === 0) && (
+            <div className="text-sm text-muted-foreground">No revisions yet.</div>
+          )}
+
+              {revisions && revisions.length > 0 && (
+                <div className="divide-y rounded border">
+                  {revisions.map((rev: RevisionItem) => {
+                const when = rev.created_at ? formatDistanceToNow(new Date(rev.created_at), { addSuffix: true }) : '';
+                const who = rev.author?.full_name || rev.author?.username || rev.author_id || 'Unknown';
+                return (
+                  <div key={rev.id} className="flex items-center justify-between gap-4 p-3">
+                    <div className="min-w-0">
+                      <div className="font-medium flex items-center gap-2">
+                        <span>Version {rev.version}</span>
+                        <span className="text-xs text-muted-foreground">({rev.revision_type})</span>
+                        {currentVersion != null && rev.version === currentVersion && (
+                          <span className="text-[10px] px-1.5 py-0.5 rounded bg-blue-50 text-blue-700 border border-blue-200">Current</span>
+                        )}
+                      </div>
+                      <div className="text-xs text-muted-foreground truncate">{when} • {who}</div>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button variant="secondary" size="sm" onClick={() => handleCompare(rev.version)} disabled={compareLoading && activeCompareVersion === rev.version}>
+                        {compareLoading && activeCompareVersion === rev.version ? 'Loading…' : 'Compare'}
+                      </Button>
+                      <Button size="sm" onClick={() => handleRestore(rev.version)} disabled={isPending}>
+                        {isPending ? 'Restoring…' : 'Restore'}
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+          {(activeCompareVersion !== null) && (
+            <div className="mt-4">
+              <div className="mb-2 flex items-center justify-between">
+                <div className="font-semibold">Comparing Version {activeCompareVersion} to Current</div>
+                <Button variant="outline" size="sm" onClick={() => { setActiveCompareVersion(null); setLeftText(null); setRightText(null); }}>Close Compare</Button>
+              </div>
+              {compareLoading && <div className="text-sm text-muted-foreground">Preparing diff…</div>}
+              {!compareLoading && leftText && rightText && (
+                <JsonDiffView
+                  oldValue={leftText}
+                  newValue={rightText}
+                  leftTitle="Current (Now)"
+                  rightTitle={`Version ${activeCompareVersion}`}
+                />
+              )}
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/nextblock-template/app/cms/revisions/actions.ts

@@ -0,0 +1,84 @@
+// apps/nextblock/app/cms/revisions/actions.ts
+"use server";
+
+import { createClient } from "@nextblock-cms/db/server";
+import { restorePageToVersion, restorePostToVersion, reconstructPageVersionContent, reconstructPostVersionContent } from './service';
+import { getFullPageContent, getFullPostContent } from './utils';
+
+type RevisionListItem = {
+  id: number;
+  version: number;
+  revision_type: 'snapshot' | 'diff';
+  created_at: string;
+  author_id: string | null;
+  author?: { full_name?: string | null; username?: string | null } | null;
+};
+
+export async function listPageRevisions(pageId: number) {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from('page_revisions')
+    .select('id, page_id, author_id, version, revision_type, created_at, author:profiles(full_name, username)')
+    .eq('page_id', pageId)
+    .order('version', { ascending: false });
+  if (error) return { error: error.message } as const;
+  const { data: pageRow } = await supabase.from('pages').select('version').eq('id', pageId).single();
+  const currentVersion = pageRow?.version ?? null;
+  return { success: true as const, revisions: data as RevisionListItem[], currentVersion };
+}
+
+export async function listPostRevisions(postId: number) {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from('post_revisions')
+    .select('id, post_id, author_id, version, revision_type, created_at, author:profiles(full_name, username)')
+    .eq('post_id', postId)
+    .order('version', { ascending: false });
+  if (error) return { error: error.message } as const;
+  const { data: postRow } = await supabase.from('posts').select('version').eq('id', postId).single();
+  const currentVersion = postRow?.version ?? null;
+  return { success: true as const, revisions: data as RevisionListItem[], currentVersion };
+}
+
+export async function restorePageVersion(pageId: number, targetVersion: number) {
+  const supabase = createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return { error: 'User not authenticated.' } as const;
+  // Role checks are enforced by RLS; we can still short-circuit if needed
+  return await restorePageToVersion(pageId, targetVersion, user.id);
+}
+
+export async function restorePostVersion(postId: number, targetVersion: number) {
+  const supabase = createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return { error: 'User not authenticated.' } as const;
+  return await restorePostToVersion(postId, targetVersion, user.id);
+}
+
+import type { FullPageContent, FullPostContent } from './utils';
+
+type CompareResponse<T> = { success: true; current: T; target: T } | { error: string };
+
+export async function comparePageVersion(pageId: number, targetVersion: number): Promise<CompareResponse<FullPageContent>> {
+  const supabase = createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return { error: 'User not authenticated.' } as const;
+
+  const current = await getFullPageContent(pageId);
+  if (!current) return { error: 'Failed to fetch current content.' } as const;
+  const reconstructed = await reconstructPageVersionContent(pageId, targetVersion);
+  if ('error' in reconstructed) return { error: reconstructed.error ?? 'Unknown error occurred while reconstructing page version' } as const;
+  return { success: true as const, current, target: reconstructed.content };
+}
+
+export async function comparePostVersion(postId: number, targetVersion: number): Promise<CompareResponse<FullPostContent>> {
+  const supabase = createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return { error: 'User not authenticated.' } as const;
+
+  const current = await getFullPostContent(postId);
+  if (!current) return { error: 'Failed to fetch current content.' } as const;
+  const reconstructed = await reconstructPostVersionContent(postId, targetVersion);
+  if ('error' in reconstructed) return { error: reconstructed.error ?? 'Unknown error occurred while reconstructing post version' } as const;
+  return { success: true as const, current, target: reconstructed.content };
+}