@tscircuit/fake-snippets 0.0.5 → 0.0.7

package/src/components/Header.tsx

@@ -75,16 +75,15 @@ export default function Header() {
                   <HeaderButton href="/dashboard">Dashboard</HeaderButton>
                 </li>
               )}
-              <li>
-                <HeaderButton href="/newest">Newest</HeaderButton>
-              </li>
               <li>
                 <HeaderButton href="/quickstart" alsoHighlightForUrl="/editor">
                   Editor
                 </HeaderButton>
               </li>
               <li>
-                <HeaderButton href="/ai">AI</HeaderButton>
+                <a href="https://chat.tscircuit.com">
+                  <Button variant="ghost">AI</Button>
+                </a>
               </li>
               <li>
                 <a href="https://docs.tscircuit.com">
@@ -144,11 +143,6 @@ export default function Header() {
                   </HeaderButton>
                 </li>
               )}
-              <li>
-                <HeaderButton className="w-full justify-start" href="/newest">
-                  Newest
-                </HeaderButton>
-              </li>
               <li>
                 <HeaderButton
                   className="w-full justify-start"
@@ -159,7 +153,10 @@ export default function Header() {
                 </HeaderButton>
               </li>
               <li>
-                <HeaderButton className="w-full justify-start" href="/ai">
+                <HeaderButton
+                  className="w-full justify-start"
+                  href="https://chat.tscircuit.com"
+                >
                   AI
                 </HeaderButton>
               </li>

package/src/components/HeaderLogin.tsx

@@ -41,7 +41,7 @@ export const HeaderLogin: React.FC<HeaderLoginProps> = () => {
       }
     }
     return (
-      <div className="flex items-center space-x-2 justify-end">
+      <div className="flex items-center md:space-x-2 justify-end">
         <Button onClick={() => signIn()} variant="ghost">
           Log in
         </Button>

package/src/components/PreviewContent.tsx

@@ -320,7 +320,10 @@ export const PreviewContent = ({
             >
               <ErrorBoundary FallbackComponent={ErrorFallback}>
                 {circuitJson ? (
-                  <CadViewer soup={circuitJson as any} ref={threeJsObjectRef} />
+                  <CadViewer
+                    circuitJson={circuitJson as any}
+                    ref={threeJsObjectRef}
+                  />
                 ) : (
                   <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
                 )}

package/src/components/SnippetList.tsx

@@ -0,0 +1,71 @@
+import { Button } from "@/components/ui/button"
+import { ChevronDown, ChevronUp, Star } from "lucide-react"
+import { Link } from "wouter"
+import { Snippet } from "fake-snippets-api/lib/db/schema"
+
+interface SnippetListProps {
+  title: string
+  snippets?: Snippet[]
+  showAll?: boolean
+  onToggleShowAll?: () => void
+  maxItems?: number
+}
+
+export const SnippetList = ({
+  title,
+  snippets = [],
+  showAll = false,
+  onToggleShowAll,
+  maxItems = 5,
+}: SnippetListProps) => {
+  const displayedSnippets = showAll ? snippets : snippets.slice(0, maxItems)
+
+  return (
+    <div>
+      <div className="flex items-center justify-between">
+        <h2 className="text-sm font-bold text-gray-700">{title}</h2>
+        {snippets.length > maxItems && onToggleShowAll && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onToggleShowAll}
+            className="text-blue-600 hover:text-blue-700 hover:bg-transparent"
+          >
+            {showAll ? (
+              <>
+                Show less <ChevronUp className="w-3 h-3 ml-1" />
+              </>
+            ) : (
+              <>
+                Show more <ChevronDown className="w-3 h-3 ml-1" />
+              </>
+            )}
+          </Button>
+        )}
+      </div>
+      <div className="border-b border-gray-200" />
+      {snippets && (
+        <ul className="space-y-1 mt-2">
+          {displayedSnippets.map((snippet) => (
+            <li key={snippet.snippet_id}>
+              <div className="flex items-center">
+                <Link
+                  href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
+                  className="text-blue-600 hover:underline text-sm"
+                >
+                  {snippet.owner_name}/{snippet.unscoped_name}
+                </Link>
+                {snippet.star_count > 0 && (
+                  <span className="ml-2 text-gray-500 text-xs flex items-center">
+                    <Star className="w-3 h-3 mr-1" />
+                    {snippet.star_count}
+                  </span>
+                )}
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/lib/templates/blinking-led-board-template.ts

@@ -3,11 +3,12 @@ export const blinkingLedBoardTemplate = {
   code: `
 import { useUsbC } from "@tsci/seveibar.smd-usb-c"
 import { useRedLed } from "@tsci/seveibar.red-led"
-import { A555Timer } from "@tsci/seveibar.a555timer"
+import { useNE555P } from "@tsci/seveibar.a555timer"
 
 export const MyBlinkingLedCircuit = () => {
   const USBC = useUsbC("USBC")
   const Led = useRedLed("LED")
+  const A555Timer = useNE555P("B1")
 
   return (
     <board width="30mm" height="30mm" schAutoLayoutEnabled>

package/src/pages/dashboard.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import Header from "@/components/Header"
@@ -6,15 +6,18 @@ import Footer from "@/components/Footer"
 import { Snippet } from "fake-snippets-api/lib/db/schema"
 import { Link } from "wouter"
 import { CreateNewSnippetWithAiHero } from "@/components/CreateNewSnippetWithAiHero"
-import { Edit2, Star } from "lucide-react"
+import { Edit2, Star, ChevronDown, ChevronUp } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { SnippetList } from "@/components/SnippetList"
 
 export const DashboardPage = () => {
   const axios = useAxios()
 
   const currentUser = useGlobalStore((s) => s.session?.github_username)
+  const [showAllTrending, setShowAllTrending] = useState(false)
+  const [showAllNewest, setShowAllNewest] = useState(false)
 
   const {
     data: mySnippets,
@@ -114,48 +117,20 @@ export const DashboardPage = () => {
             )}
           </div>
           <div className="md:w-1/4">
-            <h2 className="text-sm font-bold mb-2 text-gray-700 border-b border-gray-200">
-              Trending Snippets
-            </h2>
-            {trendingSnippets && (
-              <ul className="space-y-1">
-                {trendingSnippets.map((snippet) => (
-                  <li key={snippet.snippet_id}>
-                    <div className="flex items-center">
-                      <Link
-                        href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
-                        className="text-blue-600 hover:underline text-sm"
-                      >
-                        {snippet.owner_name}/{snippet.unscoped_name}
-                      </Link>
-                      {snippet.star_count > 0 && (
-                        <span className="ml-2 text-gray-500 text-xs flex items-center">
-                          <Star className="w-3 h-3 mr-1" />
-                          {snippet.star_count}
-                        </span>
-                      )}
-                    </div>
-                  </li>
-                ))}
-              </ul>
-            )}
-            <h2 className="text-sm font-bold mt-8 mb-2 text-gray-700 border-b border-gray-200">
-              Newest Snippets
-            </h2>
-            {newestSnippets && (
-              <ul className="space-y-1">
-                {newestSnippets.map((snippet) => (
-                  <li key={snippet.snippet_id}>
-                    <Link
-                      href={`/${snippet.name}`}
-                      className="text-blue-600 hover:underline text-sm"
-                    >
-                      {snippet.name}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            )}
+            <SnippetList
+              title="Trending Snippets"
+              snippets={trendingSnippets}
+              showAll={showAllTrending}
+              onToggleShowAll={() => setShowAllTrending(!showAllTrending)}
+            />
+            <div className="mt-8">
+              <SnippetList
+                title="Newest Snippets"
+                snippets={newestSnippets}
+                showAll={showAllNewest}
+                onToggleShowAll={() => setShowAllNewest(!showAllNewest)}
+              />
+            </div>
           </div>
         </div>
       </div>

package/src/pages/editor.tsx

@@ -9,7 +9,7 @@ export const EditorPage = () => {
   const { data: snippet, isLoading, error } = useSnippet(snippetId)
 
   return (
-    <div>
+    <div className="overflow-x-hidden">
       <Header />
       {!error && <CodeAndPreview snippet={snippet} />}
       {error && error.status === 404 && (

package/src/pages/landing.tsx

@@ -50,8 +50,8 @@ export function LandingPage() {
                     <Badge variant="secondary" className="w-fit">
                       Open-Source, MIT Licensed
                     </Badge>
-                    <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none">
-                      The New Foundation for Electronic Design
+                    <h1 className="text-3xl font-bold tracking-tight sm:text-5xl xl:text-6xl/none">
+                      AI codes electronics with tscircuit
                     </h1>
                     <p className="max-w-[600px] text-muted-foreground md:text-xl">
                       Build electronics with code, AI, and drag'n'drop tools.
@@ -60,20 +60,12 @@ export function LandingPage() {
                       and more.
                     </p>
                   </div>
-                  <div className="flex flex-col items-center gap-2 min-[400px]:flex-row">
-                    <Button
-                      onClick={() => {
-                        if (!isLoggedIn) {
-                          signIn()
-                        } else {
-                          navigate("/dashboard")
-                        }
-                      }}
-                      size="lg"
-                      aria-label="Get started with TSCircuit"
-                    >
-                      Get Started
-                    </Button>
+                  <div className="flex flex-col items-center gap-2 min-[500px]:flex-row">
+                    <a href="https://docs.tscircuit.com">
+                      <Button size="lg" aria-label="Get started with TSCircuit">
+                        Get Started
+                      </Button>
+                    </a>
                     <PrefetchPageLink href="/quickstart">
                       <Button
                         size="lg"

package/src/pages/quickstart.tsx

@@ -65,13 +65,13 @@ export const QuickstartPage = () => {
                     key={snippet.snippet_id}
                     href={`/editor?snippet_id=${snippet.snippet_id}`}
                   >
-                    <Card className="hover:shadow-md transition-shadow rounded-md">
+                    <Card className="hover:shadow-md transition-shadow rounded-md flex flex-col h-full">
                       <CardHeader className="pb-0 p-4">
                         <CardTitle className="text-md">
                           {snippet.unscoped_name}
                         </CardTitle>
                       </CardHeader>
-                      <CardContent className="p-4 pt-0">
+                      <CardContent className="p-4 pt-0 mt-auto">
                         <p className="text-sm text-gray-500">
                           Last edited:{" "}
                           {new Date(snippet.updated_at).toLocaleDateString()}
@@ -118,7 +118,7 @@ export const QuickstartPage = () => {
 
         <div className="mt-12">
           <h2 className="text-xl font-semibold mb-4">Import as Snippet</h2>
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
             {[
               { name: "KiCad Footprint", type: "footprint" },
               { name: "KiCad Project", type: "board" },
@@ -126,7 +126,7 @@ export const QuickstartPage = () => {
             ].map((template, index) => (
               <Card
                 key={index}
-                className="hover:shadow-md transition-shadow rounded-md opacity-50"
+                className="hover:shadow-md transition-shadow rounded-md opacity-50 flex flex-col"
               >
                 <CardHeader className="p-4 pb-0">
                   <CardTitle className="text-lg flex items-center justify-between">
@@ -134,7 +134,7 @@ export const QuickstartPage = () => {
                     <TypeBadge type={template.type as any} className="ml-2" />
                   </CardTitle>
                 </CardHeader>
-                <CardContent className="p-4">
+                <CardContent className="p-4 mt-auto">
                   <Button
                     className="w-full"
                     onClick={() => {
@@ -146,14 +146,14 @@ export const QuickstartPage = () => {
                 </CardContent>
               </Card>
             ))}
-            <Card className="hover:shadow-md transition-shadow rounded-md">
+            <Card className="hover:shadow-md transition-shadow rounded-md flex flex-col">
               <CardHeader className="p-4 pb-0">
                 <CardTitle className="text-lg flex items-center justify-between">
                   JLCPCB Component
                   <TypeBadge type="package" className="ml-2" />
                 </CardTitle>
               </CardHeader>
-              <CardContent className="p-4">
+              <CardContent className="p-4 mt-auto">
                 <Button
                   className="w-full"
                   onClick={() => setIsJLCPCBDialogOpen(true)}
@@ -162,14 +162,14 @@ export const QuickstartPage = () => {
                 </Button>
               </CardContent>
             </Card>
-            <Card className="hover:shadow-md transition-shadow rounded-md">
+            <Card className="hover:shadow-md transition-shadow rounded-md flex flex-col">
               <CardHeader className="p-4 pb-0">
                 <CardTitle className="text-lg flex items-center justify-between">
                   Circuit Json
                   <TypeBadge type="module" className="ml-2" />
                 </CardTitle>
               </CardHeader>
-              <CardContent className="p-4">
+              <CardContent className="p-4 mt-auto">
                 <Button
                   className="w-full"
                   onClick={() => setIsCircuitJsonImportDialogOpen(true)}

package/src/pages/user-profile.tsx

@@ -10,6 +10,14 @@ import { Button } from "@/components/ui/button"
 import { GitHubLogoIcon, StarIcon } from "@radix-ui/react-icons"
 import { Input } from "@/components/ui/input"
 import { useGlobalStore } from "@/hooks/use-global-store"
+import { MoreVertical, Trash2 } from "lucide-react"
+import { useConfirmDeleteSnippetDialog } from "@/components/dialogs/confirm-delete-snippet-dialog"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
@@ -17,6 +25,9 @@ export const UserProfilePage = () => {
   const [searchQuery, setSearchQuery] = useState("")
   const session = useGlobalStore((s) => s.session)
   const isCurrentUserProfile = username === session?.github_username
+  const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
+    useConfirmDeleteSnippetDialog()
+  const [snippetToDelete, setSnippetToDelete] = useState<Snippet | null>(null)
 
   const { data: userSnippets, isLoading } = useQuery<Snippet[]>(
     ["userSnippets", username],
@@ -32,6 +43,12 @@ export const UserProfilePage = () => {
       snippet.unscoped_name.toLowerCase().includes(searchQuery.toLowerCase()),
   )
 
+  const handleDeleteClick = (e: React.MouseEvent, snippet: Snippet) => {
+    e.preventDefault() // Prevent navigation
+    setSnippetToDelete(snippet)
+    openDeleteDialog()
+  }
+
   return (
     <div>
       <Header />
@@ -76,9 +93,33 @@ export const UserProfilePage = () => {
                       <h3 className="text-md font-semibold">
                         {snippet.unscoped_name}
                       </h3>
-                      <div className="flex items-center text-gray-600">
-                        <StarIcon className="w-4 h-4 mr-1" />
-                        <span>{snippet.star_count || 0}</span>
+                      <div className="flex items-center gap-2">
+                        <div className="flex items-center text-gray-600">
+                          <StarIcon className="w-4 h-4 mr-1" />
+                          <span>{snippet.star_count || 0}</span>
+                        </div>
+                        {isCurrentUserProfile && (
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-8 w-8"
+                              >
+                                <MoreVertical className="h-4 w-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent>
+                              <DropdownMenuItem
+                                className="text-xs text-red-600"
+                                onClick={(e) => handleDeleteClick(e, snippet)}
+                              >
+                                <Trash2 className="mr-2 h-3 w-3" />
+                                Delete Snippet
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        )}
                       </div>
                     </div>
                     <p className="text-sm text-gray-500">
@@ -91,6 +132,12 @@ export const UserProfilePage = () => {
           </div>
         )}
       </div>
+      {snippetToDelete && (
+        <DeleteDialog
+          snippetId={snippetToDelete.snippet_id}
+          snippetName={snippetToDelete.unscoped_name}
+        />
+      )}
       <Footer />
     </div>
   )