splitting editor and community

2026-03-11 12:16:26 +01:00
parent 5108636d49
commit 7359c1fcbf
586 changed files with 6477 additions and 1546 deletions
@@ -0,0 +1,190 @@
+'use client'
+
+import { initSpatialGridSync, useScene } from '@pascal-app/core'
+import { InteractiveSystem, useViewer, Viewer } from '@pascal-app/viewer'
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { ErrorBoundary } from '@/components/ui/primitives/error-boundary'
+import { SceneLoader } from '@pascal-app/editor'
+import {
+  getProjectModelPublic,
+  incrementProjectViews,
+} from '@/features/community/lib/projects/actions'
+import type { ProjectOwner } from '@/features/community/lib/projects/types'
+import { ViewerCameraControls } from './viewer-camera-controls'
+import { ViewerGuestCTA } from './viewer-guest-cta'
+import { ViewerOverlay } from './viewer-overlay'
+import { ViewerZoneSystem } from './viewer-zone-system'
+
+function ViewerSceneCrashFallback({ projectName }: { projectName?: string | null }) {
+  return (
+    <div className="absolute inset-0 z-30 flex items-center justify-center bg-background/95 p-4 text-foreground">
+      <div className="w-full max-w-md rounded-2xl border border-border/60 bg-background p-6 shadow-xl">
+        <h2 className="text-lg font-semibold">The 3D scene failed to render</h2>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {projectName ? `"${projectName}" ` : ''}
+          hit a rendering error. The rest of the app is still available.
+        </p>
+        <div className="mt-4 flex items-center gap-2">
+          <button
+            className="rounded-md border border-border bg-accent px-3 py-2 text-sm font-medium hover:bg-accent/80"
+            onClick={() => window.location.reload()}
+            type="button"
+          >
+            Reload scene
+          </button>
+          <Link
+            className="rounded-md border border-border bg-background px-3 py-2 text-sm font-medium hover:bg-accent/40"
+            href="/"
+          >
+            Back to home
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function ViewerPage() {
+  const params = useParams()
+  const id = params.id as string
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [projectId, setProjectId] = useState<string | null>(null)
+  const [projectName, setProjectName] = useState<string | null>(null)
+  const [owner, setOwner] = useState<ProjectOwner | null>(null)
+  const [canShowScans, setCanShowScans] = useState(true)
+  const [canShowGuides, setCanShowGuides] = useState(true)
+  const setScene = useScene((state) => state.setScene)
+
+  useEffect(() => {
+    useViewer.getState().setProjectId(projectId)
+  }, [projectId])
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setError(null)
+    setProjectId(null)
+    setProjectName(null)
+    setOwner(null)
+    setCanShowScans(true)
+    setCanShowGuides(true)
+    useViewer.getState().setShowScans(true)
+    useViewer.getState().setShowGuides(true)
+
+    const loadContent = async () => {
+      try {
+        // Check if it's a demo file (starts with 'demo_')
+        if (id.startsWith('demo_')) {
+          const response = await fetch(`/demos/${id}.json`)
+          if (cancelled) return
+
+          if (!response.ok) {
+            throw new Error(`Demo "${id}" not found`)
+          }
+
+          const data = await response.json()
+          if (cancelled) return
+
+          if (data.nodes && data.rootNodeIds) {
+            setScene(data.nodes, data.rootNodeIds)
+            initSpatialGridSync()
+          }
+
+          setProjectName('Demo')
+        } else {
+          // Load from database (public project)
+          const result = await getProjectModelPublic(id)
+          if (cancelled) return
+
+          if (result.success && result.data) {
+            const { project, model, isOwner } = result.data
+            const projectData = project as any
+
+            setProjectId(project.id)
+            setProjectName(project.name)
+            setOwner(projectData.owner ?? null)
+
+            // Apply public visibility settings for scans/guides (only for non-owners)
+            if (!isOwner) {
+              const scansAllowed = projectData.show_scans_public !== false
+              const guidesAllowed = projectData.show_guides_public !== false
+              setCanShowScans(scansAllowed)
+              setCanShowGuides(guidesAllowed)
+
+              if (!scansAllowed) {
+                useViewer.getState().setShowScans(false)
+              }
+              if (!guidesAllowed) {
+                useViewer.getState().setShowGuides(false)
+              }
+            }
+
+            if (model?.scene_graph) {
+              const { nodes, rootNodeIds } = model.scene_graph
+              setScene(nodes, rootNodeIds)
+              initSpatialGridSync()
+            }
+
+            // Increment view count
+            await incrementProjectViews(id)
+            if (cancelled) return
+          } else {
+            throw new Error(result.error || 'Project not found')
+          }
+        }
+
+        if (!cancelled) {
+          setLoading(false)
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : 'Failed to load content')
+          setLoading(false)
+        }
+      }
+    }
+
+    loadContent()
+
+    return () => {
+      cancelled = true
+    }
+  }, [id, setScene])
+
+  if (error) {
+    return (
+      <div className="flex h-screen w-full items-center justify-center bg-neutral-100">
+        <p className="text-destructive">{error}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative h-screen w-full">
+      {loading && <SceneLoader fullScreen />}
+
+      {!loading && (
+        <>
+          <ViewerOverlay
+            projectName={projectName}
+            owner={owner}
+            canShowScans={canShowScans}
+            canShowGuides={canShowGuides}
+          />
+          <ViewerGuestCTA />
+
+          <ErrorBoundary key={id} fallback={<ViewerSceneCrashFallback projectName={projectName} />}>
+            <Viewer>
+              <ViewerCameraControls />
+              <ViewerZoneSystem />
+              <InteractiveSystem />
+            </Viewer>
+          </ErrorBoundary>
+        </>
+      )}
+    </div>
+  )
+}