@tscircuit/fake-snippets 0.0.109 → 0.0.111

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,48 @@ 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" | "is_tscircuit_staff"> {
+  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 +74,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 +209,74 @@ 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 as unknown as 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

package/src/pages/user-profile.tsx

@@ -10,7 +10,7 @@ import { useAxios } from "@/hooks/use-axios"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { GitHubLogoIcon } from "@radix-ui/react-icons"
-import type { Package } from "fake-snippets-api/lib/db/schema"
+import type { Package, PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
 import type React from "react"
 import { useState } from "react"
 import { useQuery } from "react-query"
@@ -23,21 +23,25 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { Box, Star } from "lucide-react"
+import { Box, Star, Building2 } from "lucide-react"
 import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
 import { ConnectedPackagesList } from "@/components/preview/ConnectedPackagesList"
+import { useListUserOrgs } from "@/hooks/use-list-user-orgs"
+import { OrganizationCard } from "@/components/organization/OrganizationCard"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
   const axios = useAxios()
+  const { data: organizations } = useListUserOrgs(username)
   const [searchQuery, setSearchQuery] = useState("")
   const [activeTab, setActiveTab] = useState("all")
-  const [filter, setFilter] = useState("most-recent") // Changed default from "newest" to "most-recent"
+  const [filter, setFilter] = useState("most-recent")
   const session = useGlobalStore((s) => s.session)
   const {
     data: account,
     error: accountError,
     isLoading: isLoadingAccount,
+    isFetched: isFetchedAccount,
   } = useQuery<
     { account: { github_username: string } },
     Error & { status: number }
@@ -98,6 +102,10 @@ export const UserProfilePage = () => {
 
   const baseUrl = useApiBaseUrl()
 
+  if (!isFetchedAccount) {
+    return null
+  }
+
   if (accountError) {
     return <NotFoundPage heading="User Not Found" />
   }
@@ -145,8 +153,11 @@ 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/${githubUsername}.png`} />
-            <AvatarFallback>
+            <AvatarImage
+              src={`https://github.com/${githubUsername}.png`}
+              draggable={false}
+            />
+            <AvatarFallback className="select-none">
               {githubUsername?.[0]?.toUpperCase()}
             </AvatarFallback>
           </Avatar>
@@ -174,10 +185,17 @@ export const UserProfilePage = () => {
             </Button>
           </a>
         </div>
-        <Tabs defaultValue="all" onValueChange={setActiveTab} className="mb-4">
+        <Tabs
+          defaultValue="all"
+          onValueChange={setActiveTab}
+          className="mb-4 select-none overflow-x-auto no-scrollbar"
+        >
           <TabsList>
             <TabsTrigger value="all">Packages</TabsTrigger>
             <TabsTrigger value="starred">Starred Packages</TabsTrigger>
+            {organizations && organizations.length > 0 && (
+              <TabsTrigger value="organizations">Organizations</TabsTrigger>
+            )}
             {isCurrentUserProfile &&
               (
                 userPackages?.filter((x) => Boolean(x.github_repo_full_name)) ??
@@ -217,6 +235,39 @@ export const UserProfilePage = () => {
               []
             }
           />
+        ) : activeTab === "organizations" ? (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {organizations && organizations.length > 0 ? (
+              organizations
+                ?.filter((o) => {
+                  if (!isCurrentUserProfile && o.is_personal_org) {
+                    return false
+                  } else {
+                    return true
+                  }
+                })
+                .map((org: PublicOrgSchema) => (
+                  <OrganizationCard
+                    key={org.org_id}
+                    organization={org}
+                    withLink={true}
+                    showStats={true}
+                    showMembers={true}
+                    className="p-3"
+                  />
+                ))
+            ) : (
+              <div className="col-span-full flex justify-center">
+                <div className="flex flex-col items-center py-12 text-gray-500">
+                  <Building2 className="mb-2" size={24} />
+                  <span className="text-lg font-medium">No organizations</span>
+                  <span className="text-sm">
+                    You're not a member of any organizations yet.
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
         ) : isLoading ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
             {[...Array(6)].map((_, i) => (
@@ -240,7 +291,7 @@ export const UserProfilePage = () => {
               ))
             ) : (
               <div className="col-span-full flex justify-center">
-                <div className="flex flex-col items-center py-12 text-gray-500">
+                <div className="flex flex-col items-center py-20 text-gray-500">
                   {activeTab === "starred" ? (
                     <>
                       <Star className="mb-2" size={24} />