@tscircuit/fake-snippets 0.0.109 → 0.0.110

package/src/components/SearchComponent.tsx

@@ -5,7 +5,7 @@ import React, { useEffect, useRef, useState } from "react"
 import { useQuery } from "react-query"
 import { Alert } from "./ui/alert"
 import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
-import { PrefetchPageLink } from "./PrefetchPageLink"
+import { Link } from "wouter"
 import { CircuitBoard } from "lucide-react"
 import { cn } from "@/lib/utils"
 
@@ -42,9 +42,9 @@ const LinkWithNewTabHandling = ({
     )
   }
   return (
-    <PrefetchPageLink onClick={onClick} className={className} href={href}>
+    <Link onClick={onClick} className={className} href={href}>
       {children}
-    </PrefetchPageLink>
+    </Link>
   )
 }
 
@@ -60,7 +60,7 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
   const resultsRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const [location, setLocation] = useLocation()
-  const snippetsBaseApiUrl = useApiBaseUrl()
+  const apiBaseUrl = useApiBaseUrl()
 
   const { data: searchResults, isLoading } = useQuery(
     ["packageSearch", searchQuery],
@@ -137,10 +137,13 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
       <Input
         autoComplete="off"
         spellCheck={false}
+        autoCorrect="off"
+        autoCapitalize="off"
         ref={inputRef}
         type="search"
+        aria-autocomplete="none"
         placeholder="Search"
-        className="pl-4 focus:border-blue-500 placeholder-gray-400 text-sm"
+        className="pl-4 focus:border-blue-500 placeholder-gray-400 text-sm select-none"
         value={searchQuery}
         onChange={(e) => {
           setSearchQuery(e.target.value)
@@ -195,10 +198,10 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
       {showResults && searchResults && (
         <div
           ref={resultsRef}
-          className="absolute top-full md:left-0 right-0 mt-2 bg-white shadow-lg rounded-md z-50 w-80 max-h-screen overflow-y-auto overflow-x-visible"
+          className="absolute top-full md:left-0 right-0 no-scrollbar mt-2 bg-white shadow-lg rounded-md z-50 w-80 max-h-screen overflow-y-auto overflow-x-visible"
         >
           {searchResults.length > 0 ? (
-            <ul className="divide-y divide-gray-200">
+            <ul className="divide-y divide-gray-200 no-scrollbar">
               {searchResults.map((pkg: any, index: number) => (
                 <li
                   key={pkg.package_id}
@@ -222,8 +225,9 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
                   >
                     <div className="w-12 h-12 overflow-hidden mr-2 flex-shrink-0 rounded-sm bg-gray-50 border flex items-center justify-center">
                       <img
-                        src={`${snippetsBaseApiUrl}/snippets/images/${pkg.name}/pcb.svg`}
+                        src={`${apiBaseUrl}/packages/images/${pkg.name}/pcb.svg`}
                         alt={`PCB preview for ${pkg.name}`}
+                        draggable={false}
                         className="w-12 h-12 object-contain p-1 scale-[4] rotate-45"
                         onError={(e) => {
                           e.currentTarget.style.display = "none"

package/src/components/UserCard.tsx

@@ -0,0 +1,80 @@
+import React from "react"
+import { Link } from "wouter"
+import { Account } from "fake-snippets-api/lib/db/schema"
+import { User } from "lucide-react"
+
+export interface UserCardProps {
+  /** The account data to display */
+  account: Account | Omit<Account, "account_id">
+  /** Whether to render the card with a link to the user profile page */
+  withLink?: boolean
+  /** Custom class name for the card container */
+  className?: string
+  /** Custom onClick handler */
+  onClick?: (account: Account | Omit<Account, "account_id">) => void
+}
+
+export const UserCard: React.FC<UserCardProps> = ({
+  account,
+  withLink = true,
+  className = "",
+  onClick,
+}) => {
+  const handleClick = () => {
+    if (onClick) {
+      onClick(account)
+    } else if (!withLink) {
+      window.location.href = `/${account.github_username}`
+    }
+  }
+
+  const cardContent = (
+    <div
+      className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 cursor-pointer ${className}`}
+      onClick={!withLink ? handleClick : undefined}
+    >
+      <div className="flex items-start gap-4">
+        <div className="w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-gray-50 border flex items-center justify-center">
+          <img
+            src={`https://github.com/${account.github_username}.png`}
+            alt={`${account.github_username} avatar`}
+            className="object-cover h-full w-full transition-transform duration-300 hover:scale-110"
+            onError={(e) => {
+              const target = e.target as HTMLImageElement
+              target.style.display = "none"
+              target.nextElementSibling?.classList.remove("hidden")
+              target.nextElementSibling?.classList.add("flex")
+            }}
+          />
+          <div className="hidden items-center justify-center h-full w-full">
+            <User className="w-6 h-6 text-gray-300" />
+          </div>
+        </div>
+        <div className="flex-1 min-w-0 flex flex-col justify-center my-auto">
+          <div className="flex justify-between items-start">
+            <h2 className="text-md font-semibold truncate pr-[30px]">
+              <span className="text-gray-900">{account.github_username}</span>
+            </h2>
+          </div>
+          <p className="text-sm text-gray-500 truncate max-w-xs">
+            @{account.github_username}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+
+  if (withLink) {
+    return (
+      <Link
+        key={account.github_username}
+        href={`/${account.github_username}`}
+        onClick={onClick ? () => onClick(account) : undefined}
+      >
+        {cardContent}
+      </Link>
+    )
+  }
+
+  return cardContent
+}

package/src/components/ViewPackagePage/components/build-status.tsx

@@ -14,7 +14,7 @@ export interface BuildStatusProps {
 
 export const BuildStatus = ({ step, packageReleaseId }: BuildStatusProps) => {
   const { author, packageName } = useParams()
-  const href = `/${author}/${packageName}/builds?package_release_id=${packageReleaseId}`
+  const href = `/${author}/${packageName}/releases/${packageReleaseId}`
 
   return (
     <Link href={href} className="flex items-center gap-2">

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

@@ -16,6 +16,8 @@ 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"
+import { useOrganization } from "@/hooks/use-organization"
+import { Package } from "fake-snippets-api/lib/db/schema"
 
 interface PackageFile {
   package_file_id: string
@@ -29,13 +31,12 @@ interface ImportantFilesViewProps {
   importantFiles?: PackageFile[]
   isFetched?: boolean
   onEditClicked?: (file_path?: string | null) => void
-  packageAuthorOwner?: string | null
-  aiDescription?: string
-  aiUsageInstructions?: string
   aiReviewText?: string | null
   aiReviewRequested?: boolean
   onRequestAiReview?: () => void
+  onRequestAiDescriptionUpdate?: () => void
   onLicenseFileRequested?: boolean
+  pkg?: Package
 }
 
 type TabType = "ai" | "ai-review" | "file"
@@ -49,30 +50,44 @@ interface TabInfo {
 
 export default function ImportantFilesView({
   importantFiles = [],
-  aiDescription,
-  aiUsageInstructions,
   aiReviewText,
   aiReviewRequested,
   onRequestAiReview,
+  onRequestAiDescriptionUpdate,
   isFetched = false,
   onEditClicked,
-  packageAuthorOwner,
   onLicenseFileRequested,
+  pkg,
 }: ImportantFilesViewProps) {
   const [activeTab, setActiveTab] = useState<TabInfo | null>(null)
   const [copyState, setCopyState] = useState<"copy" | "copied">("copy")
   const { session: user } = useGlobalStore()
 
+  const { organization } = useOrganization(
+    pkg?.owner_org_id
+      ? { orgId: String(pkg.owner_org_id) }
+      : pkg?.owner_github_username
+        ? { github_handle: pkg.owner_github_username }
+        : {},
+  )
+
   // Memoized computed values
   const hasAiContent = useMemo(
-    () => Boolean(aiDescription || aiUsageInstructions),
-    [aiDescription, aiUsageInstructions],
+    () => Boolean(pkg?.ai_description || pkg?.ai_usage_instructions),
+    [pkg?.ai_description, pkg?.ai_usage_instructions],
   )
   const hasAiReview = useMemo(() => Boolean(aiReviewText), [aiReviewText])
   const isOwner = useMemo(
-    () => user?.github_username === packageAuthorOwner,
-    [user?.github_username, packageAuthorOwner],
+    () => user?.github_username === pkg?.owner_github_username,
+    [user?.github_username, pkg?.owner_github_username],
   )
+  const canManagePackage = useMemo(() => {
+    if (isOwner) return isOwner
+    if (organization) {
+      return organization.user_permissions?.can_manage_package
+    }
+    return false
+  }, [isOwner, organization])
 
   // File type utilities
   const isLicenseFile = useCallback((filePath: string) => {
@@ -139,7 +154,7 @@ export default function ImportantFilesView({
     }
 
     // Only show AI review tab if there's actual AI review content
-    if (hasAiReview || isOwner) {
+    if (hasAiReview || canManagePackage) {
       tabs.push({
         type: "ai-review",
         filePath: null,
@@ -286,6 +301,16 @@ export default function ImportantFilesView({
 
     if (activeTab?.type === "ai-review" && aiReviewText) {
       textToCopy = aiReviewText
+    } else if (
+      activeTab?.type === "ai" &&
+      (pkg?.ai_description || pkg?.ai_usage_instructions)
+    ) {
+      const parts = []
+      if (pkg?.ai_description)
+        parts.push(`# Description\n\n${pkg?.ai_description}`)
+      if (pkg?.ai_usage_instructions)
+        parts.push(`# Instructions\n\n${pkg?.ai_usage_instructions}`)
+      textToCopy = parts.join("\n\n")
     } else if (activeTab?.type === "file" && activeFileContent) {
       textToCopy = activeFileContent
     }
@@ -298,25 +323,49 @@ export default function ImportantFilesView({
   }
 
   // Render content based on active tab
-  const renderAiContent = useCallback(
-    () => (
+  const renderAiContent = useCallback(() => {
+    if (!pkg?.ai_description && !pkg?.ai_usage_instructions) {
+      return (
+        <div className="flex flex-col items-center justify-center py-8 px-4">
+          <div className="text-center space-y-4 max-w-md">
+            <div className="flex justify-center">
+              <div className="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center">
+                <Loader2 className="h-6 w-6 text-gray-600 animate-spin" />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <p className="text-sm text-gray-600">
+                Our AI is generating a description for your package. This
+                usually takes a few minutes. Please check back shortly.
+              </p>
+            </div>
+          </div>
+        </div>
+      )
+    }
+
+    return (
       <div className="markdown-content">
-        {aiDescription && (
+        {pkg?.ai_description && (
           <div className="mb-6">
             <h3 className="font-semibold text-lg mb-2">Description</h3>
-            <MarkdownViewer markdownContent={aiDescription} />
+            <MarkdownViewer markdownContent={pkg?.ai_description} />
           </div>
         )}
-        {aiUsageInstructions && (
+        {pkg?.ai_usage_instructions && (
           <div>
             <h3 className="font-semibold text-lg mb-2">Instructions</h3>
-            <MarkdownViewer markdownContent={aiUsageInstructions} />
+            <MarkdownViewer markdownContent={pkg?.ai_usage_instructions} />
           </div>
         )}
       </div>
-    ),
-    [aiDescription, aiUsageInstructions],
-  )
+    )
+  }, [
+    pkg?.ai_description,
+    pkg?.ai_usage_instructions,
+    canManagePackage,
+    onRequestAiDescriptionUpdate,
+  ])
 
   const renderAiReviewContent = useCallback(() => {
     if (!aiReviewText && !aiReviewRequested) {
@@ -334,7 +383,7 @@ export default function ImportantFilesView({
                 from our AI assistant.
               </p>
             </div>
-            {!isOwner ? (
+            {!canManagePackage ? (
               <p className="text-sm text-gray-500">
                 Only the package owner can generate an AI review
               </p>
@@ -378,15 +427,17 @@ export default function ImportantFilesView({
     }
 
     return <MarkdownViewer markdownContent={aiReviewText || ""} />
-  }, [aiReviewText, aiReviewRequested, isOwner, onRequestAiReview])
+  }, [aiReviewText, aiReviewRequested, canManagePackage, onRequestAiReview])
 
   const renderFileContent = useCallback(() => {
     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>
+      return (
+        <div className="text-sm p-4">
+          {SKELETON_WIDTHS.map((w, i) => (
+            <Skeleton key={i} className={`h-4 mb-2 ${w}`} />
+          ))}
+        </div>
+      )
     }
 
     if (isMarkdownFile(String(activeTab?.filePath))) {
@@ -405,7 +456,13 @@ export default function ImportantFilesView({
     }
 
     return <pre className="whitespace-pre-wrap">{activeFileContent}</pre>
-  }, [activeTab, activeFileContent, isMarkdownFile, isCodeFile])
+  }, [
+    activeTab,
+    activeFileContent,
+    isActiveFileFetched,
+    isMarkdownFile,
+    isCodeFile,
+  ])
 
   const renderTabContent = useCallback(() => {
     if (!activeTab) return null
@@ -500,7 +557,9 @@ export default function ImportantFilesView({
         </div>
         <div className="ml-auto flex items-center">
           {((activeTab?.type === "file" && activeFileContent) ||
-            (activeTab?.type === "ai-review" && aiReviewText)) && (
+            (activeTab?.type === "ai-review" && aiReviewText) ||
+            (activeTab?.type === "ai" &&
+              (pkg?.ai_description || pkg?.ai_usage_instructions))) && (
             <button
               className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md transition-all duration-300"
               onClick={handleCopy}
@@ -513,17 +572,29 @@ export default function ImportantFilesView({
               <span className="sr-only">Copy</span>
             </button>
           )}
-          {activeTab?.type === "ai-review" && aiReviewText && isOwner && (
+          {activeTab?.type === "ai-review" &&
+            aiReviewText &&
+            canManagePackage && (
+              <button
+                className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md ml-1"
+                onClick={onRequestAiReview}
+                title="Re-request AI Review"
+              >
+                <RefreshCcwIcon className="h-4 w-4" />
+                <span className="sr-only">Re-request AI Review</span>
+              </button>
+            )}
+          {activeTab?.type === "ai" && hasAiContent && canManagePackage && (
             <button
               className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md ml-1"
-              onClick={onRequestAiReview}
-              title="Re-request AI Review"
+              onClick={onRequestAiDescriptionUpdate}
+              title="Regenerate AI Description"
             >
               <RefreshCcwIcon className="h-4 w-4" />
-              <span className="sr-only">Re-request AI Review</span>
+              <span className="sr-only">Regenerate AI Description</span>
             </button>
           )}
-          {activeTab?.type === "file" && (
+          {activeTab?.type === "file" && canManagePackage && (
             <button
               className="hover:bg-gray-200 dark:hover:bg-[#30363d] p-1 rounded-md"
               onClick={() => onEditClicked?.(activeTab.filePath)}

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

@@ -26,6 +26,7 @@ import { useLocation } from "wouter"
 import { Package, PackageFile } from "fake-snippets-api/lib/db/schema"
 import { usePackageFiles } from "@/hooks/use-package-files"
 import { useDownloadZip } from "@/hooks/use-download-zip"
+import { useToast } from "@/hooks/use-toast"
 interface MainContentHeaderProps {
   packageFiles: PackageFile[]
   activeView: string
@@ -63,16 +64,19 @@ export default function MainContentHeader({
   }
 
   const { downloadZip } = useDownloadZip()
+  const { toastLibrary } = useToast()
 
   const handleDownloadZip = () => {
     if (packageInfo && packageFiles) {
-      downloadZip(packageInfo, packageFiles)
+      toastLibrary.promise(downloadZip(packageInfo, packageFiles), {
+        loading: "Downloading ZIP...",
+        success: "ZIP downloaded successfully!",
+        error: "Failed to download ZIP",
+      })
     }
   }
 
-  const hasCircuitJson = packageFiles.some(
-    (file) => file.file_path === "dist/circuit.json",
-  )
+  const { circuitJson } = useCurrentPackageCircuitJson()
 
   return (
     <div className="flex items-center justify-between mb-4">
@@ -86,7 +90,7 @@ export default function MainContentHeader({
           unscopedName={packageInfo?.unscoped_name}
           desiredImageType={activeView}
           author={packageInfo?.owner_github_username ?? undefined}
-          hasCircuitJson={hasCircuitJson}
+          circuitJson={circuitJson}
         />
 
         {/* Code Dropdown */}
@@ -101,7 +105,7 @@ export default function MainContentHeader({
               <ChevronDown className="h-4 w-4 ml-0.5" />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-72">
+          <DropdownMenuContent align="end" className="w-72 relative z-[101]">
             <DropdownMenuItem disabled={!Boolean(packageInfo)} asChild>
               <a
                 href={`/editor?package_id=${packageInfo?.package_id}`}

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

@@ -130,7 +130,7 @@ export default function MainContentViewSelector({
               </svg>
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
+          <DropdownMenuContent align="start" className="z-[101]">
             <TooltipProvider>
               {views.map((view) => {
                 const isDisabled = !circuitJson && view.requiresCircuitJson

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

@@ -1,13 +1,18 @@
 import { GitFork, Star, Tag, Settings, LinkIcon } from "lucide-react"
 import { Badge } from "@/components/ui/badge"
 import { Skeleton } from "@/components/ui/skeleton"
+import { usePackageReleaseImages } from "@/hooks/use-package-release-images"
 import { usePreviewImages } from "@/hooks/use-preview-images"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { Button } from "@/components/ui/button"
 import { useEditPackageDetailsDialog } from "@/components/dialogs/edit-package-details-dialog"
 import React, { useState, useEffect, useMemo, useCallback } from "react"
+import {
+  normalizeSvgForSquareTile,
+  svgToDataUrl,
+} from "@/lib/normalize-svg-for-tile"
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
-import { usePackageFile } from "@/hooks/use-package-files"
+import { usePackageFileById, usePackageFiles } from "@/hooks/use-package-files"
 import { getLicenseFromLicenseContent } from "@/lib/getLicenseFromLicenseContent"
 
 interface MobileSidebarProps {
@@ -20,19 +25,25 @@ const MobileSidebar = ({
   onViewChange,
 }: MobileSidebarProps) => {
   const { packageInfo, refetch: refetchPackageInfo } = useCurrentPackageInfo()
-  const { data: licenseFileMeta } = usePackageFile({
-    package_release_id: packageInfo?.latest_package_release_id ?? "",
-    file_path: "LICENSE",
-  })
+  const { data: releaseFiles } = usePackageFiles(
+    packageInfo?.latest_package_release_id,
+  )
+  const licenseFileId = useMemo(() => {
+    return (
+      releaseFiles?.find((f) => f.file_path === "LICENSE")?.package_file_id ||
+      null
+    )
+  }, [releaseFiles])
+  const { data: licenseFileMeta } = usePackageFileById(licenseFileId)
   const currentLicense = useMemo(() => {
     if (packageInfo?.latest_license) {
       return packageInfo?.latest_license
     }
     if (licenseFileMeta?.content_text) {
-      return getLicenseFromLicenseContent(licenseFileMeta?.content_text)
+      return getLicenseFromLicenseContent(licenseFileMeta.content_text)
     }
     return undefined
-  }, [licenseFileMeta?.content_text, packageInfo?.latest_license])
+  }, [licenseFileMeta, packageInfo?.latest_license])
   const topics = useMemo(
     () => (packageInfo?.is_package ? ["Package"] : ["Board"]),
     [packageInfo?.is_package],
@@ -69,11 +80,21 @@ const MobileSidebar = ({
     [refetchPackageInfo],
   )
 
-  const { availableViews } = usePreviewImages({
+  const { availableViews: imageViews } = usePackageReleaseImages({
+    packageReleaseId: packageInfo?.latest_package_release_id,
+  })
+
+  const { availableViews: pngViews } = usePreviewImages({
     packageName: packageInfo?.name,
     fsMapHash: packageInfo?.latest_package_release_fs_sha ?? "",
   })
 
+  const viewsToRender =
+    imageViews.length === 0 ||
+    imageViews.every((v) => !v.isLoading && !v.imageUrl)
+      ? (pngViews as any)
+      : imageViews
+
   const handleViewClick = useCallback(
     (viewId: string) => {
       onViewChange?.(viewId as "3d" | "pcb" | "schematic")
@@ -185,11 +206,14 @@ const MobileSidebar = ({
       </div>
 
       <div className="grid grid-cols-3 gap-2">
-        {availableViews.map((view) => (
+        {viewsToRender.map((view: any) => (
           <PreviewButton
             key={view.id}
             view={view.label}
             onClick={() => handleViewClick(view.id)}
+            backgroundClass={view.backgroundClass}
+            svg={view.svg}
+            isLoading={view.isLoading}
             imageUrl={view.imageUrl}
             status={view.status}
             onLoad={view.onLoad}
@@ -225,6 +249,9 @@ export default React.memo(MobileSidebar)
 function PreviewButton({
   view,
   onClick,
+  backgroundClass,
+  svg,
+  isLoading,
   imageUrl,
   status,
   onLoad,
@@ -232,30 +259,38 @@ function PreviewButton({
 }: {
   view: string
   onClick: () => void
+  backgroundClass?: string
+  svg?: string | null
+  isLoading?: boolean
   imageUrl?: string
-  status: "loading" | "loaded" | "error"
-  onLoad: () => void
-  onError: () => void
+  status?: "loading" | "loaded" | "error"
+  onLoad?: () => void
+  onError?: () => void
 }) {
-  if (status === "error") {
+  if (!svg && !isLoading && !imageUrl) {
     return null
   }
 
   return (
     <button
       onClick={onClick}
-      className="aspect-square bg-gray-100 dark:bg-[#161b22] rounded-lg border border-gray-200 dark:border-[#30363d] hover:bg-gray-200 dark:hover:bg-[#21262d] flex items-center justify-center transition-colors mt-4"
+      className={`aspect-square ${backgroundClass ?? "bg-gray-100"} rounded-lg border border-gray-200 dark:border-[#30363d] flex items-center justify-center transition-colors mt-4 overflow-hidden`}
     >
-      {status === "loading" && (
+      {(isLoading || status === "loading") && (
         <Skeleton className="w-full h-full rounded-lg" />
       )}
-      {imageUrl && (
+      {!isLoading && !status && svg && (
+        <img
+          src={svgToDataUrl(normalizeSvgForSquareTile(svg))}
+          alt={view}
+          className="w-full h-full object-contain"
+        />
+      )}
+      {imageUrl && !isLoading && (
         <img
           src={imageUrl}
           alt={view}
-          className={`w-full h-full object-cover rounded-lg ${
-            status === "loaded" ? "block" : "hidden"
-          }`}
+          className="w-full h-full object-cover rounded-lg"
           onLoad={onLoad}
           onError={onError}
         />