@tscircuit/fake-snippets 0.0.114 → 0.0.116

package/src/lib/utils/member-role.tsx

@@ -0,0 +1,61 @@
+import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+import { Crown, Shield, User } from "lucide-react"
+
+export type MemberRole = "owner" | "manager" | "member"
+
+export const getRoleName = (role: MemberRole) => {
+  return role.charAt(0).toUpperCase() + role.slice(1)
+}
+
+export const getMemberRole = (
+  organization: PublicOrgSchema,
+  accountId: string,
+): MemberRole => {
+  const isOwner =
+    String(accountId).trim() === String(organization.owner_account_id).trim()
+  const isManager = Object.values(organization.user_permissions ?? {}).some(
+    Boolean,
+  )
+  if (isOwner) {
+    return "owner"
+  }
+  if (isManager) {
+    return "manager"
+  }
+  return "member"
+}
+
+export const getRoleIcon = (role: MemberRole) => {
+  switch (role) {
+    case "owner":
+      return <Crown className="size-3" />
+    case "manager":
+      return <Shield className="size-3" />
+    case "member":
+      return <User className="size-3" />
+    default:
+      return <User className="size-3" />
+  }
+}
+
+export const getRoleColor = (role: MemberRole) => {
+  switch (role) {
+    case "owner":
+      return "bg-amber-100 text-amber-800 border-amber-200"
+    case "manager":
+      return "bg-blue-50 text-blue-700 border border-blue-200"
+    default:
+      return "bg-gray-100 text-gray-800 border-gray-200"
+  }
+}
+
+export const getRoleDescription = (role: MemberRole) => {
+  switch (role) {
+    case "owner":
+      return "Full access to organization settings"
+    case "manager":
+      return "Limited administrative privileges"
+    case "member":
+      return "Standard member access"
+  }
+}

package/src/pages/organization-profile.tsx

@@ -14,7 +14,6 @@ import {
   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"
@@ -175,7 +174,7 @@ export const OrganizationProfilePageContent = ({
 
             {activeTab === "members" && (
               <div>
-                <OrganizationMembers orgId={org.org_id} />
+                <OrganizationMembers organization={org} />
               </div>
             )}
           </div>

package/src/pages/organization-settings.tsx

@@ -32,23 +32,25 @@ import { useUpdateOrgMutation } from "@/hooks/use-update-org-mutation"
 import { useListOrgMembers } from "@/hooks/use-list-org-members"
 import { useAddOrgMemberMutation } from "@/hooks/use-add-org-member-mutation"
 import { useRemoveOrgMemberMutation } from "@/hooks/use-remove-org-member-mutation"
-import { useOrgByGithubHandle } from "@/hooks/use-org-by-github-handle"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { Account } from "fake-snippets-api/lib/db/schema"
+import { cn } from "@/lib/utils"
 import {
   Users,
-  Crown,
   AlertTriangle,
   Loader2,
   PlusIcon,
   ArrowLeft,
   Building2,
 } from "lucide-react"
+import { getMemberRole, getRoleDescription } from "@/lib/utils/member-role"
+import { RoleBadge } from "@/components/ui/role-badge"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import NotFoundPage from "@/pages/404"
 import { FullPageLoader } from "@/App"
 import { OrganizationHeader } from "@/components/organization/OrganizationHeader"
+import { useOrganization } from "@/hooks/use-organization"
 
 const organizationSettingsSchema = z.object({
   name: z
@@ -70,10 +72,12 @@ export default function OrganizationSettingsPage() {
   const session = useGlobalStore((s) => s.session)
 
   const {
-    data: organization,
+    organization,
     isLoading: isLoadingOrg,
     error: orgError,
-  } = useOrgByGithubHandle(orgname || null)
+  } = useOrganization({
+    orgName: orgname,
+  })
 
   const [showRemoveMemberDialog, setShowRemoveMemberDialog] = useState<{
     member: Account
@@ -461,65 +465,63 @@ export default function OrganizationSettingsPage() {
                       </p>
                     </div>
                   ) : (
-                    members.map((member) => (
-                      <div
-                        key={member.account_id}
-                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between p-5 hover:bg-gray-50 transition-all duration-200 gap-4 sm:gap-0"
-                      >
-                        <Link
-                          href={`/${member.github_username || member.account_id}`}
-                          className="flex items-center gap-4 group cursor-pointer flex-1 min-w-0"
+                    members.map((member) => {
+                      const role = getMemberRole(
+                        organization,
+                        member.account_id,
+                      )
+                      return (
+                        <div
+                          key={member.account_id}
+                          className="flex flex-col sm:flex-row sm:items-center sm:justify-between p-5 hover:bg-gray-50 transition-all duration-200 gap-4 sm:gap-0"
                         >
-                          <Avatar className="h-12 w-12 border-2 border-gray-200 shadow-sm">
-                            <AvatarImage
-                              src={`https://github.com/${member.github_username}.png`}
-                              alt={`${member.github_username} avatar`}
-                            />
-                            <AvatarFallback className="text-sm bg-gradient-to-br from-blue-100 to-indigo-100 text-blue-700 font-medium">
-                              {(
-                                member.github_username ||
-                                member.account_id ||
-                                ""
-                              )
-                                .slice(0, 2)
-                                .toUpperCase()}
-                            </AvatarFallback>
-                          </Avatar>
-                          <div className="min-w-0 flex-1">
-                            <div className="flex items-center gap-2 mb-1">
-                              <span className="font-semibold text-gray-900 text-base group-hover:text-blue-600 transition-colors truncate">
-                                {member.github_username || member.account_id}
-                              </span>
-                              {member.account_id ===
-                                organization.owner_account_id && (
-                                <div className="flex items-center gap-1 px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium flex-shrink-0">
-                                  <Crown className="h-3 w-3" />
-                                  Owner
-                                </div>
-                              )}
+                          <Link
+                            href={`/${member.github_username || member.account_id}`}
+                            className="flex items-center gap-4 group cursor-pointer flex-1 min-w-0"
+                          >
+                            <Avatar className="h-12 w-12">
+                              <AvatarImage
+                                src={`https://github.com/${member.github_username}.png`}
+                                alt={`${member.github_username} avatar`}
+                              />
+                              <AvatarFallback className="text-sm font-medium">
+                                {(
+                                  member.github_username ||
+                                  member.account_id ||
+                                  ""
+                                )
+                                  .slice(0, 2)
+                                  .toUpperCase()}
+                              </AvatarFallback>
+                            </Avatar>
+                            <div className="min-w-0 flex-1">
+                              <div className="flex items-center gap-2">
+                                <span className="font-semibold text-gray-900 text-base group-hover:text-blue-600 transition-colors truncate">
+                                  {member.github_username || member.account_id}
+                                </span>
+                                {role !== "member" && <RoleBadge role={role} />}
+                              </div>
+                              <p className="text-sm text-gray-500 truncate">
+                                {getRoleDescription(role)}
+                              </p>
                             </div>
-                            <p className="text-sm text-gray-500 truncate">
-                              {member.account_id ===
-                              organization.owner_account_id
-                                ? "Full access to organization settings"
-                                : "Standard member access"}
-                            </p>
-                          </div>
-                        </Link>
-                        {member.account_id !== organization.owner_account_id &&
-                          member.account_id !== session?.account_id && (
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => handleRemoveMember(member)}
-                              disabled={removeMemberMutation.isLoading}
-                              className="text-red-600 hover:text-red-700 hover:bg-red-50 border border-red-200 hover:border-red-300 self-start sm:self-center px-4 py-2"
-                            >
-                              Remove
-                            </Button>
-                          )}
-                      </div>
-                    ))
+                          </Link>
+                          {member.account_id !==
+                            organization.owner_account_id &&
+                            member.account_id !== session?.account_id && (
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => handleRemoveMember(member)}
+                                disabled={removeMemberMutation.isLoading}
+                                className="text-red-600 hover:text-red-700 hover:bg-red-50 border border-red-200 hover:border-red-300 self-start sm:self-center px-4 py-2"
+                              >
+                                Remove
+                              </Button>
+                            )}
+                        </div>
+                      )
+                    })
                   )}
                 </div>
               </div>

package/src/pages/release-detail.tsx

@@ -14,6 +14,7 @@ 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"
+import { getBuildStatus } from "@/components/preview"
 
 export default function ReleaseDetailPage() {
   const params = useParams<{
@@ -60,7 +61,7 @@ export default function ReleaseDetailPage() {
   const session = useGlobalStore((s) => s.session)
   const { mutate: rebuildPackage, isLoading: isRebuildLoading } =
     useRebuildPackageReleaseMutation()
-
+  const { status } = getBuildStatus(latestBuild ?? null)
   if (isLoadingPackage || isLoadingRelease) {
     return (
       <>
@@ -170,7 +171,7 @@ export default function ReleaseDetailPage() {
         </div>
 
         {/* Images Section - Always show with skeletons while loading */}
-        {Boolean(latestBuild) && (
+        {Boolean(latestBuild) && status != "error" && (
           <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