@tscircuit/fake-snippets 0.0.108 → 0.0.110

package/src/pages/release-detail.tsx

@@ -6,10 +6,14 @@ import { usePackageBuild } from "@/hooks/use-package-builds"
 import { ConnectedRepoOverview } from "@/components/preview/ConnectedRepoOverview"
 import Header from "@/components/Header"
 import { Badge } from "@/components/ui/badge"
-import { Calendar, GitBranch } from "lucide-react"
-import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Calendar, GitBranch, RefreshCw } from "lucide-react"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
 import { PackageBreadcrumb } from "@/components/PackageBreadcrumb"
+import { usePackageReleaseImages } from "@/hooks/use-package-release-images"
+import { Skeleton } from "@/components/ui/skeleton"
+import { useRebuildPackageReleaseMutation } from "@/hooks/use-rebuild-package-release-mutation"
+import { useGlobalStore } from "@/hooks/use-global-store"
 
 export default function ReleaseDetailPage() {
   const params = useParams<{
@@ -24,8 +28,6 @@ export default function ReleaseDetailPage() {
       ? `${params.author}/${params.packageName}`
       : null
 
-  const [copied, setCopied] = useState(false)
-
   const {
     data: pkg,
     isLoading: isLoadingPackage,
@@ -39,16 +41,58 @@ export default function ReleaseDetailPage() {
     data: packageRelease,
     isLoading: isLoadingRelease,
     error: releaseError,
-  } = usePackageReleaseByIdOrVersion(releaseIdOrVersion, packageName)
+  } = usePackageReleaseByIdOrVersion(releaseIdOrVersion, packageName, {
+    include_logs: true,
+  })
 
   const {
     data: latestBuild,
     isLoading: isLoadingBuild,
     error: buildError,
-  } = usePackageBuild(packageRelease?.latest_package_build_id ?? null)
+  } = usePackageBuild(packageRelease?.latest_package_build_id ?? null, {
+    include_logs: true,
+  })
+
+  const { availableViews } = usePackageReleaseImages({
+    packageReleaseId: packageRelease?.package_release_id,
+  })
+
+  const session = useGlobalStore((s) => s.session)
+  const { mutate: rebuildPackage, isLoading: isRebuildLoading } =
+    useRebuildPackageReleaseMutation()
 
   if (isLoadingPackage || isLoadingRelease) {
-    return null
+    return (
+      <>
+        <Header />
+        <div className="min-h-screen bg-white">
+          {/* Page Header Skeleton */}
+          <div className="bg-gray-50 border-b py-6">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+              <Skeleton className="h-6 w-64 mb-4" />
+              <div className="flex items-center gap-4">
+                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-4 w-32" />
+              </div>
+            </div>
+          </div>
+
+          {/* Images Skeleton */}
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {[1, 2, 3].map((i) => (
+                <Skeleton key={i} className="h-48 rounded-lg" />
+              ))}
+            </div>
+          </div>
+
+          {/* Main Content Skeleton */}
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+            <Skeleton className="h-64 w-full" />
+          </div>
+        </div>
+      </>
+    )
   }
 
   if (packageError?.status === 404 || !pkg) {
@@ -65,7 +109,7 @@ export default function ReleaseDetailPage() {
       <div className="min-h-screen bg-white">
         {/* Page Header */}
         <div className="bg-gray-50 border-b py-6">
-          <div className="max-w-7xl lg:flex lg:justify-between mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             {/* Breadcrumb */}
             <PackageBreadcrumb
               author={pkg.owner_github_username || ""}
@@ -78,35 +122,79 @@ export default function ReleaseDetailPage() {
             />
 
             {/* Header Content */}
-            <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-2">
-              <div className="flex-1">
-                <div className="flex items-center gap-4 text-sm text-gray-600">
-                  {packageRelease.is_pr_preview && (
-                    <a
-                      href={`https://github.com/${pkg.github_repo_full_name}/pull/${packageRelease.github_pr_number}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      <div className="flex items-center gap-1">
-                        <GitBranch className="w-4 h-4" />
-                        <Badge variant="outline" className="text-xs">
-                          PR #{packageRelease.github_pr_number}
-                        </Badge>
-                      </div>
-                    </a>
-                  )}
-                  <div className="flex items-center gap-1">
-                    <Calendar className="w-4 h-4" />
-                    <span>
-                      Created {formatTimeAgo(packageRelease.created_at)}
-                    </span>
-                  </div>
+            <div className="flex flex-wrap items-center justify-between gap-3 mt-4">
+              <div className="flex flex-wrap items-center gap-4 text-sm text-gray-600">
+                {packageRelease.is_pr_preview && (
+                  <a
+                    href={`https://github.com/${pkg.github_repo_full_name}/pull/${packageRelease.github_pr_number}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-1 hover:text-gray-800 transition-colors"
+                  >
+                    <GitBranch className="w-4 h-4" />
+                    <Badge variant="outline" className="text-xs">
+                      PR #{packageRelease.github_pr_number}
+                    </Badge>
+                  </a>
+                )}
+                <div className="flex items-center gap-1">
+                  <Calendar className="w-4 h-4" />
+                  <span>
+                    Created {formatTimeAgo(packageRelease.created_at)}
+                  </span>
                 </div>
               </div>
+
+              {/* Rebuild Button */}
+              {session?.github_username === pkg.owner_github_username && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="border-gray-300 bg-white hover:bg-gray-50 flex-shrink-0"
+                  disabled={isRebuildLoading || !packageRelease}
+                  onClick={() =>
+                    packageRelease &&
+                    rebuildPackage({
+                      package_release_id: packageRelease.package_release_id,
+                    })
+                  }
+                >
+                  <RefreshCw
+                    className={`w-4 h-4 mr-2 ${isRebuildLoading ? "animate-spin" : ""}`}
+                  />
+                  {isRebuildLoading ? "Rebuilding..." : "Rebuild"}
+                </Button>
+              )}
             </div>
           </div>
         </div>
 
+        {/* Images Section - Always show with skeletons while loading */}
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {availableViews.length > 0
+              ? availableViews.map((view) => (
+                  <div
+                    key={view.id}
+                    className="flex items-center justify-center border rounded-lg bg-gray-50 overflow-hidden h-48"
+                  >
+                    {view.isLoading ? (
+                      <Skeleton className="w-full h-full" />
+                    ) : (
+                      <img
+                        src={view.imageUrl}
+                        alt={`${view.label} preview`}
+                        className={`w-full h-full object-contain ${view.label.toLowerCase() == "pcb" ? "bg-black" : view.label.toLowerCase() == "schematic" ? "bg-[#F5F1ED]" : "bg-gray-100"}`}
+                      />
+                    )}
+                  </div>
+                ))
+              : [1, 2, 3].map((i) => (
+                  <Skeleton key={i} className="h-48 rounded-lg" />
+                ))}
+          </div>
+        </div>
+
         {/* Main Content */}
         <ConnectedRepoOverview
           packageBuild={latestBuild ?? null}

package/src/pages/search.tsx

@@ -1,13 +1,18 @@
-import React, { useState, useEffect } from "react"
+import { useState, useEffect, useMemo } from "react"
 import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import { useSearchParams } from "wouter"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import { Input } from "@/components/ui/input"
-import { Search } from "lucide-react"
-import PackageSearchResults from "@/components/PackageSearchResults"
+import { Search, User } from "lucide-react"
+import PackageSearchResults, {
+  LoadingState,
+} from "@/components/PackageSearchResults"
+import { UserCard } from "@/components/UserCard"
 import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { fuzzyMatch } from "@/components/ViewPackagePage/utils/fuzz-search"
 import {
   Select,
   SelectContent,
@@ -15,31 +20,47 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { Package } from "fake-snippets-api/lib/db/schema"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Package, Account } from "fake-snippets-api/lib/db/schema"
+
+interface ScoredPackage extends Package {
+  score: number
+  matches: number[]
+}
+
+interface ScoredAccount extends Omit<Account, "account_id"> {
+  score: number
+  matches: number[]
+}
 
 export const SearchPage = () => {
   const axios = useAxios()
   const apiBaseUrl = useApiBaseUrl()
   const [searchParams, setSearchParams] = useSearchParams()
+  const currentUser = useGlobalStore((s) => s.session?.github_username)
 
   const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "")
   const [category, setCategory] = useState(
     searchParams.get("category") || "all",
   )
   const [sortBy, setSortBy] = useState(searchParams.get("sort") || "stars")
+  const [activeTab, setActiveTab] = useState(
+    searchParams.get("tab") || "packages",
+  )
 
   useEffect(() => {
     const params = new URLSearchParams()
     if (searchQuery) params.set("q", searchQuery)
     if (category !== "all") params.set("category", category)
     if (sortBy !== "stars") params.set("sort", sortBy)
+    if (activeTab !== "packages") params.set("tab", activeTab)
     setSearchParams(params)
-  }, [searchQuery, category, sortBy, setSearchParams])
+  }, [searchQuery, category, sortBy, activeTab, setSearchParams])
 
   const {
     data: packages,
-    isLoading,
-    error,
+    isLoading: isLoadingPackages,
+    error: packagesError,
   } = useQuery(
     ["packageSearch", searchQuery, category],
     async () => {
@@ -52,69 +73,130 @@ export const SearchPage = () => {
       })
       return response.data.packages
     },
-    { enabled: Boolean(searchQuery), keepPreviousData: true },
+    {
+      enabled: Boolean(searchQuery),
+      keepPreviousData: true,
+      refetchOnWindowFocus: false,
+    },
+  )
+
+  const { data: allAccounts = [], isLoading: isLoadingAccounts } = useQuery(
+    ["accountSearch", searchQuery],
+    async () => {
+      if (!searchQuery) return []
+      try {
+        const { data } = await axios.post("/accounts/search", {
+          query: searchQuery,
+          limit: 20,
+        })
+        return data.accounts || []
+      } catch (error) {
+        console.warn("Failed to fetch accounts:", error)
+        return []
+      }
+    },
+    {
+      enabled: Boolean(searchQuery) && Boolean(currentUser),
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
   )
 
-  const filteredPackages = packages
-    ?.filter((pkg: Package) => {
-      if (!searchQuery) return true
-
-      const query = searchQuery.toLowerCase().trim()
-      const searchableFields = [
-        pkg.unscoped_name.toLowerCase(),
-        (pkg.owner_github_username || "").toLowerCase(),
-        (pkg.description || "").toLowerCase(),
-        pkg.description?.toLowerCase(),
-      ]
-
-      return searchableFields.some((field) => {
-        const queryWords = query.split(/\s+/).filter((word) => word.length > 0)
-        if (!field) return false
-        return queryWords.every((word) => field.includes(word))
+  const searchResults = useMemo((): ScoredPackage[] => {
+    if (!searchQuery || !packages?.length) return []
+
+    return packages
+      .map((pkg: Package) => {
+        const { score, matches } = fuzzyMatch(searchQuery, pkg.name)
+        return { ...pkg, score, matches }
       })
-    })
-    ?.sort((a: Package, b: Package) => {
-      if (sortBy === "stars") {
-        return (b.star_count || 0) - (a.star_count || 0)
-      } else if (sortBy === "newest") {
-        return (
-          new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
-        )
-      } else if (sortBy === "oldest") {
-        return (
-          new Date(a.updated_at).getTime() - new Date(b.updated_at).getTime()
+      .filter((pkg: ScoredPackage) => pkg.score >= 0)
+      .sort((a: ScoredPackage, b: ScoredPackage) => b.score - a.score)
+  }, [packages, searchQuery])
+
+  const filteredPackages = searchResults?.sort((a: Package, b: Package) => {
+    if (sortBy === "stars") {
+      return (b.star_count || 0) - (a.star_count || 0)
+    } else if (sortBy === "newest") {
+      return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
+    } else if (sortBy === "oldest") {
+      return new Date(a.updated_at).getTime() - new Date(b.updated_at).getTime()
+    }
+    return 0
+  })
+
+  const accountSearchResults = useMemo((): ScoredAccount[] => {
+    if (!searchQuery) return []
+
+    // First, get scored accounts from API
+    const apiAccounts = allAccounts
+      .map((account: Account) => {
+        const { score, matches } = fuzzyMatch(
+          searchQuery,
+          account.github_username,
         )
+        return { ...account, score, matches }
+      })
+      .filter((account: ScoredAccount) => account.score >= 0)
+
+    // Then, extract unique package owners not already in API accounts
+    const packageOwners: ScoredAccount[] = []
+    const existingUsernames = new Set(
+      apiAccounts.map((acc: Account) => acc.github_username),
+    )
+
+    filteredPackages.forEach((pkg) => {
+      if (
+        pkg.owner_github_username &&
+        !existingUsernames.has(pkg.owner_github_username)
+      ) {
+        packageOwners.push({
+          github_username: pkg.owner_github_username,
+          score: 1,
+          matches: [],
+        })
+        existingUsernames.add(pkg.owner_github_username)
       }
-      return 0
     })
+    return [...apiAccounts, ...packageOwners].sort(
+      (a: ScoredAccount, b: ScoredAccount) => b.score - a.score,
+    )
+  }, [allAccounts, searchQuery, filteredPackages])
 
+  useEffect(() => {
+    if (accountSearchResults.length == 0 && !isLoadingAccounts) {
+      setActiveTab("packages")
+    }
+  }, [accountSearchResults, isLoadingAccounts])
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
-      <main className="flex-grow pb-12 min-h-[80vh]">
-        <div className="container mx-auto px-4 py-8">
-          <div className="max-w-8xl mx-auto">
-            <div className="mb-6">
+      <main className="flex-grow pb-12 min-h-[80vh] w-full min-w-full">
+        <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
+          <div className="max-w-7xl mx-auto">
+            <div className="mb-4 sm:mb-6">
               <div className="flex items-center gap-2 mb-3">
-                <h1 className="text-3xl font-bold text-gray-900">
-                  Search Packages
+                <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">
+                  Search
                 </h1>
               </div>
-              <div className="flex flex-col sm:flex-row gap-4 mb-4">
+              <div className="flex flex-col sm:flex-row gap-3 sm: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="search"
-                    placeholder="Search packages..."
+                    placeholder="Search packages and users..."
                     className="pl-10"
                     value={searchQuery}
+                    spellCheck={false}
+                    autoComplete="off"
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    aria-label="Search packages"
+                    aria-label="Search packages and users"
                     role="searchbox"
                   />
                 </div>
                 <Select value={sortBy} onValueChange={setSortBy}>
-                  <SelectTrigger className="w-[140px]">
+                  <SelectTrigger className="w-full sm:w-[140px]">
                     <SelectValue placeholder="Sort By" />
                   </SelectTrigger>
                   <SelectContent>
@@ -126,17 +208,70 @@ export const SearchPage = () => {
               </div>
             </div>
 
-            <PackageSearchResults
-              isLoading={isLoading}
-              error={error}
-              filteredPackages={filteredPackages}
-              apiBaseUrl={apiBaseUrl}
-              emptyStateMessage={
-                searchQuery
-                  ? `No packages match your search for "${searchQuery}".`
-                  : "Please enter a search query to find packages."
-              }
-            />
+            <Tabs
+              value={activeTab}
+              onValueChange={setActiveTab}
+              className="w-full"
+            >
+              {currentUser && accountSearchResults.length > 0 && (
+                <TabsList className="grid grid-cols-2 mb-6 select-none w-full max-w-md mx-auto">
+                  <TabsTrigger
+                    value="packages"
+                    className="flex items-center gap-2"
+                  >
+                    Packages
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="users"
+                    className="flex items-center gap-2"
+                  >
+                    Users
+                  </TabsTrigger>
+                </TabsList>
+              )}
+
+              <TabsContent value="packages" className="w-full">
+                <PackageSearchResults
+                  isLoading={isLoadingPackages}
+                  error={packagesError}
+                  filteredPackages={filteredPackages}
+                  apiBaseUrl={apiBaseUrl}
+                  emptyStateMessage={
+                    searchQuery
+                      ? `No packages match your search for "${searchQuery}".`
+                      : "Please enter a search query to find packages."
+                  }
+                />
+              </TabsContent>
+
+              <TabsContent value="users" className="w-full">
+                {isLoadingAccounts ? (
+                  <div>
+                    <LoadingState />
+                  </div>
+                ) : accountSearchResults.length > 0 ? (
+                  <div className="grid grid-cols-1 w-full sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-3 sm:gap-4">
+                    {accountSearchResults.map((account, i) => (
+                      <UserCard key={i} account={account} className="w-full" />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="text-center py-12 px-4">
+                    <div className="bg-slate-50 inline-flex rounded-full p-4 mb-4">
+                      <User className="w-8 h-8 text-slate-400" />
+                    </div>
+                    <h3 className="text-xl font-medium text-slate-900 mb-2">
+                      No Matching Users
+                    </h3>
+                    <p className="text-slate-500 max-w-md mx-auto mb-6">
+                      {searchQuery
+                        ? `No users match your search for "${searchQuery}".`
+                        : "Please enter a search query to find users."}
+                    </p>
+                  </div>
+                )}
+              </TabsContent>
+            </Tabs>
           </div>
         </div>
       </main>

package/src/pages/settings-redirect.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react"
+import { Redirect } from "wouter"
+
+import { FullPageLoader } from "@/App"
+import { useGlobalStore } from "@/hooks/use-global-store"
+
+const SettingsRedirectPage = () => {
+  const session = useGlobalStore((state) => state.session)
+  const [hasHydrated, setHasHydrated] = useState(() => {
+    if (typeof window === "undefined") return false
+    return useGlobalStore.persist?.hasHydrated?.() ?? false
+  })
+
+  useEffect(() => {
+    if (typeof window === "undefined") return
+
+    if (useGlobalStore.persist?.hasHydrated?.()) {
+      setHasHydrated(true)
+      return
+    }
+
+    const unsubFinishHydration = useGlobalStore.persist?.onFinishHydration?.(
+      () => {
+        setHasHydrated(true)
+      },
+    )
+
+    return () => {
+      unsubFinishHydration?.()
+    }
+  }, [])
+
+  if (!hasHydrated) {
+    return <FullPageLoader />
+  }
+
+  if (!session?.github_username) {
+    return <Redirect to="/" />
+  }
+
+  return <Redirect to={`/${session.github_username}/settings`} />
+}
+
+export default SettingsRedirectPage

package/src/pages/trending.tsx

@@ -49,7 +49,7 @@ const TrendingPage: React.FC = () => {
     async () => {
       const params = new URLSearchParams()
       if (category !== "all") params.append("tag", category)
-      params.append("time_period", time_period)
+      if (time_period !== "all") params.append("time_period", time_period)
 
       const response = await axios.get(
         `/packages/list_trending?${params.toString()}`,
@@ -57,34 +57,47 @@ const TrendingPage: React.FC = () => {
       return response.data.packages
     },
     {
-      keepPreviousData: true,
+      keepPreviousData: false,
+      refetchOnWindowFocus: false,
+      refetchOnMount: true,
+      staleTime: 5 * 60 * 1000,
     },
   )
 
-  const filteredPackages = packages
-    ?.filter((pkg) => {
+  const filteredAndSortedPackages = React.useMemo(() => {
+    if (!packages) return []
+
+    let filtered = packages.filter((pkg) => {
       if (!searchQuery) return true
 
       const query = searchQuery.toLowerCase().trim()
+      if (!query) return true
+
       const searchableFields = [
-        pkg.unscoped_name.toLowerCase(),
-        (pkg.owner_github_username || "").toLowerCase(),
-        (pkg.description || "").toLowerCase(),
-        pkg.description?.toLowerCase(),
-      ]
+        pkg.unscoped_name?.toLowerCase() || "",
+        pkg.owner_github_username?.toLowerCase() || "",
+        pkg.description?.toLowerCase() || "",
+      ].filter(Boolean)
+
+      const queryWords = query.split(/\s+/).filter((word) => word.length > 0)
 
       return searchableFields.some((field) => {
-        const queryWords = query.split(/\s+/).filter((word) => word.length > 0)
         if (!field) return false
         return queryWords.every((word) => field.includes(word))
       })
     })
-    ?.sort((a, b) => {
-      if (sortBy === "stars") {
-        return (b.star_count || 0) - (a.star_count || 0)
+
+    return filtered.sort((a, b) => {
+      if (sortBy === "recent") {
+        const dateA = new Date(a.updated_at).getTime()
+        const dateB = new Date(b.updated_at).getTime()
+        return dateB - dateA
       }
-      return new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
+      const starsA = a.star_count || 0
+      const starsB = b.star_count || 0
+      return starsB - starsA
     })
+  }, [packages, searchQuery, sortBy])
 
   return (
     <div className="min-h-screen flex flex-col">
@@ -107,11 +120,7 @@ const TrendingPage: React.FC = () => {
                 <SelectItem value="recent">Most Recent</SelectItem>
               </SelectContent>
             </Select>
-            <Select
-              value={time_period}
-              onValueChange={setTimePeriod}
-              disabled={sortBy === "recent"}
-            >
+            <Select value={time_period} onValueChange={setTimePeriod}>
               <SelectTrigger className="w-[140px]">
                 <SelectValue placeholder="Time Period" />
               </SelectTrigger>
@@ -173,7 +182,7 @@ const TrendingPage: React.FC = () => {
         <PackageSearchResults
           isLoading={isLoading}
           error={error}
-          filteredPackages={filteredPackages}
+          filteredPackages={filteredAndSortedPackages}
           apiBaseUrl={apiBaseUrl}
           emptyStateMessage={
             searchQuery