@tscircuit/fake-snippets 0.0.107 → 0.0.108

package/src/pages/preview-release.tsx

@@ -0,0 +1,269 @@
+import { 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"
+
+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>("index.tsx")
+  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]),
+  )
+
+  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,
+    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={selectedFile ?? "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/hooks/use-snippets-base-api-url.ts

@@ -1,3 +0,0 @@
-export const useSnippetsBaseApiUrl = () => {
-  return import.meta.env.VITE_SNIPPETS_API_URL ?? "/api"
-}