@tscircuit/fake-snippets 0.0.107 → 0.0.109

package/src/pages/preview-release.tsx

@@ -0,0 +1,279 @@
+import { useEffect, useState } from "react"
+import { useParams } from "wouter"
+import { Loader2, ChevronLeft, ChevronRight } from "lucide-react"
+import Header from "@/components/Header"
+import { SuspenseRunFrame } from "@/components/SuspenseRunFrame"
+import { TreeView } from "@/components/ui/tree-view"
+import { transformFilesToTreeData } from "@/lib/utils/transformFilesToTreeData"
+import { cn } from "@/lib/utils"
+import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import NotFoundPage from "./404"
+import { getBuildStatus } from "@/components/preview"
+import { usePackageReleaseById } from "@/hooks/use-package-release"
+import { usePackageFilesLoader } from "@/hooks/usePackageFilesLoader"
+import { usePackageBuild } from "@/hooks/use-package-builds"
+import { PackageBuild } from "fake-snippets-api/lib/db/schema"
+import { usePackageByName } from "@/hooks/use-package-by-package-name"
+import { findTargetFile } from "@/lib/utils/findTargetFile"
+
+const StatusPill = ({ status }: { status: string }) => {
+  const color =
+    status === "success"
+      ? "bg-emerald-600"
+      : status === "failed"
+        ? "bg-red-600"
+        : status === "building"
+          ? "bg-blue-600 animate-pulse"
+          : "bg-gray-500"
+  return <span className={cn("inline-block w-2 h-2 rounded-full", color)} />
+}
+
+export default function PreviewBuildPage() {
+  const params = useParams<{
+    packageReleaseId: string
+    author: string
+    packageName: string
+  }>()
+  const packageReleaseId = params?.packageReleaseId || null
+  const author = params?.author || null
+  const packageName = params?.packageName || null
+
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(true)
+  const [selectedFile, setSelectedFile] = useState<string | null>(null)
+  const [selectedItemId, setSelectedItemId] = useState<string>("")
+
+  const { data: packageRelease, isLoading: isLoadingRelease } =
+    usePackageReleaseById(packageReleaseId)
+  const { data: pkg, isLoading: isLoadingPackage } = usePackageByName(
+    author && packageName ? `${author}/${packageName}` : null,
+  )
+  const { data: build, isLoading: isLoadingBuild } = usePackageBuild(
+    packageRelease?.latest_package_build_id || null,
+  )
+  const { data: buildFiles = [], isLoading: isLoadingFiles } =
+    usePackageFilesLoader(pkg)
+
+  const buildFsMap = Object.fromEntries(
+    buildFiles.map((f) => [f.path, f.content]),
+  )
+
+  const targetFile = findTargetFile(buildFiles, selectedFile)
+  const mainComponentPath = targetFile?.path ?? null
+
+  useEffect(() => {
+    if (!selectedFile && mainComponentPath) {
+      setSelectedFile(mainComponentPath)
+    }
+  }, [mainComponentPath, selectedFile])
+
+  if (!packageReleaseId) {
+    return <NotFoundPage heading="Package Release Not Found" />
+  }
+
+  if (!packageRelease && !isLoadingRelease) {
+    return <NotFoundPage heading="Package Release Not Found" />
+  }
+  const isLoading =
+    isLoadingRelease || isLoadingPackage || isLoadingFiles || isLoadingBuild
+
+  if (!build && !isLoading) {
+    return <NotFoundPage heading="Package Build Not Found" />
+  }
+
+  const { status } = getBuildStatus(build as PackageBuild)
+
+  const treeData = transformFilesToTreeData({
+    files: buildFsMap,
+    currentFile: selectedFile ?? mainComponentPath,
+    renamingFile: null,
+    handleRenameFile: () => ({ fileRenamed: false }),
+    handleDeleteFile: () => ({ fileDeleted: false }),
+    setRenamingFile: () => {},
+    onFileSelect: setSelectedFile,
+    onFolderSelect: () => {},
+    canModifyFiles: false,
+    setErrorMessage: () => {},
+    setSelectedFolderForCreation: () => {},
+  })
+
+  return (
+    <>
+      <Header />
+      <div className="flex flex-col h-screen overflow-hidden  !-mt-1">
+        <div className="flex flex-1 overflow-hidden">
+          <aside
+            className={cn(
+              "relative border-r border-gray-200 rounded-r-lg z-[5] h-full transition-all duration-300 ease-in-out bg-white",
+              sidebarCollapsed ? "w-2 md:w-3" : "w-80",
+            )}
+          >
+            <button
+              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              className="absolute top-4 -right-3 z-10 bg-white border border-gray-200 rounded-full p-1 hover:bg-gray-50"
+            >
+              {sidebarCollapsed ? (
+                <ChevronRight size={20} />
+              ) : (
+                <ChevronLeft size={20} />
+              )}
+            </button>
+
+            {!sidebarCollapsed && (
+              <>
+                <div className="p-4 border-b border-gray-200">
+                  <div className="space-y-3">
+                    <div className="flex items-center justify-between">
+                      <h2 className="text-lg font-semibold text-gray-900">
+                        Deployment
+                      </h2>
+                      <StatusPill status={status} />
+                    </div>
+
+                    <div className="space-y-2">
+                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+                        <span className="text-xs text-gray-500 uppercase tracking-wide">
+                          ID
+                        </span>
+                        <PrefetchPageLink
+                          href={`/${pkg?.name}/releases/${build?.package_release_id}`}
+                          title={build?.package_build_id}
+                          className="font-mono text-sm truncate text-gray-900 bg-gray-100 w-full px-2 py-1 rounded"
+                        >
+                          {build?.package_build_id}
+                        </PrefetchPageLink>
+                      </div>
+                      {packageRelease?.commit_message && (
+                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+                          <span className="text-xs text-gray-500 uppercase tracking-wide">
+                            Commit
+                          </span>
+                          <a
+                            title={packageRelease?.commit_message}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            href={`https://github.com/${pkg?.github_repo_full_name}/commit/${packageRelease?.commit_message}`}
+                            className="font-mono text-xs text-gray-600 bg-gray-50 px-2 text-right py-1 rounded truncate"
+                          >
+                            {packageRelease?.commit_message}
+                          </a>
+                        </div>
+                      )}
+
+                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
+                        <span className="text-xs text-gray-500 uppercase tracking-wide">
+                          Status
+                        </span>
+                        <span
+                          className={`text-xs font-medium px-2 py-1 w-fit rounded-full capitalize ${
+                            status === "success"
+                              ? "bg-emerald-100 text-emerald-800"
+                              : status === "error"
+                                ? "bg-red-100 text-red-800"
+                                : status === "building"
+                                  ? "bg-blue-100 text-blue-800"
+                                  : "bg-gray-100 text-gray-800"
+                          }`}
+                        >
+                          {status}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex-1 overflow-hidden">
+                  <div className="px-4 py-3 border-b border-gray-200">
+                    <h3 className="text-sm font-semibold text-gray-900">
+                      Files
+                    </h3>
+                    <p className="text-xs text-gray-500 mt-1">
+                      {isLoadingFiles
+                        ? "Loading files..."
+                        : `${treeData.length} file${treeData.length !== 1 ? "s" : ""}`}
+                    </p>
+                  </div>
+                  <div className="px-2 py-2 overflow-y-auto select-none">
+                    {isLoadingFiles ? (
+                      <div className="flex items-center justify-center py-8">
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                        <span className="ml-2 text-sm text-gray-500">
+                          Loading files...
+                        </span>
+                      </div>
+                    ) : (
+                      <TreeView
+                        selectedItemId={selectedItemId || ""}
+                        setSelectedItemId={(v) => setSelectedItemId(v || "")}
+                        data={treeData}
+                        className="w-full"
+                        onSelectChange={(item) => {
+                          if (item && !item.children) {
+                            setSelectedFile(item.id)
+                          }
+                        }}
+                      />
+                    )}
+                  </div>
+                </div>
+              </>
+            )}
+          </aside>
+
+          <main className="flex-1 overflow-y-auto">
+            <div className="flex flex-col h-full overflow-h-hidden">
+              {isLoading ? (
+                <div className="flex-1 flex items-center justify-center">
+                  <div className="flex flex-col items-center gap-3 text-gray-500">
+                    <Loader2 className="w-6 h-6 animate-spin" />
+                    <p>Loading package contents...</p>
+                  </div>
+                </div>
+              ) : status === "success" && buildFiles.length > 0 ? (
+                <SuspenseRunFrame
+                  fsMap={buildFsMap}
+                  mainComponentPath={mainComponentPath ?? "index.tsx"}
+                  showRunButton={false}
+                  className="[&>div]:overflow-y-hidden"
+                />
+              ) : (
+                <div className="flex-1 flex items-center justify-center">
+                  {status === "building" ? (
+                    <div className="flex flex-col items-center gap-3 text-gray-500">
+                      <Loader2 className="w-6 h-6 animate-spin" />
+                      <p>Building…</p>
+                    </div>
+                  ) : status === "error" ? (
+                    <div className="text-center">
+                      <p className="text-red-600 font-medium mb-2">
+                        Build Failed
+                      </p>
+                    </div>
+                  ) : buildFiles.length === 0 ? (
+                    <div className="text-center">
+                      <p className="text-gray-600 font-medium mb-2">
+                        No files found
+                      </p>
+                      <p className="text-sm text-gray-500">
+                        This package release doesn't have any files to preview.
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="text-center p-4">
+                      <p className="text-gray-600 font-medium mb-2">
+                        Build Status: {status}
+                      </p>
+                      <p className="text-sm text-gray-500 max-w-lg">
+                        Please wait while we process this build status. Try
+                        refreshing the page in a few moments.
+                      </p>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </main>
+        </div>
+      </div>
+    </>
+  )
+}

package/src/pages/release-builds.tsx

@@ -41,10 +41,6 @@ export default function ReleaseBuildsPage() {
     error: buildsError,
   } = usePackageBuildsByReleaseId(params?.releaseId ?? null)
 
-  const handleSelectBuild = (build: PackageBuild) => {
-    setLocation(`/build/${build.package_build_id}`)
-  }
-
   if (isLoadingPackage || isLoadingRelease || isLoadingBuilds) {
     return null
   }
@@ -57,10 +53,6 @@ export default function ReleaseBuildsPage() {
     return <NotFoundPage heading="Release Not Found" />
   }
 
-  if (buildsError?.status === 404 || !builds?.length) {
-    return <NotFoundPage heading="No Builds Found for Release" />
-  }
-
   return (
     <>
       <Header />

package/src/pages/release-detail.tsx

@@ -6,8 +6,7 @@ import { usePackageBuild } from "@/hooks/use-package-builds"
 import { ConnectedRepoOverview } from "@/components/preview/ConnectedRepoOverview"
 import Header from "@/components/Header"
 import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
-import { Calendar, GitBranch, Hash, Copy, Check } from "lucide-react"
+import { Calendar, GitBranch } from "lucide-react"
 import { useState } from "react"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
 import { PackageBreadcrumb } from "@/components/PackageBreadcrumb"
@@ -48,7 +47,7 @@ export default function ReleaseDetailPage() {
     error: buildError,
   } = usePackageBuild(packageRelease?.latest_package_build_id ?? null)
 
-  if (isLoadingPackage || isLoadingRelease || isLoadingBuild) {
+  if (isLoadingPackage || isLoadingRelease) {
     return null
   }
 
@@ -60,17 +59,13 @@ export default function ReleaseDetailPage() {
     return <NotFoundPage heading="Release Not Found" />
   }
 
-  if (buildError?.status === 404 || !latestBuild) {
-    return <NotFoundPage heading="No Builds Found for Release" />
-  }
-
   return (
     <>
       <Header />
       <div className="min-h-screen bg-white">
         {/* Page Header */}
         <div className="bg-gray-50 border-b py-6">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="max-w-7xl lg:flex lg:justify-between mx-auto px-4 sm:px-6 lg:px-8">
             {/* Breadcrumb */}
             <PackageBreadcrumb
               author={pkg.owner_github_username || ""}
@@ -87,12 +82,18 @@ export default function ReleaseDetailPage() {
               <div className="flex-1">
                 <div className="flex items-center gap-4 text-sm text-gray-600">
                   {packageRelease.is_pr_preview && (
-                    <div className="flex items-center gap-1">
-                      <GitBranch className="w-4 h-4" />
-                      <Badge variant="outline" className="text-xs">
-                        PR #{packageRelease.github_pr_number}
-                      </Badge>
-                    </div>
+                    <a
+                      href={`https://github.com/${pkg.github_repo_full_name}/pull/${packageRelease.github_pr_number}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <div className="flex items-center gap-1">
+                        <GitBranch className="w-4 h-4" />
+                        <Badge variant="outline" className="text-xs">
+                          PR #{packageRelease.github_pr_number}
+                        </Badge>
+                      </div>
+                    </a>
                   )}
                   <div className="flex items-center gap-1">
                     <Calendar className="w-4 h-4" />
@@ -108,7 +109,8 @@ export default function ReleaseDetailPage() {
 
         {/* Main Content */}
         <ConnectedRepoOverview
-          build={latestBuild}
+          packageBuild={latestBuild ?? null}
+          isLoadingBuild={isLoadingBuild}
           pkg={pkg}
           packageRelease={packageRelease}
         />

package/src/pages/releases.tsx

@@ -46,6 +46,10 @@ export default function ReleasesPage() {
   // If there's no build, we still want to show the releases page
   // The PackageReleasesDashboard will handle the case where latestBuild is null
   return (
-    <PackageReleasesDashboard latestBuild={latestBuild ?? null} pkg={pkg} />
+    <PackageReleasesDashboard
+      latestRelease={latestRelease}
+      latestBuild={latestBuild ?? null}
+      pkg={pkg}
+    />
   )
 }

package/src/pages/view-package.tsx

@@ -5,18 +5,19 @@ import { useLocation, useParams } from "wouter"
 import { Helmet } from "react-helmet-async"
 import { useEffect, useState } from "react"
 import NotFoundPage from "./404"
-import { useCurrentPackageId } from "@/hooks/use-current-package-id"
-import { usePackage } from "@/hooks/use-package"
+import { usePackageByName } from "@/hooks/use-package-by-package-name"
 
 export const ViewPackagePage = () => {
-  const {
-    packageId,
-    error: packageIdError,
-    isLoading: isLoadingPackageId,
-  } = useCurrentPackageId()
-  const { data: packageInfo } = usePackage(packageId)
   const { author, packageName } = useParams()
+  const packageNameFull = `${author}/${packageName}`
   const [, setLocation] = useLocation()
+
+  // Get package data directly by name - this will also cache by ID
+  const {
+    data: packageInfo,
+    error: packageError,
+    isLoading: isLoadingPackage,
+  } = usePackageByName(packageNameFull)
   const {
     data: packageRelease,
     error: packageReleaseError,
@@ -33,11 +34,10 @@ export const ViewPackagePage = () => {
     },
   )
 
-  const { data: packageFiles } = usePackageFiles(
-    packageRelease?.package_release_id,
-  )
+  const { data: packageFiles, isFetched: arePackageFilesFetched } =
+    usePackageFiles(packageRelease?.package_release_id)
 
-  if (!isLoadingPackageId && packageIdError) {
+  if (!isLoadingPackage && packageError) {
     return <NotFoundPage heading="Package Not Found" />
   }
 
@@ -51,7 +51,8 @@ export const ViewPackagePage = () => {
         <title>{`${author}/${packageName} - tscircuit`}</title>
       </Helmet>
       <RepoPageContent
-        packageFiles={packageFiles as any}
+        packageFiles={packageFiles ?? []}
+        arePackageFilesFetched={arePackageFilesFetched}
         packageInfo={packageInfo}
         packageRelease={packageRelease}
         importantFilePaths={["README.md", "LICENSE", "package.json"]}

package/src/components/Footer2.tsx

@@ -1,100 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { Card, CardContent } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion"
-import {
-  CircuitBoard,
-  Cpu,
-  Layers,
-  CloudLightningIcon as Lightning,
-  Maximize2,
-  Zap,
-} from "lucide-react"
-import { Link } from "wouter"
-import { Header2 } from "@/components/Header2"
-
-export const Footer2 = () => (
-  <footer className="w-full py-6 bg-background">
-    <div className="container px-4 md:px-6 mx-auto">
-      <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
-        <div className="space-y-4">
-          <div className="flex items-center gap-2">
-            <CircuitBoard className="h-6 w-6" />
-            <span className="text-lg font-bold">tscircuit</span>
-          </div>
-          <p className="text-sm text-muted-foreground">
-            Transforming electronic design with AI-powered tools.
-          </p>
-        </div>
-        <div className="space-y-4">
-          <h4 className="text-sm font-bold">Product</h4>
-          <ul className="space-y-2 text-sm">
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Features
-              </Link>
-            </li>
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Pricing
-              </Link>
-            </li>
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Tutorials
-              </Link>
-            </li>
-          </ul>
-        </div>
-        <div className="space-y-4">
-          <h4 className="text-sm font-bold">Company</h4>
-          <ul className="space-y-2 text-sm">
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                About
-              </Link>
-            </li>
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Blog
-              </Link>
-            </li>
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Careers
-              </Link>
-            </li>
-          </ul>
-        </div>
-        <div className="space-y-4">
-          <h4 className="text-sm font-bold">Legal</h4>
-          <ul className="space-y-2 text-sm">
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Privacy
-              </Link>
-            </li>
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Terms
-              </Link>
-            </li>
-            <li>
-              <Link className="text-muted-foreground hover:underline" href="#">
-                Cookie Policy
-              </Link>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div className="mt-8 border-t pt-8 text-center text-sm text-muted-foreground">
-        © {new Date().getFullYear()} tscircuit. All rights reserved.
-      </div>
-    </div>
-  </footer>
-)