@tscircuit/fake-snippets 0.0.6 → 0.0.7

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>
   )