@tscircuit/fake-snippets 0.0.109 → 0.0.110

package/src/components/dialogs/new-package-save-prompt-dialog.tsx

@@ -0,0 +1,190 @@
+import { useState, useEffect, useMemo } from "react"
+import { Button } from "../ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "../ui/dialog"
+import { Input } from "../ui/input"
+import { Label } from "../ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select"
+import { createUseDialog } from "./create-use-dialog"
+import { useListUserOrgs } from "@/hooks/use-list-user-orgs"
+import { useGlobalStore } from "@/hooks/use-global-store"
+
+export const NewPackageSavePromptDialog = ({
+  open,
+  onOpenChange,
+  initialIsPrivate = false,
+  initialName = "",
+  onSave,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  initialIsPrivate?: boolean
+  initialName?: string
+  onSave: ({
+    name,
+    isPrivate,
+    orgId,
+  }: {
+    name?: string
+    isPrivate: boolean
+    orgId: string
+  }) => void
+}) => {
+  const [packageName, setPackageName] = useState(initialName)
+  const session = useGlobalStore((s) => s.session)
+  const [isPrivate, setIsPrivate] = useState(initialIsPrivate)
+  const [selectedOrgId, setSelectedOrgId] = useState<string>("")
+  const { data: organizations, isLoading: orgsLoading } = useListUserOrgs()
+  const fullPackageName = useMemo(() => {
+    if (selectedOrgId) {
+      return `${organizations?.find((x) => x.org_id === selectedOrgId)?.name}/${packageName}`
+    }
+    return `${session?.github_username}/${packageName}`
+  }, [selectedOrgId, packageName, organizations, session?.github_username])
+  useEffect(() => {
+    if (organizations && organizations.length > 0 && !selectedOrgId) {
+      setSelectedOrgId(
+        organizations.find((x) => x.is_personal_org)?.org_id ||
+          organizations[0].org_id,
+      )
+    }
+  }, [organizations, selectedOrgId])
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Creating new package</DialogTitle>
+          <DialogDescription>
+            Would you like to save this package?
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-1">
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Organization</Label>
+            <Select
+              value={selectedOrgId}
+              onValueChange={setSelectedOrgId}
+              disabled={orgsLoading}
+            >
+              <SelectTrigger className="w-full">
+                <div className="flex items-center gap-2 flex-1">
+                  {selectedOrgId && organizations ? (
+                    <span className="truncate">
+                      {organizations.find((org) => org.org_id === selectedOrgId)
+                        ?.display_name ||
+                        organizations.find(
+                          (org) => org.org_id === selectedOrgId,
+                        )?.name ||
+                        `Org ${selectedOrgId.slice(0, 8)}`}
+                    </span>
+                  ) : (
+                    <span className="text-slate-500">
+                      {orgsLoading
+                        ? "Loading organizations..."
+                        : "Select organization"}
+                    </span>
+                  )}
+                </div>
+              </SelectTrigger>
+              <SelectContent className="!z-[999]">
+                {organizations?.length === 0 ? (
+                  <div className="px-2 py-1.5 text-sm text-slate-500">
+                    No organizations found
+                  </div>
+                ) : (
+                  organizations?.map((org) => (
+                    <SelectItem
+                      key={org.org_id}
+                      value={org.org_id}
+                      className="cursor-pointer"
+                    >
+                      {org.display_name ||
+                        org.name ||
+                        `Org ${org.org_id.slice(0, 8)}`}
+                    </SelectItem>
+                  ))
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Package Name</Label>
+            <Input
+              value={packageName}
+              onChange={(e) => setPackageName(e.target.value)}
+              placeholder="Untitled Package"
+              className="w-full"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
+              <div className="space-y-1 flex-1">
+                <Label className="text-sm font-medium">Visibility</Label>
+                <p className="text-xs text-slate-500">
+                  {isPrivate
+                    ? "Only you can view and use this package"
+                    : "Anyone can view and use your package"}
+                </p>
+              </div>
+              <Select
+                value={isPrivate ? "private" : "public"}
+                onValueChange={(value) => setIsPrivate(value === "private")}
+              >
+                <SelectTrigger className="w-full sm:w-32 sm:mt-2">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className="!z-[999]">
+                  <SelectItem value="public" className="cursor-pointer">
+                    <div className="flex items-center gap-2">
+                      <span>Public</span>
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="private" className="cursor-pointer">
+                    <div className="flex items-center gap-2">
+                      <span>Private</span>
+                    </div>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              onSave({
+                name: fullPackageName.trim(),
+                isPrivate,
+                orgId: selectedOrgId,
+              })
+              onOpenChange(false)
+            }}
+            disabled={!selectedOrgId || orgsLoading || !session}
+          >
+            Save
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const useNewPackageSavePromptDialog = createUseDialog(
+  NewPackageSavePromptDialog,
+)

package/src/components/organization/OrganizationCard.tsx

@@ -0,0 +1,204 @@
+import React from "react"
+import { Link } from "wouter"
+import {
+  Users,
+  Package,
+  Globe,
+  Lock,
+  MoreVertical,
+  Share2,
+  Settings,
+} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { timeAgo } from "@/lib/utils/timeAgo"
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
+import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+import { useGlobalStore } from "@/hooks/use-global-store"
+
+export interface OrganizationCardProps {
+  /** The organization data to display */
+  organization: PublicOrgSchema
+  /** Whether to show member count */
+  showMembers?: boolean
+  /** Whether to show statistics (packages, members) */
+  showStats?: boolean
+  /** Callback when the card is clicked */
+  onClick?: (org: PublicOrgSchema) => void
+  /** Custom class name for the card container */
+  className?: string
+  /** Whether to render the card with a link to the organization page */
+  withLink?: boolean
+  /** Custom render function for actions */
+  renderActions?: (org: PublicOrgSchema) => React.ReactNode
+}
+
+export const OrganizationCard: React.FC<OrganizationCardProps> = ({
+  organization,
+  showMembers = true,
+  showStats = true,
+  onClick,
+  className = "",
+  withLink = true,
+  renderActions,
+}) => {
+  const { copyToClipboard } = useCopyToClipboard()
+  const { session } = useGlobalStore()
+
+  const canManageOrg =
+    organization.owner_account_id === session?.account_id ||
+    organization.user_permissions?.can_manage_org
+
+  const handleCardClick = (e: React.MouseEvent) => {
+    if (onClick && !withLink) {
+      e.preventDefault()
+      onClick(organization)
+    }
+  }
+
+  const handleShareClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const shareUrl = `${window.location.origin}/${organization.name}`
+    copyToClipboard(shareUrl)
+  }
+
+  const handleSettingsClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    window.location.href = `/${organization.name}/settings`
+  }
+
+  const cardContent = (
+    <div
+      className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 ${className}`}
+      onClick={handleCardClick}
+    >
+      <div className="flex items-start gap-4">
+        {/* Organization Avatar */}
+        <div className="flex-shrink-0">
+          <Avatar className="h-16 w-16 border-2 border-gray-100">
+            <AvatarImage
+              src={`https://github.com/${organization.name}.png`}
+              alt={`${organization.name} avatar`}
+              className="object-cover"
+            />
+            <AvatarFallback className="bg-blue-100 text-blue-600 font-semibold text-lg">
+              {organization.name
+                ?.split(" ")
+                .map((word) => word[0])
+                .join("")
+                .toUpperCase()
+                .slice(0, 2)}
+            </AvatarFallback>
+          </Avatar>
+        </div>
+
+        {/* Organization Info */}
+        <div className="flex-1 min-w-0">
+          <div className="flex justify-between items-start mb-1">
+            <div className="min-w-0 flex-1">
+              <h2 className="text-md font-semibold text-gray-900 truncate pr-8">
+                {organization.name}
+              </h2>
+            </div>
+
+            {/* Actions Dropdown */}
+            <div className="flex items-center gap-2">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <MoreVertical className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    className="text-xs cursor-pointer"
+                    onClick={handleShareClick}
+                  >
+                    <Share2 className="mr-2 h-3 w-3" />
+                    Share Organization
+                  </DropdownMenuItem>
+                  {canManageOrg && (
+                    <DropdownMenuItem
+                      className="text-xs cursor-pointer"
+                      onClick={handleSettingsClick}
+                    >
+                      <Settings className="mr-2 h-3 w-3" />
+                      Organization Settings
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+              {renderActions && renderActions(organization)}
+            </div>
+          </div>
+
+          {/* Statistics and Metadata */}
+          <div className="flex items-center gap-4 text-xs text-gray-500 mb-1">
+            {/* Visibility */}
+            <div className="flex items-center gap-1">
+              {!organization.is_personal_org ? (
+                <>
+                  <Globe className="h-3 w-3" />
+                  <span>Public</span>
+                </>
+              ) : (
+                <>
+                  <Lock className="h-3 w-3" />
+                  <span>Personal</span>
+                </>
+              )}
+            </div>
+
+            {/* Statistics */}
+            {showStats && (
+              <>
+                {showMembers && !organization.is_personal_org && (
+                  <div className="flex items-center gap-1">
+                    <Users className="h-3 w-3" />
+                    <span>{organization.member_count} members</span>
+                  </div>
+                )}
+                <div className="flex items-center gap-1">
+                  <Package className="h-3 w-3" />
+                  <span>{organization.package_count} packages</span>
+                </div>
+              </>
+            )}
+          </div>
+
+          {/* Created time */}
+          <div className="text-xs text-gray-400">
+            <span>Created {timeAgo(new Date(organization.created_at))}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+
+  if (withLink) {
+    return (
+      <Link
+        key={organization.org_id}
+        href={`/${organization.name}`}
+        className="block"
+      >
+        {cardContent}
+      </Link>
+    )
+  }
+
+  return cardContent
+}

package/src/components/organization/OrganizationCardSkeleton.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+
+export const OrganizationCardSkeleton: React.FC = () => {
+  return (
+    <div className="border p-4 rounded-md animate-pulse">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-start gap-4">
+          {/* Organization Avatar skeleton */}
+          <div className="flex-shrink-0">
+            <div className="h-16 w-16 rounded-full bg-slate-200 border-2 border-gray-100"></div>
+          </div>
+
+          {/* Organization Info skeleton */}
+          <div className="flex-1 min-w-0">
+            <div className="flex justify-between items-start mb-1">
+              <div className="min-w-0 flex-1">
+                {/* Organization name */}
+                <div className="h-5 bg-slate-200 rounded w-3/4 sm:w-1/2 mb-1"></div>
+              </div>
+
+              {/* Actions dropdown skeleton */}
+              <div className="flex items-center gap-2">
+                <div className="h-6 w-6 bg-slate-200 rounded"></div>
+              </div>
+            </div>
+
+            {/* Statistics and Metadata skeleton */}
+            <div className="flex flex-wrap items-center gap-2 sm:gap-4 text-xs mb-1">
+              {/* Visibility */}
+              <div className="flex items-center gap-1">
+                <div className="h-3 w-3 bg-slate-200 rounded"></div>
+                <div className="h-3 bg-slate-200 rounded w-8 sm:w-12"></div>
+              </div>
+
+              {/* Members */}
+              <div className="flex items-center gap-1">
+                <div className="h-3 w-3 bg-slate-200 rounded"></div>
+                <div className="h-3 bg-slate-200 rounded w-12 sm:w-16"></div>
+              </div>
+
+              {/* Packages */}
+              <div className="flex items-center gap-1">
+                <div className="h-3 w-3 bg-slate-200 rounded"></div>
+                <div className="h-3 bg-slate-200 rounded w-14 sm:w-16"></div>
+              </div>
+            </div>
+
+            {/* Created time skeleton */}
+            <div className="h-3 bg-slate-200 rounded w-20 sm:w-24"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/organization/OrganizationHeader.tsx

@@ -0,0 +1,154 @@
+import React, { useState } from "react"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Building2, Users, Package, Lock, Globe2, Settings } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { useLocation } from "wouter"
+import { useOrganization } from "@/hooks/use-organization"
+
+interface OrganizationHeaderProps {
+  organization: PublicOrgSchema
+  isCurrentUserOrganization?: boolean
+  className?: string
+  showActions?: boolean
+}
+
+export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
+  organization,
+  className,
+  showActions = true,
+}) => {
+  const session = useGlobalStore((s) => s.session)
+  const [, navigate] = useLocation()
+  const canManageOrg =
+    organization.user_permissions?.can_manage_org ||
+    organization.owner_account_id === session?.account_id
+
+  const { membersCount, packagesCount, isLoading } = useOrganization({
+    orgId: organization.org_id,
+    orgName: organization.name!,
+  })
+
+  const handleSettingsClick = () => {
+    navigate(`/${organization.name}/settings`)
+  }
+  return (
+    <div className={cn("bg-white border-b border-gray-200", className)}>
+      <div className="container mx-auto px-6 py-6">
+        {/* Mobile Layout */}
+        <div className="block sm:hidden">
+          <div className="flex flex-col items-center text-center space-y-4">
+            <Avatar className="border-4 border-gray-100 shadow-sm size-16 md:size-20 lg:size-24">
+              <AvatarImage
+                src={`https://github.com/${organization.name}.png`}
+                alt={`${organization.name} avatar`}
+                className="object-cover"
+              />
+              <AvatarFallback className="bg-blue-100 text-blue-600 font-bold text-xl md:text-2xl lg:text-3xl">
+                {(organization.name || "")
+                  .split(" ")
+                  .map((word) => word[0])
+                  .join("")
+                  .toUpperCase()
+                  .slice(0, 2)}
+              </AvatarFallback>
+            </Avatar>
+
+            <div>
+              <div className="flex flex-col items-center gap-3 mb-3">
+                <h1 className="font-bold text-gray-900 text-xl">
+                  {organization.name}
+                </h1>
+                {canManageOrg && showActions && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleSettingsClick}
+                  >
+                    <Settings className="mr-2 h-4 w-4" />
+                    Settings
+                  </Button>
+                )}
+              </div>
+
+              <div className="grid grid-cols-2 md:flex flex-wrap justify-center gap-4 text-sm">
+                <div className="flex items-center gap-1.5 text-gray-600">
+                  <Users className="h-3.5 w-3.5" />
+                  <span className="font-medium">
+                    {isLoading ? "..." : membersCount}
+                  </span>
+                  <span>members</span>
+                </div>
+                <div className="flex items-center gap-1.5 text-gray-600">
+                  <Package className="h-3.5 w-3.5" />
+                  <span className="font-medium">
+                    {isLoading ? "..." : packagesCount}
+                  </span>
+                  <span>packages</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Desktop Layout */}
+        <div className="hidden sm:block">
+          <div className="flex items-center gap-6">
+            <Avatar className="border-4 border-gray-100 shadow-sm size-16 md:size-20 lg:size-24 flex-shrink-0">
+              <AvatarImage
+                src={`https://github.com/${organization.name}.png`}
+                alt={`${organization.name} avatar`}
+                className="object-cover"
+              />
+              <AvatarFallback className="bg-blue-100 text-blue-600 font-bold text-xl md:text-2xl lg:text-3xl">
+                {(organization.name || "")
+                  .split(" ")
+                  .map((word) => word[0])
+                  .join("")
+                  .toUpperCase()
+                  .slice(0, 2)}
+              </AvatarFallback>
+            </Avatar>
+
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center justify-between mb-3">
+                <h1 className="font-bold text-gray-900 text-2xl md:text-3xl truncate">
+                  {organization.name}
+                </h1>
+                {canManageOrg && showActions && (
+                  <Button variant="outline" onClick={handleSettingsClick}>
+                    <Settings className="mr-2 h-4 w-4" />
+                    Settings
+                  </Button>
+                )}
+              </div>
+
+              <div className="flex flex-wrap items-center gap-6 text-sm text-gray-600">
+                <div className="flex items-center gap-2">
+                  <Users className="h-4 w-4" />
+                  <span className="font-medium text-gray-900">
+                    {isLoading ? "..." : membersCount}
+                  </span>
+                  <span>members</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Package className="h-4 w-4" />
+                  <span className="font-medium text-gray-900">
+                    {isLoading ? "..." : packagesCount}
+                  </span>
+                  <span>packages</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Building2 className="h-4 w-4" />
+                  <span>Organization</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}