@tscircuit/fake-snippets 0.0.106 → 0.0.108

package/src/components/preview/BuildsList.tsx

@@ -2,15 +2,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Clock,
-  GitBranch,
-  AlertCircle,
-  CheckCircle,
-  Loader2,
-  MoreHorizontal,
-  GitCommit,
-} from "lucide-react"
+import { GitBranch, MoreHorizontal, GitCommit } from "lucide-react"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -28,63 +20,52 @@ import {
 import { getBuildStatus, StatusIcon } from "."
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
 import { Package, PackageBuild } from "fake-snippets-api/lib/db/schema"
-import { usePackageBuilds } from "@/hooks/use-package-builds"
-import { usePackageReleaseById } from "@/hooks/use-package-release"
+import { usePackageReleasesByPackageId } from "@/hooks/use-package-release"
 import { useQueries } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
+import { useLocation } from "wouter"
 
-export const BuildsList = ({
-  pkg,
-  onSelectBuild,
-}: {
-  pkg: Package
-  onSelectBuild?: (build: PackageBuild) => void
-}) => {
-  const { data: builds, isLoading } = usePackageBuilds({
-    package_id: pkg.package_id,
-  })
+export const BuildsList = ({ pkg }: { pkg: Package }) => {
+  const { data: releases, isLoading: isLoadingReleases } =
+    usePackageReleasesByPackageId(pkg.package_id)
   const axios = useAxios()
+  const [, setLocation] = useLocation()
+  // Get the latest build for each release to show status
+  const latestBuildQueries = useQueries(
+    (releases || [])
+      .filter((release) => release.latest_package_build_id)
+      .map((release) => ({
+        queryKey: ["packageBuild", release.latest_package_build_id],
+        queryFn: async () => {
+          if (!release.latest_package_build_id) return null
+          const { data } = await axios.get("/package_builds/get", {
+            params: { package_build_id: release.latest_package_build_id },
+          })
+          return data.package_build
+        },
+        enabled: Boolean(release.latest_package_build_id),
+        retry: false,
+        refetchOnWindowFocus: false,
+      })),
+  )
 
-  const uniqueReleaseIds = [
-    ...new Set(
-      builds?.map((build) => build.package_release_id).filter(Boolean) || [],
-    ),
-  ]
+  const isLoading =
+    isLoadingReleases || latestBuildQueries.some((q) => q.isLoading)
 
-  const packageReleaseQueries = useQueries(
-    uniqueReleaseIds.map((releaseId) => ({
-      queryKey: ["packageRelease", { package_release_id: releaseId }],
-      queryFn: async () => {
-        const { data } = await axios.post("/package_releases/get", {
-          package_release_id: releaseId,
-        })
-        return data.package_release
-      },
-      enabled: Boolean(releaseId),
-      retry: false,
-      refetchOnWindowFocus: false,
-    })),
-  )
+  // Create a map of release ID to latest build for easy access
+  const latestBuildsMap = new Map<string, PackageBuild>()
 
-  const packageReleasesMap = new Map()
-  packageReleaseQueries.forEach((query, index) => {
-    if (query.data) {
-      packageReleasesMap.set(uniqueReleaseIds[index], query.data)
+  latestBuildQueries.forEach((query, index) => {
+    if (query.data && releases?.[index]) {
+      latestBuildsMap.set(releases[index].package_release_id, query.data)
     }
   })
   return (
     <>
       <div className="space-y-6">
-        <div className="flex items-center justify-between">
-          <div>
-            <h2 className="text-2xl font-bold text-gray-900">Builds</h2>
-            <p className="text-gray-600">Manage and monitor your builds</p>
-          </div>
-        </div>
-
         <Card>
           <CardHeader>
-            <CardTitle>Recent Deployments</CardTitle>
+            <CardTitle>Recent Releases</CardTitle>
           </CardHeader>
           <CardContent>
             <div className="overflow-x-auto [&>div]:no-scrollbar">
@@ -92,10 +73,10 @@ export const BuildsList = ({
                 <TableHeader>
                   <TableRow>
                     <TableHead>Status</TableHead>
-                    <TableHead>Build ID</TableHead>
+                    <TableHead>Release ID</TableHead>
+                    <TableHead>Version</TableHead>
                     <TableHead>Branch/PR</TableHead>
-                    <TableHead>Commit</TableHead>
-                    <TableHead>Author</TableHead>
+                    <TableHead>Latest Build</TableHead>
                     <TableHead>Created</TableHead>
                     <TableHead>Actions</TableHead>
                   </TableRow>
@@ -127,16 +108,20 @@ export const BuildsList = ({
                           </TableCell>
                         </TableRow>
                       ))
-                    : builds?.map((build) => {
-                        const { status, label } = getBuildStatus(build)
-                        const packageRelease = packageReleasesMap.get(
-                          build.package_release_id,
+                    : releases?.map((release) => {
+                        const latestBuild = latestBuildsMap.get(
+                          release.package_release_id,
                         )
+                        const { status, label } = getBuildStatus(latestBuild)
                         return (
                           <TableRow
-                            key={build.package_build_id}
+                            key={release.package_release_id}
                             className="cursor-pointer hover:bg-gray-50 no-scrollbar"
-                            onClick={() => onSelectBuild?.(build)}
+                            onClick={() => {
+                              setLocation(
+                                `/${pkg.name}/releases/${release.package_release_id}`,
+                              )
+                            }}
                           >
                             <TableCell>
                               <div className="flex items-center gap-2">
@@ -157,38 +142,45 @@ export const BuildsList = ({
                             </TableCell>
                             <TableCell>
                               <code className="text-sm bg-gray-100 px-2 py-1 rounded">
-                                {build.package_build_id.slice(-8)}
+                                {release.package_release_id.slice(-8)}
                               </code>
                             </TableCell>
+                            <TableCell>
+                              <span className="text-sm font-medium">
+                                {release.version ||
+                                  "v" + release.package_release_id.slice(-6)}
+                              </span>
+                            </TableCell>
                             <TableCell>
                               <div className="flex items-center gap-2">
-                                {packageRelease?.is_pr_preview ? (
+                                {release.is_pr_preview ? (
                                   <GitBranch className="w-3 h-3 text-gray-500" />
                                 ) : (
                                   <GitCommit className="w-3 h-3 text-gray-500" />
                                 )}
                                 <Badge variant="outline" className="text-xs">
-                                  {packageRelease?.is_pr_preview
-                                    ? `#${packageRelease.github_pr_number}`
-                                    : packageRelease?.branch_name || "main"}
+                                  {release.is_pr_preview
+                                    ? `#${release.github_pr_number}`
+                                    : "main"}
                                 </Badge>
                               </div>
                             </TableCell>
                             <TableCell>
                               <div className="max-w-xs">
-                                <p className="text-sm font-medium truncate">
-                                  {build.commit_message || "No commit message"}
-                                </p>
+                                {latestBuild ? (
+                                  <p className="text-sm text-gray-600">
+                                    {formatTimeAgo(latestBuild.created_at)}
+                                  </p>
+                                ) : (
+                                  <p className="text-sm text-gray-400">
+                                    No builds
+                                  </p>
+                                )}
                               </div>
                             </TableCell>
                             <TableCell>
                               <span className="text-sm text-gray-600">
-                                {build.commit_author || "Unknown"}
-                              </span>
-                            </TableCell>
-                            <TableCell>
-                              <span className="text-sm text-gray-600">
-                                {formatTimeAgo(build.created_at)}
+                                {formatTimeAgo(release.created_at)}
                               </span>
                             </TableCell>
                             <TableCell>
@@ -205,14 +197,27 @@ export const BuildsList = ({
                                   </DropdownMenuTrigger>
                                   <DropdownMenuContent align="end">
                                     <DropdownMenuItem
-                                      onClick={() => onSelectBuild?.(build)}
+                                      onClick={() => {
+                                        window.location.href = `/${pkg.name}/releases/${release.package_release_id}`
+                                      }}
                                     >
-                                      View Details
+                                      View Release
                                     </DropdownMenuItem>
+                                    {status !== "error" && (
+                                      <DropdownMenuItem>
+                                        <a
+                                          href={`/${pkg.name}/releases/${latestBuild?.package_release_id}/preview`}
+                                        >
+                                          Preview Release
+                                        </a>
+                                      </DropdownMenuItem>
+                                    )}
                                     <DropdownMenuItem
-                                      onClick={() => onSelectBuild?.(build)}
+                                      onClick={() => {
+                                        window.location.href = `/${pkg.name}/releases/${release.package_release_id}/builds`
+                                      }}
                                     >
-                                      View Logs
+                                      View All Builds
                                     </DropdownMenuItem>
                                   </DropdownMenuContent>
                                 </DropdownMenu>
@@ -226,94 +231,6 @@ export const BuildsList = ({
             </div>
           </CardContent>
         </Card>
-
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <Card>
-            <CardContent className="p-6">
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-green-100 rounded-lg">
-                  <CheckCircle className="w-5 h-5 text-green-600" />
-                </div>
-                <div>
-                  <p className="text-sm text-gray-600">Successful</p>
-                  {isLoading ? (
-                    <Skeleton className="h-8 w-8" />
-                  ) : (
-                    <p className="text-2xl font-bold text-gray-900">
-                      {builds?.filter(
-                        (d) => getBuildStatus(d).status === "success",
-                      ).length || 0}
-                    </p>
-                  )}
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent className="p-6">
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-red-100 rounded-lg">
-                  <AlertCircle className="w-5 h-5 text-red-600" />
-                </div>
-                <div>
-                  <p className="text-sm text-gray-600">Failed</p>
-                  {isLoading ? (
-                    <Skeleton className="h-8 w-8" />
-                  ) : (
-                    <p className="text-2xl font-bold text-gray-900">
-                      {builds?.filter(
-                        (d) => getBuildStatus(d).status === "error",
-                      ).length || 0}
-                    </p>
-                  )}
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent className="p-6">
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-blue-100 rounded-lg">
-                  <Loader2 className="w-5 h-5 text-blue-600 animate-spin" />
-                </div>
-                <div>
-                  <p className="text-sm text-gray-600">Building</p>
-                  {isLoading ? (
-                    <Skeleton className="h-8 w-8" />
-                  ) : (
-                    <p className="text-2xl font-bold text-gray-900">
-                      {builds?.filter(
-                        (d) => getBuildStatus(d).status === "building",
-                      ).length || 0}
-                    </p>
-                  )}
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent className="p-6">
-              <div className="flex items-center gap-3">
-                <div className="p-2 bg-gray-100 rounded-lg">
-                  <Clock className="w-5 h-5 text-gray-600" />
-                </div>
-                <div>
-                  <p className="text-sm text-gray-600">Total</p>
-                  {isLoading ? (
-                    <Skeleton className="h-8 w-8" />
-                  ) : (
-                    <p className="text-2xl font-bold text-gray-900">
-                      {builds?.length || 0}
-                    </p>
-                  )}
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
       </div>
     </>
   )

package/src/components/preview/ConnectedPackagesList.tsx

@@ -1,52 +1,83 @@
-import { useState } from "react"
-import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Card } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { GitBranch, Rocket, Github } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { PrefetchPageLink } from "../PrefetchPageLink"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
+import { getBuildStatus, StatusIcon } from "."
+import { Package } from "fake-snippets-api/lib/db/schema"
+import { usePackageBuild } from "@/hooks/use-package-builds"
 import {
-  getBuildStatus,
-  getLatestBuildForPackage,
-  MOCK_DEPLOYMENTS,
-  StatusIcon,
-} from "."
-import { Package, PackageBuild } from "fake-snippets-api/lib/db/schema"
-import { useLatestPackageBuild } from "@/hooks/use-package-builds"
+  useLatestPackageRelease,
+  usePackageReleaseById,
+} from "@/hooks/use-package-release"
 
 export const ConnectedPackageCardSkeleton = () => {
   return (
-    <Card className="animate-pulse">
-      <CardHeader className="pb-3">
-        <div className="flex items-start justify-between">
-          <div className="flex items-center gap-2 flex-1">
-            <div className="w-4 h-4 bg-gray-200 rounded" />
-            <div className="space-y-2 flex-1">
-              <div className="flex items-center gap-2">
-                <div className="w-12 h-4 bg-gray-200 rounded" />
-                <div className="w-16 h-3 bg-gray-200 rounded" />
-              </div>
-              <div className="w-20 h-3 bg-gray-200 rounded" />
-            </div>
-          </div>
+    <Card
+      className={cn(
+        "group relative overflow-hidden",
+        "border border-gray-200",
+        "hover:border-gray-300",
+        "bg-white shadow-none",
+        "p-6",
+        "flex flex-col",
+        "min-h-[200px]",
+        "animate-pulse",
+      )}
+    >
+      <div className="flex items-start justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <div className="h-6 w-32 bg-gray-200 rounded" />
         </div>
-      </CardHeader>
-      <CardContent className="pt-0 space-y-3">
-        <div className="w-full h-4 bg-gray-200 rounded" />
-        <div className="flex gap-2">
-          <div className="w-16 h-3 bg-gray-200 rounded" />
-          <div className="w-20 h-3 bg-gray-200 rounded" />
+
+        <div className="flex items-center justify-center gap-2">
+          <div className="w-16 h-5 bg-gray-200 rounded-full" />
+          <div className="w-4 h-4 bg-gray-200 rounded-full" />
         </div>
-        <div className="flex gap-2 pt-2">
-          <div className="flex-1 h-8 bg-gray-200 rounded" />
-          <div className="flex-1 h-8 bg-gray-200 rounded" />
+      </div>
+
+      <div className="flex items-center gap-2 mb-4">
+        <div className="w-4 h-4 bg-gray-200 rounded" />
+        <div className="w-48 h-5 bg-gray-200 rounded" />
+      </div>
+
+      <div className="mb-6 flex-1">
+        <div className="h-5 w-3/4 bg-gray-200 rounded mb-2" />
+        <div className="flex items-center gap-2">
+          <div className="w-32 h-4 bg-gray-200 rounded" />
+          <div className="flex items-center gap-1">
+            <div className="w-3 h-3 bg-gray-200 rounded" />
+            <div className="w-16 h-4 bg-gray-200 rounded-full" />
+          </div>
         </div>
-      </CardContent>
+      </div>
+
+      <div className="flex gap-2 w-full mt-auto">
+        <div className="w-full h-9 bg-gray-200 rounded" />
+        <div className="w-full h-9 bg-gray-200 rounded" />
+      </div>
     </Card>
   )
 }
 
+// Custom hook to get latest package build info
+const useLatestPackageBuildInfo = (packageId: string) => {
+  const { data: latestRelease, isLoading: releaseLoading } =
+    useLatestPackageRelease(packageId)
+  const { data: latestBuild, isLoading: buildLoading } = usePackageBuild(
+    latestRelease?.latest_package_build_id || null,
+  )
+
+  return {
+    data: latestBuild,
+    isLoading:
+      releaseLoading ||
+      (latestRelease?.latest_package_build_id && buildLoading),
+  }
+}
+
 export const ConnectedPackageCard = ({
   pkg,
   className,
@@ -54,9 +85,13 @@ export const ConnectedPackageCard = ({
   pkg: Package
   className?: string
 }) => {
-  const { data: latestBuildInfo, isLoading } = useLatestPackageBuild({
-    package_id: pkg.package_id,
-  })
+  const { data: latestBuildInfo, isLoading } = useLatestPackageBuildInfo(
+    pkg.package_id,
+  )
+
+  const { data: packageRelease } = usePackageReleaseById(
+    latestBuildInfo?.package_release_id,
+  )
 
   if (isLoading && !latestBuildInfo) {
     return <ConnectedPackageCardSkeleton />
@@ -72,7 +107,7 @@ export const ConnectedPackageCard = ({
         "group relative overflow-hidden",
         "border border-gray-200",
         "hover:border-gray-300",
-        "bg-white",
+        "bg-white shadow-none",
         "p-6",
         "flex flex-col",
         "min-h-[200px]",
@@ -118,46 +153,41 @@ export const ConnectedPackageCard = ({
         </a>
       </div>
 
-      {latestBuildInfo?.commit_message && (
-        <div className="mb-6 flex-1">
+      <div className="mb-6 flex-1">
+        {packageRelease?.commit_message && (
           <h4
-            title={latestBuildInfo.commit_message}
+            title={packageRelease.commit_message}
             className="text-sm font-medium truncate text-gray-900 mb-2"
           >
-            {latestBuildInfo.commit_message}
+            {packageRelease.commit_message}
           </h4>
-          <div className="flex items-center gap-2 text-xs text-gray-500">
-            <span>{formatTimeAgo(latestBuildInfo.created_at)} on</span>
-            <div className="flex items-center gap-1">
-              <GitBranch className="w-3 h-3" />
-              <span className="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full font-medium">
-                {latestBuildInfo.branch_name || "main"}
-              </span>
-            </div>
+        )}
+        <div className="flex items-center gap-2 text-xs text-gray-500">
+          <span>{formatTimeAgo(String(latestBuildInfo?.created_at))} on</span>
+          <div className="flex items-center gap-1">
+            <GitBranch className="w-3 h-3" />
+            <span className="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full font-medium">
+              {packageRelease?.branch_name || "main"}
+            </span>
           </div>
         </div>
-      )}
+      </div>
 
       <div className="flex gap-2 w-full mt-auto">
-        {latestBuildInfo?.package_build_id && (
-          <PrefetchPageLink
-            className="w-full"
-            href={`/build/${latestBuildInfo.package_build_id}`}
+        <PrefetchPageLink className="w-full" href={`/${pkg.name}/releases`}>
+          <Button
+            size="sm"
+            className="bg-blue-600 w-full hover:bg-blue-700 text-white px-4 py-2"
           >
-            <Button
-              size="sm"
-              className="bg-blue-600 w-full hover:bg-blue-700 text-white px-4 py-2"
-            >
-              View
-            </Button>
-          </PrefetchPageLink>
-        )}
+            View
+          </Button>
+        </PrefetchPageLink>
         {latestBuildInfo?.preview_url &&
           latestBuildInfo?.package_build_id &&
           status === "success" && (
             <PrefetchPageLink
               className="w-full"
-              href={`/build/${latestBuildInfo.package_build_id}/preview`}
+              href={`/${pkg.name}/releases/${latestBuildInfo.package_release_id}/preview`}
             >
               <Button size="sm" variant="outline" className="px-4 py-2 w-full">
                 Preview