@tscircuit/fake-snippets 0.0.107 → 0.0.108

package/src/components/FileSidebar.tsx

@@ -12,6 +12,7 @@ import {
 import { TreeView, TreeDataItem } from "@/components/ui/tree-view"
 import { isHiddenFile } from "./ViewPackagePage/utils/is-hidden-file"
 import { Input } from "@/components/ui/input"
+import { transformFilesToTreeData } from "@/lib/utils/transformFilesToTreeData"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -75,165 +76,19 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
     setSelectedFolderForCreation(folderPath)
   }
 
-  const transformFilesToTreeData = (
-    files: Record<FileName, string>,
-  ): TreeDataItem[] => {
-    type TreeNode = Omit<TreeDataItem, "children"> & {
-      children?: Record<string, TreeNode>
-    }
-    const root: Record<string, TreeNode> = {}
-
-    Object.keys(files).forEach((filePath) => {
-      const hasLeadingSlash = filePath.startsWith("/")
-      const pathSegments = (hasLeadingSlash ? filePath.slice(1) : filePath)
-        .trim()
-        .split("/")
-      let currentNode: Record<string, TreeNode> = root
-
-      pathSegments.forEach((segment, segmentIndex) => {
-        const isLeafNode = segmentIndex === pathSegments.length - 1
-        const ancestorPath = pathSegments.slice(0, segmentIndex).join("/")
-        const relativePath = ancestorPath
-          ? `${ancestorPath}/${segment}`
-          : segment
-        const absolutePath = hasLeadingSlash ? `/${relativePath}` : relativePath
-        const itemId = absolutePath
-
-        if (
-          !currentNode[segment] &&
-          (!isHiddenFile(relativePath) ||
-            isHiddenFile(
-              currentFile?.startsWith("/")
-                ? currentFile.slice(1)
-                : currentFile || "",
-            ))
-        ) {
-          currentNode[segment] = {
-            id: itemId,
-            name: segment,
-            isRenaming: renamingFile === itemId,
-            onRename: (newFilename: string) => {
-              const oldPath = itemId
-              const pathParts = oldPath.split("/").filter((part) => part !== "")
-              let newPath: string
-
-              if (pathParts.length > 1) {
-                const folderPath = pathParts.slice(0, -1).join("/")
-                newPath = folderPath + "/" + newFilename
-              } else {
-                newPath = newFilename
-              }
-
-              if (oldPath.startsWith("/") && !newPath.startsWith("/")) {
-                newPath = "/" + newPath
-              }
-
-              const { fileRenamed } = handleRenameFile({
-                oldFilename: itemId,
-                newFilename: newPath,
-                onError: (error) => {
-                  toast({
-                    title: `Error renaming file`,
-                    description: error.message,
-                    variant: "destructive",
-                  })
-                },
-              })
-              if (fileRenamed) {
-                setRenamingFile(null)
-              }
-            },
-            onCancelRename: () => {
-              setRenamingFile(null)
-            },
-            icon: isLeafNode ? File : Folder,
-            onClick: isLeafNode
-              ? () => {
-                  onFileSelect(absolutePath)
-                  setSelectedFolderForCreation(null)
-                }
-              : () => onFolderSelect(absolutePath),
-            draggable: false,
-            droppable: !isLeafNode,
-            children: isLeafNode ? undefined : {},
-            actions: canModifyFiles ? (
-              <>
-                <DropdownMenu key={itemId}>
-                  <DropdownMenuTrigger asChild>
-                    <MoreVertical className="w-4 h-4 text-gray-500 hover:text-gray-700" />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    className="w-fit bg-white shadow-lg rounded-md border-4 z-[100] border-white"
-                    style={{
-                      position: "absolute",
-                      top: "100%",
-                      left: "0",
-                      marginTop: "0.5rem",
-                      width: "8rem",
-                      padding: "0.01rem",
-                    }}
-                  >
-                    <DropdownMenuGroup>
-                      {isLeafNode && (
-                        <DropdownMenuItem
-                          onClick={() => {
-                            setRenamingFile(itemId)
-                          }}
-                          className="flex items-center px-3 py-1 text-xs text-black hover:bg-gray-100 cursor-pointer"
-                        >
-                          <Pencil className="mr-2 h-3 w-3" />
-                          Rename
-                        </DropdownMenuItem>
-                      )}
-                      <DropdownMenuItem
-                        onClick={() => {
-                          const { fileDeleted } = handleDeleteFile({
-                            filename: itemId,
-                            onError: (error) => {
-                              toast({
-                                title: `Error deleting file ${itemId}`,
-                                description: error.message,
-                              })
-                            },
-                          })
-                          if (fileDeleted) {
-                            setErrorMessage("")
-                          }
-                        }}
-                        className="flex items-center px-3 py-1 text-xs text-red-600 hover:bg-gray-100 cursor-pointer"
-                      >
-                        <Trash2 className="mr-2 h-3 w-3" />
-                        Delete
-                      </DropdownMenuItem>
-                    </DropdownMenuGroup>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </>
-            ) : undefined,
-          }
-        }
-
-        if (!isLeafNode && currentNode[segment].children) {
-          currentNode = currentNode[segment].children
-        }
-      })
-    })
-
-    const convertToArray = (
-      items: Record<string, TreeNode>,
-    ): TreeDataItem[] => {
-      return Object.values(items).map((item) => ({
-        ...item,
-        children: item.children ? convertToArray(item.children) : undefined,
-      }))
-    }
-    return convertToArray(root).filter((x) => {
-      if (x.children?.length === 0) return false
-      return true
-    })
-  }
-
-  const treeData = transformFilesToTreeData(files)
+  const treeData = transformFilesToTreeData({
+    files,
+    currentFile,
+    renamingFile,
+    handleRenameFile,
+    handleDeleteFile,
+    setRenamingFile,
+    onFileSelect,
+    onFolderSelect,
+    canModifyFiles,
+    setErrorMessage,
+    setSelectedFolderForCreation,
+  })
 
   const getCurrentFolderPath = (): string => {
     if (selectedFolderForCreation) {

package/src/components/PackageBreadcrumb.tsx

@@ -77,7 +77,7 @@ export function PackageBreadcrumb({
               {currentPage === "builds" ? (
                 <BreadcrumbLink asChild>
                   <PrefetchPageLink
-                    href={`/${packageName}/release/${releaseVersion}`}
+                    href={`/${packageName}/releases/${releaseVersion}`}
                   >
                     {releaseVersion}
                   </PrefetchPageLink>

package/src/components/ViewPackagePage/components/mobile-sidebar.tsx

@@ -112,7 +112,7 @@ const MobileSidebar = ({
           {localDescription ||
             packageInfo?.description ||
             packageInfo?.ai_description ||
-            "A Default 60 keyboard created with tscircuit"}
+            ""}
         </p>
         {isOwner && (
           <Button

package/src/components/ViewPackagePage/components/sidebar-about-section.tsx

@@ -1,5 +1,5 @@
 import { Badge } from "@/components/ui/badge"
-import { GitFork, Star, Settings, LinkIcon, Github } from "lucide-react"
+import { GitFork, Star, Settings, LinkIcon, Github, Plus } from "lucide-react"
 import { Skeleton } from "@/components/ui/skeleton"
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 import { usePackageReleaseById } from "@/hooks/use-package-release"
@@ -164,7 +164,7 @@ export default function SidebarAboutSection({
             <GitFork className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
             <span>{(packageInfo as any)?.fork_count ?? "0"} forks</span>
           </div>
-          {packageInfo?.github_repo_full_name && (
+          {packageInfo?.github_repo_full_name ? (
             <a
               target="_blank"
               href={`https://github.com/${packageInfo.github_repo_full_name}`}
@@ -173,6 +173,22 @@ export default function SidebarAboutSection({
               <Github className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
               <span>{packageInfo?.github_repo_full_name.split("/")[1]}</span>
             </a>
+          ) : (
+            <>
+              {isOwner && (
+                <div
+                  className="flex items-center hover:underline hover:underline-offset-2 cursor-pointer hover:decoration-gray-500"
+                  onClick={openEditPackageDetailsDialog}
+                  title="Connect GitHub"
+                >
+                  <div className="relative mr-2">
+                    <Github className="h-4 w-4 text-gray-500 dark:text-[#8b949e]" />
+                    <Plus className="h-2 w-2 absolute -bottom-0.5 -right-0.5 text-gray-500 dark:text-[#8b949e] bg-white dark:bg-[#0d1117] rounded-full" />
+                  </div>
+                  <span>Connect GitHub</span>
+                </div>
+              )}
+            </>
           )}
         </div>
       </div>

package/src/components/ViewPackagePage/components/sidebar-releases-section.tsx

@@ -110,7 +110,7 @@ export default function SidebarReleasesSection() {
         ))}
         {latestBuild && (
           <PrefetchPageLink
-            href={`/build/${latestBuild.package_build_id}`}
+            href={`/${packageInfo?.name}/releases`}
             className="flex items-center gap-2 text-sm text-gray-500 dark:text-[#8b949e]"
           >
             <StatusIcon status={status} />

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