@tscircuit/fake-snippets 0.0.66 → 0.0.68

package/src/components/JLCPCBImportDialog.tsx

@@ -27,6 +27,8 @@ export function JLCPCBImportDialog({
   const [partNumber, setPartNumber] = useState("")
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [hasBeenImportedToAccountAlready, setHasBeenImportedToAccountAlready] =
+    useState<boolean>(false)
   const axios = useAxios()
   const { toast } = useToast()
   const [, navigate] = useLocation()
@@ -45,29 +47,18 @@ export function JLCPCBImportDialog({
 
     setIsLoading(true)
     setError(null)
+    setHasBeenImportedToAccountAlready(false)
+
     try {
-      // Check that module doesn't already exist
-      const existingSnippetRes = await axios.get(
-        `/snippets/get?owner_name=${session?.github_username}&unscoped_name=${partNumber}`,
-        {
-          validateStatus: (status) => true,
-        },
-      )
+      const apiUrl = `/snippets/get?owner_name=${session?.github_username}&unscoped_name=${partNumber}`
 
-      if (existingSnippetRes.status !== 404) {
-        toast({
-          title: "JLCPCB Part Already Imported",
-          description: (
-            <div>
-              <PrefetchPageLink
-                className="text-blue-500 hover:underline"
-                href={`/editor?package_id=${existingSnippetRes.data.snippet.snippet_id}`}
-              >
-                View {partNumber}
-              </PrefetchPageLink>
-            </div>
-          ),
-        })
+      const existingPackageRes = await axios.get(apiUrl, {
+        validateStatus: (status) => true,
+      })
+
+      if (existingPackageRes.status !== 404) {
+        setHasBeenImportedToAccountAlready(true)
+        setIsLoading(false)
         return
       }
 
@@ -76,16 +67,20 @@ export function JLCPCBImportDialog({
           jlcpcb_part_number: partNumber,
         })
         .catch((e) => e)
+
       const { snippet, error } = response.data
+
       if (error) {
         setError(error.message)
         setIsLoading(false)
         return
       }
+
       toast({
         title: "Import Successful",
         description: "JLCPCB component has been imported successfully.",
       })
+
       onOpenChange(false)
       navigate(`/editor?package_id=${snippet.snippet_id}`)
     } catch (error) {
@@ -121,10 +116,17 @@ export function JLCPCBImportDialog({
             className="mt-3"
             placeholder="Enter JLCPCB part number (e.g., C46749)"
             value={partNumber}
-            onChange={(e) => setPartNumber(e.target.value)}
+            onChange={(e) => {
+              setPartNumber(e.target.value)
+              setError(null)
+              setHasBeenImportedToAccountAlready(false)
+            }}
           />
-          {error && <p className="bg-red-100 p-2 mt-2 pre-wrap">{error}</p>}
-          {error && (
+          {error && !hasBeenImportedToAccountAlready && (
+            <p className="bg-red-100 p-2 mt-2 pre-wrap">{error}</p>
+          )}
+
+          {error && !hasBeenImportedToAccountAlready && (
             <div className="flex justify-end mt-2">
               <Button
                 variant="default"
@@ -132,21 +134,35 @@ export function JLCPCBImportDialog({
                   const issueTitle = `[${partNumber}] Failed to import from JLCPCB`
                   const issueBody = `I tried to import the part number ${partNumber} from JLCPCB, but it failed. Here's the error I got:\n\`\`\`\n${error}\n\`\`\`\n\nCould be an issue in \`fetchEasyEDAComponent\` or \`convertRawEasyEdaToTs\``
                   const issueLabels = "snippets,good first issue"
-                  const url = `https://github.com/tscircuit/easyeda-converter/issues/new?title=${encodeURIComponent(issueTitle)}&body=${encodeURIComponent(issueBody)}&labels=${encodeURIComponent(issueLabels)}`
-
-                  // Open the issue in a new tab
+                  const url = `https://github.com/tscircuit/easyeda-converter/issues/new?title=${encodeURIComponent(
+                    issueTitle,
+                  )}&body=${encodeURIComponent(
+                    issueBody,
+                  )}&labels=${encodeURIComponent(issueLabels)}`
                   window.open(url, "_blank")
                 }}
               >
-                File Issue on Github (prefilled)
+                File Issue on GitHub (prefilled)
               </Button>
             </div>
           )}
+
+          {hasBeenImportedToAccountAlready && (
+            <p className="p-2 mt-2 pre-wrap text-md text-green-600">
+              This part number has already been imported to your profile.{" "}
+              <PrefetchPageLink
+                className="text-blue-500 hover:underline"
+                href={`/${session?.github_username}/${partNumber}`}
+              >
+                View it here
+              </PrefetchPageLink>
+            </p>
+          )}
         </div>
         <DialogFooter>
           <Button onClick={handleImport} disabled={isLoading || !isLoggedIn}>
             {!isLoggedIn
-              ? "Must be logged in for jlcpcb import"
+              ? "You must be logged in to import from JLCPCB"
               : isLoading
                 ? "Importing..."
                 : "Import"}

package/src/components/PackageCard.tsx

@@ -10,10 +10,10 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { OptimizedImage } from "./OptimizedImage"
 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 {
   /** The package data to display */
@@ -69,7 +69,7 @@ export const PackageCard: React.FC<PackageCardProps> = ({
         <div
           className={`${imageSize} flex-shrink-0 rounded-md overflow-hidden`}
         >
-          <img
+          <ImageWithFallback
             src={`${baseUrl}/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.svg?${new URLSearchParams(
               {
                 fs_sha: fsMapHash ?? "",

package/src/components/{SnippetLink.tsx → PackageLink.tsx}

@@ -1,35 +1,27 @@
 import { Link } from "wouter"
 import { Star } from "lucide-react"
+import { Package } from "fake-snippets-api/lib/db/schema"
 
-export const SnippetLink = ({
-  snippet,
-}: {
-  snippet: {
-    owner_name: string
-    name: string
-    unscoped_name: string
-    star_count?: number
-  }
-}) => {
+export const PackageLink = (pkg: Package) => {
   return (
     <>
       <Link
         className="text-blue-500 font-semibold hover:underline"
-        href={`/${snippet.owner_name}`}
+        href={`/${pkg.owner_github_username}`}
       >
-        {snippet.owner_name}
+        {pkg.owner_github_username}
       </Link>
       <span className="px-0.5 text-gray-500">/</span>
       <Link
         className="text-blue-500  font-semibold hover:underline"
-        href={`/${snippet.name}`}
+        href={`/${pkg.unscoped_name}`}
       >
-        {snippet.unscoped_name}
+        {pkg.unscoped_name}
       </Link>
-      {snippet.star_count !== undefined && (
+      {pkg.star_count !== undefined && (
         <span className="ml-2 text-gray-500 text-xs flex items-center">
           <Star className="w-3 h-3 mr-1" />
-          {snippet.star_count}
+          {pkg.star_count}
         </span>
       )}
     </>

package/src/components/PackageSearchResults.tsx

@@ -0,0 +1,87 @@
+import React from "react"
+import { Package } from "fake-snippets-api/lib/db/schema"
+import { PackageCardSkeleton } from "./PackageCardSkeleton"
+import { Search } from "lucide-react"
+import { PackageCard } from "./PackageCard"
+
+interface PackageSearchResultsProps {
+  isLoading: boolean
+  error: unknown
+  filteredPackages: Package[] | undefined
+  apiBaseUrl: string
+  emptyStateMessage: string
+}
+
+const PackageGrid = ({
+  packages,
+  baseUrl,
+}: { packages: Package[]; baseUrl: string }) => (
+  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+    {packages.map((pkg) => (
+      <PackageCard
+        key={pkg.package_id}
+        pkg={pkg}
+        baseUrl={baseUrl}
+        showOwner={true}
+      />
+    ))}
+  </div>
+)
+
+const LoadingState = () => (
+  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+    {[...Array(6)].map((_, i) => (
+      <PackageCardSkeleton key={i} />
+    ))}
+  </div>
+)
+
+const ErrorState = () => (
+  <div className="bg-red-50 border border-red-200 text-red-700 p-6 rounded-xl shadow-sm max-w-2xl mx-auto">
+    <div className="flex items-start">
+      <div className="mr-4 bg-red-100 p-2 rounded-full">
+        <Search className="w-6 h-6 text-red-600" />
+      </div>
+      <div>
+        <h3 className="text-lg font-semibold mb-2">Error Loading packages</h3>
+        <p className="text-red-600">
+          We couldn't load the trending packages. Please try again later.
+        </p>
+      </div>
+    </div>
+  </div>
+)
+
+const EmptyState = ({
+  message,
+}: {
+  message?: string
+}) => (
+  <div className="text-center py-12 px-4">
+    <div className="bg-slate-50 inline-flex rounded-full p-4 mb-4">
+      <Search className="w-8 h-8 text-slate-400" />
+    </div>
+    <h3 className="text-xl font-medium text-slate-900 mb-2">
+      No Matching Packages
+    </h3>
+    {message && (
+      <p className="text-slate-500 max-w-md mx-auto mb-6">{message}</p>
+    )}
+  </div>
+)
+
+const PackageSearchResults: React.FC<PackageSearchResultsProps> = ({
+  isLoading,
+  error,
+  filteredPackages,
+  apiBaseUrl,
+  emptyStateMessage,
+}) => {
+  if (isLoading) return <LoadingState />
+  if (error) return <ErrorState />
+  if (!filteredPackages?.length)
+    return <EmptyState message={emptyStateMessage} />
+  return <PackageGrid packages={filteredPackages} baseUrl={apiBaseUrl} />
+}
+
+export default PackageSearchResults

package/src/components/PackagesList.tsx

@@ -3,7 +3,7 @@ import { ChevronDown, ChevronUp, Star } from "lucide-react"
 import { Link } from "wouter"
 import { Package } from "fake-snippets-api/lib/db/schema"
 
-interface PackageListProps {
+interface PackagesListProps {
   title: string
   packages?: Package[]
   showAll?: boolean
@@ -11,13 +11,13 @@ interface PackageListProps {
   maxItems?: number
 }
 
-export const PackageList = ({
+export const PackagesList = ({
   title,
   packages = [],
   showAll = false,
   onToggleShowAll,
   maxItems = 5,
-}: PackageListProps) => {
+}: PackagesListProps) => {
   const displayedPackages = showAll ? packages : packages.slice(0, maxItems)
 
   return (

package/src/components/PageSearchComponent.tsx

@@ -5,9 +5,9 @@ import React, { useState } from "react"
 import { useQuery } from "react-query"
 import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
 import { Search } from "lucide-react"
-import { SnippetCard } from "./SnippetCard"
 import { Button } from "./ui/button"
 import { PackageCardSkeleton } from "./PackageCardSkeleton"
+import { PackageCard } from "./PackageCard"
 
 interface PageSearchComponentProps {
   onResultsFetched?: (results: any[]) => void
@@ -28,16 +28,16 @@ const PageSearchComponent: React.FC<PageSearchComponentProps> = ({
   )
 
   const { data: searchResults, isLoading: isLoadingSearchResults } = useQuery(
-    ["snippetSearch", searchQuery],
+    ["packageSearch", searchQuery],
     async () => {
       if (!searchQuery) return []
-      const { data } = await axios.get("/snippets/search", {
+      const { data } = await axios.get("/packages/search", {
         params: { q: searchQuery },
       })
       if (onResultsFetched) {
-        onResultsFetched(data.snippets)
+        onResultsFetched(data.packages)
       }
-      return data.snippets
+      return data.packages
     },
     { enabled: Boolean(searchQuery) },
   )
@@ -94,10 +94,10 @@ const PageSearchComponent: React.FC<PageSearchComponentProps> = ({
         </div>
       ) : searchResults && searchResults.length > 0 ? (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-          {searchResults.map((snippet: any) => (
-            <SnippetCard
-              key={snippet.snippet_id}
-              snippet={snippet}
+          {searchResults.map((pkg: any) => (
+            <PackageCard
+              key={pkg.package_id}
+              pkg={pkg}
               baseUrl={snippetsBaseApiUrl}
               showOwner={true}
               withLink={true}

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

@@ -1,43 +1,20 @@
+import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
 import { useEffect, useMemo } from "react"
 import { useQuery } from "react-query"
-import { createHighlighter, Highlighter } from "shiki"
-
-let globalHighlighter$: any
-let globalHighlighter: Highlighter
-
-const fileExtensionsToLanguages = {
-  ts: "typescript",
-  tsx: "typescript",
-  js: "javascript",
-  jsx: "javascript",
-}
 
 export const ShikiCodeViewer = ({
   code,
   filePath,
 }: { code: string; filePath: string }) => {
-  useEffect(() => {
-    async function setupHighlighter() {
-      if (globalHighlighter$) return
-      globalHighlighter$ = await createHighlighter({
-        langs: ["typescript"],
-        themes: ["vitesse-light"],
-      })
-      globalHighlighter = await globalHighlighter$
-    }
-    setupHighlighter()
-  }, [])
+  const { highlighter } = useShikiHighlighter()
 
   const html = useMemo(
     () =>
-      globalHighlighter?.codeToHtml(code, {
-        lang:
-          fileExtensionsToLanguages[
-            filePath.split(".").pop() as keyof typeof fileExtensionsToLanguages
-          ] || "typescript",
+      highlighter?.codeToHtml(code, {
+        lang: "tsx",
         theme: "vitesse-light",
       }),
-    [filePath, code, globalHighlighter],
+    [filePath, code, highlighter],
   )
 
   if (!html) {

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

@@ -65,7 +65,7 @@ export default function ImportantFilesView({
       setActiveFilePath(importantFiles[0].file_path)
       setActiveTab("file")
     }
-  }, [aiDescription, aiUsageInstructions, hasAiContent])
+  }, [aiDescription, aiUsageInstructions, hasAiContent, importantFiles])
 
   // Get file name from path
   const getFileName = (path: string) => {

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

@@ -87,14 +87,14 @@ export default function MainContentHeader({
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-72">
-            <DropdownMenuItem
-              onClick={() => {
-                setLocation(`/editor?package_id=${packageInfo?.package_id}`)
-              }}
-              className="cursor-pointer p-2 py-4"
-            >
-              <Pencil className="h-4 w-4 mx-3" />
-              Edit Online
+            <DropdownMenuItem asChild>
+              <a
+                href={`/editor?package_id=${packageInfo?.package_id}`}
+                className="cursor-pointer p-2 py-4"
+              >
+                <Pencil className="h-4 w-4 mx-3" />
+                Edit Online
+              </a>
             </DropdownMenuItem>
             <DropdownMenuSeparator />
 

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

@@ -6,21 +6,20 @@ 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 { useState, useEffect, useMemo } from "react"
+import React, { useState, useEffect, useMemo, useCallback } from "react"
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 import { usePackageFile } from "@/hooks/use-package-files"
 import { getLicenseFromLicenseContent } from "@/lib/getLicenseFromLicenseContent"
-import { PackageInfo } from "@/lib/types"
 
 interface MobileSidebarProps {
   isLoading?: boolean
   onViewChange: (view: "schematic" | "pcb" | "3d") => void
 }
 
-export default function MobileSidebar({
+const MobileSidebar = ({
   isLoading = false,
   onViewChange,
-}: MobileSidebarProps) {
+}: MobileSidebarProps) => {
   const { packageInfo, refetch: refetchPackageInfo } = useCurrentPackageInfo()
   const { data: licenseFileMeta } = usePackageFile({
     package_release_id: packageInfo?.latest_package_release_id ?? "",
@@ -34,8 +33,11 @@ export default function MobileSidebar({
       return getLicenseFromLicenseContent(licenseFileMeta?.content_text)
     }
     return undefined
-  }, [licenseFileMeta?.content_text])
-  const topics = packageInfo?.is_package ? ["Package"] : ["Board"]
+  }, [licenseFileMeta?.content_text, packageInfo?.latest_license])
+  const topics = useMemo(
+    () => (packageInfo?.is_package ? ["Package"] : ["Board"]),
+    [packageInfo?.is_package],
+  )
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
   const isOwner =
     isLoggedIn &&
@@ -59,20 +61,26 @@ export default function MobileSidebar({
     }
   }, [packageInfo])
 
-  const handlePackageUpdate = (newDescription: string, newWebsite: string) => {
-    setLocalDescription(newDescription)
-    setLocalWebsite(newWebsite)
-    refetchPackageInfo()
-  }
+  const handlePackageUpdate = useCallback(
+    (newDescription: string, newWebsite: string) => {
+      setLocalDescription(newDescription)
+      setLocalWebsite(newWebsite)
+      refetchPackageInfo()
+    },
+    [refetchPackageInfo],
+  )
 
   const { availableViews } = usePreviewImages({
     packageName: packageInfo?.name,
     fsMapHash: packageInfo?.latest_package_release_id ?? "",
   })
 
-  const handleViewClick = (viewId: string) => {
-    onViewChange?.(viewId as "3d" | "pcb" | "schematic")
-  }
+  const handleViewClick = useCallback(
+    (viewId: string) => {
+      onViewChange?.(viewId as "3d" | "pcb" | "schematic")
+    },
+    [onViewChange],
+  )
 
   if (isLoading) {
     return (
@@ -209,6 +217,8 @@ export default function MobileSidebar({
   )
 }
 
+export default React.memo(MobileSidebar)
+
 function PreviewButton({
   view,
   onClick,

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

@@ -21,6 +21,7 @@ import {
 import { useOrderDialog } from "@tscircuit/runframe"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { Package as PackageType } from "fake-snippets-api/lib/db/schema"
+import { useSignIn } from "@/hooks/use-sign-in"
 
 interface PackageHeaderProps {
   packageInfo?: PackageType
@@ -40,7 +41,12 @@ export default function PackageHeader({
     packageInfo?.owner_github_username ===
     useGlobalStore((s) => s.session?.github_username)
   const isLoggedIn = useGlobalStore((s) => s.session != null)
-  const { OrderDialog, isOpen, open, close, stage, setStage } = useOrderDialog()
+  const signIn = useSignIn()
+  const { OrderDialog, isOpen, open, close, stage, setStage } = useOrderDialog({
+    onSignIn: signIn,
+    isLoggedIn,
+    packageReleaseId: packageInfo?.latest_package_release_id ?? "",
+  })
   const { data: starData, isLoading: isStarDataLoading } =
     usePackageStarsByName(packageInfo?.name ?? null)
   const { addStar, removeStar } = usePackageStarMutationByName(
@@ -254,7 +260,6 @@ export default function PackageHeader({
         onClose={close}
         stage={stage}
         setStage={setStage}
-        packageReleaseId={packageInfo?.latest_package_release_id ?? ""}
       />
     </header>
   )

package/src/components/dialogs/confirm-delete-package-dialog.tsx

@@ -2,24 +2,32 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
 import { Button } from "../ui/button"
 import { createUseDialog } from "./create-use-dialog"
 import { useDeletePackage } from "@/hooks/use-delete-package"
+import { useQueryClient } from "react-query"
 
 export const ConfirmDeletePackageDialog = ({
   open,
   onOpenChange,
   packageId,
   packageName,
+  packageOwner,
   refetchUserPackages,
 }: {
   open: boolean
   onOpenChange: (open: boolean) => void
   packageId: string
   packageName: string
+  packageOwner: string
   refetchUserPackages?: () => void
 }) => {
+  const queryClient = useQueryClient()
+
   const { mutate: deletePackage, isLoading } = useDeletePackage({
     onSuccess: () => {
       onOpenChange(false)
       refetchUserPackages?.()
+      queryClient.invalidateQueries({
+        queryKey: ["userPackages", packageOwner],
+      })
     },
   })