@tscircuit/fake-snippets 0.0.108 → 0.0.110

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,30 +12,31 @@ 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"
+import { useOrganization } from "@/hooks/use-organization"
+import { Package } from "fake-snippets-api/lib/db/schema"
 
 interface PackageFile {
   package_file_id: string
   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
-  aiUsageInstructions?: string
   aiReviewText?: string | null
   aiReviewRequested?: boolean
   onRequestAiReview?: () => void
+  onRequestAiDescriptionUpdate?: () => void
   onLicenseFileRequested?: boolean
+  pkg?: Package
 }
 
 type TabType = "ai" | "ai-review" | "file"
@@ -51,30 +50,44 @@ interface TabInfo {
 
 export default function ImportantFilesView({
   importantFiles = [],
-  aiDescription,
-  aiUsageInstructions,
   aiReviewText,
   aiReviewRequested,
   onRequestAiReview,
-  isLoading = false,
+  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) => {
@@ -130,19 +143,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 || canManagePackage) {
+      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 +173,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 +186,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 +201,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 +249,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,38 +277,95 @@ 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 === "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
+    }
+
+    if (textToCopy) {
+      navigator.clipboard.writeText(textToCopy)
+      setCopyState("copied")
+      setTimeout(() => setCopyState("copy"), 500)
+    }
+  }
+
   // 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) {
@@ -322,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>
@@ -366,30 +427,42 @@ export default function ImportantFilesView({
     }
 
     return <MarkdownViewer markdownContent={aiReviewText || ""} />
-  }, [aiReviewText, aiReviewRequested, isOwner, onRequestAiReview])
+  }, [aiReviewText, aiReviewRequested, canManagePackage, onRequestAiReview])
 
   const renderFileContent = useCallback(() => {
-    if (!activeTab?.filePath || !activeFileContent) {
-      return <pre className="whitespace-pre-wrap">{activeFileContent}</pre>
+    if (!isActiveFileFetched || !activeTab?.filePath || !activeFileContent) {
+      return (
+        <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>
       )
     }
 
     return <pre className="whitespace-pre-wrap">{activeFileContent}</pre>
-  }, [activeTab, activeFileContent, isMarkdownFile, isCodeFile])
+  }, [
+    activeTab,
+    activeFileContent,
+    isActiveFileFetched,
+    isMarkdownFile,
+    isCodeFile,
+  ])
 
   const renderTabContent = useCallback(() => {
     if (!activeTab) return null
@@ -422,7 +495,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]">
@@ -484,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}
@@ -497,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

@@ -1,5 +1,3 @@
-"use client"
-
 import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import {
@@ -28,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
@@ -65,10 +64,15 @@ 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",
+      })
     }
   }
 
@@ -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

@@ -1,4 +1,3 @@
-"use client"
 import React from "react"
 import {
   Code,
@@ -131,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,14 +1,18 @@
-"use client"
 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 {
@@ -21,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],
@@ -70,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")
@@ -186,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}
@@ -226,6 +249,9 @@ export default React.memo(MobileSidebar)
 function PreviewButton({
   view,
   onClick,
+  backgroundClass,
+  svg,
+  isLoading,
   imageUrl,
   status,
   onLoad,
@@ -233,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}
         />