@tscircuit/fake-snippets 0.0.6 → 0.0.8

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