@tscircuit/fake-snippets 0.0.108 → 0.0.109

package/src/components/HeaderLogin.tsx

@@ -43,7 +43,7 @@ export const HeaderLogin = () => {
           </AvatarFallback>
         </Avatar>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="ml-1 md:ml-0 md:mr-1">
+      <DropdownMenuContent className="ml-1 mr-1 md:ml-0 md:mr-1">
         <DropdownMenuItem asChild className="text-gray-500 text-xs" disabled>
           <div>
             AI Usage $

package/src/components/HiddenFilesDropdown.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import {
   DropdownMenu,
   DropdownMenuContent,

package/src/components/PackageBuildsPage/PackageBuildDetailsPage.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
 import { PackageRelease } from "fake-snippets-api/lib/db/schema"
 import { useState } from "react"

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

@@ -1,9 +1,13 @@
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 import { useCurrentPackageRelease } from "@/hooks/use-current-package-release"
+import { useState } from "react"
+import { CircuitBoard } from "lucide-react"
 
 export function BuildPreviewContent() {
   const { packageRelease } = useCurrentPackageRelease({ refetchInterval: 2000 })
   const { packageInfo } = useCurrentPackageInfo()
+  const [imageError, setImageError] = useState(false)
+  const [imageLoading, setImageLoading] = useState(true)
 
   if (!packageRelease) {
     return (
@@ -16,11 +20,36 @@ export function BuildPreviewContent() {
   return (
     <div className="flex items-center justify-center w-full h-full">
       <div className="rounded overflow-hidden w-full max-w-full">
-        <img
-          src={`https://api.tscircuit.com/packages/images/${packageInfo?.name}/pcb.png`}
-          alt="Package build preview"
-          className="object-contain rounded w-full h-auto max-h-[240px] sm:max-h-[300px] lg:max-h-[360px]"
-        />
+        {imageError ? (
+          <div className="flex flex-col items-center justify-center bg-gray-50 border border-gray-300 rounded-lg p-8 sm:p-12 lg:p-16 min-h-[240px] sm:min-h-[300px] lg:min-h-[360px]">
+            <CircuitBoard className="w-12 h-12 sm:w-16 sm:h-16 lg:w-20 lg:h-20 text-gray-400 mb-4" />
+            <h3 className="text-lg sm:text-xl font-medium text-gray-600 mb-2">
+              Preview Not Available
+            </h3>
+            <p className="text-sm sm:text-base text-gray-500 text-center max-w-sm">
+              The build preview image could not be loaded. This may be because
+              the build is still processing or the image is not available.
+            </p>
+          </div>
+        ) : (
+          <>
+            {imageLoading && (
+              <div className="flex items-center justify-center bg-gray-100 rounded-lg min-h-[240px] sm:min-h-[300px] lg:min-h-[360px]">
+                <div className="w-16 h-16 sm:w-20 sm:h-20 bg-gray-200 rounded animate-pulse"></div>
+              </div>
+            )}
+            <img
+              src={`https://api.tscircuit.com/packages/images/${packageInfo?.name}/pcb.png`}
+              alt="Package build preview"
+              className={`object-contain rounded w-full h-auto max-h-[240px] sm:max-h-[300px] lg:max-h-[360px] ${imageLoading ? "hidden" : "block"}`}
+              onLoad={() => setImageLoading(false)}
+              onError={() => {
+                setImageError(true)
+                setImageLoading(false)
+              }}
+            />
+          </>
+        )}
       </div>
     </div>
   )

package/src/components/PackageCard.tsx

@@ -19,7 +19,6 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { SnippetType, SnippetTypeIcon } from "./SnippetTypeIcon"
 import { timeAgo } from "@/lib/utils/timeAgo"
-import { ImageWithFallback } from "./ImageWithFallback"
 import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
 
 export interface PackageCardProps {

package/src/components/ViewPackagePage/components/ShikiCodeViewer.tsx

@@ -1,11 +1,17 @@
 import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
-import { useEffect, useMemo } from "react"
-import { useQuery } from "react-query"
+import { useMemo } from "react"
 import { Skeleton } from "@/components/ui/skeleton"
 
 // Pre-randomized array to avoid flickering on re-renders
-const SKELETON_WIDTHS = ["w-2/3", "w-1/4", "w-5/6", "w-1/3", "w-1/2", "w-3/4"]
-
+export const SKELETON_WIDTHS = [
+  "w-2/3",
+  "w-1/4",
+  "w-5/6",
+  "w-1/3",
+  "w-1/2",
+  "w-3/4",
+]
+const PLACEHOLDER_SHIKI_HTML = `<pre class="shiki vitesse-light" style="background-color:#ffffff;color:#393a34" tabindex="0"><code><span class="line"></span></code></pre>`
 export const ShikiCodeViewer = ({
   code,
   filePath,
@@ -24,17 +30,20 @@ export const ShikiCodeViewer = ({
     [filePath, code, highlighter],
   )
 
-  if (!html) {
+  if (html && html?.trim() !== PLACEHOLDER_SHIKI_HTML) {
     return (
-      <div className="text-sm p-4">
-        {SKELETON_WIDTHS.map((w, i) => (
-          <Skeleton key={i} className={`h-4 mb-2 ${w}`} />
-        ))}
-      </div>
+      <div
+        className="text-sm shiki"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
     )
   }
 
   return (
-    <div className="text-sm shiki" dangerouslySetInnerHTML={{ __html: html }} />
+    <div className="text-sm p-4">
+      {SKELETON_WIDTHS.map((w, i) => (
+        <Skeleton key={i} className={`h-4 mb-2 ${w}`} />
+      ))}
+    </div>
   )
 }

package/src/components/ViewPackagePage/components/important-files-view.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { useState, useEffect, useMemo, useCallback } from "react"
 import {
   Edit,
@@ -14,7 +12,7 @@ import {
 import { Skeleton } from "@/components/ui/skeleton"
 import { Button } from "@/components/ui/button"
 import { usePackageFile } from "@/hooks/use-package-files"
-import { ShikiCodeViewer } from "./ShikiCodeViewer"
+import { ShikiCodeViewer, SKELETON_WIDTHS } from "./ShikiCodeViewer"
 import MarkdownViewer from "./markdown-viewer"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useCurrentPackageCircuitJson } from "../hooks/use-current-package-circuit-json"
@@ -24,12 +22,12 @@ interface PackageFile {
   package_release_id: string
   file_path: string
   created_at: string
-  content_text?: string
+  content_text?: string | null
 }
 
 interface ImportantFilesViewProps {
   importantFiles?: PackageFile[]
-  isLoading?: boolean
+  isFetched?: boolean
   onEditClicked?: (file_path?: string | null) => void
   packageAuthorOwner?: string | null
   aiDescription?: string
@@ -56,7 +54,7 @@ export default function ImportantFilesView({
   aiReviewText,
   aiReviewRequested,
   onRequestAiReview,
-  isLoading = false,
+  isFetched = false,
   onEditClicked,
   packageAuthorOwner,
   onLicenseFileRequested,
@@ -130,19 +128,25 @@ export default function ImportantFilesView({
   const availableTabs = useMemo((): TabInfo[] => {
     const tabs: TabInfo[] = []
 
-    tabs.push({
-      type: "ai",
-      filePath: null,
-      label: "Description",
-      icon: <SparklesIcon className="h-3.5 w-3.5 mr-1.5" />,
-    })
+    // Only show AI description tab if there's actual AI content
+    if (hasAiContent) {
+      tabs.push({
+        type: "ai",
+        filePath: null,
+        label: "Description",
+        icon: <SparklesIcon className="h-3.5 w-3.5 mr-1.5" />,
+      })
+    }
 
-    tabs.push({
-      type: "ai-review",
-      filePath: null,
-      label: "AI Review",
-      icon: <SparklesIcon className="h-3.5 w-3.5 mr-1.5" />,
-    })
+    // Only show AI review tab if there's actual AI review content
+    if (hasAiReview || isOwner) {
+      tabs.push({
+        type: "ai-review",
+        filePath: null,
+        label: "AI Review",
+        icon: <SparklesIcon className="h-3.5 w-3.5 mr-1.5" />,
+      })
+    }
 
     importantFiles.forEach((file) => {
       tabs.push({
@@ -154,11 +158,11 @@ export default function ImportantFilesView({
     })
 
     return tabs
-  }, [hasAiContent, importantFiles, getFileName, getFileIcon])
+  }, [hasAiContent, hasAiReview, importantFiles, getFileName, getFileIcon])
 
   // Find default tab with fallback logic
   const getDefaultTab = useCallback((): TabInfo | null => {
-    if (isLoading || availableTabs.length === 0) return null
+    if (!isFetched || availableTabs.length === 0) return null
 
     // Priority 1: README file
     const readmeTab = availableTabs.find(
@@ -167,12 +171,14 @@ export default function ImportantFilesView({
     )
     if (readmeTab) return readmeTab
 
-    // Priority 2: AI content
-    const aiTab = availableTabs.find((tab) => tab.type === "ai")
+    // Priority 2: AI content (only if available)
+    const aiTab = availableTabs.find((tab) => tab.type === "ai" && hasAiContent)
     if (aiTab) return aiTab
 
     // Priority 3: AI review
-    const aiReviewTab = availableTabs.find((tab) => tab.type === "ai-review")
+    const aiReviewTab = availableTabs.find(
+      (tab) => tab.type === "ai-review" && hasAiReview,
+    )
     if (aiReviewTab) return aiReviewTab
 
     // Priority 4: First file
@@ -180,24 +186,7 @@ export default function ImportantFilesView({
     if (firstFileTab) return firstFileTab
 
     return null
-  }, [isLoading, availableTabs, isReadmeFile])
-
-  // Handle copy functionality
-  const handleCopy = useCallback(() => {
-    let textToCopy = ""
-
-    if (activeTab?.type === "ai-review" && aiReviewText) {
-      textToCopy = aiReviewText
-    } else if (activeTab?.type === "file" && activeFileContent) {
-      textToCopy = activeFileContent
-    }
-
-    if (textToCopy) {
-      navigator.clipboard.writeText(textToCopy)
-      setCopyState("copied")
-      setTimeout(() => setCopyState("copy"), 500)
-    }
-  }, [activeTab, aiReviewText])
+  }, [isFetched, availableTabs, isReadmeFile])
 
   // Handle tab selection with validation
   const selectTab = useCallback(
@@ -245,11 +234,11 @@ export default function ImportantFilesView({
 
   // Set default tab when no tab is active
   useEffect(() => {
-    if (activeTab === null && !isLoading) {
+    if (activeTab === null && isFetched) {
       const defaultTab = getDefaultTab()
       setActiveTab(defaultTab)
     }
-  }, [activeTab, isLoading, getDefaultTab])
+  }, [activeTab, isFetched, getDefaultTab])
 
   // Validate active tab still exists (handles file deletion)
   useEffect(() => {
@@ -273,18 +262,41 @@ export default function ImportantFilesView({
     return importantFiles.find((file) => file.file_path === activeTab.filePath)
   }, [activeTab, importantFiles])
 
-  const { data: activeFileFull } = usePackageFile(
-    partialActiveFile
-      ? {
-          file_path: partialActiveFile.file_path,
-          package_release_id: partialActiveFile.package_release_id,
-        }
-      : null,
-    { keepPreviousData: true },
-  )
+  const { data: activeFileFull, isFetched: isActiveFileFetched } =
+    usePackageFile(
+      partialActiveFile
+        ? {
+            file_path: partialActiveFile.file_path,
+            package_release_id: partialActiveFile.package_release_id,
+          }
+        : null,
+      {
+        keepPreviousData: true,
+        staleTime: Infinity,
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
+      },
+    )
 
   const activeFileContent = activeFileFull?.content_text || ""
 
+  const handleCopy = () => {
+    let textToCopy = ""
+
+    if (activeTab?.type === "ai-review" && aiReviewText) {
+      textToCopy = aiReviewText
+    } else if (activeTab?.type === "file" && activeFileContent) {
+      textToCopy = activeFileContent
+    }
+
+    if (textToCopy) {
+      navigator.clipboard.writeText(textToCopy)
+      setCopyState("copied")
+      setTimeout(() => setCopyState("copy"), 500)
+    }
+  }
+
   // Render content based on active tab
   const renderAiContent = useCallback(
     () => (
@@ -369,20 +381,24 @@ export default function ImportantFilesView({
   }, [aiReviewText, aiReviewRequested, isOwner, onRequestAiReview])
 
   const renderFileContent = useCallback(() => {
-    if (!activeTab?.filePath || !activeFileContent) {
-      return <pre className="whitespace-pre-wrap">{activeFileContent}</pre>
+    if (!isActiveFileFetched || !activeTab?.filePath || !activeFileContent) {
+      ;<div className="text-sm p-4">
+        {SKELETON_WIDTHS.map((w, i) => (
+          <Skeleton key={i} className={`h-4 mb-2 ${w}`} />
+        ))}
+      </div>
     }
 
-    if (isMarkdownFile(activeTab.filePath)) {
+    if (isMarkdownFile(String(activeTab?.filePath))) {
       return <MarkdownViewer markdownContent={activeFileContent} />
     }
 
-    if (isCodeFile(activeTab.filePath)) {
+    if (isCodeFile(String(activeTab?.filePath))) {
       return (
-        <div className="overflow-x-auto">
+        <div className="overflow-x-auto no-scrollbar">
           <ShikiCodeViewer
             code={activeFileContent}
-            filePath={activeTab.filePath}
+            filePath={String(activeTab?.filePath)}
           />
         </div>
       )
@@ -422,7 +438,7 @@ export default function ImportantFilesView({
     [activeTab],
   )
 
-  if (isLoading) {
+  if (!isFetched) {
     return (
       <div className="mt-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
         <div className="flex items-center pl-2 pr-4 py-2 bg-gray-100 dark:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]">

package/src/components/ViewPackagePage/components/main-content-header.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import {
@@ -72,7 +70,9 @@ export default function MainContentHeader({
     }
   }
 
-  const { circuitJson } = useCurrentPackageCircuitJson()
+  const hasCircuitJson = packageFiles.some(
+    (file) => file.file_path === "dist/circuit.json",
+  )
 
   return (
     <div className="flex items-center justify-between mb-4">
@@ -86,7 +86,7 @@ export default function MainContentHeader({
           unscopedName={packageInfo?.unscoped_name}
           desiredImageType={activeView}
           author={packageInfo?.owner_github_username ?? undefined}
-          circuitJson={circuitJson}
+          hasCircuitJson={hasCircuitJson}
         />
 
         {/* Code Dropdown */}

package/src/components/ViewPackagePage/components/main-content-view-selector.tsx

@@ -1,4 +1,3 @@
-"use client"
 import React from "react"
 import {
   Code,

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

@@ -1,4 +1,3 @@
-"use client"
 import { GitFork, Star, Tag, Settings, LinkIcon } from "lucide-react"
 import { Badge } from "@/components/ui/badge"
 import { Skeleton } from "@/components/ui/skeleton"

package/src/components/ViewPackagePage/components/package-header.tsx

@@ -12,10 +12,7 @@ import { Lock, Globe } from "lucide-react"
 import { GitFork, Package, Star } from "lucide-react"
 
 import { useForkPackageMutation } from "@/hooks/use-fork-package-mutation"
-import {
-  usePackageStarMutationByName,
-  usePackageStarsByName,
-} from "@/hooks/use-package-stars"
+import { usePackageStarMutationByName } from "@/hooks/use-package-stars"
 import { useOrderDialog } from "@tscircuit/runframe"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { Package as PackageType } from "fake-snippets-api/lib/db/schema"
@@ -45,8 +42,7 @@ export default function PackageHeader({
     isLoggedIn,
     packageReleaseId: packageInfo?.latest_package_release_id ?? "",
   })
-  const { data: starData, isLoading: isStarDataLoading } =
-    usePackageStarsByName(packageInfo?.name ?? null)
+
   const { addStar, removeStar } = usePackageStarMutationByName(
     packageInfo?.name ?? "",
   )
@@ -57,7 +53,7 @@ export default function PackageHeader({
   const handleStarClick = async () => {
     if (!packageInfo?.name || !isLoggedIn) return
 
-    if (starData?.is_starred) {
+    if (packageInfo?.is_starred) {
       await removeStar.mutateAsync()
     } else {
       await addStar.mutateAsync()
@@ -69,8 +65,7 @@ export default function PackageHeader({
     await forkPackage(packageInfo.package_id)
   }
 
-  const isStarLoading =
-    isStarDataLoading || addStar.isLoading || removeStar.isLoading
+  const isStarLoading = addStar.isLoading || removeStar.isLoading
 
   useEffect(() => {
     window.TSCIRCUIT_REGISTRY_API_BASE_URL =
@@ -155,15 +150,15 @@ export default function PackageHeader({
                     >
                       <Star
                         className={`w-4 h-4 mr-2 ${
-                          starData?.is_starred
+                          packageInfo?.is_starred
                             ? "fill-yellow-500 text-yellow-500"
                             : ""
                         }`}
                       />
-                      {starData?.is_starred ? "Starred" : "Star"}
-                      {(starData?.star_count ?? 0) > 0 && (
+                      {packageInfo?.is_starred ? "Starred" : "Star"}
+                      {(packageInfo?.star_count ?? 0) > 0 && (
                         <span className="ml-1.5 bg-gray-100 text-gray-700 rounded-full px-1.5 py-0.5 text-xs font-medium">
-                          {starData?.star_count}
+                          {packageInfo?.star_count}
                         </span>
                       )}
                     </Button>
@@ -229,13 +224,15 @@ export default function PackageHeader({
             >
               <Star
                 className={`w-4 h-4 mr-2 ${
-                  starData?.is_starred ? "fill-yellow-500 text-yellow-500" : ""
+                  packageInfo?.is_starred
+                    ? "fill-yellow-500 text-yellow-500"
+                    : ""
                 }`}
               />
-              {starData?.is_starred ? "Starred" : "Star"}
-              {(starData?.star_count ?? 0) > 0 && (
+              {packageInfo?.is_starred ? "Starred" : "Star"}
+              {(packageInfo?.star_count ?? 0) > 0 && (
                 <span className="ml-1.5 bg-gray-100 text-gray-700 rounded-full px-1.5 py-0.5 text-xs font-medium">
-                  {starData?.star_count}
+                  {packageInfo?.star_count}
                 </span>
               )}
             </Button>

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

@@ -1,4 +1,3 @@
-"use client"
 import { Skeleton } from "@/components/ui/skeleton"
 import { usePreviewImages } from "@/hooks/use-preview-images"
 import type { Package } from "fake-snippets-api/lib/db/schema"

package/src/components/ViewPackagePage/components/repo-page-content.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { useState, useEffect, useMemo } from "react"
 import MainContentHeader from "./main-content-header"
 import Sidebar from "./sidebar"
@@ -21,20 +19,18 @@ import Footer from "@/components/Footer"
 import PackageHeader from "./package-header"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useLocation } from "wouter"
-import { Package } from "fake-snippets-api/lib/db/schema"
-import { useCurrentPackageCircuitJson } from "../hooks/use-current-package-circuit-json"
+import type {
+  Package,
+  PackageFile as ApiPackageFile,
+} from "fake-snippets-api/lib/db/schema"
 import { useRequestAiReviewMutation } from "@/hooks/use-request-ai-review-mutation"
 import { useAiReview } from "@/hooks/use-ai-review"
 import { useQueryClient } from "react-query"
 import SidebarReleasesSection from "./sidebar-releases-section"
 
-interface PackageFile {
-  package_file_id: string
-  package_release_id: string
-  file_path: string
-  file_content: string
-  content_text?: string // Keep for backward compatibility
-  created_at: string // iso-8601
+interface PackageFile extends ApiPackageFile {
+  file_content?: string
+  content_text?: string | null // Keep for backward compatibility
 }
 
 interface RepoPageContentProps {
@@ -44,10 +40,12 @@ interface RepoPageContentProps {
   packageRelease?: import("fake-snippets-api/lib/db/schema").PackageRelease
   onFileClicked?: (file: PackageFile) => void
   onEditClicked?: () => void
+  arePackageFilesFetched?: boolean
 }
 
 export default function RepoPageContent({
   packageFiles,
+  arePackageFilesFetched = false,
   packageInfo,
   packageRelease,
   onFileClicked,
@@ -70,8 +68,12 @@ export default function RepoPageContent({
     }
   }, [aiReview?.ai_review_text, queryClient])
   const session = useGlobalStore((s) => s.session)
-  const { circuitJson, isLoading: isCircuitJsonLoading } =
-    useCurrentPackageCircuitJson()
+
+  // Check if circuit.json exists without downloading it
+  const circuitJsonExists = useMemo(() => {
+    return packageFiles?.some((file) => file.file_path === "dist/circuit.json")
+  }, [packageFiles])
+
   const { mutate: requestAiReview, isLoading: isRequestingAiReview } =
     useRequestAiReviewMutation({
       onSuccess: (_packageRelease, aiReview) => {
@@ -91,13 +93,12 @@ export default function RepoPageContent({
 
   // Handle initial view selection and hash-based view changes
   useEffect(() => {
-    if (isCircuitJsonLoading) return
-    if (!packageInfo) return
+    if (!packageInfo || !arePackageFilesFetched) return
     const hash = window.location.hash.slice(1)
     const validViews = ["files", "3d", "pcb", "schematic", "bom"]
     const circuitDependentViews = ["3d", "pcb", "schematic", "bom"]
 
-    const availableViews = circuitJson
+    const availableViews = circuitJsonExists
       ? validViews
       : validViews.filter((view) => !circuitDependentViews.includes(view))
 
@@ -115,7 +116,7 @@ export default function RepoPageContent({
         window.location.hash = "files"
       }
     }
-  }, [packageInfo?.default_view, circuitJson, isCircuitJsonLoading])
+  }, [packageInfo?.default_view, circuitJsonExists])
 
   const importantFilePaths = packageFiles
     ?.filter((pf) => isPackageFileImportant(pf.file_path))
@@ -146,7 +147,7 @@ export default function RepoPageContent({
         return (
           <FilesView
             packageFiles={packageFiles}
-            isLoading={!packageFiles}
+            arePackageFilesFetched={arePackageFilesFetched}
             onFileClicked={onFileClicked}
           />
         )
@@ -162,7 +163,7 @@ export default function RepoPageContent({
         return (
           <FilesView
             packageFiles={packageFiles}
-            isLoading={!packageFiles}
+            arePackageFilesFetched={arePackageFilesFetched}
             onFileClicked={onFileClicked}
           />
         )
@@ -215,7 +216,7 @@ export default function RepoPageContent({
             {/* Important Files View - Always shown */}
             <ImportantFilesView
               importantFiles={importantFiles}
-              isLoading={!packageFiles}
+              isFetched={arePackageFilesFetched}
               onEditClicked={onEditClicked}
               packageAuthorOwner={packageInfo?.owner_github_username}
               aiDescription={packageInfo?.ai_description ?? ""}

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

@@ -1,5 +1,3 @@
-"use client"
-
 import { Package } from "fake-snippets-api/lib/db/schema"
 import SidebarAboutSection from "./sidebar-about-section"
 import SidebarReleasesSection from "./sidebar-releases-section"