@tscircuit/fake-snippets 0.0.95 → 0.0.97

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

@@ -1,4 +1,10 @@
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "../ui/dialog"
 import { Button } from "../ui/button"
 import { createUseDialog } from "./create-use-dialog"
 import { useDeletePackage } from "@/hooks/use-delete-package"
@@ -33,13 +39,20 @@ export const ConfirmDeletePackageDialog = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-[90vw]">
+      <DialogContent className="w-[90vw] p-6 rounded-2xl shadow-lg">
         <DialogHeader>
-          <DialogTitle>Confirm Delete Package</DialogTitle>
+          <DialogTitle className="text-left">
+            Confirm Delete Package
+          </DialogTitle>
+          <DialogDescription className="text-left">
+            Are you sure you want to delete the package{" "}
+            <span className="font-bold">{packageName}</span>?
+          </DialogDescription>
         </DialogHeader>
-        <p>Are you sure you want to delete the package "{packageName}"?</p>
-        <p>This action cannot be undone.</p>
-        <div className="flex justify-end space-x-2 mt-4">
+        <p className="text-red-600 font-medium">
+          This action cannot be undone.
+        </p>
+        <div className="flex justify-end gap-4 mt-6">
           <Button variant="outline" onClick={() => onOpenChange(false)}>
             Cancel
           </Button>

package/src/hooks/use-account-balance.ts

@@ -17,8 +17,9 @@ export const useAccountBalance = () => {
       return data.account_balance
     },
     {
-      refetchInterval: 60000, // Refetch every minute
+      // refetchInterval: 60000, // Refetch every minute
       enabled: isLoggedIn,
+      refetchOnWindowFocus: false,
     },
   )
 }

package/src/hooks/use-rebuild-package-release-mutation.ts

@@ -30,8 +30,8 @@ export const useRebuildPackageReleaseMutation = ({
         toast({
           title: "Error",
           description:
-            error?.response?.data?.message ||
-            error?.data?.message ||
+            error?.response?.data?.error?.message ||
+            error?.data?.error?.message ||
             "Failed to rebuild package.",
           variant: "destructive",
         })

package/src/pages/datasheet.tsx

@@ -3,6 +3,7 @@ import { useDatasheet } from "@/hooks/use-datasheet"
 import { useCreateDatasheet } from "@/hooks/use-create-datasheet"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
+import ExpandableText from "@/components/ExpandableText"
 import type { Datasheet } from "fake-snippets-api/lib/db/schema"
 
 export const DatasheetPage = () => {
@@ -20,10 +21,38 @@ export const DatasheetPage = () => {
       <Header />
       <main className="container mx-auto flex-1 px-4 py-8">
         <h1 className="text-3xl font-bold mb-6">{chipName} Datasheet</h1>
+        <p className="mb-4">
+          <a
+            href={`https://api.tscircuit.com/datasheets/get?chip_name=${encodeURIComponent(chipName)}`}
+            className="text-blue-600 underline"
+          >
+            Download JSON
+          </a>
+        </p>
         {datasheetQuery.isLoading ? (
           <p>Loading...</p>
         ) : datasheetQuery.data ? (
           <div>
+            {!datasheetQuery.data.pin_information &&
+              !datasheetQuery.data.datasheet_pdf_urls && (
+                <p>Datasheet is processing. Please check back later.</p>
+              )}
+
+            <h2 className="text-xl font-semibold mb-2">PDFs</h2>
+            {datasheetQuery.data.datasheet_pdf_urls ? (
+              <ul className="list-disc pl-5 mb-6">
+                {datasheetQuery.data.datasheet_pdf_urls.map((url) => (
+                  <li key={url}>
+                    <a href={url} className="text-blue-600 underline">
+                      {url}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p>No datasheet PDFs available.</p>
+            )}
+
             <h2 className="text-xl font-semibold mb-2">Pin Information</h2>
             {datasheetQuery.data.pin_information ? (
               <table className="table-auto border-collapse mb-6">
@@ -32,6 +61,7 @@ export const DatasheetPage = () => {
                     <th className="border px-2 py-1">Pin</th>
                     <th className="border px-2 py-1">Name</th>
                     <th className="border px-2 py-1">Description</th>
+                    <th className="border px-2 py-1">Capabilities</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -40,6 +70,12 @@ export const DatasheetPage = () => {
                       <td className="border px-2 py-1">{pin.pin_number}</td>
                       <td className="border px-2 py-1">{pin.name}</td>
                       <td className="border px-2 py-1">{pin.description}</td>
+                      <td className="border px-2 py-1">
+                        <ExpandableText
+                          text={pin.capabilities.join(", ")}
+                          maxChars={30}
+                        />
+                      </td>
                     </tr>
                   ))}
                 </tbody>
@@ -47,21 +83,6 @@ export const DatasheetPage = () => {
             ) : (
               <p>No pin information available.</p>
             )}
-
-            <h2 className="text-xl font-semibold mb-2">PDFs</h2>
-            {datasheetQuery.data.datasheet_pdf_urls ? (
-              <ul className="list-disc pl-5">
-                {datasheetQuery.data.datasheet_pdf_urls.map((url) => (
-                  <li key={url}>
-                    <a href={url} className="text-blue-600 underline">
-                      {url}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              <p>No datasheet PDFs available.</p>
-            )}
           </div>
         ) : datasheetQuery.error &&
           (datasheetQuery.error as any).status === 404 ? (

package/src/pages/datasheets.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from "react"
 import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
+import { useCreateDatasheet } from "@/hooks/use-create-datasheet"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import { Input } from "@/components/ui/input"
 import { Search } from "lucide-react"
-import { Link } from "wouter"
+import { Link, useLocation } from "wouter"
 
 interface DatasheetSummary {
   datasheet_id: string
@@ -14,6 +15,10 @@ interface DatasheetSummary {
 
 export const DatasheetsPage: React.FC = () => {
   const axios = useAxios()
+  const [, navigate] = useLocation()
+  const createDatasheet = useCreateDatasheet({
+    onSuccess: (datasheet) => navigate(`/datasheets/${datasheet.chip_name}`),
+  })
   const [searchQuery, setSearchQuery] = useState("")
 
   const {
@@ -29,9 +34,7 @@ export const DatasheetsPage: React.FC = () => {
       } else {
         params.append("is_popular", "true")
       }
-      const { data } = await axios.get(
-        `/api/datasheets/list?${params.toString()}`,
-      )
+      const { data } = await axios.get(`/datasheets/list?${params.toString()}`)
       return data.datasheets as DatasheetSummary[]
     },
     { keepPreviousData: true },
@@ -40,36 +43,101 @@ export const DatasheetsPage: React.FC = () => {
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="container mx-auto flex-1 px-4 py-8">
-        <h1 className="text-3xl font-bold mb-6">Datasheets</h1>
-        <div className="max-w-md mb-6">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 h-4 w-4" />
-            <Input
-              type="search"
-              placeholder="Search datasheets..."
-              className="pl-10"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              aria-label="Search datasheets"
-              role="searchbox"
-            />
+      <main className="flex-grow container mx-auto px-4 py-8">
+        <div className="mb-8 max-w-3xl">
+          <div className="flex items-center gap-2 mb-3">
+            <h1 className="text-4xl font-bold text-gray-900">Datasheets</h1>
           </div>
+          <p className="text-lg text-gray-600 mb-4">
+            Explore datasheets for popular electronic components and chips.
+            Search to find specific ones.
+          </p>
         </div>
+
+        <div className="mb-6">
+          <div className="flex flex-col sm:flex-row gap-4 mb-4">
+            <div className="relative flex-grow">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+              <Input
+                type="search"
+                placeholder="Search datasheets..."
+                className="pl-10"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                aria-label="Search datasheets"
+                role="searchbox"
+              />
+            </div>
+          </div>
+        </div>
+
         {isLoading ? (
-          <p>Loading...</p>
+          <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">
+              Loading Datasheets
+            </h3>
+            <p className="text-slate-500 max-w-md mx-auto mb-6">
+              Please wait while we fetch the datasheets...
+            </p>
+          </div>
         ) : error ? (
-          <p>Error loading datasheets.</p>
+          <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 Datasheets
+                </h3>
+                <p className="text-red-600">
+                  We couldn't load the datasheets. Please try again later.
+                </p>
+              </div>
+            </div>
+          </div>
         ) : datasheets && datasheets.length > 0 ? (
-          <ul className="list-disc pl-5 space-y-2">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             {datasheets.map((ds) => (
-              <li key={ds.datasheet_id}>
-                <Link href={`/datasheets/${ds.chip_name}`}>{ds.chip_name}</Link>
-              </li>
+              <Link
+                key={ds.datasheet_id}
+                href={`/datasheets/${ds.chip_name}`}
+                className="block p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow"
+              >
+                <h3 className="font-semibold text-gray-900">{ds.chip_name}</h3>
+              </Link>
             ))}
-          </ul>
+          </div>
         ) : (
-          <p>No datasheets found.</p>
+          <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 Datasheets
+            </h3>
+            <p className="text-slate-500 max-w-md mx-auto mb-6">
+              {searchQuery
+                ? `No datasheets match your search for "${searchQuery}".`
+                : "There are no popular datasheets at the moment."}
+            </p>
+            {searchQuery && (
+              <button
+                className="mt-2 px-4 py-2 bg-blue-500 text-white rounded"
+                onClick={() =>
+                  createDatasheet.mutate({ chip_name: searchQuery })
+                }
+                disabled={createDatasheet.isLoading}
+              >
+                {createDatasheet.isLoading
+                  ? "Creating..."
+                  : `Create Datasheet for ${searchQuery}`}
+              </button>
+            )}
+          </div>
         )}
       </main>
       <Footer />