@tscircuit/fake-snippets 0.0.77 → 0.0.79

package/src/components/package-port/CodeEditor.tsx

@@ -9,18 +9,15 @@ import { Decoration, hoverTooltip, keymap } from "@codemirror/view"
 import { getImportsFromCode } from "@tscircuit/prompt-benchmarks/code-runner-utils"
 import type { ATABootstrapConfig } from "@typescript/ata"
 import { setupTypeAcquisition } from "@typescript/ata"
+import { linter } from "@codemirror/lint"
 import { TSCI_PACKAGE_PATTERN } from "@/lib/constants"
 import {
   createDefaultMapFromCDN,
   createSystem,
   createVirtualTypeScriptEnvironment,
 } from "@typescript/vfs"
-import {
-  tsAutocomplete,
-  tsFacet,
-  tsLinter,
-  tsSync,
-} from "@valtown/codemirror-ts"
+import { tsAutocomplete, tsFacet, tsSync } from "@valtown/codemirror-ts"
+import { getLints } from "@valtown/codemirror-ts"
 import { EditorView } from "codemirror"
 import { useEffect, useMemo, useRef, useState } from "react"
 import tsModule from "typescript"
@@ -75,6 +72,7 @@ export const CodeEditor = ({
   const editorRef = useRef<HTMLDivElement>(null)
   const viewRef = useRef<EditorView | null>(null)
   const ataRef = useRef<ReturnType<typeof setupTypeAcquisition> | null>(null)
+  const lastReceivedTsFileTimeRef = useRef<number>(0)
   const apiUrl = useSnippetsBaseApiUrl()
   const codeCompletionApi = useCodeCompletionApi()
   const [cursorPosition, setCursorPosition] = useState<number | null>(null)
@@ -218,16 +216,12 @@ export const CodeEditor = ({
         receivedFile: (code: string, path: string) => {
           fsMap.set(path, code)
           env.createFile(path, code)
-          if (viewRef.current) {
-            viewRef.current.dispatch({
-              changes: {
-                from: 0,
-                to: viewRef.current.state.doc.length,
-                insert: viewRef.current.state.doc.toString(),
-              },
-              selection: viewRef.current.state.selection,
-            })
+          if (/\.tsx?$|\.d\.ts$/.test(path)) {
+            lastReceivedTsFileTimeRef.current = Date.now()
           }
+          // Avoid dispatching a view update when ATA downloads files. Dispatching
+          // here caused the editor to reset the user's selection, which made text
+          // selection impossible while dependencies were loading.
         },
       },
     }
@@ -292,7 +286,18 @@ export const CodeEditor = ({
                 : currentFile,
             }),
             tsSync(),
-            tsLinter(),
+            linter(async (view) => {
+              if (Date.now() - lastReceivedTsFileTimeRef.current < 3000) {
+                return []
+              }
+              const config = view.state.facet(tsFacet)
+              return config
+                ? getLints({
+                    ...config,
+                    diagnosticCodesToIgnore: [],
+                  })
+                : []
+            }),
             autocompletion({ override: [tsAutocomplete()] }),
             hoverTooltip((view, pos) => {
               const line = view.state.doc.lineAt(pos)
@@ -386,6 +391,13 @@ export const CodeEditor = ({
                 }
                 return false
               },
+              keydown: (event) => {
+                if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                  event.preventDefault()
+                  return true
+                }
+                return false
+              },
             }),
             EditorView.theme({
               ".cm-tooltip-hover": {

package/src/hooks/use-current-package-release.ts

@@ -3,7 +3,9 @@ import { useCurrentPackageId } from "./use-current-package-id"
 import { useUrlParams } from "./use-url-params"
 import { usePackageRelease } from "./use-package-release"
 
-export const useCurrentPackageRelease = () => {
+export const useCurrentPackageRelease = (options?: {
+  include_logs: boolean
+}) => {
   const { packageId } = useCurrentPackageId()
   const urlParams = useUrlParams()
   const { author, packageName } = useParams()
@@ -23,6 +25,8 @@ export const useCurrentPackageRelease = () => {
     query = { package_id: packageId, is_latest: true }
   }
 
-  const { data: packageRelease, ...rest } = usePackageRelease(query)
+  const { data: packageRelease, ...rest } = usePackageRelease(query, {
+    include_logs: options?.include_logs ?? false,
+  })
   return { packageRelease, ...rest }
 }

package/src/hooks/use-package-details-form.ts

@@ -16,6 +16,7 @@ interface PackageDetailsForm {
   license: string | null
   visibility: string
   defaultView: string
+  unscopedPackageName: string
 }
 
 interface UsePackageDetailsFormProps {
@@ -24,6 +25,7 @@ interface UsePackageDetailsFormProps {
   initialLicense: string | null
   initialVisibility: string
   initialDefaultView: string
+  initialUnscopedPackageName: string
   isDialogOpen: boolean
 }
 
@@ -33,6 +35,7 @@ export const usePackageDetailsForm = ({
   initialLicense,
   initialVisibility,
   initialDefaultView,
+  initialUnscopedPackageName,
   isDialogOpen,
 }: UsePackageDetailsFormProps) => {
   const [formData, setFormData] = useState<PackageDetailsForm>({
@@ -41,6 +44,7 @@ export const usePackageDetailsForm = ({
     license: initialLicense || null,
     visibility: initialVisibility,
     defaultView: initialDefaultView,
+    unscopedPackageName: initialUnscopedPackageName,
   })
   const [websiteError, setWebsiteError] = useState<string | null>(null)
 
@@ -52,6 +56,7 @@ export const usePackageDetailsForm = ({
         license: initialLicense || null,
         visibility: initialVisibility,
         defaultView: initialDefaultView,
+        unscopedPackageName: initialUnscopedPackageName,
       })
       setWebsiteError(null)
     }
@@ -62,6 +67,7 @@ export const usePackageDetailsForm = ({
     initialLicense,
     initialVisibility,
     initialDefaultView,
+    initialUnscopedPackageName,
   ])
 
   useEffect(() => {
@@ -93,7 +99,8 @@ export const usePackageDetailsForm = ({
       formData.website !== initialWebsite ||
       formData.license !== initialLicense ||
       formData.visibility !== initialVisibility ||
-      formData.defaultView !== initialDefaultView,
+      formData.defaultView !== initialDefaultView ||
+      formData.unscopedPackageName !== initialUnscopedPackageName,
     [
       formData,
       initialDescription,
@@ -101,6 +108,7 @@ export const usePackageDetailsForm = ({
       initialLicense,
       initialVisibility,
       initialDefaultView,
+      initialUnscopedPackageName,
     ],
   )
 

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

@@ -18,15 +18,28 @@ type PackageReleaseQuery =
       is_latest: boolean
     }
 
-export const usePackageRelease = (query: PackageReleaseQuery | null) => {
+export const usePackageRelease = (
+  query: PackageReleaseQuery | null,
+  options?: { include_logs: boolean },
+) => {
   const axios = useAxios()
 
   return useQuery<PackageRelease, Error & { status: number }>(
-    ["packageRelease", query],
+    ["packageRelease", query, options?.include_logs],
     async () => {
       if (!query) return
 
-      const { data } = await axios.post("/package_releases/get", query)
+      const { data } = await axios.post(
+        "/package_releases/get",
+        query,
+        options?.include_logs
+          ? {
+              params: {
+                include_logs: true,
+              },
+            }
+          : undefined,
+      )
 
       if (!data.package_release) {
         throw new Error("Package release not found")

package/src/pages/latest.tsx

@@ -4,17 +4,8 @@ import { useAxios } from "@/hooks/use-axios"
 import { Package } 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 { Search, 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,
@@ -23,8 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
-import { PackageCard } from "@/components/PackageCard"
+import PackageSearchResults from "@/components/PackageSearchResults"
 
 const LatestPage: React.FC = () => {
   const axios = useAxios()
@@ -48,22 +38,24 @@ const LatestPage: React.FC = () => {
     },
   )
 
-  const filteredPackages = packages?.filter((pkg) => {
-    if (!searchQuery) return true
+  const filteredPackages = packages
+    ?.filter((pkg) => {
+      if (!searchQuery) return true
 
-    const query = searchQuery.toLowerCase().trim()
+      const query = searchQuery.toLowerCase().trim()
 
-    const searchableFields = [
-      pkg.unscoped_name.toLowerCase(),
-      pkg.owner_github_username?.toLowerCase() ?? "",
-      (pkg.description || "").toLowerCase(),
-    ]
+      const searchableFields = [
+        pkg.unscoped_name.toLowerCase(),
+        pkg.owner_github_username?.toLowerCase() ?? "",
+        (pkg.description || "").toLowerCase(),
+      ]
 
-    return searchableFields.some((field) => {
-      const queryWords = query.split(/\s+/).filter((word) => word.length > 0)
-      return queryWords.every((word) => field.includes(word))
+      return searchableFields.some((field) => {
+        const queryWords = query.split(/\s+/).filter((word) => word.length > 0)
+        return queryWords.every((word) => field.includes(word))
+      })
     })
-  })
+    ?.sort((a, b) => b.created_at.localeCompare(a.created_at))
 
   return (
     <div className="min-h-screen flex flex-col bg-gray-50">
@@ -71,7 +63,6 @@ const LatestPage: React.FC = () => {
       <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 Packages
             </h1>
@@ -81,16 +72,6 @@ const LatestPage: React.FC = () => {
             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">
@@ -139,58 +120,19 @@ const LatestPage: React.FC = () => {
             </Select>
           </div>
         </div>
-
-        {isLoading ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {[...Array(6)].map((_, i) => (
-              <PackageCardSkeleton key={i} />
-            ))}
-          </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 Packages
-                </h3>
-                <p className="text-red-600">
-                  We couldn't load the latest packages. Please try again later.
-                </p>
-              </div>
-            </div>
-          </div>
-        ) : filteredPackages?.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 Packages
-            </h3>
-            <p className="text-slate-500 max-w-md mx-auto mb-6">
-              {searchQuery
-                ? `No packages match your search for "${searchQuery}".`
-                : category !== "all"
-                  ? `No ${category} packages found in the latest list.`
-                  : "There are no new packages at the moment."}
-            </p>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            {filteredPackages
-              ?.sort((a, b) => b.created_at.localeCompare(a.created_at))
-              ?.map((pkg) => (
-                <PackageCard
-                  key={pkg.package_id}
-                  pkg={pkg}
-                  baseUrl={apiBaseUrl}
-                />
-              ))}
-          </div>
-        )}
+        <PackageSearchResults
+          isLoading={isLoading}
+          error={error}
+          filteredPackages={filteredPackages}
+          apiBaseUrl={apiBaseUrl}
+          emptyStateMessage={
+            searchQuery
+              ? `No packages match your search for "${searchQuery}".`
+              : category !== "all"
+                ? `No ${category} packages found in the latest list.`
+                : "There are no new packages at the moment."
+          }
+        />
       </main>
       <Footer />
     </div>

package/src/pages/quickstart.tsx

@@ -119,7 +119,7 @@ export const QuickstartPage = () => {
         <div className="mt-12">
           <h2 className="text-xl font-semibold mb-4">Import as Package</h2>
           <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" },
               { name: "KiCad Module", type: "package" },
@@ -145,7 +145,7 @@ export const QuickstartPage = () => {
                   </Button>
                 </CardContent>
               </Card>
-            ))}
+            ))} */}
             <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">

package/src/pages/user-profile.tsx

@@ -14,6 +14,7 @@ import type { Package } from "fake-snippets-api/lib/db/schema"
 import type React from "react"
 import { useState } from "react"
 import { useQuery } from "react-query"
+import NotFoundPage from "./404"
 import { useParams } from "wouter"
 import {
   Select,
@@ -32,7 +33,28 @@ export const UserProfilePage = () => {
   const [activeTab, setActiveTab] = useState("all")
   const [filter, setFilter] = useState("most-recent") // Changed default from "newest" to "most-recent"
   const session = useGlobalStore((s) => s.session)
-  const isCurrentUserProfile = username === session?.github_username
+  const {
+    data: account,
+    error: accountError,
+    isLoading: isLoadingAccount,
+  } = useQuery<
+    { account: { github_username: string } },
+    Error & { status: number }
+  >(
+    ["account", username],
+    async () => {
+      const response = await axios.post("/accounts/get", {
+        github_username: username,
+      })
+      return response.data
+    },
+    { retry: false },
+  )
+
+  // use the username stored in the database so the correct case is displayed
+  const githubUsername = account?.account.github_username || username
+  const isCurrentUserProfile = githubUsername === session?.github_username
+
   const { Dialog: DeleteDialog, openDialog: openDeleteDialog } =
     useConfirmDeletePackageDialog()
   const [packageToDelete, setPackageToDelete] = useState<Package | null>(null)
@@ -41,33 +63,42 @@ export const UserProfilePage = () => {
     data: userPackages,
     isLoading: isLoadingUserPackages,
     refetch: refetchUserPackages,
-  } = useQuery<Package[]>(["userPackages", username], async () => {
-    const response = await axios.post(`/packages/list`, {
-      owner_github_username: username,
-    })
-    return response.data.packages
-  })
+  } = useQuery<Package[]>(
+    ["userPackages", githubUsername],
+    async () => {
+      const response = await axios.post(`/packages/list`, {
+        owner_github_username: githubUsername,
+      })
+      return response.data.packages
+    },
+    { enabled: Boolean(githubUsername) },
+  )
 
   const { data: starredPackages, isLoading: isLoadingStarredPackages } =
     useQuery<Package[]>(
-      ["starredPackages", username],
+      ["starredPackages", githubUsername],
       async () => {
         const response = await axios.post(`/packages/list`, {
-          starred_by: username,
+          starred_by: githubUsername,
         })
         return response.data.packages
       },
       {
-        enabled: activeTab === "starred",
+        enabled: activeTab === "starred" && Boolean(githubUsername),
       },
     )
 
   const baseUrl = useSnippetsBaseApiUrl()
 
+  if (accountError) {
+    return <NotFoundPage heading="User Not Found" />
+  }
+
   const packagesToShow =
     activeTab === "starred" ? starredPackages : userPackages
   const isLoading =
-    activeTab === "starred" ? isLoadingStarredPackages : isLoadingUserPackages
+    isLoadingAccount ||
+    (activeTab === "starred" ? isLoadingStarredPackages : isLoadingUserPackages)
 
   const filteredPackages = packagesToShow
     ?.filter((pkg) => {
@@ -107,12 +138,16 @@ export const UserProfilePage = () => {
       <div className="container mx-auto px-4 py-8">
         <div className="flex items-center gap-4 mb-6">
           <Avatar className="h-16 w-16">
-            <AvatarImage src={`https://github.com/${username}.png`} />
-            <AvatarFallback>{username?.[0]?.toUpperCase()}</AvatarFallback>
+            <AvatarImage src={`https://github.com/${githubUsername}.png`} />
+            <AvatarFallback>
+              {githubUsername?.[0]?.toUpperCase()}
+            </AvatarFallback>
           </Avatar>
           <div>
             <h1 className="text-3xl font-bold">
-              {isCurrentUserProfile ? "My Profile" : `${username}'s Profile`}
+              {isCurrentUserProfile
+                ? "My Profile"
+                : `${githubUsername}'s Profile`}
             </h1>
             <div className="text-gray-600 mt-1">
               {userPackages?.length || 0} packages
@@ -121,7 +156,7 @@ export const UserProfilePage = () => {
         </div>
         <div className="mb-6">
           <a
-            href={`https://github.com/${username}`}
+            href={`https://github.com/${githubUsername}`}
             target="_blank"
             rel="noopener noreferrer"
             className="inline-flex items-center"