@tscircuit/fake-snippets 0.0.71 → 0.0.73

package/src/components/FileSidebar.tsx

@@ -1,20 +1,33 @@
 import React, { useState } from "react"
 import { cn } from "@/lib/utils"
-import { File, Folder, PanelRightOpen, Plus } from "lucide-react"
+import { File, Folder, MoreVertical, PanelRightOpen, Plus } from "lucide-react"
 import { TreeView, TreeDataItem } from "@/components/ui/tree-view"
 import { isHiddenFile } from "./ViewPackagePage/utils/is-hidden-file"
 import { Input } from "@/components/ui/input"
-import { CreateFileProps } from "./package-port/CodeAndPreview"
-
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu"
+import type {
+  ICreateFileProps,
+  ICreateFileResult,
+  IDeleteFileProps,
+  IDeleteFileResult,
+} from "@/hooks/useFileManagement"
+import { useToast } from "@/hooks/use-toast"
 type FileName = string
 
 interface FileSidebarProps {
   files: Record<FileName, string>
-  currentFile: FileName
+  currentFile: FileName | null
   onFileSelect: (filename: FileName) => void
   className?: string
   fileSidebarState: ReturnType<typeof useState<boolean>>
-  handleCreateFile: (props: CreateFileProps) => void
+  handleCreateFile: (props: ICreateFileProps) => ICreateFileResult
+  handleDeleteFile: (props: IDeleteFileProps) => IDeleteFileResult
 }
 
 const FileSidebar: React.FC<FileSidebarProps> = ({
@@ -24,11 +37,13 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   className,
   fileSidebarState,
   handleCreateFile,
+  handleDeleteFile,
 }) => {
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
   const [newFileName, setNewFileName] = useState("")
   const [isCreatingFile, setIsCreatingFile] = useState(false)
   const [errorMessage, setErrorMessage] = useState("")
+  const { toast } = useToast()
 
   const transformFilesToTreeData = (
     files: Record<FileName, string>,
@@ -38,38 +53,85 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
     }
     const root: Record<string, TreeNode> = {}
 
-    Object.keys(files).forEach((path) => {
-      const startsWithSlash = path.startsWith("/")
-      const parts = (startsWithSlash ? path.slice(1) : path).trim().split("/")
-      let current = root
+    Object.keys(files).forEach((filePath) => {
+      const hasLeadingSlash = filePath.startsWith("/")
+      const pathSegments = (hasLeadingSlash ? filePath.slice(1) : filePath)
+        .trim()
+        .split("/")
+      let currentNode: Record<string, TreeNode> = root
 
-      parts.forEach((part, index) => {
-        const isFile = index === parts.length - 1
-        const parentPath = parts.slice(0, index).join("/")
-        const currentPath = parentPath ? `${parentPath}/${part}` : part
-        const evaluatedFilePath = startsWithSlash
-          ? `/${currentPath}`
-          : currentPath
+      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 (
-          !current[part] &&
-          (!isHiddenFile(currentPath) ||
+          !currentNode[segment] &&
+          (!isHiddenFile(relativePath) ||
             isHiddenFile(
-              currentFile.startsWith("/") ? currentFile.slice(1) : currentFile,
+              currentFile?.startsWith("/")
+                ? currentFile.slice(1)
+                : currentFile || "",
             ))
         ) {
-          current[part] = {
-            id: currentPath,
-            name: isFile ? part : part,
-            icon: isFile ? File : Folder,
-            onClick: isFile ? () => onFileSelect(evaluatedFilePath) : undefined,
-            draggable: isFile,
-            droppable: !isFile,
-            children: isFile ? undefined : {},
+          currentNode[segment] = {
+            id: itemId,
+            name: isLeafNode ? segment : segment,
+            icon: isLeafNode ? File : Folder,
+            onClick: isLeafNode ? () => onFileSelect(absolutePath) : undefined,
+            draggable: false,
+            droppable: !isLeafNode,
+            children: isLeafNode ? undefined : {},
+            actions: (
+              <>
+                <DropdownMenu key={itemId}>
+                  <DropdownMenuTrigger asChild>
+                    <MoreVertical className="w-4 h-4 text-gray-500 hover:text-gray-700" />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent
+                    className="w-48 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>
+                      <DropdownMenuItem
+                        onClick={() => {
+                          const { fileDeleted } = handleDeleteFile({
+                            filename: relativePath,
+                            onError: (error) => {
+                              toast({
+                                title: `Error deleting file ${relativePath}`,
+                                description: error.message,
+                              })
+                            },
+                          })
+                          if (fileDeleted) {
+                            setErrorMessage("")
+                          }
+                        }}
+                        className="flex items-center px-4 py-1 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
+                      >
+                        Delete
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </>
+            ),
           }
         }
 
-        if (!isFile && current[part].children) {
-          current = current[part].children
+        if (!isLeafNode && currentNode[segment].children) {
+          currentNode = currentNode[segment].children
         }
       })
     })
@@ -90,15 +152,26 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   }
 
   const treeData = transformFilesToTreeData(files)
-
+  // console.log("treeData", files)
   const handleCreateFileInline = () => {
-    handleCreateFile({
+    const { newFileCreated } = handleCreateFile({
       newFileName,
-      setErrorMessage,
-      onFileSelect,
-      setNewFileName,
-      setIsCreatingFile,
+      onError: (error) => {
+        setErrorMessage(error.message)
+      },
     })
+    if (newFileCreated) {
+      setIsCreatingFile(false)
+      setNewFileName("")
+      setErrorMessage("")
+    }
+  }
+
+  const toggleSidebar = () => {
+    setSidebarOpen(!sidebarOpen)
+    setErrorMessage("")
+    setIsCreatingFile(false)
+    setNewFileName("")
   }
 
   return (
@@ -110,7 +183,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       )}
     >
       <button
-        onClick={() => setSidebarOpen(!sidebarOpen)}
+        onClick={toggleSidebar}
         className={`z-[99] mt-2 ml-2 text-gray-400 scale-90 transition-opacity duration-200 ${
           !sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"
         }`}
@@ -129,6 +202,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
           <Input
             autoFocus
             value={newFileName}
+            spellCheck={false}
             onChange={(e) => setNewFileName(e.target.value)}
             onBlur={handleCreateFileInline}
             onKeyDown={(e) => {
@@ -149,7 +223,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       )}
       <TreeView
         data={treeData}
-        initialSelectedItemId={currentFile}
+        initialSelectedItemId={currentFile || ""}
         onSelectChange={(item) => {
           if (item?.onClick) {
             item.onClick()

package/src/components/JLCPCBImportDialog.tsx

@@ -50,7 +50,7 @@ export function JLCPCBImportDialog({
     setHasBeenImportedToAccountAlready(false)
 
     try {
-      const apiUrl = `/snippets/get?owner_name=${session?.github_username}&unscoped_name=${partNumber}`
+      const apiUrl = `/packages/get?name=${session?.github_username}/${partNumber}`
 
       const existingPackageRes = await axios.get(apiUrl, {
         validateStatus: (status) => true,

package/src/components/PackageBuildsPage/DeploymentDetailsPage.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import { useState } from "react"
+import { BuildPreviewContent } from "./build-preview-content"
+import { DeploymentDetailsPanel } from "./deployment-details-panel"
+import { DeploymentHeader } from "./deployment-header"
+import { CollapsibleSection } from "./collapsible-section"
+
+export const DeploymentDetailsPage = () => {
+  const [openSections, setOpenSections] = useState<Record<string, boolean>>({})
+
+  const toggleSection = (section: string) => {
+    setOpenSections((prev) => ({
+      ...prev,
+      [section]: !prev[section],
+    }))
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 text-gray-900">
+      <DeploymentHeader />
+
+      <div className="px-6 py-6 container mx-auto">
+        {/* Main Content */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8 items-start">
+          {/* Preview Section */}
+          <div className="lg:col-span-2">
+            <div className="bg-white border border-gray-200 rounded-lg p-4 flex items-center justify-center max-h-[420px]">
+              <BuildPreviewContent />
+            </div>
+          </div>
+
+          {/* Details Panel */}
+          <DeploymentDetailsPanel />
+        </div>
+
+        {/* Collapsible Sections */}
+        <div className="space-y-4 mb-8">
+          <CollapsibleSection
+            title="Transpilation Logs"
+            duration="1m 15s"
+            isOpen={openSections.summary}
+            onToggle={() => toggleSection("summary")}
+          />
+
+          <CollapsibleSection
+            title="Circuit JSON Build Logs"
+            duration="2m 29s"
+            isOpen={openSections.logs}
+            onToggle={() => toggleSection("logs")}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/PackageBuildsPage/build-preview-content.tsx

@@ -0,0 +1,11 @@
+export function BuildPreviewContent() {
+  return (
+    <div className="flex items-center justify-center">
+      <img
+        src="https://placehold.co/600x400/000/31343C"
+        alt="Deployment preview"
+        className="object-contain rounded p-2 max-h-[400px]"
+      />
+    </div>
+  )
+}

package/src/components/PackageBuildsPage/collapsible-section.tsx

@@ -0,0 +1,70 @@
+import type React from "react"
+import { ChevronRight, CheckCircle2 } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+
+interface CollapsibleSectionProps {
+  title: string
+  duration?: string
+  isOpen: boolean
+  onToggle: () => void
+  badges?: Array<{
+    text: string
+    icon?: React.ReactNode
+    variant?: "default" | "secondary"
+    className?: string
+  }>
+  children?: React.ReactNode
+}
+
+export function CollapsibleSection({
+  title,
+  duration,
+  isOpen,
+  onToggle,
+  badges = [],
+  children,
+}: CollapsibleSectionProps) {
+  return (
+    <Collapsible open={isOpen} onOpenChange={onToggle}>
+      <CollapsibleTrigger asChild>
+        <div className="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100">
+          <div className="flex items-center gap-2">
+            <ChevronRight
+              className={`w-4 h-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
+            />
+            <span className="font-medium">{title}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            {badges.map((badge, index) => (
+              <Badge
+                key={index}
+                variant={badge.variant || "secondary"}
+                className={
+                  badge.className ||
+                  "bg-gray-200 text-gray-700 flex items-center gap-1"
+                }
+              >
+                {badge.icon}
+                {badge.text}
+              </Badge>
+            ))}
+            {duration && (
+              <span className="text-sm text-gray-600">{duration}</span>
+            )}
+            <CheckCircle2 className="w-4 h-4 text-green-500" />
+          </div>
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="p-4 bg-white border-x border-b border-gray-200 rounded-b-lg">
+          {children || `${title} details would go here...`}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}

package/src/components/PackageBuildsPage/deployment-details-panel.tsx

@@ -0,0 +1,84 @@
+import { Globe, GitBranch, GitCommit, Clock } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+
+export function DeploymentDetailsPanel() {
+  return (
+    <div className="space-y-6 bg-white p-4 border border-gray-200 rounded-lg">
+      {/* Created */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">Created</h3>
+        <div className="flex items-center gap-2">
+          <div className="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center text-xs font-bold">
+            I
+          </div>
+          <span className="text-sm">imrishabh18</span>
+          <span className="text-sm text-gray-500">48m ago</span>
+        </div>
+      </div>
+
+      {/* Status */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">Status</h3>
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+          <span className="text-sm">Ready</span>
+          <Badge
+            variant="secondary"
+            className="bg-gray-200 text-gray-700 text-xs"
+          >
+            Latest
+          </Badge>
+        </div>
+      </div>
+
+      {/* Time to Ready */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">
+          Time to Ready
+        </h3>
+        <div className="flex items-center gap-2">
+          <Clock className="w-4 h-4 text-gray-500" />
+          <span className="text-sm">1m 3s</span>
+          <span className="text-sm text-gray-500">47m ago</span>
+        </div>
+      </div>
+
+      {/* Version */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">Version</h3>
+        <div className="flex items-center gap-2">
+          <Globe className="w-4 h-4 text-gray-500" />
+          <span className="text-sm">v1.0.3</span>
+          <Badge variant="default" className="bg-blue-600 text-white text-xs">
+            Current
+          </Badge>
+        </div>
+      </div>
+
+      {/* Outputs */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">Outputs</h3>
+        <div>
+          <span className="text-sm text-gray-400">None</span>
+        </div>
+      </div>
+
+      {/* Source */}
+      <div>
+        <h3 className="text-sm font-medium text-gray-600 mb-2">Source</h3>
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <GitBranch className="w-4 h-4 text-gray-500" />
+            <span className="text-sm">main</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <GitCommit className="w-4 h-4 text-gray-500" />
+            <span className="text-sm text-gray-500">
+              edfdc67 support empty file creation (#356)
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/PackageBuildsPage/deployment-header.tsx

@@ -0,0 +1,75 @@
+import { ChevronDown, Download, Github, Link } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useParams } from "wouter"
+
+export function DeploymentHeader() {
+  const { author, packageName } = useParams()
+
+  return (
+    <div className="border-b border-gray-200 bg-white px-6 py-4">
+      <div className="flex items-center justify-between container mx-auto">
+        <h1 className="text-2xl font-semibold">
+          Package Build
+          <a
+            className="ml-2 bg-gray-100 px-2 py-1 rounded font-mono text-blue-600"
+            href={`/${author}/${packageName}`}
+          >
+            {author}/{packageName}
+          </a>
+        </h1>
+        <div className="flex items-center gap-3">
+          <Button
+            variant="outline"
+            size="sm"
+            className="border-gray-300 bg-white hover:bg-gray-50 text-xs sm:text-sm"
+            asChild
+          >
+            <a
+              href="https://github.com/tscircuit/tscircuit.com/issues/new"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Github className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
+              Report Issue
+            </a>
+          </Button>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                size="sm"
+                className="bg-gray-900 text-white hover:bg-gray-800"
+              >
+                <Download className="w-4 h-4 mr-2" />
+                Download
+                <ChevronDown className="w-4 h-4 ml-2" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              align="end"
+              className="bg-white border-gray-200"
+            >
+              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
+                Circuit JSON
+              </DropdownMenuItem>
+              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
+                PCB SVG
+              </DropdownMenuItem>
+              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
+                Schematic SVG
+              </DropdownMenuItem>
+              <DropdownMenuItem className="text-gray-900 hover:bg-gray-100">
+                3D Model (stl)
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/PackageCard.tsx

@@ -12,7 +12,6 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { SnippetType, SnippetTypeIcon } from "./SnippetTypeIcon"
 import { timeAgo } from "@/lib/utils/timeAgo"
-import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
 import { ImageWithFallback } from "./ImageWithFallback"
 
 export interface PackageCardProps {
@@ -57,10 +56,6 @@ export const PackageCard: React.FC<PackageCardProps> = ({
     }
   }
 
-  const fsMapHash = useGetFsMapHashForPackage(
-    pkg.latest_package_release_id ?? "",
-  )
-
   const cardContent = (
     <div
       className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 ${className}`}
@@ -70,11 +65,7 @@ export const PackageCard: React.FC<PackageCardProps> = ({
           className={`${imageSize} flex-shrink-0 rounded-md overflow-hidden`}
         >
           <ImageWithFallback
-            src={`${baseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?${new URLSearchParams(
-              {
-                fs_sha: fsMapHash ?? "",
-              },
-            ).toString()}`}
+            src={`${baseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?fs_sha=${pkg.latest_package_release_fs_sha}`}
             alt={`${pkg.unscoped_name} PCB image`}
             className={`object-cover h-full w-full ${imageTransform}`}
           />

package/src/components/TrendingPackagesCarousel.tsx

@@ -5,16 +5,11 @@ import { Link } from "wouter"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import { useRef, useState } from "react"
 import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
-import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
 
 const CarouselItem = ({
   pkg,
   apiBaseUrl,
 }: { pkg: Package; apiBaseUrl: string }) => {
-  const fsMapHash = useGetFsMapHashForPackage(
-    pkg.latest_package_release_id ?? "",
-  )
-
   return (
     <Link href={`/${pkg.owner_github_username}/${pkg.unscoped_name}`}>
       <div className="flex-shrink-0 w-[200px] bg-white p-3 py-2 rounded-lg shadow-sm border border-gray-200 hover:border-gray-300 transition-colors">
@@ -22,17 +17,11 @@ const CarouselItem = ({
           {pkg.owner_github_username}/{pkg.unscoped_name}
         </div>
         <div className="mb-2 h-24 w-full bg-black rounded overflow-hidden">
-          {fsMapHash && (
-            <img
-              src={`${apiBaseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?${new URLSearchParams(
-                {
-                  fs_sha: fsMapHash,
-                },
-              ).toString()}`}
-              alt="PCB preview"
-              className="w-full h-full object-contain p-2 scale-[3] rotate-45 hover:scale-[3.5] transition-transform"
-            />
-          )}
+          <img
+            src={`${apiBaseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?fs_map=${pkg.latest_package_release_fs_sha}`}
+            alt="PCB preview"
+            className="w-full h-full object-contain p-2 scale-[3] rotate-45 hover:scale-[3.5] transition-transform"
+          />
         </div>
         <div className="flex items-center text-xs text-gray-500">
           <StarFilledIcon className="w-3 h-3 mr-1" />

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

@@ -72,7 +72,7 @@ const MobileSidebar = ({
 
   const { availableViews } = usePreviewImages({
     packageName: packageInfo?.name,
-    fsMapHash: packageInfo?.latest_package_release_id ?? "",
+    fsMapHash: packageInfo?.latest_package_release_fs_sha ?? "",
   })
 
   const handleViewClick = useCallback(

package/src/components/ViewPackagePage/components/preview-image-squares.tsx

@@ -1,11 +1,10 @@
 "use client"
 import { Skeleton } from "@/components/ui/skeleton"
-import { useGetFsMapHashForPackage } from "@/hooks/use-get-fsmap-hash-for-package"
 import { usePreviewImages } from "@/hooks/use-preview-images"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 
 interface ViewPlaceholdersProps {
-  packageInfo?: Pick<Package, "name" | "latest_package_release_id">
+  packageInfo?: Pick<Package, "name" | "latest_package_release_fs_sha">
   onViewChange?: (view: "3d" | "pcb" | "schematic") => void
 }
 
@@ -13,12 +12,9 @@ export default function PreviewImageSquares({
   packageInfo,
   onViewChange,
 }: ViewPlaceholdersProps) {
-  const fsMapHash = useGetFsMapHashForPackage(
-    packageInfo?.latest_package_release_id ?? "",
-  )
   const { availableViews } = usePreviewImages({
     packageName: packageInfo?.name,
-    fsMapHash: fsMapHash ?? "",
+    fsMapHash: packageInfo?.latest_package_release_fs_sha ?? "",
   })
 
   const handleViewClick = (viewId: string) => {