@tscircuit/fake-snippets 0.0.100 → 0.0.102

package/src/components/FileSidebar.tsx

@@ -57,16 +57,24 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
   handleRenameFile,
   isCreatingFile,
   setIsCreatingFile,
-  pkg,
 }) => {
   const [sidebarOpen, setSidebarOpen] = fileSidebarState
   const [newFileName, setNewFileName] = useState("")
   const [errorMessage, setErrorMessage] = useState("")
   const [renamingFile, setRenamingFile] = useState<string | null>(null)
+  const [selectedFolderForCreation, setSelectedFolderForCreation] = useState<
+    string | null
+  >(null)
+  const [selectedItemId, setSelectedItemId] = React.useState<string>(
+    currentFile || "",
+  )
   const { toast } = useToast()
-  const session = useGlobalStore((s) => s.session)
   const canModifyFiles = true
 
+  const onFolderSelect = (folderPath: string) => {
+    setSelectedFolderForCreation(folderPath)
+  }
+
   const transformFilesToTreeData = (
     files: Record<FileName, string>,
   ): TreeDataItem[] => {
@@ -90,6 +98,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
           : segment
         const absolutePath = hasLeadingSlash ? `/${relativePath}` : relativePath
         const itemId = absolutePath
+
         if (
           !currentNode[segment] &&
           (!isHiddenFile(relativePath) ||
@@ -104,21 +113,17 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
             name: segment,
             isRenaming: renamingFile === itemId,
             onRename: (newFilename: string) => {
-              // Preserve the folder structure when renaming
               const oldPath = itemId
-              const pathParts = oldPath.split("/").filter((part) => part !== "") // Remove empty segments
+              const pathParts = oldPath.split("/").filter((part) => part !== "")
               let newPath: string
 
               if (pathParts.length > 1) {
-                // File is in a folder, preserve the folder structure
                 const folderPath = pathParts.slice(0, -1).join("/")
                 newPath = folderPath + "/" + newFilename
               } else {
-                // File is in root, just use the new filename
                 newPath = newFilename
               }
 
-              // Preserve leading slash if original path had one
               if (oldPath.startsWith("/") && !newPath.startsWith("/")) {
                 newPath = "/" + newPath
               }
@@ -142,7 +147,12 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
               setRenamingFile(null)
             },
             icon: isLeafNode ? File : Folder,
-            onClick: isLeafNode ? () => onFileSelect(absolutePath) : undefined,
+            onClick: isLeafNode
+              ? () => {
+                  onFileSelect(absolutePath)
+                  setSelectedFolderForCreation(null)
+                }
+              : () => onFolderSelect(absolutePath),
             draggable: false,
             droppable: !isLeafNode,
             children: isLeafNode ? undefined : {},
@@ -209,7 +219,6 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       })
     })
 
-    // Convert the nested object structure to array structure
     const convertToArray = (
       items: Record<string, TreeNode>,
     ): TreeDataItem[] => {
@@ -226,17 +235,70 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
 
   const treeData = transformFilesToTreeData(files)
 
+  const getCurrentFolderPath = (): string => {
+    if (selectedFolderForCreation) {
+      return selectedFolderForCreation
+    }
+
+    if (!selectedItemId || selectedItemId === "") return ""
+
+    const hasLeadingSlash = selectedItemId.startsWith("/")
+    const normalizedPath = hasLeadingSlash
+      ? selectedItemId.slice(1)
+      : selectedItemId
+    const pathParts = selectedItemId.split("/")
+
+    if (pathParts.length > 1) {
+      const folderPath = pathParts.slice(0, -1).join("/")
+      return hasLeadingSlash ? `/${folderPath}` : folderPath
+    }
+
+    return hasLeadingSlash ? "/" : ""
+  }
+
+  const constructFilePath = (fileName: string): string => {
+    const trimmedFileName = fileName.trim()
+
+    if (!trimmedFileName) {
+      return ""
+    }
+
+    const currentFolder = getCurrentFolderPath()
+
+    if (trimmedFileName.startsWith("/")) {
+      return trimmedFileName
+    }
+
+    if (!currentFolder || currentFolder === "/") {
+      const result =
+        currentFolder === "/" ? `/${trimmedFileName}` : trimmedFileName
+      return result
+    }
+
+    const result = `${currentFolder}/${trimmedFileName}`
+    return result
+  }
   const handleCreateFileInline = () => {
+    const finalFileName = constructFilePath(newFileName)
+    if (!finalFileName) {
+      setErrorMessage("File name cannot be empty")
+      return
+    }
+
     const { newFileCreated } = handleCreateFile({
-      newFileName,
+      newFileName: finalFileName,
       onError: (error) => {
         setErrorMessage(error.message)
       },
     })
+
     if (newFileCreated) {
       setIsCreatingFile(false)
       setNewFileName("")
       setErrorMessage("")
+      onFileSelect(finalFileName)
+      setSelectedItemId(finalFileName)
+      setSelectedFolderForCreation(null)
     }
   }
 
@@ -245,6 +307,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
       setIsCreatingFile(false)
       setNewFileName("")
       setErrorMessage("")
+      setSelectedFolderForCreation(null)
       return
     }
     handleCreateFileInline()
@@ -255,6 +318,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
     setErrorMessage("")
     setIsCreatingFile(false)
     setNewFileName("")
+    setSelectedFolderForCreation(null)
   }
 
   return (
@@ -267,9 +331,7 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
     >
       <button
         onClick={toggleSidebar}
-        className={`z-[99] mt-2 ml-2 text-gray-400 scale-90 transition-opacity duration-200 ${
-          !sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"
-        }`}
+        className={`z-[99] mt-2 ml-2 text-gray-400 scale-90 transition-opacity duration-200 ${!sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"}`}
       >
         <PanelRightOpen />
       </button>
@@ -286,33 +348,76 @@ const FileSidebar: React.FC<FileSidebarProps> = ({
             autoFocus
             value={newFileName}
             spellCheck={false}
-            onChange={(e) => setNewFileName(e.target.value)}
+            onChange={(e) => {
+              setNewFileName(e.target.value)
+              if (errorMessage) {
+                setErrorMessage("")
+              }
+            }}
             onBlur={handleCreateFileBlur}
             onKeyDown={(e) => {
               if (e.key === "Enter") {
+                e.preventDefault()
                 handleCreateFileInline()
               } else if (e.key === "Escape") {
+                e.preventDefault()
                 setIsCreatingFile(false)
                 setNewFileName("")
                 setErrorMessage("")
+                setSelectedFolderForCreation(null)
+              } else if (e.key === "Tab") {
+                e.preventDefault()
+                const currentFolder = getCurrentFolderPath()
+                if (currentFolder && !newFileName.includes("/")) {
+                  const displayPath = currentFolder.startsWith("/")
+                    ? currentFolder.slice(1)
+                    : currentFolder
+                  setNewFileName(`${displayPath}/`)
+                }
               }
             }}
-            placeholder="Enter file name"
+            placeholder={(() => {
+              const currentFolder = getCurrentFolderPath()
+              if (!currentFolder || currentFolder === "/") {
+                return "Enter file name (root folder)"
+              }
+              const displayPath = currentFolder.startsWith("/")
+                ? currentFolder.slice(1)
+                : currentFolder
+              return `Enter file name (${displayPath}/)`
+            })()}
+            className={
+              errorMessage ? "border-red-500 focus:border-red-500" : ""
+            }
           />
           {errorMessage && (
-            <div className="text-red-500 mt-1">{errorMessage}</div>
+            <div className="text-red-500 text-xs mt-1 px-1">{errorMessage}</div>
           )}
+          <div className="text-gray-400 text-xs mt-1 px-1">
+            Tip: Use / for subfolders, Tab to auto-complete current folder
+          </div>
         </div>
       )}
-      <TreeView
-        data={treeData}
-        initialSelectedItemId={currentFile || ""}
-        onSelectChange={(item) => {
-          if (item?.onClick) {
-            item.onClick()
+      <div
+        onClick={(e) => {
+          if (e.target === e.currentTarget) {
+            setSelectedFolderForCreation(null)
+            setSelectedItemId("")
           }
         }}
-      />
+        className="flex-1 border-2 h-full"
+      >
+        <TreeView
+          data={treeData}
+          setSelectedItemId={(value) => setSelectedItemId(value || "")}
+          selectedItemId={selectedItemId}
+          onSelectChange={(item) => {
+            if (item?.onClick) {
+              item.onClick()
+            }
+          }}
+        />
+      </div>
     </div>
   )
 }

package/src/components/Header2.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button"
-import { CircuitBoard, Search } from "lucide-react"
+import { CircuitBoard, Search, Menu, X } from "lucide-react"
 import { Link } from "wouter"
 import { PrefetchPageLink } from "./PrefetchPageLink"
 import { HeaderLogin } from "./HeaderLogin"
@@ -53,10 +53,12 @@ const SearchButtonComponent = () => {
 }
 
 export const Header2 = () => {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
   const isLoggedIn = useGlobalStore((state) => Boolean(state.session))
+
   return (
     <>
-      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <header className="sticky top-0 z-50 w-full border-b bg-white md:bg-white/80 md:backdrop-blur supports-[backdrop-filter]:md:bg-white/60">
         <div className="container mx-auto flex h-16 items-center justify-between px-2 md:px-6">
           <PrefetchPageLink
             href="/"
@@ -65,23 +67,17 @@ export const Header2 = () => {
             <CircuitBoard className="h-6 w-6" />
             <span className="text-lg font-bold">tscircuit</span>
           </PrefetchPageLink>
-          <nav className="flex md:hidden">
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex gap-6">
             {isLoggedIn && (
-              <Link
+              <PrefetchPageLink
                 className="text-sm font-medium hover:underline underline-offset-4"
                 href="/dashboard"
               >
                 Dashboard
-              </Link>
+              </PrefetchPageLink>
             )}
-          </nav>
-          <nav className="hidden md:flex gap-6">
-            <PrefetchPageLink
-              className="text-sm font-medium hover:underline underline-offset-4"
-              href="/dashboard"
-            >
-              Dashboard
-            </PrefetchPageLink>
             <PrefetchPageLink
               className="text-sm font-medium hover:underline underline-offset-4"
               href="/quickstart"
@@ -94,12 +90,6 @@ export const Header2 = () => {
             >
               Datasheets
             </PrefetchPageLink>
-            {/* <a
-            className="text-sm font-medium hover:underline underline-offset-4"
-            href="https://github.com/tscircuit/tscircuit"
-          >
-            Github
-          </a> */}
             <a
               className="text-sm font-medium hover:underline underline-offset-4"
               href="https://docs.tscircuit.com"
@@ -119,16 +109,107 @@ export const Header2 = () => {
               Contact
             </a>
           </nav>
-          <div className="flex items-center gap-4">
+
+          {/* Desktop Right Side */}
+          <div className="hidden md:flex items-center gap-4">
             <SearchButtonComponent />
-            {isLoggedIn && (
-              <div className="hidden sm:block">
-                <HeaderDropdown />
-              </div>
-            )}
+            {isLoggedIn && <HeaderDropdown />}
             <HeaderLogin />
           </div>
+
+          {/* Mobile Right Side */}
+          <div className="flex md:hidden items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => (window.location.href = "/search")}
+              className="h-8 w-8"
+              aria-label="Go to search"
+            >
+              <Search className="size-4" />
+            </Button>
+            {isLoggedIn ? (
+              <HeaderLogin />
+            ) : (
+              <PrefetchPageLink href="/quickstart">
+                <Button size="sm" className="text-xs px-3 py-1">
+                  Get Started
+                </Button>
+              </PrefetchPageLink>
+            )}
+            <button
+              className="p-2"
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+              aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
+            >
+              {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
+            </button>
+          </div>
         </div>
+
+        {/* Mobile Menu */}
+        {mobileMenuOpen && (
+          <div className="md:hidden border-t bg-white ">
+            <div className="container mx-auto px-4 py-3">
+              <nav className="mb-4">
+                <div className="flex flex-col items-center gap-1">
+                  {isLoggedIn && (
+                    <PrefetchPageLink
+                      className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
+                      href="/dashboard"
+                      onClick={() => setMobileMenuOpen(false)}
+                    >
+                      Dashboard
+                    </PrefetchPageLink>
+                  )}
+                  <PrefetchPageLink
+                    className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
+                    href="/quickstart"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    Editor
+                  </PrefetchPageLink>
+                  <PrefetchPageLink
+                    className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
+                    href="/datasheets"
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    Datasheets
+                  </PrefetchPageLink>
+                  <a
+                    className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
+                    href="https://docs.tscircuit.com"
+                  >
+                    Docs
+                  </a>
+                  <a
+                    className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
+                    href="https://tscircuit.com/join"
+                  >
+                    Discord
+                  </a>
+                  <a
+                    className="text-sm font-medium hover:underline underline-offset-4 py-2 w-full text-center"
+                    href="mailto:hello@tscircuit.com"
+                  >
+                    Contact
+                  </a>
+                </div>
+              </nav>
+              <div className="flex flex-col items-center gap-4 pt-4 border-t border-gray-200">
+                {isLoggedIn ? (
+                  <div className="w-full flex justify-center">
+                    <HeaderDropdown />
+                  </div>
+                ) : (
+                  <div className="w-full flex justify-center">
+                    <HeaderLogin />
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
       </header>
       <CmdKMenu />
       <Analytics />

package/src/components/PackageBuildsPage/package-build-header.tsx

@@ -4,15 +4,20 @@ import { useRebuildPackageReleaseMutation } from "@/hooks/use-rebuild-package-re
 import { Github, RefreshCw } from "lucide-react"
 import { useParams } from "wouter"
 import { DownloadButtonAndMenu } from "../DownloadButtonAndMenu"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { useCurrentPackageCircuitJson } from "../ViewPackagePage/hooks/use-current-package-circuit-json"
 
 export function PackageBuildHeader() {
   const { author, packageName } = useParams()
+  const session = useGlobalStore((s) => s.session)
   const { packageRelease } = useCurrentPackageRelease({
     include_logs: true,
   })
   const { mutate: rebuildPackage, isLoading } =
     useRebuildPackageReleaseMutation()
 
+  const { circuitJson } = useCurrentPackageCircuitJson()
+
   return (
     <div className="border-b border-gray-200 bg-white px-4 sm:px-6 py-4">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 container mx-auto max-w-7xl">
@@ -44,22 +49,29 @@ export function PackageBuildHeader() {
               <span className="xs:hidden">Report</span>
             </a>
           </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            className="border-gray-300 bg-white hover:bg-gray-50 text-xs sm:text-sm"
-            disabled={isLoading || !packageRelease}
-            onClick={() =>
-              packageRelease &&
-              rebuildPackage({
-                package_release_id: packageRelease.package_release_id,
-              })
-            }
-          >
-            <RefreshCw className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
-            {isLoading ? "Rebuilding..." : "Rebuild"}
-          </Button>
-          <DownloadButtonAndMenu unscopedName={packageName} author={author} />
+          {session?.github_username == author && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="border-gray-300 bg-white hover:bg-gray-50 text-xs sm:text-sm"
+              disabled={isLoading || !packageRelease}
+              onClick={() =>
+                packageRelease &&
+                rebuildPackage({
+                  package_release_id: packageRelease.package_release_id,
+                })
+              }
+            >
+              <RefreshCw className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
+              {isLoading ? "Rebuilding..." : "Rebuild"}
+            </Button>
+          )}
+          <DownloadButtonAndMenu
+            offerMultipleImageFormats
+            circuitJson={circuitJson}
+            unscopedName={packageName}
+            author={author}
+          />
         </div>
       </div>
     </div>

package/src/components/PageSearchComponent.tsx

@@ -3,7 +3,7 @@ import { useAxios } from "@/hooks/use-axios"
 import { useLocation } from "wouter"
 import React, { useState } from "react"
 import { useQuery } from "react-query"
-import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { Search } from "lucide-react"
 import { Button } from "./ui/button"
 import { PackageCardSkeleton } from "./PackageCardSkeleton"
@@ -20,7 +20,7 @@ const PageSearchComponent: React.FC<PageSearchComponentProps> = ({
 }) => {
   const [location, setLocation] = useLocation()
   const axios = useAxios()
-  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
+  const snippetsBaseApiUrl = useApiBaseUrl()
 
   // Initialize search query directly from URL
   const [searchQuery, setSearchQuery] = useState(

package/src/components/SearchComponent.tsx

@@ -4,7 +4,7 @@ import { useLocation } from "wouter"
 import React, { useEffect, useRef, useState } from "react"
 import { useQuery } from "react-query"
 import { Alert } from "./ui/alert"
-import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 import { PrefetchPageLink } from "./PrefetchPageLink"
 import { CircuitBoard } from "lucide-react"
 import { cn } from "@/lib/utils"
@@ -60,7 +60,7 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
   const resultsRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const [location, setLocation] = useLocation()
-  const snippetsBaseApiUrl = usePackagesBaseApiUrl()
+  const snippetsBaseApiUrl = useApiBaseUrl()
 
   const { data: searchResults, isLoading } = useQuery(
     ["packageSearch", searchQuery],

package/src/components/SuspenseRunFrame.tsx

@@ -6,7 +6,7 @@ const RunFrame = lazy(async () => {
 })
 
 export const SuspenseRunFrame = (
-  props: React.ComponentProps<typeof RunFrame>,
+  props: React.ComponentProps<typeof RunFrame> & { className?: string },
 ) => {
   return (
     <Suspense
@@ -20,7 +20,7 @@ export const SuspenseRunFrame = (
         </div>
       }
     >
-      <div className="h-[98vh]">
+      <div className={`h-[98vh] ${props.className}`}>
         <RunFrame {...props} />
       </div>
     </Suspense>

package/src/components/TrendingPackagesCarousel.tsx

@@ -4,7 +4,7 @@ import { StarFilledIcon } from "@radix-ui/react-icons"
 import { Link } from "wouter"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import { useRef, useState } from "react"
-import { usePackagesBaseApiUrl } from "@/hooks/use-packages-base-api-url"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
 
 const CarouselItem = ({
   pkg,
@@ -36,7 +36,7 @@ export const TrendingPackagesCarousel = () => {
   const axios = useAxios()
   const scrollRef = useRef<HTMLDivElement>(null)
   const [isHovered, setIsHovered] = useState(false)
-  const apiBaseUrl = usePackagesBaseApiUrl()
+  const apiBaseUrl = useApiBaseUrl()
 
   const { data: trendingPackages } = useQuery<Package[]>(
     "trendingPackages",

package/src/components/ViewPackagePage/components/important-files-view.tsx

@@ -17,6 +17,7 @@ import { usePackageFile } from "@/hooks/use-package-files"
 import { ShikiCodeViewer } from "./ShikiCodeViewer"
 import MarkdownViewer from "./markdown-viewer"
 import { useGlobalStore } from "@/hooks/use-global-store"
+import { useCurrentPackageCircuitJson } from "../hooks/use-current-package-circuit-json"
 
 interface PackageFile {
   package_file_id: string
@@ -129,14 +130,12 @@ export default function ImportantFilesView({
   const availableTabs = useMemo((): TabInfo[] => {
     const tabs: TabInfo[] = []
 
-    if (hasAiContent) {
-      tabs.push({
-        type: "ai",
-        filePath: null,
-        label: "Description",
-        icon: <SparklesIcon className="h-3.5 w-3.5 mr-1.5" />,
-      })
-    }
+    tabs.push({
+      type: "ai",
+      filePath: null,
+      label: "Description",
+      icon: <SparklesIcon className="h-3.5 w-3.5 mr-1.5" />,
+    })
 
     tabs.push({
       type: "ai-review",
@@ -266,6 +265,8 @@ export default function ImportantFilesView({
     }
   }, [activeTab, importantFiles, getDefaultTab])
 
+  const { circuitJson } = useCurrentPackageCircuitJson()
+
   // Get active file content
   const partialActiveFile = useMemo(() => {
     if (activeTab?.type !== "file" || !activeTab.filePath) return null
@@ -321,7 +322,15 @@ export default function ImportantFilesView({
                 from our AI assistant.
               </p>
             </div>
-            {isOwner ? (
+            {!isOwner ? (
+              <p className="text-sm text-gray-500">
+                Only the package owner can generate an AI review
+              </p>
+            ) : !Boolean(circuitJson) ? (
+              <p className="text-sm text-gray-500">
+                Circuit JSON is required for AI review.
+              </p>
+            ) : (
               <Button
                 onClick={onRequestAiReview}
                 size="sm"
@@ -330,10 +339,6 @@ export default function ImportantFilesView({
                 <SparklesIcon className="h-4 w-4 mr-2" />
                 Request AI Review
               </Button>
-            ) : (
-              <p className="text-sm text-gray-500">
-                Only the package owner can generate an AI review
-              </p>
             )}
           </div>
         </div>

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

@@ -205,6 +205,7 @@ const MobileSidebar = ({
           currentDescription={
             packageInfo.description || packageInfo?.ai_description || ""
           }
+          currentGithubRepoFullName={packageInfo.github_repo_full_name}
           currentLicense={currentLicense}
           currentWebsite={(packageInfo as any)?.website || ""}
           isPrivate={Boolean(packageInfo.is_private)}

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

@@ -171,6 +171,7 @@ export default function SidebarAboutSection({
           unscopedPackageName={packageInfo.unscoped_name}
           packageReleaseId={packageInfo.latest_package_release_id}
           packageId={packageInfo.package_id}
+          currentGithubRepoFullName={packageInfo.github_repo_full_name}
           currentDescription={
             packageInfo.description || packageInfo?.ai_description || ""
           }