@tscircuit/fake-snippets 0.0.87 → 0.0.89

package/src/components/ViewPackagePage/components/repo-page-content.tsx

@@ -12,7 +12,10 @@ import ThreeDView from "./tab-views/3d-view"
 import PCBView from "./tab-views/pcb-view"
 import SchematicView from "./tab-views/schematic-view"
 import BOMView from "./tab-views/bom-view"
-import { isPackageFileImportant } from "../utils/is-package-file-important"
+import {
+  isPackageFileImportant,
+  scorePackageFileImportance,
+} from "../utils/is-package-file-important"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
 import PackageHeader from "./package-header"
@@ -21,6 +24,9 @@ import { useLocation } from "wouter"
 import { Package } from "fake-snippets-api/lib/db/schema"
 import { useCurrentPackageCircuitJson } from "../hooks/use-current-package-circuit-json"
 import { useRequestAiReviewMutation } from "@/hooks/use-request-ai-review-mutation"
+import { useAiReview } from "@/hooks/use-ai-review"
+import { useQueryClient } from "react-query"
+import SidebarReleasesSection from "./sidebar-releases-section"
 
 interface PackageFile {
   package_file_id: string
@@ -48,14 +54,38 @@ export default function RepoPageContent({
   onEditClicked,
 }: RepoPageContentProps) {
   const [activeView, setActiveView] = useState<string>("files")
+  const [pendingAiReviewId, setPendingAiReviewId] = useState<string | null>(
+    null,
+  )
+  const queryClient = useQueryClient()
+  const { data: aiReview } = useAiReview(pendingAiReviewId, {
+    refetchInterval: (data) => (data && !data.ai_review_text ? 2000 : false),
+  })
+  useEffect(() => {
+    if (aiReview?.ai_review_text) {
+      queryClient.invalidateQueries(["packageRelease"])
+      setPendingAiReviewId(null)
+    }
+  }, [aiReview?.ai_review_text, queryClient])
   const session = useGlobalStore((s) => s.session)
   const { circuitJson, isLoading: isCircuitJsonLoading } =
     useCurrentPackageCircuitJson()
-  const { mutate: requestAiReview } = useRequestAiReviewMutation()
+  const { mutate: requestAiReview, isLoading: isRequestingAiReview } =
+    useRequestAiReviewMutation({
+      onSuccess: (_packageRelease, aiReview) => {
+        setPendingAiReviewId(aiReview.ai_review_id)
+      },
+    })
+
+  const aiReviewRequested =
+    Boolean(packageRelease?.ai_review_requested) ||
+    Boolean(pendingAiReviewId) ||
+    isRequestingAiReview
 
   // Handle initial view selection and hash-based view changes
   useEffect(() => {
     if (isCircuitJsonLoading) return
+    if (!packageInfo) return
     const hash = window.location.hash.slice(1)
     const validViews = ["files", "3d", "pcb", "schematic", "bom"]
     const circuitDependentViews = ["3d", "pcb", "schematic", "bom"]
@@ -90,39 +120,18 @@ export default function RepoPageContent({
   const importantFiles = useMemo(() => {
     if (!packageFiles || !importantFilePaths) return []
 
-    return packageFiles.filter((file) =>
-      importantFilePaths.some((path) => file.file_path.endsWith(path)),
-    )
+    return packageFiles
+      .filter((file) =>
+        importantFilePaths.some((path) => file.file_path.endsWith(path)),
+      )
+      .sort((a, b) => {
+        const aImportance = scorePackageFileImportance(a.file_path)
+        const bImportance = scorePackageFileImportance(b.file_path)
+        return aImportance - bImportance
+      })
+      .reverse()
   }, [packageFiles, importantFilePaths])
 
-  // Generate package name with version for file lookups
-  const packageNameWithVersion = useMemo(() => {
-    if (!packageInfo) return ""
-
-    // Format: @scope/packageName@version or packageName@version
-    const name = packageInfo.name
-
-    // Extract the latest version from the files (assuming version information is available)
-    const versionFile = packageFiles?.find(
-      (file) => file.file_path === "package.json",
-    )
-    let version = "latest"
-
-    if (versionFile) {
-      try {
-        const content =
-          versionFile.file_content || versionFile.content_text || "{}"
-        const packageJson = JSON.parse(content)
-        if (packageJson.version) {
-          version = packageJson.version
-        }
-      } catch (e) {
-        // If package.json can't be parsed, use "latest"
-      }
-    }
-
-    return `${name}@${version}`
-  }, [packageInfo, packageFiles])
   // Render the appropriate content based on the active view
   const renderContent = () => {
     switch (activeView) {
@@ -184,6 +193,7 @@ export default function RepoPageContent({
             {/* Main Content Header with Tabs */}
             <MainContentHeader
               activeView={activeView}
+              packageFiles={packageFiles ?? []}
               onViewChange={(view) => {
                 setActiveView(view)
                 // Update URL hash when view changes
@@ -200,10 +210,11 @@ export default function RepoPageContent({
               importantFiles={importantFiles}
               isLoading={!packageFiles}
               onEditClicked={onEditClicked}
+              packageAuthorOwner={packageInfo?.owner_github_username}
               aiDescription={packageInfo?.ai_description ?? ""}
               aiUsageInstructions={packageInfo?.ai_usage_instructions ?? ""}
               aiReviewText={packageRelease?.ai_review_text ?? null}
-              aiReviewRequested={packageRelease?.ai_review_requested ?? false}
+              aiReviewRequested={aiReviewRequested}
               onRequestAiReview={() => {
                 if (packageRelease) {
                   requestAiReview({
@@ -226,6 +237,10 @@ export default function RepoPageContent({
               }}
             />
           </div>
+          {/* Releases section - Only visible on small screens */}
+          <div className="block md:hidden w-full px-5">
+            <SidebarReleasesSection />
+          </div>
         </div>
       </div>
       <Footer />

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

@@ -39,8 +39,8 @@ export default function SidebarAboutSection() {
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
   const isOwner =
     isLoggedIn &&
-    packageInfo?.creator_account_id ===
-      useGlobalStore((s) => s.session?.account_id)
+    packageInfo?.owner_github_username ===
+      useGlobalStore((s) => s.session?.github_username)
 
   // Local state to store updated values before the query refetches
   const [localDescription, setLocalDescription] = useState<string>("")

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

@@ -9,21 +9,29 @@ import type { PackageRelease } from "fake-snippets-api/lib/db/schema"
 function getTranspilationStatus(
   pr?: PackageRelease | null,
 ): BuildStep["status"] {
-  if (!pr) return "pending"
-  if (pr.transpilation_error) return "error"
-  if (pr.transpilation_in_progress) return "running"
-  if (pr.transpilation_completed_at) return "success"
-  if (pr.transpilation_started_at) return "running"
-  return "pending"
+  switch (pr?.transpilation_display_status) {
+    case "complete":
+      return "success"
+    case "error":
+      return "error"
+    case "building":
+      return "running"
+    default:
+      return "pending"
+  }
 }
 
 function getCircuitJsonStatus(pr?: PackageRelease | null): BuildStep["status"] {
-  if (!pr) return "pending"
-  if (pr.circuit_json_build_error) return "error"
-  if (pr.circuit_json_build_in_progress) return "running"
-  if (pr.circuit_json_build_completed_at) return "success"
-  if (pr.circuit_json_build_started_at) return "running"
-  return "pending"
+  switch (pr?.circuit_json_build_display_status) {
+    case "complete":
+      return "success"
+    case "error":
+      return "error"
+    case "building":
+      return "running"
+    default:
+      return "pending"
+  }
 }
 
 export default function SidebarReleasesSection() {

package/src/components/ViewPackagePage/components/tab-views/files-view.tsx

@@ -5,13 +5,6 @@ import { FileText, Folder } from "lucide-react"
 import { useMemo, useState } from "react"
 import { isHiddenFile } from "../../utils/is-hidden-file"
 import { isWithinDirectory } from "../../utils/is-within-directory"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Settings } from "lucide-react"
 import HiddenFilesDropdown from "@/components/HiddenFilesDropdown"
 
 interface Directory {

package/src/components/ViewPackagePage/utils/fuzz-search.ts

@@ -0,0 +1,121 @@
+export const fuzzyMatch = (
+  pattern: string,
+  text: string,
+): { score: number; matches: number[] } => {
+  if (!pattern) return { score: 0, matches: [] }
+
+  const normalizePattern = (pat: string) => {
+    return pat.toLowerCase().split(" ").join("")
+  }
+
+  const patternLower = normalizePattern(pattern)
+  const textLower = text.toLowerCase()
+  const matches: number[] = []
+
+  let patternIdx = 0
+  let score = 0
+  let consecutiveMatches = 0
+  let spaceBonus = 0
+
+  const spaceSegments = pattern.toLowerCase().trim().split(/\s+/)
+  const isSpaceSeparated = spaceSegments.length > 1
+
+  if (isSpaceSeparated) {
+    let segmentIdx = 0
+    let currentSegment = spaceSegments[0]
+    let segmentCharIdx = 0
+
+    for (
+      let i = 0;
+      i < textLower.length && segmentIdx < spaceSegments.length;
+      i++
+    ) {
+      const char = textLower[i]
+      const targetChar = currentSegment[segmentCharIdx]
+
+      if (char === targetChar) {
+        matches.push(i)
+        segmentCharIdx++
+        consecutiveMatches++
+        score += 1 + consecutiveMatches * 0.5
+
+        if (i === 0 || /[/\-_.]/.test(text[i - 1])) {
+          score += 2
+        }
+
+        if (segmentCharIdx >= currentSegment.length) {
+          segmentIdx++
+          spaceBonus += 3
+
+          if (segmentIdx < spaceSegments.length) {
+            currentSegment = spaceSegments[segmentIdx]
+            segmentCharIdx = 0
+            consecutiveMatches = 0
+          }
+        }
+      } else {
+        if (
+          segmentCharIdx > 0 &&
+          /[/\-_.]/.test(char) &&
+          segmentIdx < spaceSegments.length - 1
+        ) {
+          segmentIdx++
+          if (segmentIdx < spaceSegments.length) {
+            currentSegment = spaceSegments[segmentIdx]
+            segmentCharIdx = 0
+            consecutiveMatches = 0
+            if (char === currentSegment[0]) {
+              matches.push(i)
+              segmentCharIdx = 1
+              score += 2
+            }
+          }
+        } else {
+          consecutiveMatches = 0
+        }
+      }
+    }
+
+    if (
+      segmentIdx < spaceSegments.length ||
+      (segmentIdx === spaceSegments.length - 1 &&
+        segmentCharIdx < currentSegment.length)
+    ) {
+      return { score: -1, matches: [] }
+    }
+
+    score += spaceBonus
+  } else {
+    for (
+      let i = 0;
+      i < textLower.length && patternIdx < patternLower.length;
+      i++
+    ) {
+      if (textLower[i] === patternLower[patternIdx]) {
+        matches.push(i)
+        patternIdx++
+        consecutiveMatches++
+
+        score += 1 + consecutiveMatches * 0.5
+
+        if (i === 0 || /[/\-_.]/.test(text[i - 1])) {
+          score += 2
+        }
+      } else {
+        consecutiveMatches = 0
+      }
+    }
+
+    if (patternIdx !== patternLower.length) return { score: -1, matches: [] }
+  }
+
+  score += Math.max(0, 100 - text.length) * 0.1
+
+  const fileName = text.split("/").pop() || text
+  const queryFileName = pattern.replace(/\s+/g, "")
+  if (fileName.toLowerCase().includes(queryFileName.toLowerCase())) {
+    score += 5
+  }
+
+  return { score, matches }
+}

package/src/components/ViewPackagePage/utils/is-hidden-file.ts

@@ -1,4 +1,8 @@
 export const isHiddenFile = (filePath: string): boolean => {
+  if (filePath.startsWith("/")) {
+    filePath = filePath.slice(1)
+  }
+
   // Normalize the path to handle both Unix and Windows paths
   const normalizedPath = filePath.replace(/\\/g, "/")
 

package/src/components/ViewPackagePage/utils/is-package-file-important.ts

@@ -1,5 +1,6 @@
 const importanceMap = {
   "readme.md": 200,
+  readme: 200,
   license: 100,
   "license.md": 100,
   "index.ts": 90,
@@ -7,7 +8,23 @@ const importanceMap = {
   "circuit.tsx": 90,
 }
 
-export const scorePackageFileImportance = (filePath: string) => {
+/**
+ * Determines if a file is considered "important" for display in the
+ * `ImportantFilesView` component.
+ *
+ * A file is deemed important if it resides in the root directory of the package
+ * and has a positive importance score. Nested paths are not considered important.
+ */
+export const isPackageFileImportant = (filePath: string): boolean => {
+  const normalized = filePath.replace(/^\.\/?/, "").toLowerCase()
+  if (normalized.split("/").length > 1) {
+    return false
+  }
+  return scorePackageFileImportance(filePath) > 0
+}
+
+// Kept for backward compatibility with older imports
+export const scorePackageFileImportance = (filePath: string): number => {
   const lowerCaseFilePath = filePath.toLowerCase()
   for (const [key, value] of Object.entries(importanceMap)) {
     if (lowerCaseFilePath.endsWith(key)) {
@@ -16,7 +33,3 @@ export const scorePackageFileImportance = (filePath: string) => {
   }
   return 0
 }
-
-export const isPackageFileImportant = (filePath: string) => {
-  return scorePackageFileImportance(filePath) > 0
-}

package/src/components/dialogs/confirm-delete-package-dialog.tsx

@@ -33,7 +33,7 @@ export const ConfirmDeletePackageDialog = ({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent className="w-[90vw]">
         <DialogHeader>
           <DialogTitle>Confirm Delete Package</DialogTitle>
         </DialogHeader>

package/src/components/dialogs/confirm-discard-changes-dialog.tsx

@@ -0,0 +1,73 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
+import { Button } from "../ui/button"
+import { createUseDialog } from "./create-use-dialog"
+import { useState } from "react"
+
+export const ConfirmDiscardChangesDialog = ({
+  open,
+  onOpenChange,
+  onConfirm,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onConfirm: () => void
+}) => {
+  const [isConfirming, setIsConfirming] = useState(false)
+
+  const handleDiscard = () => {
+    onConfirm()
+    onOpenChange(false)
+    setIsConfirming(false)
+  }
+
+  const handleCancel = () => {
+    onOpenChange(false)
+    setIsConfirming(false)
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        onOpenChange(open)
+        if (!open) setIsConfirming(false)
+      }}
+    >
+      <DialogContent className="w-[90vw]">
+        <DialogHeader>
+          <DialogTitle>Discard Changes</DialogTitle>
+        </DialogHeader>
+        <p>Are you sure you want to discard all unsaved changes?</p>
+        <p className="text-red-600 font-medium">
+          This action cannot be undone.
+        </p>
+        <div className="flex justify-end space-x-2 mt-4">
+          <Button variant="outline" onClick={handleCancel}>
+            Cancel
+          </Button>
+          {!isConfirming ? (
+            <Button
+              variant="destructive"
+              className="bg-red-600 hover:bg-red-700"
+              onClick={() => setIsConfirming(true)}
+            >
+              Discard Changes
+            </Button>
+          ) : (
+            <Button
+              variant="destructive"
+              onClick={handleDiscard}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              Yes, Discard All Changes
+            </Button>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const useConfirmDiscardChangesDialog = createUseDialog(
+  ConfirmDiscardChangesDialog,
+)

package/src/components/dialogs/edit-package-details-dialog.tsx

@@ -207,7 +207,7 @@ export const EditPackageDetailsDialog = ({
   return (
     <div>
       <Dialog open={showConfirmDelete} onOpenChange={setShowConfirmDelete}>
-        <DialogContent className="max-w-md p-6 rounded-2xl shadow-lg">
+        <DialogContent className="w-[90vw] p-6 rounded-2xl shadow-lg">
           <DialogHeader>
             <DialogTitle className="text-left">Confirm Deletion</DialogTitle>
             <DialogDescription className="text-left">
@@ -255,7 +255,7 @@ export const EditPackageDetailsDialog = ({
                     onChange={(e) =>
                       setFormData((prev) => ({
                         ...prev,
-                        unscopedPackageName: e.target.value,
+                        unscopedPackageName: e.target.value.replace(/\s+/g, ""),
                       }))
                     }
                     placeholder="Enter package name"