@tscircuit/fake-snippets 0.0.109 → 0.0.110

package/src/pages/quickstart.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react"
-import { useQuery } from "react-query"
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { useQuery, useQueryClient } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
@@ -7,35 +7,64 @@ import { Package } from "fake-snippets-api/lib/db/schema"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { TypeBadge } from "@/components/TypeBadge"
-import { JLCPCBImportDialog } from "@/components/JLCPCBImportDialog"
 import { CircuitJsonImportDialog } from "@/components/CircuitJsonImportDialog"
-import { useNotImplementedToast } from "@/hooks/use-toast"
 import { useGlobalStore } from "@/hooks/use-global-store"
+import { useImportComponentDialog } from "@/components/dialogs/import-component-dialog"
+import { useJlcpcbComponentImport } from "@/hooks/use-jlcpcb-component-import"
+import { JlcpcbComponentTsxLoadedPayload } from "@tscircuit/runframe/runner"
 import { cn } from "@/lib/utils"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Link } from "wouter"
+import { Loader2 } from "lucide-react"
 
 export const QuickstartPage = () => {
   const axios = useAxios()
-  const [isJLCPCBDialogOpen, setIsJLCPCBDialogOpen] = useState(false)
+  const queryClient = useQueryClient()
   const [isCircuitJsonImportDialogOpen, setIsCircuitJsonImportDialogOpen] =
     useState(false)
-  const toastNotImplemented = useNotImplementedToast()
-  const currentUser = useGlobalStore((s) => s.session?.github_username)
+  const session = useGlobalStore((s) => s.session)
+  const currentUser = session?.github_username
+  const isLoggedIn = Boolean(currentUser)
+  const { Dialog: ImportComponentDialog, openDialog: openImportDialog } =
+    useImportComponentDialog()
+  const { importComponent: importJlcpcbComponent } = useJlcpcbComponentImport()
+  const jlcpcbProxyRequestHeaders = useMemo(
+    () =>
+      session?.token
+        ? {
+            Authorization: `Bearer ${session.token}`,
+          }
+        : undefined,
+    [session?.token],
+  )
+  const handleJlcpcbComponentSelected = useCallback(
+    async (payload: JlcpcbComponentTsxLoadedPayload) => {
+      await importJlcpcbComponent(payload)
+    },
+    [importJlcpcbComponent],
+  )
+  useEffect(() => {
+    queryClient.removeQueries("userPackages")
+  }, [queryClient])
   const { data: myPackages, isLoading } = useQuery<Package[]>(
-    "userPackages",
+    ["userPackages", currentUser],
     async () => {
       const response = await axios.post(`/packages/list`, {
         owner_github_username: currentUser,
       })
       return response.data.packages
     },
+    {
+      enabled: isLoggedIn,
+    },
   )
 
-  const blankTemplates = [
+  const blankTemplates: Array<{
+    name: string
+    type: string
+    disabled?: boolean
+  }> = [
     { name: "Blank Circuit Board", type: "board" },
     { name: "Blank Circuit Module", type: "package" },
-    { name: "Blank 3D Model", type: "model", disabled: true },
-    { name: "Blank Footprint", type: "footprint", disabled: true },
   ]
 
   const templates = [
@@ -44,51 +73,63 @@ export const QuickstartPage = () => {
   ]
 
   return (
-    <div>
+    <div className="min-h-screen">
       <Header />
-      <div className="container mx-auto px-4 py-8">
-        <div className="mb-8 hidden md:block">
-          <h2 className="text-xl font-semibold mb-4">Recent Packages</h2>
-          {isLoading ? (
-            <div>Loading...</div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-              {myPackages
-                ?.sort(
-                  (a, b) =>
-                    new Date(b.created_at).getTime() -
-                    new Date(a.created_at).getTime(),
-                )
-                .slice(0, 4)
-                .map((pkg) => (
-                  <PrefetchPageLink
-                    key={pkg.package_id}
-                    href={`/editor?package_id=${pkg.package_id}`}
-                  >
-                    <Card className="hover:shadow-md transition-shadow rounded-md flex flex-col h-full">
-                      <CardHeader className="pb-0 p-4">
-                        <CardTitle className="text-md">
-                          {pkg.unscoped_name}
-                        </CardTitle>
-                      </CardHeader>
-                      <CardContent className="p-4 pt-0 mt-auto">
-                        <p className="text-sm text-gray-500">
-                          Last edited:{" "}
-                          {new Date(pkg.updated_at).toLocaleDateString()}
-                        </p>
-                      </CardContent>
-                    </Card>
-                  </PrefetchPageLink>
-                ))}
+      <div className="container mx-auto px-6 py-12">
+        {isLoggedIn && (
+          <div className="mb-16 hidden md:block">
+            <div className="mb-8">
+              <h2 className="text-2xl font-semibold text-slate-900">
+                Recent Packages
+              </h2>
             </div>
-          )}
-        </div>
+            {isLoading ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="w-10 h-10 animate-spin text-blue-500 mb-4" />
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                {myPackages
+                  ?.sort(
+                    (a, b) =>
+                      new Date(b.created_at).getTime() -
+                      new Date(a.created_at).getTime(),
+                  )
+                  .slice(0, 4)
+                  .map((pkg) => (
+                    <Link
+                      key={pkg.package_id}
+                      href={`/editor?package_id=${pkg.package_id}`}
+                    >
+                      <Card className="hover:shadow-md border bg-white shadow-sm transition-shadow flex flex-col h-full rounded-md">
+                        <CardHeader>
+                          <CardTitle className="text-lg font-semibold text-slate-900">
+                            {pkg.unscoped_name}
+                          </CardTitle>
+                        </CardHeader>
+                        <CardContent className="-mt-4">
+                          <p className="text-sm text-slate-500">
+                            Last edited{" "}
+                            {new Date(pkg.updated_at).toLocaleDateString()}
+                          </p>
+                        </CardContent>
+                      </Card>
+                    </Link>
+                  ))}
+              </div>
+            )}
+          </div>
+        )}
 
-        <div className="mb-8">
-          <h2 className="text-xl font-semibold mb-4">Start Blank Packages</h2>
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div className="mb-16">
+          <div className="mb-8">
+            <h2 className="text-2xl font-semibold text-slate-900">
+              Start Blank
+            </h2>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
             {blankTemplates.map((template, index) => (
-              <PrefetchPageLink
+              <Link
                 key={index}
                 href={
                   template.disabled
@@ -100,90 +141,81 @@ export const QuickstartPage = () => {
               >
                 <Card
                   className={cn(
-                    "hover:shadow-md transition-shadow rounded-md h-full flex flex-col",
+                    "hover:shadow-md border bg-white transition-shadow h-full flex flex-col rounded-md",
                     template.disabled && "opacity-50 cursor-not-allowed",
                   )}
                 >
-                  <CardHeader className="p-4 flex-grow flex flex-col justify-between">
-                    <CardTitle className="text-md">{template.name}</CardTitle>
-                    <div className="mt-2 flex">
-                      <TypeBadge type={template.type as any} />
+                  <CardHeader className="p-6 flex-grow flex flex-col justify-between">
+                    <div>
+                      <CardTitle className="text-lg font-semibold text-slate-900 mb-3">
+                        {template.name}
+                      </CardTitle>
+                      <div className="flex justify-between items-center">
+                        <TypeBadge type={template.type as any} />
+                      </div>
                     </div>
                   </CardHeader>
                 </Card>
-              </PrefetchPageLink>
+              </Link>
             ))}
           </div>
         </div>
 
-        <div className="mt-12">
-          <h2 className="text-xl font-semibold mb-4">Import as Package</h2>
-          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
-            {/* {[
-              { name: "KiCad Footprint", type: "footprint" },
-              { name: "KiCad Project", type: "board" },
-              { name: "KiCad Module", type: "package" },
-            ].map((template, index) => (
-              <Card
-                key={index}
-                className="hover:shadow-md transition-shadow rounded-md opacity-50 flex flex-col"
-              >
-                <CardHeader className="p-4 pb-0">
-                  <CardTitle className="text-lg flex items-center justify-between">
-                    {template.name}
-                    <TypeBadge type={template.type as any} className="ml-2" />
+        <div className="mb-16">
+          <div className="mb-8">
+            <h2 className="text-2xl font-semibold text-slate-900">
+              Import Components
+            </h2>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <Card className="hover:shadow-md border bg-white transition-shadow flex flex-col rounded-md">
+              <CardHeader className="p-6 pb-4">
+                <div className="flex items-center justify-between mb-2">
+                  <CardTitle className="text-lg font-semibold text-slate-900">
+                    JLCPCB Component
                   </CardTitle>
-                </CardHeader>
-                <CardContent className="p-4 mt-auto">
-                  <Button
-                    className="w-full"
-                    onClick={() => {
-                      toastNotImplemented("Kicad Imports")
-                    }}
-                  >
-                    Import {template.name}
-                  </Button>
-                </CardContent>
-              </Card>
-            ))} */}
-            <Card className="hover:shadow-md transition-shadow rounded-md flex flex-col">
-              <CardHeader className="p-4 pb-0">
-                <CardTitle className="text-lg flex items-center justify-between">
-                  JLCPCB Component
-                  <TypeBadge type="package" className="ml-2" />
-                </CardTitle>
+                  <TypeBadge type="package" />
+                </div>
+                <p className="text-sm text-slate-500">
+                  Import components from JLCPCB library
+                </p>
               </CardHeader>
-              <CardContent className="p-4 mt-auto">
+              <CardContent className="p-6 pt-0 mt-auto">
                 <Button
-                  className="w-full"
-                  onClick={() => setIsJLCPCBDialogOpen(true)}
+                  className="w-full text-white"
+                  onClick={() => openImportDialog()}
                 >
-                  Import JLCPCB Component
+                  Import JLCPCB
                 </Button>
               </CardContent>
             </Card>
-            <Card className="hover:shadow-md transition-shadow rounded-md flex flex-col">
-              <CardHeader className="p-4 pb-0">
-                <CardTitle className="text-lg flex items-center justify-between">
-                  Circuit Json
-                  <TypeBadge type="package" className="ml-2" />
-                </CardTitle>
+            <Card className="hover:shadow-md border bg-white transition-shadow flex flex-col rounded-md">
+              <CardHeader className="p-6 pb-4">
+                <div className="flex items-center justify-between mb-2">
+                  <CardTitle className="text-lg font-semibold text-slate-900">
+                    Circuit JSON
+                  </CardTitle>
+                  <TypeBadge type="package" />
+                </div>
+                <p className="text-sm text-slate-500">
+                  Import from Circuit JSON format
+                </p>
               </CardHeader>
-              <CardContent className="p-4 mt-auto">
+              <CardContent className="p-6 pt-0 mt-auto">
                 <Button
-                  className="w-full"
+                  className="w-full text-white"
                   onClick={() => setIsCircuitJsonImportDialogOpen(true)}
                 >
-                  Import Circuit JSON
+                  Import JSON
                 </Button>
               </CardContent>
             </Card>
           </div>
         </div>
 
-        <JLCPCBImportDialog
-          open={isJLCPCBDialogOpen}
-          onOpenChange={setIsJLCPCBDialogOpen}
+        <ImportComponentDialog
+          onJlcpcbComponentTsxLoaded={handleJlcpcbComponentSelected}
+          jlcpcbProxyRequestHeaders={jlcpcbProxyRequestHeaders}
         />
 
         <CircuitJsonImportDialog
@@ -191,27 +223,31 @@ export const QuickstartPage = () => {
           onOpenChange={setIsCircuitJsonImportDialogOpen}
         />
 
-        <div>
-          <h2 className="text-xl font-semibold mb-4 mt-12">
-            Start from a Template
-          </h2>
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div className="mb-16">
+          <div className="mb-8">
+            <h2 className="text-2xl font-semibold text-slate-900">
+              Popular Templates
+            </h2>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {templates.map((template, index) => (
-              <PrefetchPageLink
+              <Link
                 key={index}
                 href={`/editor?template=${template.name
                   .toLowerCase()
                   .replace(/ /g, "-")}`}
               >
-                <Card className="hover:shadow-md transition-shadow rounded-md">
-                  <CardHeader className="p-4">
-                    <CardTitle className="text-lg flex items-center justify-between">
-                      {template.name}
-                      <TypeBadge type={template.type as any} className="ml-2" />
-                    </CardTitle>
+                <Card className="hover:shadow-md border bg-white transition-shadow rounded-md">
+                  <CardHeader className="p-6">
+                    <div className="flex items-center justify-between ">
+                      <CardTitle className="text-lg font-semibold text-slate-900">
+                        {template.name}
+                      </CardTitle>
+                      <TypeBadge type={template.type as any} />
+                    </div>
                   </CardHeader>
                 </Card>
-              </PrefetchPageLink>
+              </Link>
             ))}
           </div>
         </div>

package/src/pages/release-detail.tsx

@@ -6,10 +6,14 @@ 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 { Calendar, GitBranch } from "lucide-react"
-import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Calendar, GitBranch, RefreshCw } from "lucide-react"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
 import { PackageBreadcrumb } from "@/components/PackageBreadcrumb"
+import { usePackageReleaseImages } from "@/hooks/use-package-release-images"
+import { Skeleton } from "@/components/ui/skeleton"
+import { useRebuildPackageReleaseMutation } from "@/hooks/use-rebuild-package-release-mutation"
+import { useGlobalStore } from "@/hooks/use-global-store"
 
 export default function ReleaseDetailPage() {
   const params = useParams<{
@@ -24,8 +28,6 @@ export default function ReleaseDetailPage() {
       ? `${params.author}/${params.packageName}`
       : null
 
-  const [copied, setCopied] = useState(false)
-
   const {
     data: pkg,
     isLoading: isLoadingPackage,
@@ -39,16 +41,58 @@ export default function ReleaseDetailPage() {
     data: packageRelease,
     isLoading: isLoadingRelease,
     error: releaseError,
-  } = usePackageReleaseByIdOrVersion(releaseIdOrVersion, packageName)
+  } = usePackageReleaseByIdOrVersion(releaseIdOrVersion, packageName, {
+    include_logs: true,
+  })
 
   const {
     data: latestBuild,
     isLoading: isLoadingBuild,
     error: buildError,
-  } = usePackageBuild(packageRelease?.latest_package_build_id ?? null)
+  } = usePackageBuild(packageRelease?.latest_package_build_id ?? null, {
+    include_logs: true,
+  })
+
+  const { availableViews } = usePackageReleaseImages({
+    packageReleaseId: packageRelease?.package_release_id,
+  })
+
+  const session = useGlobalStore((s) => s.session)
+  const { mutate: rebuildPackage, isLoading: isRebuildLoading } =
+    useRebuildPackageReleaseMutation()
 
   if (isLoadingPackage || isLoadingRelease) {
-    return null
+    return (
+      <>
+        <Header />
+        <div className="min-h-screen bg-white">
+          {/* Page Header Skeleton */}
+          <div className="bg-gray-50 border-b py-6">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+              <Skeleton className="h-6 w-64 mb-4" />
+              <div className="flex items-center gap-4">
+                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-4 w-32" />
+              </div>
+            </div>
+          </div>
+
+          {/* Images Skeleton */}
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {[1, 2, 3].map((i) => (
+                <Skeleton key={i} className="h-48 rounded-lg" />
+              ))}
+            </div>
+          </div>
+
+          {/* Main Content Skeleton */}
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+            <Skeleton className="h-64 w-full" />
+          </div>
+        </div>
+      </>
+    )
   }
 
   if (packageError?.status === 404 || !pkg) {
@@ -65,7 +109,7 @@ export default function ReleaseDetailPage() {
       <div className="min-h-screen bg-white">
         {/* Page Header */}
         <div className="bg-gray-50 border-b py-6">
-          <div className="max-w-7xl lg:flex lg:justify-between mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             {/* Breadcrumb */}
             <PackageBreadcrumb
               author={pkg.owner_github_username || ""}
@@ -78,35 +122,79 @@ export default function ReleaseDetailPage() {
             />
 
             {/* Header Content */}
-            <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-2">
-              <div className="flex-1">
-                <div className="flex items-center gap-4 text-sm text-gray-600">
-                  {packageRelease.is_pr_preview && (
-                    <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" />
-                    <span>
-                      Created {formatTimeAgo(packageRelease.created_at)}
-                    </span>
-                  </div>
+            <div className="flex flex-wrap items-center justify-between gap-3 mt-4">
+              <div className="flex flex-wrap items-center gap-4 text-sm text-gray-600">
+                {packageRelease.is_pr_preview && (
+                  <a
+                    href={`https://github.com/${pkg.github_repo_full_name}/pull/${packageRelease.github_pr_number}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1 hover:text-gray-800 transition-colors"
+                  >
+                    <GitBranch className="w-4 h-4" />
+                    <Badge variant="outline" className="text-xs">
+                      PR #{packageRelease.github_pr_number}
+                    </Badge>
+                  </a>
+                )}
+                <div className="flex items-center gap-1">
+                  <Calendar className="w-4 h-4" />
+                  <span>
+                    Created {formatTimeAgo(packageRelease.created_at)}
+                  </span>
                 </div>
               </div>
+
+              {/* Rebuild Button */}
+              {session?.github_username === pkg.owner_github_username && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="border-gray-300 bg-white hover:bg-gray-50 flex-shrink-0"
+                  disabled={isRebuildLoading || !packageRelease}
+                  onClick={() =>
+                    packageRelease &&
+                    rebuildPackage({
+                      package_release_id: packageRelease.package_release_id,
+                    })
+                  }
+                >
+                  <RefreshCw
+                    className={`w-4 h-4 mr-2 ${isRebuildLoading ? "animate-spin" : ""}`}
+                  />
+                  {isRebuildLoading ? "Rebuilding..." : "Rebuild"}
+                </Button>
+              )}
             </div>
           </div>
         </div>
 
+        {/* Images Section - Always show with skeletons while loading */}
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {availableViews.length > 0
+              ? availableViews.map((view) => (
+                  <div
+                    key={view.id}
+                    className="flex items-center justify-center border rounded-lg bg-gray-50 overflow-hidden h-48"
+                  >
+                    {view.isLoading ? (
+                      <Skeleton className="w-full h-full" />
+                    ) : (
+                      <img
+                        src={view.imageUrl}
+                        alt={`${view.label} preview`}
+                        className={`w-full h-full object-contain ${view.label.toLowerCase() == "pcb" ? "bg-black" : view.label.toLowerCase() == "schematic" ? "bg-[#F5F1ED]" : "bg-gray-100"}`}
+                      />
+                    )}
+                  </div>
+                ))
+              : [1, 2, 3].map((i) => (
+                  <Skeleton key={i} className="h-48 rounded-lg" />
+                ))}
+          </div>
+        </div>
+
         {/* Main Content */}
         <ConnectedRepoOverview
           packageBuild={latestBuild ?? null}