@tscircuit/fake-snippets 0.0.36 → 0.0.38

package/src/components/LatestSnippets.tsx

@@ -11,7 +11,7 @@ export const LatestSnippets: React.FC = () => {
     isLoading,
     error,
   } = useQuery<Snippet[]>("latestSnippets", async () => {
-    const response = await axios.get("/snippets/list_newest")
+    const response = await axios.get("/snippets/list_latest")
     return response.data.snippets
   })
 

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

@@ -61,10 +61,6 @@ export default function PackageHeader({
   const handleForkClick = async () => {
     if (!packageInfo?.package_id) return
     await forkPackage(packageInfo.package_id)
-    toast({
-      title: "Forked package",
-      description: "Package forked successfully",
-    })
   }
 
   const isStarLoading =

package/src/components/ViewPackagePage/components/tab-views/3d-view.tsx

@@ -24,7 +24,7 @@ export default function ThreeDView() {
 
   return (
     <div className="h-[620px]">
-      <CadViewer circuitJson={circuitJson} />
+      <CadViewer clickToInteractEnabled circuitJson={circuitJson} />
     </div>
   )
 }

package/src/components/ViewPackagePage/components/tab-views/bom-view.tsx

@@ -23,7 +23,7 @@ export default function BOMView() {
   }
 
   return (
-    <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-4 mb-4 bg-white dark:bg-[#0d1117] w-full h-[620px]">
+    <div className="border border-gray-200 dark:border-[#30363d] rounded-md p-4 mb-4 bg-white dark:bg-[#0d1117] w-full h-[620px] overflow-y-scroll">
       <BomTable circuitJson={circuitJson} />
     </div>
   )

package/src/components/ViewPackagePage/components/tab-views/files-view.tsx

@@ -5,6 +5,14 @@ import { FileText, Folder } from "lucide-react"
 import { useMemo, useState } from "react"
 import { isHiddenFile } from "../../utils/is-hidden-file"
 import { isWithinDirectory } from "../../utils/is-within-directory"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Settings } from "lucide-react"
+import HiddenFilesDropdown from "@/components/HiddenFilesDropdown"
 
 interface Directory {
   type: "directory"
@@ -41,6 +49,7 @@ export default function FilesView({
   onFileClicked,
 }: FilesViewProps) {
   const [activeDir, setActiveDir] = useState("")
+  const [showHiddenFiles, setShowHiddenFiles] = useState(false)
 
   // Parse package files to determine directories and files structure
   const { directories, files } = useMemo(() => {
@@ -52,7 +61,7 @@ export default function FilesView({
     const filesList: File[] = []
 
     packageFiles
-      .filter((file) => !isHiddenFile(file.file_path))
+      .filter((file) => showHiddenFiles || !isHiddenFile(file.file_path))
       .forEach((file) => {
         // Extract directory path
         const pathParts = file.file_path.split("/")
@@ -64,6 +73,7 @@ export default function FilesView({
           currentPath += (currentPath ? "/" : "") + part
           // Only add directory if it contains visible files
           if (
+            showHiddenFiles ||
             packageFiles.some(
               (f) =>
                 f.file_path.startsWith(currentPath + "/") &&
@@ -100,7 +110,7 @@ export default function FilesView({
       directories: dirsList,
       files: filesList,
     }
-  }, [packageFiles])
+  }, [packageFiles, showHiddenFiles])
   // Format date for display
   const formatDate = (dateString: string) => {
     const date = new Date(dateString)
@@ -155,6 +165,8 @@ export default function FilesView({
     setActiveDir(parentDir)
   }
 
+  const toggleHiddenFiles = () => setShowHiddenFiles((prev) => !prev)
+
   if (isLoading) {
     return (
       <div className="mb-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
@@ -197,6 +209,11 @@ export default function FilesView({
           <span>
             {files.length} files, {directories.length} directories
           </span>
+
+          <HiddenFilesDropdown
+            showHiddenFiles={showHiddenFiles}
+            onToggleHiddenFiles={toggleHiddenFiles}
+          />
         </div>
 
         {/* Mobile view */}
@@ -208,6 +225,10 @@ export default function FilesView({
           </div>
           <div className="flex items-center text-xs text-gray-500 dark:text-[#8b949e]">
             <span>{files.length + directories.length} items</span>
+            <HiddenFilesDropdown
+              showHiddenFiles={showHiddenFiles}
+              onToggleHiddenFiles={toggleHiddenFiles}
+            />
           </div>
         </div>
       </div>

package/src/components/ViewPackagePage/components/tab-views/schematic-view.tsx

@@ -26,6 +26,7 @@ export default function SchematicView() {
   return (
     <div className="h-[620px]">
       <SchematicViewer
+        clickToInteractEnabled
         circuitJson={circuitJson}
         containerStyle={{
           height: 620,

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

@@ -0,0 +1,48 @@
+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"
+
+export const ConfirmDeletePackageDialog = ({
+  open,
+  onOpenChange,
+  packageId,
+  packageName,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  packageId: string
+  packageName: string
+}) => {
+  const { mutate: deletePackage, isLoading } = useDeletePackage({
+    onSuccess: () => onOpenChange(false),
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Confirm Delete Package</DialogTitle>
+        </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">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={() => deletePackage({ package_id: packageId })}
+            disabled={isLoading}
+          >
+            {isLoading ? "Deleting..." : "Delete"}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const useConfirmDeletePackageDialog = createUseDialog(
+  ConfirmDeletePackageDialog,
+)

package/src/hooks/use-delete-package.ts

@@ -0,0 +1,40 @@
+import { useMutation } from "react-query"
+import { useAxios } from "./use-axios"
+import { useToast } from "./use-toast"
+
+export const useDeletePackage = ({
+  onSuccess,
+}: { onSuccess?: () => void } = {}) => {
+  const axios = useAxios()
+  const { toast } = useToast()
+
+  return useMutation(
+    ["deletePackage"],
+    async ({ package_id }: { package_id: string }) => {
+      const response = await axios.post("/packages/delete", {
+        package_id,
+      })
+
+      if (!response.data.ok) {
+        throw new Error("Failed to delete package")
+      }
+
+      return response.data
+    },
+    {
+      onSuccess: () => {
+        toast({
+          title: "Package deleted",
+          description: "Package deleted successfully",
+        })
+        onSuccess?.()
+      },
+      onError: (error: any) => {
+        toast({
+          title: "Error deleting package",
+          description: "Failed to delete package",
+        })
+      },
+    },
+  )
+}

package/src/hooks/use-fork-package-mutation.ts

@@ -1,15 +1,8 @@
-import {
-  Package,
-  PackageFile,
-  PackageRelease,
-} from "fake-snippets-api/lib/db/schema"
+import { Package } from "fake-snippets-api/lib/db/schema"
 import { useMutation } from "react-query"
 import { useAxios } from "./use-axios"
 import { useGlobalStore } from "./use-global-store"
 import { useToast } from "./use-toast"
-import { useCreatePackageMutation } from "./use-create-package-mutation"
-import { useCreatePackageReleaseMutation } from "./use-create-package-release-mutation"
-import { useCreatePackageFilesMutation } from "./use-create-package-files-mutation"
 
 export const useForkPackageMutation = ({
   onSuccess,
@@ -20,73 +13,33 @@ export const useForkPackageMutation = ({
   const session = useGlobalStore((s) => s.session)
   const { toast } = useToast()
 
-  const { mutateAsync: createPackage } = useCreatePackageMutation()
-  const { mutateAsync: createRelease } = useCreatePackageReleaseMutation()
-  const { mutateAsync: createFile } = useCreatePackageFilesMutation()
-
   return useMutation(
     ["forkPackage"],
     async (packageId: string) => {
       if (!session) throw new Error("No session")
 
-      // Step 1: Fetch source package data
-      const { data: packageData } = await axios.get("/packages/get", {
-        params: { package_id: packageId },
-      })
-      const sourcePackage: Package = packageData.package
-      if (!sourcePackage) throw new Error("Source package not found")
-
-      // Step 2: Fetch latest release
-      const { data: releaseData } = await axios.post("/package_releases/get", {
-        package_release_id: sourcePackage.latest_package_release_id,
+      const { data } = await axios.post("/packages/fork", {
+        package_id: packageId,
       })
-      const sourceRelease: PackageRelease = releaseData.package_release
-      if (!sourceRelease) throw new Error("Source release not found")
 
-      // Step 3: Fetch all files for the release
-      const { data: filesData } = await axios.post("/package_files/list", {
-        package_release_id: sourceRelease.package_release_id,
-      })
-      const sourceFiles: PackageFile[] = filesData.package_files
-      if (!sourceFiles?.length) throw new Error("No source files found")
-
-      // Step 4: Create new package
-      const newPackage = await createPackage({
-        name: `${session.github_username}/${sourcePackage.unscoped_name}`,
-        description: `Fork of ${sourcePackage.name}`,
-      })
+      const forkedPackage: Package = data.package
+      if (!forkedPackage) throw new Error("Failed to fork package")
 
-      // Step 5: Create new release
-      const newRelease = await createRelease({
-        package_id: newPackage.package_id,
-        version: sourceRelease.version ?? undefined,
-        is_latest: true,
-      })
-
-      // Step 6: Create all files
-      const newFiles = await Promise.all(
-        sourceFiles.map((file: PackageFile) =>
-          createFile({
-            package_release_id: newRelease.package_release_id,
-            file_path: file.file_path,
-            content_text: file.content_text ?? undefined,
-          }),
-        ),
-      )
-
-      return {
-        package: newPackage,
-        release: newRelease,
-        files: newFiles,
-      }
+      return forkedPackage
     },
     {
       onSuccess: (result) => {
         toast({
           title: "Package Forked",
-          description: `Successfully forked package to @${session?.github_username}/${result.package.unscoped_name}`,
+          description: `Successfully forked package to @${session?.github_username}/${result.unscoped_name}`,
         })
-        onSuccess?.(result.package)
+
+        const url = new URL(window.location.href)
+        url.pathname = `/${session?.github_username}/${result.unscoped_name}`
+        url.search = ""
+        window.location.href = url.toString()
+
+        onSuccess?.(result)
       },
       onError: (error: any) => {
         toast({

package/src/pages/dashboard.tsx

@@ -18,7 +18,7 @@ export const DashboardPage = () => {
 
   const currentUser = useGlobalStore((s) => s.session?.github_username)
   const [showAllTrending, setShowAllTrending] = useState(false)
-  const [showAllNewest, setShowAllNewest] = useState(false)
+  const [showAllLatest, setShowAllLatest] = useState(false)
 
   const {
     data: mySnippets,
@@ -41,10 +41,10 @@ export const DashboardPage = () => {
     },
   )
 
-  const { data: newestSnippets } = useQuery<Snippet[]>(
-    "newestSnippets",
+  const { data: latestSnippets } = useQuery<Snippet[]>(
+    "latestSnippets",
     async () => {
-      const response = await axios.get("/snippets/list_newest")
+      const response = await axios.get("/snippets/list_latest")
       return response.data.snippets
     },
   )
@@ -129,10 +129,10 @@ export const DashboardPage = () => {
             />
             <div className="mt-8">
               <SnippetList
-                title="Newest Snippets"
-                snippets={newestSnippets}
-                showAll={showAllNewest}
-                onToggleShowAll={() => setShowAllNewest(!showAllNewest)}
+                title="Latest Snippets"
+                snippets={latestSnippets}
+                showAll={showAllLatest}
+                onToggleShowAll={() => setShowAllLatest(!showAllLatest)}
               />
             </div>
           </div>

package/src/pages/latest.tsx

@@ -0,0 +1,212 @@
+import React, { useState } from "react"
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import { Snippet } from "fake-snippets-api/lib/db/schema"
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import {
+  Search,
+  Tag,
+  Calendar,
+  Keyboard,
+  Cpu,
+  Layers,
+  LucideBellElectric,
+} from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { SnippetCard } from "@/components/SnippetCard"
+
+const LatestPage: React.FC = () => {
+  const axios = useAxios()
+  const apiBaseUrl = useSnippetsBaseApiUrl()
+  const [searchQuery, setSearchQuery] = useState("")
+  const [category, setCategory] = useState("all")
+
+  const {
+    data: snippets,
+    isLoading,
+    error,
+  } = useQuery<Snippet[]>(
+    ["latestSnippets", category],
+    async () => {
+      const params = category !== "all" ? { tag: category } : {}
+      const response = await axios.get("/snippets/list_latest", { params })
+      return response.data.snippets
+    },
+    {
+      keepPreviousData: true,
+    },
+  )
+
+  const filteredSnippets = snippets?.filter((snippet) => {
+    if (!searchQuery) return true
+
+    const query = searchQuery.toLowerCase().trim()
+
+    const searchableFields = [
+      snippet.unscoped_name.toLowerCase(),
+      snippet.owner_name.toLowerCase(),
+      (snippet.description || "").toLowerCase(),
+    ]
+
+    return searchableFields.some((field) => {
+      const queryWords = query.split(/\s+/).filter((word) => word.length > 0)
+      return queryWords.every((word) => field.includes(word))
+    })
+  })
+
+  return (
+    <div className="min-h-screen flex flex-col bg-gray-50">
+      <Header />
+      <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">
+            <Calendar className="w-6 h-6 text-blue-500" />
+            <h1 className="text-4xl font-bold text-gray-900">
+              Latest Snippets
+            </h1>
+          </div>
+          <p className="text-lg text-gray-600 mb-4">
+            Explore the latest circuit designs from our community. These fresh
+            additions showcase new ideas and innovative approaches to circuit
+            design.
+          </p>
+          <div className="flex flex-wrap gap-3">
+            <Badge variant="secondary" className="px-3 py-1">
+              <Tag className="w-3.5 h-3.5 mr-1" />
+              <span>Latest Uploads</span>
+            </Badge>
+            <Badge variant="secondary" className="px-3 py-1">
+              <Calendar className="w-3.5 h-3.5 mr-1" />
+              <span>Most Recent First</span>
+            </Badge>
+          </div>
+        </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="text"
+                placeholder="Search latest snippets..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+            <Select value={category} onValueChange={setCategory}>
+              <SelectTrigger className="w-full sm:w-[180px]">
+                <SelectValue placeholder="Category" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Categories</SelectItem>
+                <SelectItem value="keyboard">
+                  <div className="flex items-center">
+                    <Keyboard className="mr-2 h-4 w-4" />
+                    <span>Keyboards</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="microcontroller">
+                  <div className="flex items-center">
+                    <Cpu className="mr-2 h-4 w-4" />
+                    <span>Microcontrollers</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="connector">
+                  <div className="flex items-center">
+                    <Layers className="mr-2 h-4 w-4" />
+                    <span>Connectors</span>
+                  </div>
+                </SelectItem>
+                <SelectItem value="sensor">
+                  <div className="flex items-center">
+                    <LucideBellElectric className="mr-2 h-4 w-4" />
+                    <span>Sensors</span>
+                  </div>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {isLoading ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {[...Array(6)].map((_, i) => (
+              <div key={i} className="border p-4 rounded-md animate-pulse">
+                <div className="flex items-start gap-4">
+                  <div className="h-16 w-16 flex-shrink-0 rounded-md bg-slate-200"></div>
+                  <div className="flex-1">
+                    <div className="h-5 bg-slate-200 rounded w-3/4 mb-2"></div>
+                    <div className="h-4 bg-slate-200 rounded w-1/2 mb-2"></div>
+                    <div className="flex gap-2">
+                      <div className="h-3 bg-slate-200 rounded w-16"></div>
+                      <div className="h-3 bg-slate-200 rounded w-16"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : error ? (
+          <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 Snippets
+                </h3>
+                <p className="text-red-600">
+                  We couldn't load the latest snippets. Please try again later.
+                </p>
+              </div>
+            </div>
+          </div>
+        ) : filteredSnippets?.length === 0 ? (
+          <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 Snippets
+            </h3>
+            <p className="text-slate-500 max-w-md mx-auto mb-6">
+              {searchQuery
+                ? `No snippets match your search for "${searchQuery}".`
+                : category !== "all"
+                  ? `No ${category} snippets found in the latest list.`
+                  : "There are no new snippets at the moment."}
+            </p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {filteredSnippets
+              ?.sort((a, b) => b.created_at.localeCompare(a.created_at))
+              ?.map((snippet) => (
+                <SnippetCard
+                  key={snippet.snippet_id}
+                  snippet={snippet}
+                  baseUrl={apiBaseUrl}
+                  showOwner={true}
+                />
+              ))}
+          </div>
+        )}
+      </main>
+      <Footer />
+    </div>
+  )
+}
+
+export default LatestPage

package/src/pages/user-profile.tsx

@@ -1,19 +1,20 @@
-import React, { useState } from "react"
-import { useParams } from "wouter"
-import { useQuery } from "react-query"
-import { useAxios } from "@/hooks/use-axios"
-import Header from "@/components/Header"
 import Footer from "@/components/Footer"
-import { Snippet } from "fake-snippets-api/lib/db/schema"
+import Header from "@/components/Header"
+import { SnippetCard } from "@/components/SnippetCard"
+import { useConfirmDeletePackageDialog } from "@/components/dialogs/confirm-delete-package-dialog"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
-import { GitHubLogoIcon } from "@radix-ui/react-icons"
 import { Input } from "@/components/ui/input"
-import { useGlobalStore } from "@/hooks/use-global-store"
-import { useConfirmDeleteSnippetDialog } from "@/components/dialogs/confirm-delete-snippet-dialog"
-import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { useAxios } from "@/hooks/use-axios"
+import { useGlobalStore } from "@/hooks/use-global-store"
 import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
-import { SnippetCard } from "@/components/SnippetCard"
+import { GitHubLogoIcon } from "@radix-ui/react-icons"
+import type { Snippet } from "fake-snippets-api/lib/db/schema"
+import type React from "react"
+import { useState } from "react"
+import { useQuery } from "react-query"
+import { useParams } from "wouter"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
@@ -23,7 +24,7 @@ export const UserProfilePage = () => {
   const session = useGlobalStore((s) => s.session)
   const isCurrentUserProfile = username === session?.github_username
   const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
-    useConfirmDeleteSnippetDialog()
+    useConfirmDeletePackageDialog()
   const [snippetToDelete, setSnippetToDelete] = useState<Snippet | null>(null)
 
   const { data: userSnippets, isLoading: isLoadingUserSnippets } = useQuery<
@@ -138,8 +139,8 @@ export const UserProfilePage = () => {
       </div>
       {snippetToDelete && (
         <DeleteDialog
-          snippetId={snippetToDelete.snippet_id}
-          snippetName={snippetToDelete.unscoped_name}
+          packageId={snippetToDelete.snippet_id}
+          packageName={snippetToDelete.unscoped_name}
         />
       )}
       <Footer />