WEB-145 Add preview button to save toast (#126)

- Add preview button to save toast
- Consolidate preview URL building logic into shared helper

Author: wlenig

src/app/editor/[id]/[slug]/SaveButton.tsx

@@ -5,7 +5,7 @@ import { useTransition } from "react";
 import { toast } from "sonner";
 import { useDocumentContext } from "./client";
 import { saveVersionAction } from "../../../../lib/documents/actions";
-import { getEditorUrl } from "../../../../lib/editor-url";
+import { getEditorUrl, getPreviewUrl } from "../../../../lib/editor-url";
 import { runAction } from "../../runAction";
 import { useDialogs } from "@/components/ui/dialog-provider";
 
@@ -29,7 +29,17 @@ export function SaveButton() {
 
       addVersion(result.data.version);
       window.history.replaceState(null, "", getEditorUrl(documentId, documentName, result.data.version.id));
-      toast.success("Saved");
+
+      const previewUrl = getPreviewUrl(documentId, documentName, result.data.version.id);
+      toast.success("Saved", {
+        action: {
+          label: "Preview",
+
+          onClick: () => {
+            window.open(previewUrl, "_blank");
+          },
+        },
+      });
     });
   };
 

src/app/editor/[id]/[slug]/VersionListPanel.tsx

@@ -9,7 +9,7 @@ export interface VersionListPanelProps {
   publishedVersionId?: number | null;
   onLoadVersion: (versionId: number) => void;
   onPublishVersion: (versionId: number) => void;
-  previewBaseUrl: string;
+  getPreviewUrlForVersion: (versionId: number) => string;
   isPublishing?: boolean;
   isPublishDisabled?: boolean;
 }
@@ -27,7 +27,7 @@ function VersionEntry({
   isPublished,
   onLoad,
   onPublish,
-  previewBaseUrl,
+  getPreviewUrlForVersion,
   isPublishing,
   isPublishDisabled,
 }: {
@@ -36,7 +36,7 @@ function VersionEntry({
   isPublished: boolean;
   onLoad: () => void;
   onPublish: () => void;
-  previewBaseUrl: string;
+  getPreviewUrlForVersion: (versionId: number) => string;
   isPublishing?: boolean;
   isPublishDisabled?: boolean;
 }) {
@@ -79,7 +79,7 @@ function VersionEntry({
             </button>
           )}
           <a
-            href={`${previewBaseUrl}/${version.id}/preview`}
+            href={getPreviewUrlForVersion(version.id)}
             target="_blank"
             rel="noopener noreferrer"
             onClick={(e) => e.stopPropagation()}
@@ -101,7 +101,7 @@ export function VersionListPanel({
   publishedVersionId,
   onLoadVersion,
   onPublishVersion,
-  previewBaseUrl,
+  getPreviewUrlForVersion,
   isPublishing,
   isPublishDisabled,
 }: VersionListPanelProps) {
@@ -132,7 +132,7 @@ export function VersionListPanel({
               isPublished={version.id === publishedVersionId}
               onLoad={() => onLoadVersion(version.id)}
               onPublish={() => onPublishVersion(version.id)}
-              previewBaseUrl={previewBaseUrl}
+              getPreviewUrlForVersion={getPreviewUrlForVersion}
               isPublishing={isPublishing}
               isPublishDisabled={isPublishDisabled}
             />

src/app/editor/[id]/[slug]/VersionPluginContainer.tsx

@@ -4,7 +4,7 @@ import { useTransition } from "react";
 import { useRouter } from "next/navigation";
 import { useDocumentContext } from "./client";
 import { publishVersionAction } from "../../../../lib/documents/actions";
-import { getEditorUrl } from "../../../../lib/editor-url";
+import { getEditorUrl, getPreviewUrl } from "../../../../lib/editor-url";
 import { runAction } from "../../runAction";
 import { VersionListPanel } from "./VersionListPanel";
 import { useDialogs } from "@/components/ui/dialog-provider";
@@ -43,7 +43,9 @@ export function VersionPluginContainer() {
         publishedVersionId={publishedVersionId}
         onLoadVersion={handleLoadVersion}
         onPublishVersion={handlePublishVersion}
-        previewBaseUrl={getEditorUrl(documentId, documentName)}
+        getPreviewUrlForVersion={(targetVersionId) =>
+          getPreviewUrl(documentId, documentName, targetVersionId)
+        }
         isPublishing={isPublishing}
         isPublishDisabled={isArchived}
       />

src/lib/editor-url.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { getEditorSlug, getEditorUrl } from "./editor-url";
+import { getEditorSlug, getEditorUrl, getPreviewUrl } from "./editor-url";
 
 describe("getEditorSlug", () => {
   it.each<[string | null, string]>([
@@ -29,3 +29,14 @@ describe("getEditorUrl", () => {
     expect(getEditorUrl(id, name, versionId)).toBe(expected);
   });
 });
+
+describe("getPreviewUrl", () => {
+  it.each<[number, string | null, number | undefined, string]>([
+    [4, "Hello World", undefined, "/editor/4/hello-world/preview"],
+    [4, "Hello World", 23, "/editor/4/hello-world/23/preview"],
+    [4, null, undefined, "/editor/4/untitled/preview"],
+    [4, null, 10, "/editor/4/untitled/10/preview"],
+  ])("getPreviewUrl(%j, %j, %j) → %j", (id, name, versionId, expected) => {
+    expect(getPreviewUrl(id, name, versionId)).toBe(expected);
+  });
+});

src/lib/editor-url.ts

@@ -31,3 +31,11 @@ export function getEditorUrl(
   const base = `/editor/${documentId}/${slug}`;
   return versionId !== undefined ? `${base}/${versionId}` : base;
 }
+
+export function getPreviewUrl(
+  documentId: number,
+  documentName: string | null,
+  versionId?: number,
+): string {
+  return `${getEditorUrl(documentId, documentName, versionId)}/preview`;
+}