/preview route

playwright-tests/preview-page.spec.ts

@@ -0,0 +1,19 @@
+import { expect, test } from "@playwright/test"
+
+test(`preview-snippet Page`, async ({ page }) => {
+  await page.goto("http://127.0.0.1:5177/preview?snippet_id=snippet_5&view=pcb")
+  await page.waitForTimeout(1000) 
+  await expect(page).toHaveScreenshot(`preview-snippet-pcb.png`)
+
+  await page.goto(
+    "http://127.0.0.1:5177/preview?snippet_id=snippet_5&view=schematic",
+  )
+  // Wait for schematic viewer to load
+  await page.waitForTimeout(1000)
+  await expect(page).toHaveScreenshot(`preview-snippet-schematic.png`)
+
+  await page.goto("http://127.0.0.1:5177/preview?snippet_id=snippet_5&view=3d")
+  // Wait for 3D viewer to load
+  await page.waitForTimeout(1000)
+  await expect(page).toHaveScreenshot(`preview-snippet-3d.png`)
+})

src/App.tsx

@@ -9,6 +9,7 @@ import { EditorPage } from "./pages/editor"
 import { LandingPage } from "./pages/landing"
 import { MyOrdersPage } from "./pages/my-orders"
 import { NewestPage } from "./pages/newest"
+import { PreviewPage } from "./pages/preview"
 import { QuickstartPage } from "./pages/quickstart"
 import { SearchPage } from "./pages/search"
 import { SettingsPage } from "./pages/settings"
@@ -31,6 +32,7 @@ function App() {
         <Route path="/authorize" component={AuthenticatePage} />
         <Route path="/my-orders" component={MyOrdersPage} />
         <Route path="/orders/:orderId" component={ViewOrderPage} />
+        <Route path="/preview" component={PreviewPage} />
         <Route path="/:username" component={UserProfilePage} />
         <Route path="/:author/:snippetName" component={ViewSnippetPage} />
       </Switch>

src/components/EditorNav.tsx

@@ -164,7 +164,7 @@ export default function EditorNav({
         <Button
           variant="outline"
           size="sm"
-          className={"h-6 px-2 text-xs"}
+          className={"h-6 px-2 text-xs save-button"}
           disabled={!isLoggedIn || !canSave}
           onClick={onSave}
         >

src/components/ViewSnippetSidebar.tsx

@@ -1,26 +1,10 @@
-import { Link } from "wouter"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import {
-  Code,
-  Monitor,
-  Bot,
-  GitFork,
-  AtSign,
-  Package,
-  Settings,
-  Link as LinkIcon,
-  Copy,
-  Hash,
-  Clock,
-  File,
-} from "lucide-react"
-import { GitHubLogoIcon } from "@radix-ui/react-icons"
-import { cn } from "@/lib/utils"
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
 import { useCurrentSnippet } from "@/hooks/use-current-snippet"
 import { useToast } from "@/hooks/use-toast"
+import { cn } from "@/lib/utils"
+import { AtSign, Bot, Clock, Code, File, GitFork, Package } from "lucide-react"
+import { Link } from "wouter"
 import { useFilesDialog } from "./dialogs/files-dialog"
-import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
 
 export default function ViewSnippetSidebar({
   className,

src/pages/preview.tsx

@@ -0,0 +1,70 @@
+import { CircuitToSvgWithMouseControl } from "@/components/CircuitToSvgWithMouseControl"
+import { useSnippet } from "@/hooks/use-snippet"
+import { useUrlParams } from "@/hooks/use-url-params"
+import { CadViewer } from "@tscircuit/3d-viewer"
+import { PCBViewer } from "@tscircuit/pcb-viewer"
+import { Loader2 } from "lucide-react"
+
+export const PreviewPage = () => {
+  const urlParams = useUrlParams()
+  const snippetId = urlParams.snippet_id
+  const view = urlParams.view || "pcb"
+  const { data: snippet, isLoading, error } = useSnippet(snippetId)
+
+  if (isLoading) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center">
+        <Loader2 className="w-8 h-8 animate-spin" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center text-red-500">
+        Error loading snippet: {error.message}
+      </div>
+    )
+  }
+
+  if (!snippet) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center text-gray-500">
+        Snippet not found
+      </div>
+    )
+  }
+
+  if (!snippet.circuit_json) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center text-gray-500">
+        No circuit data available
+      </div>
+    )
+  }
+
+  const validViews = ["pcb", "3d", "schematic"]
+  if (!validViews.includes(view)) {
+    return (
+      <div className="w-full h-screen">
+      {view === "pcb" && (
+        <PCBViewer soup={snippet.circuit_json} height={window.innerHeight} />
+      )}
+    </div>
+    )
+  }
+
+  return (
+    <div className="w-full h-screen">
+      {view === "pcb" && (
+        <PCBViewer soup={snippet.circuit_json} height={window.innerHeight} />
+      )}
+      {view === "3d" && <CadViewer soup={snippet.circuit_json as any} />}
+      {view === "schematic" && (
+        <CircuitToSvgWithMouseControl
+          circuitJson={snippet.circuit_json as any}
+        />
+      )}
+    </div>
+  )
+}