@tscircuit/fake-snippets 0.0.109 → 0.0.111

package/src/pages/dashboard.tsx

@@ -3,12 +3,11 @@ import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
-import { Package, Snippet } from "fake-snippets-api/lib/db/schema"
-import { Link } from "wouter"
+import { Package } from "fake-snippets-api/lib/db/schema"
 import { Edit2, KeyRound } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Link } from "wouter"
 import { PackagesList } from "@/components/PackagesList"
 import { Helmet } from "react-helmet-async"
 import { useSignIn } from "@/hooks/use-sign-in"
@@ -16,9 +15,12 @@ import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { useConfirmDeletePackageDialog } from "@/components/dialogs/confirm-delete-package-dialog"
 import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
 import { PackageCard } from "@/components/PackageCard"
+import { useListUserOrgs } from "@/hooks/use-list-user-orgs"
+import { OrganizationCard } from "@/components/organization/OrganizationCard"
 
 export const DashboardPage = () => {
   const axios = useAxios()
+  const { data: organizations } = useListUserOrgs()
 
   const currentUser = useGlobalStore((s) => s.session?.github_username)
   const isLoggedIn = Boolean(currentUser)
@@ -99,7 +101,9 @@ export const DashboardPage = () => {
       </Helmet>
       <Header />
       <div className="container mx-auto px-4 py-8 min-h-[80vh]">
-        <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
+        <div className="flex items-center justify-between mb-6">
+          <h1 className="text-3xl font-bold">Dashboard</h1>
+        </div>
         <div className="flex md:flex-row flex-col">
           <div className="md:w-3/4 p-0 md:pr-6">
             {!isLoggedIn ? (
@@ -129,7 +133,7 @@ export const DashboardPage = () => {
                       {myPackages &&
                         myPackages.slice(0, 3).map((pkg) => (
                           <div key={pkg.package_id}>
-                            <PrefetchPageLink
+                            <Link
                               href={`/editor?package_id=${pkg.package_id}`}
                               className="text-blue-600 hover:underline"
                             >
@@ -141,7 +145,7 @@ export const DashboardPage = () => {
                                 {pkg.unscoped_name}
                                 <Edit2 className="w-3 h-3 ml-2" />
                               </Button>
-                            </PrefetchPageLink>
+                            </Link>
                           </div>
                         ))}
                     </div>
@@ -188,6 +192,34 @@ export const DashboardPage = () => {
                     View all packages
                   </Link>
                 )}
+
+                {/* Organizations Section */}
+                {organizations && organizations.length > 0 && (
+                  <div className="mt-8">
+                    <h2 className="text-sm font-bold mb-2 text-gray-700 border-b border-gray-200">
+                      Your Organizations
+                    </h2>
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+                      {organizations?.slice(0, 4).map((org: any, i: number) => (
+                        <OrganizationCard
+                          key={i}
+                          organization={org}
+                          withLink={true}
+                          showStats={true}
+                          showMembers={true}
+                        />
+                      ))}
+                    </div>
+                    {organizations && organizations.length > 4 && (
+                      <Link
+                        href="/organizations"
+                        className="text-sm text-blue-600 hover:underline mt-2 inline-block"
+                      >
+                        View all organizations
+                      </Link>
+                    )}
+                  </div>
+                )}
               </>
             )}
           </div>

package/src/pages/datasheet.tsx

@@ -55,7 +55,7 @@ export const DatasheetPage = () => {
         </div>
 
         {datasheetQuery.isLoading ? (
-          <div className="flex flex-col items-center justify-center py-16">
+          <div className="flex flex-col items-center justify-center py-20">
             <Loader2 className="w-10 h-10 animate-spin text-blue-500 mb-4" />
             <h3 className="text-xl font-semibold mb-2">Loading Datasheet...</h3>
             <p className="text-gray-500 max-w-md text-center">

package/src/pages/datasheets.tsx

@@ -5,7 +5,7 @@ import { useCreateDatasheet } from "@/hooks/use-create-datasheet"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import { Input } from "@/components/ui/input"
-import { Search } from "lucide-react"
+import { Loader2, Search } from "lucide-react"
 import { Link, useLocation } from "wouter"
 
 interface DatasheetSummary {
@@ -72,9 +72,9 @@ export const DatasheetsPage: React.FC = () => {
         </div>
 
         {isLoading ? (
-          <div className="text-center py-12 px-4">
+          <div className="text-center py-20 px-4">
             <div className="bg-slate-50 inline-flex rounded-full p-4 mb-4">
-              <Search className="w-8 h-8 text-slate-400" />
+              <Loader2 className="size-8 animate-spin text-slate-400" />
             </div>
             <h3 className="text-xl font-medium text-slate-900 mb-2">
               Loading Datasheets

package/src/pages/editor.tsx

@@ -2,12 +2,10 @@ import { CodeAndPreview } from "@/components/package-port/CodeAndPreview"
 import Footer from "@/components/Footer"
 import Header from "@/components/Header"
 import { Helmet } from "react-helmet-async"
-import { useCurrentPackageId } from "@/hooks/use-current-package-id"
-import { usePackage } from "@/hooks/use-package"
+import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 
 export const EditorPage = () => {
-  const { packageId } = useCurrentPackageId()
-  const { data: pkg, isLoading, error } = usePackage(packageId)
+  const { packageInfo: pkg, error } = useCurrentPackageInfo()
 
   const projectUrl = pkg
     ? `https://tscircuit.com/${pkg.owner_github_username}/${pkg.unscoped_name}`
@@ -27,12 +25,12 @@ export const EditorPage = () => {
             />
             <meta
               property="og:image"
-              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
+              content={`https://api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
             />
             <meta name="twitter:card" content="summary_large_image" />
             <meta
               name="twitter:image"
-              content={`https://registry-api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
+              content={`https://api.tscircuit.com/packages/images/${pkg.owner_github_username}/${pkg.unscoped_name}/pcb.png?fs_sha=${pkg.latest_package_release_fs_sha}`}
             />
           </>
         )}

package/src/pages/landing.tsx

@@ -18,7 +18,7 @@ import { useGlobalStore } from "@/hooks/use-global-store"
 import { navigate } from "wouter/use-browser-location"
 import { FAQ } from "@/components/FAQ"
 import { TrendingPackagesCarousel } from "@/components/TrendingPackagesCarousel"
-import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import { Link } from "wouter"
 
 export function LandingPage() {
   const signIn = useSignIn()
@@ -35,8 +35,8 @@ export function LandingPage() {
         <link rel="preconnect" href="https://tscircuit.com" />
         <link rel="dns-prefetch" href="https://tscircuit.com" />
 
-        <link rel="preconnect" href="https://registry-api.tscircuit.com" />
-        <link rel="dns-prefetch" href="https://registry-api.tscircuit.com" />
+        <link rel="preconnect" href="https://api.tscircuit.com" />
+        <link rel="dns-prefetch" href="https://api.tscircuit.com" />
       </Helmet>
       <Header2 />
       <main className="flex-1">
@@ -53,7 +53,7 @@ export function LandingPage() {
                       AI codes electronics with tscircuit
                     </h1>
                     <p className="max-w-[600px] text-muted-foreground md:text-xl">
-                      Build electronics with code, AI, and drag'n'drop tools.
+                      Build electronics with code and AI tools.
                       <br />
                       Render code into schematics, PCBs, 3D, fabrication files,
                       and more.
@@ -72,7 +72,7 @@ export function LandingPage() {
                         Get Started
                       </Button>
                     </a>
-                    <PrefetchPageLink
+                    <Link
                       href="/seveibar/led-water-accelerometer#3d"
                       className="w-[70vw] min-[500px]:w-auto"
                     >
@@ -84,7 +84,7 @@ export function LandingPage() {
                       >
                         Open Online Example
                       </Button>
-                    </PrefetchPageLink>
+                    </Link>
                     <a
                       href="https://github.com/tscircuit/tscircuit"
                       target="_blank"

package/src/pages/latest.tsx

@@ -35,6 +35,9 @@ const LatestPage: React.FC = () => {
     },
     {
       keepPreviousData: true,
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
     },
   )
 

package/src/pages/organization-profile.tsx

@@ -0,0 +1,199 @@
+import { useEffect, useState } from "react"
+import { useParams } from "wouter"
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import { OrganizationHeader } from "@/components/organization/OrganizationHeader"
+import { OrganizationMembers } from "@/components/organization/OrganizationMembers"
+import { PackageCard } from "@/components/PackageCard"
+import { Input } from "@/components/ui/input"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { useListOrgMembers } from "@/hooks/use-list-org-members"
+import { useOrgByGithubHandle } from "@/hooks/use-org-by-github-handle"
+import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { Box } from "lucide-react"
+import type { PublicOrgSchema, Package } from "fake-snippets-api/lib/db/schema"
+import { NotFound } from "@/components/NotFound"
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+
+export const OrganizationProfilePageContent = ({
+  org,
+}: { org: PublicOrgSchema }) => {
+  const baseUrl = useApiBaseUrl()
+  const session = useGlobalStore((s) => s.session)
+  const axios = useAxios()
+
+  const [searchQuery, setSearchQuery] = useState("")
+  const [activeTab, setActiveTab] = useState("packages")
+  const [filter, setFilter] = useState("most-recent")
+  const [showAllMembers, setShowAllMembers] = useState(false)
+
+  const isCurrentUserOrganization = session?.account_id === org.owner_account_id
+
+  const { data: userPackages, isLoading: isLoadingUserPackages } = useQuery<
+    Package[]
+  >(
+    ["userPackages", org.name],
+    async () => {
+      const response = await axios.post(`/packages/list`, {
+        owner_github_username: org.name,
+      })
+      return response.data.packages
+    },
+    {
+      enabled: Boolean(org.name),
+      refetchOnWindowFocus: false,
+    },
+  )
+
+  const filteredPackages = userPackages
+    ?.filter((pkg) => {
+      return (
+        !searchQuery ||
+        pkg.unscoped_name
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase().trim())
+      )
+    })
+    ?.sort((a, b) => {
+      switch (filter) {
+        case "most-recent":
+          return b.updated_at.localeCompare(a.updated_at)
+        case "least-recent":
+          return a.updated_at.localeCompare(b.updated_at)
+        case "most-starred":
+          return (b.star_count || 0) - (a.star_count || 0)
+        case "a-z":
+          return a.unscoped_name.localeCompare(b.unscoped_name)
+        case "z-a":
+          return b.unscoped_name.localeCompare(a.unscoped_name)
+        default:
+          return 0
+      }
+    })
+
+  return (
+    <div className="min-h-screen">
+      <Header />
+
+      <OrganizationHeader
+        organization={org}
+        isCurrentUserOrganization={isCurrentUserOrganization}
+      />
+
+      <div className="container mx-auto px-4 py-8">
+        <div className="w-full">
+          <div className="w-full">
+            <Tabs
+              defaultValue="packages"
+              onValueChange={setActiveTab}
+              className="mb-6"
+            >
+              <TabsList>
+                <TabsTrigger
+                  value="packages"
+                  className="flex items-center gap-2"
+                >
+                  Packages
+                </TabsTrigger>
+                <TabsTrigger
+                  value="members"
+                  className="flex items-center gap-2"
+                >
+                  Members
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+
+            {activeTab === "packages" && (
+              <div>
+                <div className="flex flex-col sm:flex-row gap-4 mb-6">
+                  <Input
+                    type="text"
+                    placeholder="Search packages..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="flex-1"
+                  />
+                  <Select value={filter} onValueChange={setFilter}>
+                    <SelectTrigger className="w-full sm:w-[180px]">
+                      <SelectValue placeholder="Sort by" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="most-recent">Most Recent</SelectItem>
+                      <SelectItem value="least-recent">Least Recent</SelectItem>
+                      <SelectItem value="most-starred">Most Starred</SelectItem>
+                      <SelectItem value="a-z">A-Z</SelectItem>
+                      <SelectItem value="z-a">Z-A</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {isLoadingUserPackages ? (
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {[...Array(6)].map((_, i) => (
+                      <PackageCardSkeleton key={i} />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {filteredPackages?.length !== 0 ? (
+                      filteredPackages?.map((pkg) => (
+                        <PackageCard
+                          key={pkg.package_id}
+                          pkg={pkg}
+                          baseUrl={baseUrl}
+                          showOwner={false}
+                          isCurrentUserPackage={isCurrentUserOrganization}
+                        />
+                      ))
+                    ) : (
+                      <div className="col-span-full flex justify-center">
+                        <div className="flex flex-col items-center py-20 text-gray-500">
+                          <Box className="mb-2" size={24} />
+                          <span className="text-lg font-medium">
+                            {searchQuery.trim()
+                              ? `No packages matching '${searchQuery.trim()}'`
+                              : "No packages available"}
+                          </span>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {activeTab === "members" && (
+              <div>
+                <OrganizationMembers orgId={org.org_id} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <Footer />
+    </div>
+  )
+}
+
+export const OrganizationProfilePage = () => {
+  const { username } = useParams()
+  const { data: organization } = useOrgByGithubHandle(username || null)
+
+  if (!organization) {
+    return <NotFound />
+  }
+
+  return <OrganizationProfilePageContent org={organization} />
+}