@tscircuit/fake-snippets 0.0.107 → 0.0.109

package/src/components/preview/BuildsList.tsx

@@ -19,16 +19,17 @@ import {
 } from "@/components/ui/table"
 import { getBuildStatus, StatusIcon } from "."
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
-import { Package } from "fake-snippets-api/lib/db/schema"
+import { Package, PackageBuild } from "fake-snippets-api/lib/db/schema"
 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 }: { 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 || [])
@@ -52,7 +53,8 @@ export const BuildsList = ({ pkg }: { pkg: Package }) => {
     isLoadingReleases || latestBuildQueries.some((q) => q.isLoading)
 
   // Create a map of release ID to latest build for easy access
-  const latestBuildsMap = new Map()
+  const latestBuildsMap = new Map<string, PackageBuild>()
+
   latestBuildQueries.forEach((query, index) => {
     if (query.data && releases?.[index]) {
       latestBuildsMap.set(releases[index].package_release_id, query.data)
@@ -110,15 +112,15 @@ export const BuildsList = ({ pkg }: { pkg: Package }) => {
                         const latestBuild = latestBuildsMap.get(
                           release.package_release_id,
                         )
-                        const { status, label } = latestBuild
-                          ? getBuildStatus(latestBuild)
-                          : { status: "unknown", label: "No builds" }
+                        const { status, label } = getBuildStatus(latestBuild)
                         return (
                           <TableRow
                             key={release.package_release_id}
                             className="cursor-pointer hover:bg-gray-50 no-scrollbar"
                             onClick={() => {
-                              window.location.href = `/${pkg.name}/release/${release.package_release_id}`
+                              setLocation(
+                                `/${pkg.name}/releases/${release.package_release_id}`,
+                              )
                             }}
                           >
                             <TableCell>
@@ -196,14 +198,23 @@ export const BuildsList = ({ pkg }: { pkg: Package }) => {
                                   <DropdownMenuContent align="end">
                                     <DropdownMenuItem
                                       onClick={() => {
-                                        window.location.href = `/${pkg.name}/release/${release.package_release_id}`
+                                        window.location.href = `/${pkg.name}/releases/${release.package_release_id}`
                                       }}
                                     >
                                       View Release
                                     </DropdownMenuItem>
+                                    {status !== "error" && (
+                                      <DropdownMenuItem>
+                                        <a
+                                          href={`/${pkg.name}/releases/${latestBuild?.package_release_id}/preview`}
+                                        >
+                                          Preview Release
+                                        </a>
+                                      </DropdownMenuItem>
+                                    )}
                                     <DropdownMenuItem
                                       onClick={() => {
-                                        window.location.href = `/${pkg.name}/release/${release.package_release_id}/builds`
+                                        window.location.href = `/${pkg.name}/releases/${release.package_release_id}/builds`
                                       }}
                                     >
                                       View All Builds

package/src/components/preview/ConnectedPackagesList.tsx

@@ -1,49 +1,63 @@
-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,
-  getLatestBuildForPackage,
-  MOCK_PACKAGE_BUILDS,
-  StatusIcon,
-} from "."
-import { Package, PackageBuild } from "fake-snippets-api/lib/db/schema"
+import { getBuildStatus, StatusIcon } from "."
+import { Package } from "fake-snippets-api/lib/db/schema"
 import { usePackageBuild } from "@/hooks/use-package-builds"
-import { useLatestPackageRelease } from "@/hooks/use-package-release"
+import {
+  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>
   )
 }
@@ -75,6 +89,10 @@ export const ConnectedPackageCard = ({
     pkg.package_id,
   )
 
+  const { data: packageRelease } = usePackageReleaseById(
+    latestBuildInfo?.package_release_id,
+  )
+
   if (isLoading && !latestBuildInfo) {
     return <ConnectedPackageCardSkeleton />
   }
@@ -89,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]",
@@ -135,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