@tscircuit/fake-snippets 0.0.106 → 0.0.108

package/src/App.tsx

@@ -79,10 +79,10 @@ const PackageEditorPage = lazyImport(async () => {
   ])
   return editorModule
 })
-const ViewConnectedRepoPage = lazyImport(
-  () => import("@/pages/view-connected-repo"),
-)
-const PreviewBuildPage = lazyImport(() => import("@/pages/preview-build"))
+const ReleasesPage = lazyImport(() => import("@/pages/releases"))
+const ReleaseDetailPage = lazyImport(() => import("@/pages/release-detail"))
+const ReleaseBuildsPage = lazyImport(() => import("@/pages/release-builds"))
+const ReleasePreviewPage = lazyImport(() => import("@/pages/preview-release"))
 
 class ErrorBoundary extends React.Component<
   { children: React.ReactNode },
@@ -109,7 +109,7 @@ class ErrorBoundary extends React.Component<
       )
     ) {
       const loadedAt = window.__APP_LOADED_AT || Date.now()
-      if (Date.now() - loadedAt >= 10_000) {
+      if (Date.now() - loadedAt >= 180_000) {
         this.performReload()
       }
     }
@@ -144,6 +144,7 @@ class ErrorBoundary extends React.Component<
     this.setState({ reloading: true })
     this.reloadTimeout = window.setTimeout(() => {
       if (window?.location.href.includes("localhost:")) return
+      if (window?.location.href.includes("127.0.0.1:")) return
       window.location.reload()
     }, 500)
   }
@@ -152,10 +153,12 @@ class ErrorBoundary extends React.Component<
     this.cleanup() // Clean up any existing handlers
 
     this.visibilityHandler = () => {
+      const loadedAt = window.__APP_LOADED_AT || Date.now()
       if (
         document.visibilityState === "visible" &&
         this.state.hasError &&
-        !this.state.reloading
+        !this.state.reloading &&
+        Date.now() - loadedAt >= 180_000
       ) {
         this.performReload()
       }
@@ -258,10 +261,25 @@ function App() {
             <Route path="/my-orders" component={MyOrdersPage} />
             <Route path="/dev-login" component={DevLoginPage} />
             <Route path="/:username" component={UserProfilePage} />
-            <Route path="/build/:buildId" component={ViewConnectedRepoPage} />
             <Route
-              path="/build/:buildId/preview"
-              component={PreviewBuildPage}
+              path="/:author/:packageName/releases/:releaseId/builds"
+              component={ReleaseBuildsPage}
+            />
+            <Route
+              path="/:author/:packageName/releases/:releaseId"
+              component={ReleaseDetailPage}
+            />
+            <Route
+              path="/:author/:packageName/releases/:packageReleaseId/preview"
+              component={ReleasePreviewPage}
+            />
+            <Route
+              path="/:author/:packageName/releases/:packageReleaseId"
+              component={ReleaseDetailPage}
+            />
+            <Route
+              path="/:author/:packageName/releases"
+              component={ReleasesPage}
             />
             <Route path="/:author/:packageName" component={ViewPackagePage} />
             <Route

package/src/components/FileSidebar.tsx

@@ -12,6 +12,7 @@ import {
 import { TreeView, TreeDataItem } from "@/components/ui/tree-view"
 import { isHiddenFile } from "./ViewPackagePage/utils/is-hidden-file"
 import { Input } from "@/components/ui/input"
+import { transformFilesToTreeData } from "@/lib/utils/transformFilesToTreeData"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -75,165 +76,19 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
     setSelectedFolderForCreation(folderPath)
   }
 
-  const transformFilesToTreeData = (
-    files: Record<FileName, string>,
-  ): TreeDataItem[] => {
-    type TreeNode = Omit<TreeDataItem, "children"> & {
-      children?: Record<string, TreeNode>
-    }
-    const root: Record<string, TreeNode> = {}
-
-    Object.keys(files).forEach((filePath) => {
-      const hasLeadingSlash = filePath.startsWith("/")
-      const pathSegments = (hasLeadingSlash ? filePath.slice(1) : filePath)
-        .trim()
-        .split("/")
-      let currentNode: Record<string, TreeNode> = root
-
-      pathSegments.forEach((segment, segmentIndex) => {
-        const isLeafNode = segmentIndex === pathSegments.length - 1
-        const ancestorPath = pathSegments.slice(0, segmentIndex).join("/")
-        const relativePath = ancestorPath
-          ? `${ancestorPath}/${segment}`
-          : segment
-        const absolutePath = hasLeadingSlash ? `/${relativePath}` : relativePath
-        const itemId = absolutePath
-
-        if (
-          !currentNode[segment] &&
-          (!isHiddenFile(relativePath) ||
-            isHiddenFile(
-              currentFile?.startsWith("/")
-                ? currentFile.slice(1)
-                : currentFile || "",
-            ))
-        ) {
-          currentNode[segment] = {
-            id: itemId,
-            name: segment,
-            isRenaming: renamingFile === itemId,
-            onRename: (newFilename: string) => {
-              const oldPath = itemId
-              const pathParts = oldPath.split("/").filter((part) => part !== "")
-              let newPath: string
-
-              if (pathParts.length > 1) {
-                const folderPath = pathParts.slice(0, -1).join("/")
-                newPath = folderPath + "/" + newFilename
-              } else {
-                newPath = newFilename
-              }
-
-              if (oldPath.startsWith("/") && !newPath.startsWith("/")) {
-                newPath = "/" + newPath
-              }
-
-              const { fileRenamed } = handleRenameFile({
-                oldFilename: itemId,
-                newFilename: newPath,
-                onError: (error) => {
-                  toast({
-                    title: `Error renaming file`,
-                    description: error.message,
-                    variant: "destructive",
-                  })
-                },
-              })
-              if (fileRenamed) {
-                setRenamingFile(null)
-              }
-            },
-            onCancelRename: () => {
-              setRenamingFile(null)
-            },
-            icon: isLeafNode ? File : Folder,
-            onClick: isLeafNode
-              ? () => {
-                  onFileSelect(absolutePath)
-                  setSelectedFolderForCreation(null)
-                }
-              : () => onFolderSelect(absolutePath),
-            draggable: false,
-            droppable: !isLeafNode,
-            children: isLeafNode ? undefined : {},
-            actions: canModifyFiles ? (
-              <>
-                <DropdownMenu key={itemId}>
-                  <DropdownMenuTrigger asChild>
-                    <MoreVertical className="w-4 h-4 text-gray-500 hover:text-gray-700" />
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent
-                    className="w-fit bg-white shadow-lg rounded-md border-4 z-[100] border-white"
-                    style={{
-                      position: "absolute",
-                      top: "100%",
-                      left: "0",
-                      marginTop: "0.5rem",
-                      width: "8rem",
-                      padding: "0.01rem",
-                    }}
-                  >
-                    <DropdownMenuGroup>
-                      {isLeafNode && (
-                        <DropdownMenuItem
-                          onClick={() => {
-                            setRenamingFile(itemId)
-                          }}
-                          className="flex items-center px-3 py-1 text-xs text-black hover:bg-gray-100 cursor-pointer"
-                        >
-                          <Pencil className="mr-2 h-3 w-3" />
-                          Rename
-                        </DropdownMenuItem>
-                      )}
-                      <DropdownMenuItem
-                        onClick={() => {
-                          const { fileDeleted } = handleDeleteFile({
-                            filename: itemId,
-                            onError: (error) => {
-                              toast({
-                                title: `Error deleting file ${itemId}`,
-                                description: error.message,
-                              })
-                            },
-                          })
-                          if (fileDeleted) {
-                            setErrorMessage("")
-                          }
-                        }}
-                        className="flex items-center px-3 py-1 text-xs text-red-600 hover:bg-gray-100 cursor-pointer"
-                      >
-                        <Trash2 className="mr-2 h-3 w-3" />
-                        Delete
-                      </DropdownMenuItem>
-                    </DropdownMenuGroup>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </>
-            ) : undefined,
-          }
-        }
-
-        if (!isLeafNode && currentNode[segment].children) {
-          currentNode = currentNode[segment].children
-        }
-      })
-    })
-
-    const convertToArray = (
-      items: Record<string, TreeNode>,
-    ): TreeDataItem[] => {
-      return Object.values(items).map((item) => ({
-        ...item,
-        children: item.children ? convertToArray(item.children) : undefined,
-      }))
-    }
-    return convertToArray(root).filter((x) => {
-      if (x.children?.length === 0) return false
-      return true
-    })
-  }
-
-  const treeData = transformFilesToTreeData(files)
+  const treeData = transformFilesToTreeData({
+    files,
+    currentFile,
+    renamingFile,
+    handleRenameFile,
+    handleDeleteFile,
+    setRenamingFile,
+    onFileSelect,
+    onFolderSelect,
+    canModifyFiles,
+    setErrorMessage,
+    setSelectedFolderForCreation,
+  })
 
   const getCurrentFolderPath = (): string => {
     if (selectedFolderForCreation) {

package/src/components/PackageBreadcrumb.tsx

@@ -0,0 +1,111 @@
+import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+
+interface PackageBreadcrumbProps {
+  author: string
+  packageName: string
+  unscopedName?: string
+  currentPage?: "releases" | "builds" | string
+  releaseVersion?: string
+}
+
+export function PackageBreadcrumb({
+  author,
+  packageName,
+  unscopedName,
+  currentPage,
+  releaseVersion,
+}: PackageBreadcrumbProps) {
+  return (
+    <Breadcrumb className="mb-4">
+      <BreadcrumbList>
+        {/* Author */}
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <PrefetchPageLink href={`/${author}`}>{author}</PrefetchPageLink>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <span>/</span>
+        </BreadcrumbSeparator>
+
+        {/* Package */}
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <PrefetchPageLink href={`/${packageName}`}>
+              {unscopedName || packageName}
+            </PrefetchPageLink>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <span>/</span>
+        </BreadcrumbSeparator>
+
+        {/* Releases */}
+        {(currentPage === "releases" ||
+          releaseVersion ||
+          currentPage === "builds") && (
+          <>
+            <BreadcrumbItem>
+              {currentPage === "releases" ? (
+                <BreadcrumbPage>releases</BreadcrumbPage>
+              ) : (
+                <BreadcrumbLink asChild>
+                  <PrefetchPageLink href={`/${packageName}/releases`}>
+                    releases
+                  </PrefetchPageLink>
+                </BreadcrumbLink>
+              )}
+            </BreadcrumbItem>
+            <BreadcrumbSeparator>
+              <span>/</span>
+            </BreadcrumbSeparator>
+          </>
+        )}
+
+        {/* Release Version */}
+        {releaseVersion && (
+          <>
+            <BreadcrumbItem>
+              {currentPage === "builds" ? (
+                <BreadcrumbLink asChild>
+                  <PrefetchPageLink
+                    href={`/${packageName}/releases/${releaseVersion}`}
+                  >
+                    {releaseVersion}
+                  </PrefetchPageLink>
+                </BreadcrumbLink>
+              ) : (
+                <BreadcrumbPage>{releaseVersion}</BreadcrumbPage>
+              )}
+            </BreadcrumbItem>
+            {currentPage === "builds" && (
+              <>
+                <BreadcrumbSeparator>
+                  <span>/</span>
+                </BreadcrumbSeparator>
+                <BreadcrumbItem>
+                  <BreadcrumbPage>builds</BreadcrumbPage>
+                </BreadcrumbItem>
+              </>
+            )}
+          </>
+        )}
+
+        {/* Other current pages */}
+        {currentPage && !["releases", "builds"].includes(currentPage) && (
+          <BreadcrumbItem>
+            <BreadcrumbPage>{currentPage}</BreadcrumbPage>
+          </BreadcrumbItem>
+        )}
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}

package/src/components/ViewPackagePage/components/mobile-sidebar.tsx

@@ -112,7 +112,7 @@ const MobileSidebar = ({
           {localDescription ||
             packageInfo?.description ||
             packageInfo?.ai_description ||
-            "A Default 60 keyboard created with tscircuit"}
+            ""}
         </p>
         {isOwner && (
           <Button

package/src/components/ViewPackagePage/components/sidebar-about-section.tsx

@@ -1,5 +1,5 @@
 import { Badge } from "@/components/ui/badge"
-import { GitFork, Star, Settings, LinkIcon, Github } from "lucide-react"
+import { GitFork, Star, Settings, LinkIcon, Github, Plus } from "lucide-react"
 import { Skeleton } from "@/components/ui/skeleton"
 import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 import { usePackageReleaseById } from "@/hooks/use-package-release"
@@ -164,7 +164,7 @@ export default function SidebarAboutSection({
             <GitFork className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
             <span>{(packageInfo as any)?.fork_count ?? "0"} forks</span>
           </div>
-          {packageInfo?.github_repo_full_name && (
+          {packageInfo?.github_repo_full_name ? (
             <a
               target="_blank"
               href={`https://github.com/${packageInfo.github_repo_full_name}`}
@@ -173,6 +173,22 @@ export default function SidebarAboutSection({
               <Github className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
               <span>{packageInfo?.github_repo_full_name.split("/")[1]}</span>
             </a>
+          ) : (
+            <>
+              {isOwner && (
+                <div
+                  className="flex items-center hover:underline hover:underline-offset-2 cursor-pointer hover:decoration-gray-500"
+                  onClick={openEditPackageDetailsDialog}
+                  title="Connect GitHub"
+                >
+                  <div className="relative mr-2">
+                    <Github className="h-4 w-4 text-gray-500 dark:text-[#8b949e]" />
+                    <Plus className="h-2 w-2 absolute -bottom-0.5 -right-0.5 text-gray-500 dark:text-[#8b949e] bg-white dark:bg-[#0d1117] rounded-full" />
+                  </div>
+                  <span>Connect GitHub</span>
+                </div>
+              )}
+            </>
           )}
         </div>
       </div>

package/src/components/ViewPackagePage/components/sidebar-releases-section.tsx

@@ -7,7 +7,7 @@ import { BuildStatus, BuildStep } from "./build-status"
 import type { PackageRelease } from "fake-snippets-api/lib/db/schema"
 import { getBuildStatus, StatusIcon } from "@/components/preview"
 import { PrefetchPageLink } from "@/components/PrefetchPageLink"
-import { useLatestPackageBuildByReleaseId } from "@/hooks/use-package-builds"
+import { usePackageBuild } from "@/hooks/use-package-builds"
 
 function getTranspilationStatus(
   pr?: PackageRelease | null,
@@ -42,8 +42,8 @@ export default function SidebarReleasesSection() {
   const { data: packageRelease } = usePackageReleaseById(
     packageInfo?.latest_package_release_id,
   )
-  const { data: latestBuild } = useLatestPackageBuildByReleaseId(
-    packageRelease?.package_release_id,
+  const { data: latestBuild } = usePackageBuild(
+    packageRelease?.latest_package_build_id ?? null,
   )
 
   const buildSteps: BuildStep[] = [
@@ -79,12 +79,22 @@ export default function SidebarReleasesSection() {
     : { status: "pending", label: "pending" }
   return (
     <div className="mb-6">
-      <h2 className="text-lg font-semibold mb-2">Releases</h2>
+      <h2 className="text-lg font-semibold mb-2">
+        <PrefetchPageLink
+          href={`/${packageInfo?.owner_github_username}/${packageInfo?.unscoped_name}/releases`}
+          className="hover:underline"
+        >
+          Releases
+        </PrefetchPageLink>
+      </h2>
       <div className="flex flex-col space-y-2">
-        <div className="flex items-center">
+        <PrefetchPageLink
+          href={`/${packageInfo?.owner_github_username}/${packageInfo?.unscoped_name}/releases`}
+          className="flex items-center hover:underline"
+        >
           <Tag className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
           <span className="text-sm font-medium">v{packageRelease.version}</span>
-        </div>
+        </PrefetchPageLink>
         <div className="flex items-center">
           <Clock className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />
           <span className="text-sm text-gray-500 dark:text-[#8b949e]">
@@ -100,11 +110,11 @@ export default function SidebarReleasesSection() {
         ))}
         {latestBuild && (
           <PrefetchPageLink
-            href={`/build/${latestBuild.package_build_id}`}
+            href={`/${packageInfo?.name}/releases`}
             className="flex items-center gap-2 text-sm text-gray-500 dark:text-[#8b949e]"
           >
             <StatusIcon status={status} />
-            <span>Package preview {label}</span>
+            <span>Package Preview {label}</span>
           </PrefetchPageLink>
         )}
       </div>