@tscircuit/fake-snippets 0.0.112 → 0.0.113

package/fake-snippets-api/routes/api/orgs/list_members.ts

@@ -15,7 +15,7 @@ export default withRouteSpec({
     ),
   auth: "optional_session",
   jsonResponse: z.object({
-    members: z.array(accountSchema),
+    members: z.array(accountSchema.extend({ joined_at: z.string() })),
   }),
 })(async (req, ctx) => {
   const params = req.commonParams as { org_id?: string; name?: string }
@@ -37,13 +37,17 @@ export default withRouteSpec({
 
   const members = ctx.db.orgAccounts
     .map((m) => {
-      if (m.org_id == org.org_id) return ctx.db.getAccount(m.account_id)
-      return undefined
+      if (m.org_id !== org.org_id) return undefined
+      const account = ctx.db.getAccount(m.account_id)
+      if (!account) return undefined
+      return {
+        ...account,
+        joined_at: m.created_at,
+      }
     })
     .filter(
       (member): member is NonNullable<typeof member> => member !== undefined,
     )
-
   const hasOwner = members.some((m) => m?.account_id === org.owner_account_id)
   let fullMembers = members
 
@@ -52,7 +56,13 @@ export default withRouteSpec({
       (acc) => acc.account_id === org.owner_account_id,
     )
     if (owner) {
-      fullMembers = [...members, owner]
+      fullMembers = [
+        ...members,
+        {
+          ...owner,
+          joined_at: org.created_at,
+        },
+      ]
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.112",
+  "version": "0.0.113",
   "type": "module",
   "repository": {
     "type": "git",

package/src/components/GithubAvatarWithFallback.tsx

@@ -5,16 +5,18 @@ export const GithubAvatarWithFallback = ({
   fallback,
   className,
   fallbackClassName,
+  size,
 }: {
   username?: string | null
   fallback?: string | null
   className?: string
   fallbackClassName?: string
+  size?: number
 }) => {
   return (
     <Avatar className={`border-4 border-gray-100 ${className}`}>
       <AvatarImage
-        src={`https://github.com/${username}.png`}
+        src={`https://github.com/${username}.png${size ? `?size=${size}` : ""}`}
         alt={`${username || fallback} avatar`}
         className="object-cover"
       />

package/src/components/HeaderLogin.tsx

@@ -35,7 +35,7 @@ export const HeaderLogin = () => {
       <DropdownMenuTrigger asChild>
         <Avatar className="w-8 h-8 login-avatar">
           <AvatarImage
-            src={`https://github.com/${session?.github_username}.png`}
+            src={`https://github.com/${session?.github_username}.png?size=40`}
             alt={`${session?.github_username}'s profile picture`}
           />
           <AvatarFallback aria-label="User avatar fallback">

package/src/components/ProfileRouter.tsx

@@ -4,15 +4,13 @@ import { OrganizationProfilePageContent } from "@/pages/organization-profile"
 import { UserProfilePage } from "@/pages/user-profile"
 import NotFoundPage from "@/pages/404"
 import { FullPageLoader } from "@/App"
-import { useOrgByName } from "@/hooks/use-org-by-org-name"
+import { useOrganization } from "@/hooks/use-organization"
 
 const ProfileRouter: React.FC = () => {
   const { username } = useParams()
-  const {
-    data: organization,
-    isLoading,
-    error,
-  } = useOrgByName(username || null)
+  const { organization, isLoading, error } = useOrganization({
+    orgName: username,
+  })
 
   if (!username) {
     return <NotFoundPage heading="Username Not Provided" />

package/src/components/UserCard.tsx

@@ -36,7 +36,7 @@ export const UserCard: React.FC<UserCardProps> = ({
       <div className="flex items-start gap-4">
         <div className="w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-gray-50 border flex items-center justify-center">
           <img
-            src={`https://github.com/${account.github_username}.png`}
+            src={`https://github.com/${account.github_username}.png?size=69`}
             alt={`${account.github_username} avatar`}
             className="object-cover h-full w-full transition-transform duration-300 hover:scale-110"
             onError={(e) => {

package/src/components/ViewPackagePage/components/build-status.tsx

@@ -1,4 +1,4 @@
-import { CheckCircle, XCircle, Clock, Loader2 } from "lucide-react"
+import { CheckCircle, XCircle, Clock, Loader2, Hourglass } from "lucide-react"
 import { Link, useParams } from "wouter"
 
 export interface BuildStep {
@@ -28,7 +28,7 @@ export const BuildStatus = ({ step, packageReleaseId }: BuildStatusProps) => {
         <Loader2 className="h-4 w-4 text-blue-600 animate-spin dark:text-[#8b949e]" />
       )}
       {step.status === "pending" && (
-        <Clock className="h-4 w-4 text-yellow-600 dark:text-[#8b949e]" />
+        <Hourglass className="h-4 w-4 text-gray-500 dark:text-[#8b949e]" />
       )}
       <span className="text-sm text-gray-500 dark:text-[#8b949e]">
         {step.name}

package/src/components/organization/OrganizationCard.tsx

@@ -94,6 +94,7 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({
             }
             fallback={organization.name}
             fallbackClassName=" font-semibold text-lg"
+            size={40}
           />
         </div>
 

package/src/components/organization/OrganizationHeader.tsx

@@ -45,6 +45,7 @@ export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
               fallback={organization.name}
               className="shadow-sm size-16 md:size-20 lg:size-24"
               fallbackClassName="font-bold text-xl md:text-2xl lg:text-3xl"
+              size={300}
             />
 
             <div>

package/src/components/organization/OrganizationMembers.tsx

@@ -122,12 +122,13 @@ export const OrganizationMembers: React.FC<OrganizationMembersProps> = ({
                   </p>
                 </div>
               </div>
-
-              <div className="text-right flex-shrink-0 hidden sm:block">
-                <p className="text-xs text-gray-500">
-                  Joined {timeAgo(new Date())}
-                </p>
-              </div>
+              {member.joined_at && (
+                <div className="text-right flex-shrink-0 hidden sm:block">
+                  <p className="text-xs text-gray-500">
+                    Joined {timeAgo(new Date(member.joined_at))}
+                  </p>
+                </div>
+              )}
             </div>
           </Link>
         ))}

package/src/components/preview/PackageReleasesDashboard.tsx

@@ -62,8 +62,8 @@ export const PackageReleasesDashboard = ({
         {/* Project Header */}
         <div className="bg-gray-50 border-b md:py-10">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-            <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
-              <div className="flex flex-col sm:flex-row sm:items-center gap-4">
+            <div className="flex flex-col md:justify-between md:flex-row lg:items-center lg:justify-between gap-6">
+              <div className="flex flex-col md:flex-row md:items-center gap-4">
                 <div className="w-12 hidden md:block h-12 rounded-lg overflow-hidden flex-shrink-0">
                   <img
                     src="https://github.com/tscircuit.png"
@@ -180,7 +180,7 @@ export const PackageReleasesDashboard = ({
                       <MoreHorizontal className="w-4 h-4" />
                     </Button>
                   </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
+                  <DropdownMenuContent align="end" className="ml-2">
                     {pkg.github_repo_full_name && (
                       <DropdownMenuItem asChild>
                         <a

package/src/hooks/use-list-org-members.ts

@@ -2,12 +2,16 @@ import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import type { Account } from "fake-snippets-api/lib/db/schema"
 
+interface MemberAccount extends Account {
+  joined_at?: string
+}
+
 export const useListOrgMembers = ({
   orgId,
   orgName,
 }: { orgId?: string; orgName?: string }) => {
   const axios = useAxios()
-  return useQuery<Account[], Error & { status: number }>(
+  return useQuery<MemberAccount[], Error & { status: number }>(
     ["orgs", "members", orgId || orgName],
     async () => {
       if (!orgId && !orgName) {

package/src/pages/release-detail.tsx

@@ -170,30 +170,32 @@ export default function ReleaseDetailPage() {
         </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" />
-                ))}
+        {Boolean(latestBuild) && (
+          <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>
-        </div>
+        )}
 
         {/* Main Content */}
         <ConnectedRepoOverview

package/src/pages/user-profile.tsx

@@ -154,7 +154,7 @@ export const UserProfilePage = () => {
         <div className="flex items-center gap-4 mb-6">
           <Avatar className="h-16 w-16">
             <AvatarImage
-              src={`https://github.com/${githubUsername}.png`}
+              src={`https://github.com/${githubUsername}.png?size=300`}
               draggable={false}
             />
             <AvatarFallback className="select-none">

package/src/hooks/use-org-by-org-name.ts

@@ -1,24 +0,0 @@
-import { useQuery } from "react-query"
-import { useAxios } from "@/hooks/use-axios"
-import type { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
-
-export const useOrgByName = (name: string | null) => {
-  const axios = useAxios()
-  return useQuery<PublicOrgSchema, Error & { status: number }>(
-    ["orgs", "by-org-name", name],
-    async () => {
-      if (!name) {
-        throw new Error("Organisation name is required")
-      }
-      const { data } = await axios.get("/orgs/get", {
-        params: { org_name: name },
-      })
-      return data.org
-    },
-    {
-      enabled: Boolean(name),
-      retry: false,
-      refetchOnWindowFocus: false,
-    },
-  )
-}