@tscircuit/fake-snippets 0.0.102 → 0.0.103

package/src/components/preview/ConnectedRepoDashboard.tsx

@@ -24,33 +24,28 @@ import {
 import { useLocation } from "wouter"
 import { ConnectedRepoOverview } from "./ConnectedRepoOverview"
 import { BuildsList } from "./BuildsList"
-import { ConnectedRepoSettings } from "./ConnectedRepoSettings"
 import Header from "../Header"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
-import { getBuildStatus, PackageBuild, MOCK_DEPLOYMENTS } from "."
-
-interface ConnectedRepoDashboardProps {
-  projectName?: string
-  builds?: PackageBuild[]
-  selectedBuild?: PackageBuild
-}
+import {
+  getBuildStatus,
+  PackageBuild,
+  MOCK_DEPLOYMENTS,
+  getPackageFromBuild,
+} from "."
+import { PrefetchPageLink } from "../PrefetchPageLink"
 
 export const ConnectedRepoDashboard = ({
-  projectName = "tscircuit-project",
-  builds = MOCK_DEPLOYMENTS,
-  selectedBuild,
-}: ConnectedRepoDashboardProps) => {
+  latestBuild,
+}: {
+  latestBuild: PackageBuild
+}) => {
   const [activeTab, setActiveTab] = useState("overview")
-  const [currentBuild, setCurrentBuild] = useState<PackageBuild | undefined>(
-    selectedBuild || builds[0],
-  )
   const [, setLocation] = useLocation()
-
+  const pkg = getPackageFromBuild(latestBuild)
   const handleSelectBuild = (build: PackageBuild) => {
     setLocation(`/build/${build.package_build_id}`)
+    setActiveTab("overview")
   }
-
-  const latestBuild = builds[0]
   const { status, label } = getBuildStatus(latestBuild)
 
   return (
@@ -71,9 +66,12 @@ export const ConnectedRepoDashboard = ({
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className="flex flex-col sm:flex-row sm:items-center gap-3">
-                    <h1 className="text-2xl font-bold text-gray-900 truncate">
-                      {projectName}
-                    </h1>
+                    <PrefetchPageLink
+                      href={"/" + pkg.name}
+                      className="text-2xl font-bold text-gray-900 truncate"
+                    >
+                      {pkg.unscoped_name}
+                    </PrefetchPageLink>
                     <Badge
                       variant={
                         status === "success"
@@ -99,7 +97,15 @@ export const ConnectedRepoDashboard = ({
                     </Badge>
                   </div>
                   <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mt-2 text-sm text-gray-600">
-                    <div className="flex items-center gap-1">
+                    <div
+                      className="flex cursor-pointer items-center gap-1"
+                      onClick={() =>
+                        window?.open(
+                          `https://github.com/${pkg.github_repo_full_name}/tree/${latestBuild.branch_name || "main"}`,
+                          "_blank",
+                        )
+                      }
+                    >
                       <GitBranch className="w-4 h-4 flex-shrink-0" />
                       <span className="truncate">
                         {latestBuild.branch_name || "main"}
@@ -108,19 +114,9 @@ export const ConnectedRepoDashboard = ({
                     <div className="flex items-center gap-1">
                       <Clock className="w-4 h-4 flex-shrink-0" />
                       <span>
-                        Last deployed {formatTimeAgo(latestBuild.created_at)}
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-1">
-                      <User className="w-4 h-4 flex-shrink-0" />
-                      <span className="truncate">
-                        {latestBuild.commit_author || "Unknown"}
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-1">
-                      <Hash className="w-4 h-4 flex-shrink-0" />
-                      <span className="font-mono text-xs truncate">
-                        {latestBuild.package_build_id?.slice(-8) || "N/A"}
+                        <time dateTime={latestBuild.created_at}>
+                          Last deployed {formatTimeAgo(latestBuild.created_at)}
+                        </time>
                       </span>
                     </div>
                   </div>
@@ -134,7 +130,7 @@ export const ConnectedRepoDashboard = ({
                   className="flex items-center gap-2 justify-center min-w-[120px] h-9"
                   onClick={() =>
                     window.open(
-                      `https://github.com/${latestBuild.commit_author}/${projectName}`,
+                      `https://github.com/${pkg.github_repo_full_name}`,
                       "_blank",
                     )
                   }
@@ -181,7 +177,7 @@ export const ConnectedRepoDashboard = ({
                   <DropdownMenuContent align="end">
                     <DropdownMenuItem asChild>
                       <a
-                        href={`https://github.com/${latestBuild.commit_author}`}
+                        href={`https://github.com/${pkg.github_repo_full_name}`}
                         target="_blank"
                         rel="noopener noreferrer"
                       >
@@ -197,7 +193,7 @@ export const ConnectedRepoDashboard = ({
                       onClick={() => {
                         if (navigator.share) {
                           navigator.share({
-                            title: projectName,
+                            title: pkg.unscoped_name,
                             url: window.location.href,
                           })
                         } else {
@@ -221,7 +217,7 @@ export const ConnectedRepoDashboard = ({
             onValueChange={setActiveTab}
             className="space-y-6"
           >
-            <TabsList className="grid w-full grid-cols-3 lg:w-auto lg:grid-cols-3">
+            <TabsList className="grid w-full grid-cols-2 lg:w-auto lg:grid-cols-2">
               <TabsTrigger value="overview" className="flex items-center gap-2">
                 <Activity className="w-4 h-4" />
                 Overview
@@ -230,25 +226,14 @@ export const ConnectedRepoDashboard = ({
                 <List className="w-4 h-4" />
                 Builds
               </TabsTrigger>
-              <TabsTrigger value="settings" className="flex items-center gap-2">
-                <Settings className="w-4 h-4" />
-                Settings
-              </TabsTrigger>
             </TabsList>
 
             <TabsContent value="overview" className="space-y-6">
-              {currentBuild && <ConnectedRepoOverview build={currentBuild} />}
+              {latestBuild && <ConnectedRepoOverview build={latestBuild} />}
             </TabsContent>
 
             <TabsContent value="builds" className="space-y-6">
-              <BuildsList builds={builds} onSelectBuild={handleSelectBuild} />
-            </TabsContent>
-
-            <TabsContent value="settings" className="space-y-6">
-              <ConnectedRepoSettings
-                projectName={projectName}
-                onSave={(settings) => console.log("Settings saved:", settings)}
-              />
+              <BuildsList pkg={pkg} onSelectBuild={handleSelectBuild} />
             </TabsContent>
           </Tabs>
         </div>

package/src/components/preview/ConnectedRepoOverview.tsx

@@ -198,7 +198,7 @@ export const ConnectedRepoOverview = ({
       </div>
 
       <div className="space-y-3">
-        <h2 className="text-lg font-semibold text-gray-900">Build Steps</h2>
+        <h2 className="text-lg font-semibold text-gray-900">Logs</h2>
 
         <Collapsible
           open={openSections.transpilation}
@@ -387,7 +387,7 @@ export const ConnectedRepoOverview = ({
                 ) : (
                   <Clock className="w-5 h-5 text-gray-400" />
                 )}
-                <span className="font-medium">Final Build</span>
+                <span className="font-medium">Build</span>
               </div>
               <div className="flex items-center gap-2">
                 {getStepDuration(

package/src/components/preview/index.tsx

@@ -1,6 +1,5 @@
 export { ConnectedRepoOverview } from "./ConnectedRepoOverview"
 export { BuildsList } from "./BuildsList"
-export { ConnectedRepoSettings } from "./ConnectedRepoSettings"
 export { ConnectedRepoDashboard } from "./ConnectedRepoDashboard"
 
 export const getBuildStatus = (build: PackageBuild) => {
@@ -192,6 +191,7 @@ export const MOCK_DEPLOYMENTS: PackageBuild[] = [
   },
 ]
 
+import { Package, PackageRelease } from "fake-snippets-api/lib/db/schema"
 import { Clock, CheckCircle, AlertCircle, Loader2 } from "lucide-react"
 export const StatusIcon = ({ status }: { status: string }) => {
   switch (status) {
@@ -205,3 +205,44 @@ export const StatusIcon = ({ status }: { status: string }) => {
       return <Clock className="w-4 h-4 text-gray-500" />
   }
 }
+
+export const getLatestBuildForPackage = (pkg: Package): PackageBuild => {
+  return MOCK_DEPLOYMENTS[0]
+}
+export const getLatestBuildFromPackageRelease = (
+  pkg: PackageRelease,
+): PackageBuild => {
+  return MOCK_DEPLOYMENTS[0]
+}
+export const getPackageFromBuild = (build: PackageBuild): Package => {
+  return {
+    ai_description: "placeholder ai description",
+    ai_usage_instructions: "placeholder ai usage instructions",
+    created_at: "2025-08-06T14:37:05.802Z",
+    creator_account_id: "account-1234",
+    default_view: "files",
+    description: "placeholder ai description",
+    github_repo_full_name: "testuser/pcb-designs",
+    is_board: false,
+    is_footprint: false,
+    is_model: false,
+    is_package: false,
+    is_private: false,
+    is_public: true,
+    is_snippet: false,
+    is_source_from_github: false,
+    is_unlisted: false,
+    latest_package_release_fs_sha: "md5-425b47ef26be8f0863eca9e63e516dfa",
+    latest_package_release_id: "package_release_1754491026466",
+    latest_version: "0.0.1",
+    license: null,
+    name: "testuser/untitled-package-0",
+    owner_github_username: "testuser",
+    owner_org_id: "org-1234",
+    package_id: "package_1754491025802",
+    star_count: 0,
+    unscoped_name: "untitled-package-0",
+    updated_at: "2025-08-06T14:37:25.083Z",
+    website: "",
+  }
+}

package/src/pages/user-profile.tsx

@@ -25,7 +25,7 @@ import {
 } from "@/components/ui/select"
 import { Box, Star } from "lucide-react"
 import { PackageCardSkeleton } from "@/components/PackageCardSkeleton"
-import { ConnectedReposCards } from "@/components/preview/ConnectedReposCards"
+import { ConnectedPackagesList } from "@/components/preview/ConnectedPackagesList"
 
 export const UserProfilePage = () => {
   const { username } = useParams()
@@ -101,7 +101,6 @@ export const UserProfilePage = () => {
   if (accountError) {
     return <NotFoundPage heading="User Not Found" />
   }
-
   const packagesToShow =
     activeTab === "starred" ? starredPackages : userPackages
   const isLoading =
@@ -179,9 +178,13 @@ export const UserProfilePage = () => {
           <TabsList>
             <TabsTrigger value="all">Packages</TabsTrigger>
             <TabsTrigger value="starred">Starred Packages</TabsTrigger>
-            {isCurrentUserProfile && (
-              <TabsTrigger value="repos">Connected Repositories</TabsTrigger>
-            )}
+            {isCurrentUserProfile &&
+              (
+                userPackages?.filter((x) => Boolean(x.github_repo_full_name)) ??
+                []
+              ).length > 0 && (
+                <TabsTrigger value="repos">Connected Repositories</TabsTrigger>
+              )}
           </TabsList>
         </Tabs>
         {activeTab !== "repos" && (
@@ -208,7 +211,12 @@ export const UserProfilePage = () => {
           </div>
         )}
         {activeTab === "repos" ? (
-          <ConnectedReposCards user={String(githubUsername)} />
+          <ConnectedPackagesList
+            packages={
+              userPackages?.filter((x) => Boolean(x.github_repo_full_name)) ??
+              []
+            }
+          />
         ) : isLoading ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
             {[...Array(6)].map((_, i) => (

package/src/pages/view-connected-repo.tsx

@@ -14,11 +14,5 @@ export default function ViewConnectedRepoOverview() {
     return <NotFoundPage heading="Build Not Found" />
   }
 
-  return (
-    <ConnectedRepoDashboard
-      projectName="tscircuit-project"
-      builds={MOCK_DEPLOYMENTS}
-      selectedBuild={selectedBuild}
-    />
-  )
+  return <ConnectedRepoDashboard latestBuild={selectedBuild} />
 }

package/src/components/preview/ConnectedRepoSettings.tsx

@@ -1,343 +0,0 @@
-import { useEffect, useState } from "react"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
-import { Textarea } from "@/components/ui/textarea"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/components/ui/alert-dialog"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Settings, Github, Shield, Trash2, Save } from "lucide-react"
-
-interface ConnectedRepoSettingsProps {
-  projectName?: string
-  onSave?: (settings: any) => void
-}
-
-export const ConnectedRepoSettings = ({
-  projectName = "tscircuit-project",
-  onSave,
-}: ConnectedRepoSettingsProps) => {
-  // MOCK
-  const initialSettings = {
-    general: {
-      projectName: projectName,
-      description: "A TypeScript circuit design project",
-    },
-    git: {
-      repository: "github.com/user/tscircuit-project",
-      productionBranch: "main",
-      autoBuildEnabled: true,
-      prComment: true,
-      buildPrs: true,
-    },
-    security: {
-      privateBuilds: false,
-      requireApprovalForPrs: true,
-    },
-  }
-
-  const [settings, setSettings] = useState(initialSettings)
-  const [hasChanges, setHasChanges] = useState(false)
-
-  // Track changes
-  useEffect(() => {
-    const isChanged =
-      JSON.stringify(settings) !== JSON.stringify(initialSettings)
-    setHasChanges(isChanged)
-  }, [settings])
-
-  const handleSave = () => {
-    onSave?.(settings)
-    setHasChanges(false)
-  }
-
-  return (
-    <div className="space-y-4 sm:space-y-6 p-4 sm:p-6">
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-        <div>
-          <h2 className="text-xl sm:text-2xl font-bold text-gray-900">
-            Settings
-          </h2>
-          <p className="text-sm sm:text-base text-gray-600">
-            Configure your build settings
-          </p>
-        </div>
-        <div className="flex justify-end">
-          <Button
-            onClick={handleSave}
-            disabled={!hasChanges}
-            className="flex items-center gap-2 w-full sm:w-auto"
-          >
-            <Save className="w-4 h-4" />
-            Save Changes
-          </Button>
-        </div>
-      </div>
-
-      <Tabs defaultValue="general" className="space-y-4 sm:space-y-6">
-        <TabsList className="grid w-full grid-cols-3">
-          <TabsTrigger
-            value="general"
-            className="flex items-center gap-1 sm:gap-2 text-xs sm:text-sm"
-          >
-            <Settings className="w-3 h-3 sm:w-4 sm:h-4" />
-            <span className="hidden sm:inline">General</span>
-            <span className="sm:hidden">Gen</span>
-          </TabsTrigger>
-          <TabsTrigger
-            value="git"
-            className="flex items-center gap-1 sm:gap-2 text-xs sm:text-sm"
-          >
-            <Github className="w-3 h-3 sm:w-4 sm:h-4" />
-            Git
-          </TabsTrigger>
-          <TabsTrigger
-            value="security"
-            className="flex items-center gap-1 sm:gap-2 text-xs sm:text-sm"
-          >
-            <Shield className="w-3 h-3 sm:w-4 sm:h-4" />
-            <span className="hidden sm:inline">Security</span>
-            <span className="sm:hidden">Sec</span>
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="general" className="space-y-4 sm:space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-lg sm:text-xl">
-                General Settings
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4 p-4 sm:p-6">
-              <div className="space-y-2">
-                <Label htmlFor="projectName">Project Name</Label>
-                <Input
-                  id="projectName"
-                  value={settings.general.projectName}
-                  onChange={(e) =>
-                    setSettings((prev) => ({
-                      ...prev,
-                      general: { ...prev.general, projectName: e.target.value },
-                    }))
-                  }
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="description">Description</Label>
-                <Textarea
-                  id="description"
-                  value={settings.general.description}
-                  onChange={(e) =>
-                    setSettings((prev) => ({
-                      ...prev,
-                      general: { ...prev.general, description: e.target.value },
-                    }))
-                  }
-                  rows={3}
-                />
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="git" className="space-y-4 sm:space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-lg sm:text-xl">
-                Git Integration
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4 p-4 sm:p-6">
-              <div className="space-y-2">
-                <Label htmlFor="repository">Repository</Label>
-                <Input
-                  id="repository"
-                  value={settings.git.repository}
-                  onChange={(e) =>
-                    setSettings((prev) => ({
-                      ...prev,
-                      git: { ...prev.git, repository: e.target.value },
-                    }))
-                  }
-                  placeholder="github.com/user/repo"
-                />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="productionBranch">Production Branch</Label>
-                <Input
-                  id="productionBranch"
-                  value={settings.git.productionBranch}
-                  onChange={(e) =>
-                    setSettings((prev) => ({
-                      ...prev,
-                      git: { ...prev.git, productionBranch: e.target.value },
-                    }))
-                  }
-                />
-              </div>
-
-              <div className="space-y-3">
-                <div className="flex items-center space-x-2">
-                  <Switch
-                    id="autoBuildEnabled"
-                    checked={settings.git.autoBuildEnabled}
-                    onCheckedChange={(checked) =>
-                      setSettings((prev) => ({
-                        ...prev,
-                        git: { ...prev.git, autoBuildEnabled: checked },
-                      }))
-                    }
-                  />
-                  <Label htmlFor="autoBuildEnabled">
-                    Enable automatic builds
-                  </Label>
-                </div>
-
-                <div className="flex items-center space-x-2">
-                  <Switch
-                    id="prComment"
-                    checked={settings.git.prComment}
-                    onCheckedChange={(checked) =>
-                      setSettings((prev) => ({
-                        ...prev,
-                        git: { ...prev.git, prComment: checked },
-                      }))
-                    }
-                  />
-                  <Label htmlFor="prComment">
-                    Comment on pull requests with build preview
-                  </Label>
-                </div>
-
-                <div className="flex items-center space-x-2">
-                  <Switch
-                    id="buildPrs"
-                    checked={settings.git.buildPrs}
-                    onCheckedChange={(checked) =>
-                      setSettings((prev) => ({
-                        ...prev,
-                        git: { ...prev.git, buildPrs: checked },
-                      }))
-                    }
-                  />
-                  <Label htmlFor="buildPrs">
-                    Build pull requests automatically
-                  </Label>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="security" className="space-y-4 sm:space-y-6">
-          <Card>
-            <CardHeader>
-              <CardTitle className="text-lg sm:text-xl">
-                Security Settings
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4 p-4 sm:p-6">
-              <div className="space-y-3">
-                <div className="flex items-center space-x-2">
-                  <Switch
-                    id="privateBuilds"
-                    checked={settings.security.privateBuilds}
-                    onCheckedChange={(checked) =>
-                      setSettings((prev) => ({
-                        ...prev,
-                        security: {
-                          ...prev.security,
-                          privateBuilds: checked,
-                        },
-                      }))
-                    }
-                  />
-                  <Label htmlFor="privateBuilds">Make builds private</Label>
-                </div>
-
-                <div className="flex items-center space-x-2">
-                  <Switch
-                    id="requireApprovalForPrs"
-                    checked={settings.security.requireApprovalForPrs}
-                    onCheckedChange={(checked) =>
-                      setSettings((prev) => ({
-                        ...prev,
-                        security: {
-                          ...prev.security,
-                          requireApprovalForPrs: checked,
-                        },
-                      }))
-                    }
-                  />
-                  <Label htmlFor="requireApprovalForPrs">
-                    Require approval for PR builds
-                  </Label>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card className="border-red-200">
-            <CardHeader>
-              <CardTitle className="text-red-600 text-lg sm:text-xl">
-                Danger Zone
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="p-4 sm:p-6">
-              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 p-4 border border-red-200 rounded-lg">
-                <div>
-                  <h4 className="font-medium text-red-600">Delete Project</h4>
-                  <p className="text-sm text-gray-600">
-                    Permanently delete this project and all its builds
-                  </p>
-                </div>
-                <AlertDialog>
-                  <AlertDialogTrigger asChild>
-                    <Button
-                      variant="destructive"
-                      className="flex items-center gap-2 w-full sm:w-auto"
-                    >
-                      <Trash2 className="w-4 h-4" />
-                      Delete Project
-                    </Button>
-                  </AlertDialogTrigger>
-                  <AlertDialogContent>
-                    <AlertDialogHeader>
-                      <AlertDialogTitle>
-                        Are you absolutely sure?
-                      </AlertDialogTitle>
-                      <AlertDialogDescription>
-                        This action cannot be undone. This will permanently
-                        delete the project and remove all build data from our
-                        servers.
-                      </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                      <AlertDialogCancel>Cancel</AlertDialogCancel>
-                      <AlertDialogAction className="bg-red-600 hover:bg-red-700">
-                        Delete Project
-                      </AlertDialogAction>
-                    </AlertDialogFooter>
-                  </AlertDialogContent>
-                </AlertDialog>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
-    </div>
-  )
-}