@tscircuit/fake-snippets 0.0.88 → 0.0.90

package/src/components/dialogs/view-ts-files-dialog.tsx

@@ -1,78 +1,514 @@
-import React, { useState, useEffect } from "react"
+import React, { useState, useEffect, useMemo, useRef } from "react"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
 import { ScrollArea } from "../ui/scroll-area"
 import { cn } from "@/lib/utils"
 import { createUseDialog } from "./create-use-dialog"
 import { Button } from "../ui/button"
-import { Download } from "lucide-react"
+import { Input } from "../ui/input"
+import { Badge } from "../ui/badge"
+import {
+  Download,
+  Search,
+  File,
+  Folder,
+  Copy,
+  Check,
+  FileText,
+  Code2,
+  Menu,
+} from "lucide-react"
 import JSZip from "jszip"
 import { saveAs } from "file-saver"
+import { EditorView } from "codemirror"
+import { EditorState } from "@codemirror/state"
+import { basicSetup } from "@/lib/codemirror/basic-setup"
+import { javascript } from "@codemirror/lang-javascript"
+import { json } from "@codemirror/lang-json"
 
 interface ViewTsFilesDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
 }
 
+interface FileNode {
+  name: string
+  path: string
+  type: "file" | "folder"
+  children?: FileNode[]
+  content?: string
+}
+
 export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
   open,
   onOpenChange,
 }) => {
   const [files, setFiles] = useState<Map<string, string>>(new Map())
   const [selectedFile, setSelectedFile] = useState<string | null>(null)
+  const [searchTerm, setSearchTerm] = useState("")
+  const [copiedFile, setCopiedFile] = useState<string | null>(null)
+  const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set())
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+  const editorRef = useRef<HTMLDivElement>(null)
+  const viewRef = useRef<EditorView | null>(null)
+
+  const fileTree = useMemo(() => {
+    const tree: FileNode[] = []
+    const pathMap: Map<string, FileNode> = new Map()
+
+    Array.from(files.keys()).forEach((originalFilePath) => {
+      let filePath = originalFilePath
+      if (filePath.startsWith("/")) {
+        filePath = filePath.slice(1)
+      }
+      const parts = filePath.split("/")
+      let currentPath = ""
+
+      parts.forEach((part, index) => {
+        const isFile = index === parts.length - 1
+        currentPath = currentPath ? `${currentPath}/${part}` : part
+
+        if (!pathMap.has(currentPath)) {
+          const node: FileNode = {
+            name: part,
+            path: isFile ? originalFilePath : currentPath,
+            type: isFile ? "file" : "folder",
+            children: isFile ? undefined : [],
+            content: isFile ? files.get(originalFilePath) : undefined,
+          }
+
+          pathMap.set(currentPath, node)
+
+          if (index === 0) {
+            tree.push(node)
+          } else {
+            const parentPath = parts.slice(0, index).join("/")
+            const parent = pathMap.get(parentPath)
+            if (parent?.children) {
+              parent.children.push(node)
+            }
+          }
+        }
+      })
+    })
+
+    return tree
+  }, [files])
+
+  const filteredFiles = useMemo(() => {
+    if (!searchTerm) return Array.from(files.keys())
+    return Array.from(files.keys()).filter(
+      (path) =>
+        path.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        files.get(path)?.toLowerCase().includes(searchTerm.toLowerCase()),
+    )
+  }, [files, searchTerm])
+
+  const getFileIcon = (filename: string) => {
+    const ext = filename.split(".").pop()?.toLowerCase()
+    switch (ext) {
+      case "ts":
+      case "tsx":
+        return <Code2 className="w-4 h-4 text-blue-500" />
+      case "json":
+        return <FileText className="w-4 h-4 text-yellow-500" />
+      default:
+        return <File className="w-4 h-4 text-gray-500" />
+    }
+  }
+
+  const fileStats = useMemo(() => {
+    const stats = {
+      total: files.size,
+      ts: 0,
+      tsx: 0,
+      json: 0,
+      other: 0,
+      totalSize: 0,
+    }
+
+    Array.from(files.entries()).forEach(([path, content]) => {
+      const ext = path.split(".").pop()?.toLowerCase()
+      stats.totalSize += content.length
+
+      switch (ext) {
+        case "ts":
+          stats.ts++
+          break
+        case "tsx":
+          stats.tsx++
+          break
+        case "json":
+          stats.json++
+          break
+        default:
+          stats.other++
+          break
+      }
+    })
+
+    return stats
+  }, [files])
+
+  useEffect(() => {
+    if (!editorRef.current || !selectedFile) return
+
+    const content = files.get(selectedFile) || ""
+    const isJson = selectedFile.endsWith(".json")
+
+    if (viewRef.current) {
+      viewRef.current.destroy()
+    }
+
+    const state = EditorState.create({
+      doc: content,
+      extensions: [
+        basicSetup,
+        isJson ? json() : javascript({ typescript: true, jsx: true }),
+        EditorState.readOnly.of(true),
+        EditorView.theme({
+          "&": {
+            height: "100%",
+            fontSize: "14px",
+          },
+          ".cm-content": {
+            padding: "16px",
+            minHeight: "100%",
+          },
+          ".cm-focused": {
+            outline: "none",
+          },
+          ".cm-editor": {
+            height: "100%",
+          },
+          ".cm-scroller": {
+            fontFamily:
+              "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
+          },
+        }),
+      ],
+    })
+
+    viewRef.current = new EditorView({
+      state,
+      parent: editorRef.current,
+    })
+
+    return () => {
+      if (viewRef.current) {
+        viewRef.current.destroy()
+        viewRef.current = null
+      }
+    }
+  }, [selectedFile, files])
 
   useEffect(() => {
     if (open && window.__DEBUG_CODE_EDITOR_FS_MAP) {
       setFiles(window.__DEBUG_CODE_EDITOR_FS_MAP)
+
       if (window.__DEBUG_CODE_EDITOR_FS_MAP.size > 0) {
-        setSelectedFile(Array.from(window.__DEBUG_CODE_EDITOR_FS_MAP.keys())[0])
+        const firstFile = Array.from(
+          window.__DEBUG_CODE_EDITOR_FS_MAP.keys(),
+        )[0]
+        setSelectedFile(firstFile)
+
+        let normalizedPath = firstFile
+        if (normalizedPath.startsWith("/")) {
+          normalizedPath = normalizedPath.slice(1)
+        }
+        const pathParts = normalizedPath.split("/")
+        const foldersToExpand = new Set<string>()
+        let currentPath = ""
+        pathParts.slice(0, -1).forEach((part) => {
+          currentPath = currentPath ? `${currentPath}/${part}` : part
+          foldersToExpand.add(currentPath)
+        })
+        setExpandedFolders(foldersToExpand)
       }
     }
   }, [open])
 
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768 && selectedFile) {
+        setSidebarOpen(false)
+      } else if (window.innerWidth >= 768) {
+        setSidebarOpen(true)
+      }
+    }
+
+    handleResize()
+    window.addEventListener("resize", handleResize)
+    return () => window.removeEventListener("resize", handleResize)
+  }, [selectedFile])
+
+  const copyToClipboard = async (content: string, filename: string) => {
+    try {
+      await navigator.clipboard.writeText(content)
+      setCopiedFile(filename)
+      setTimeout(() => setCopiedFile(null), 2000)
+    } catch (err) {
+      console.error("Failed to copy:", err)
+    }
+  }
+
+  const downloadAllFiles = async () => {
+    const zip = new JSZip()
+
+    files.forEach((content, filename) => {
+      let normalizedFilename = filename
+      if (normalizedFilename.startsWith("/")) {
+        normalizedFilename = normalizedFilename.slice(1)
+      }
+
+      zip.file(normalizedFilename, content)
+    })
+
+    try {
+      const blob = await zip.generateAsync({ type: "blob" })
+      saveAs(blob, "typescript-files.zip")
+    } catch (error) {
+      console.error("Error generating ZIP:", error)
+    }
+  }
+
+  const toggleFolder = (folderPath: string) => {
+    setExpandedFolders((prev) => {
+      const newSet = new Set(prev)
+      if (newSet.has(folderPath)) {
+        newSet.delete(folderPath)
+      } else {
+        newSet.add(folderPath)
+      }
+      return newSet
+    })
+  }
+
+  const selectFile = (filePath: string) => {
+    setSelectedFile(filePath)
+    if (window.innerWidth < 768) {
+      setSidebarOpen(false)
+    }
+  }
+
+  const renderFileTree = (nodes: FileNode[], level = 0) => {
+    return nodes.map((node) => (
+      <div key={node.path}>
+        <div
+          className={cn(
+            "flex items-center gap-2 px-2 py-1.5 cursor-pointer hover:bg-gray-100 rounded-sm transition-colors",
+            selectedFile === node.path &&
+              "bg-blue-50 border-l-2 border-l-blue-500",
+            level > 0 && "ml-4",
+          )}
+          style={{ paddingLeft: `${8 + level * 16}px` }}
+          onClick={() => {
+            if (node.type === "folder") {
+              toggleFolder(node.path)
+            } else {
+              selectFile(node.path)
+            }
+          }}
+        >
+          {node.type === "folder" ? (
+            <>
+              <Folder
+                className={cn(
+                  "w-4 h-4 text-gray-600",
+                  expandedFolders.has(node.path) && "text-blue-600",
+                )}
+              />
+              <span className="text-sm font-medium text-gray-700">
+                {node.name}
+              </span>
+              <Badge variant="secondary" className="ml-auto text-xs">
+                {node.children?.length || 0}
+              </Badge>
+            </>
+          ) : (
+            <>
+              {getFileIcon(node.name)}
+              <span className="text-sm text-gray-800 flex-1 truncate">
+                {node.name}
+              </span>
+              <span className="text-xs text-gray-500 ml-auto">
+                {node.content
+                  ? `${Math.round(node.content.length / 1024)}KB`
+                  : "0KB"}
+              </span>
+            </>
+          )}
+        </div>
+        {node.type === "folder" &&
+          expandedFolders.has(node.path) &&
+          node.children && (
+            <div>{renderFileTree(node.children, level + 1)}</div>
+          )}
+      </div>
+    ))
+  }
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-4xl w-full h-[80vh] flex flex-col">
-        <DialogHeader className="flex flex-row items-center justify-between">
-          <DialogTitle>TypeScript Files</DialogTitle>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={async () => {
-              const zip = new JSZip()
-              files.forEach((content, filename) => {
-                zip.file(filename, content)
-              })
-              const blob = await zip.generateAsync({ type: "blob" })
-              saveAs(blob, "typescript-files.zip")
-            }}
-          >
-            <Download className="w-4 h-4 mr-2" />
-            Download All
-          </Button>
+      <DialogContent
+        className={cn(
+          "flex !w-full flex-col transition-all duration-300",
+          "!max-w-6xl !w-[80vw] h-[85vh] max-h-[90vh]",
+        )}
+      >
+        <DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-4 border-b">
+          <div className="flex items-center gap-4">
+            <DialogTitle className="text-xl font-semibold">
+              TypeScript Files
+            </DialogTitle>
+            <div className="hidden sm:flex items-center gap-2 text-sm text-gray-600">
+              <Badge variant="outline">{fileStats.total} files</Badge>
+              <Badge variant="outline">
+                {Math.round(fileStats.totalSize / 1024)}KB total
+              </Badge>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+              className="md:hidden"
+            >
+              <Menu className="w-4 h-4" />
+            </Button>
+            <Button variant="outline" size="sm" onClick={downloadAllFiles}>
+              <Download className="w-4 h-4 sm:mr-2" />
+              <span className="hidden sm:inline">Download All</span>
+            </Button>
+          </div>
         </DialogHeader>
-        <div className="flex flex-grow overflow-hidden">
-          <div className="w-1/4 border-r">
-            <ScrollArea className="h-full">
-              {Array.from(files.keys()).map((filePath) => (
-                <div
-                  key={filePath}
-                  className={cn(
-                    "px-4 py-2 cursor-pointer hover:bg-gray-100 text-xs break-all",
-                    selectedFile === filePath && "bg-gray-200",
-                  )}
-                  onClick={() => setSelectedFile(filePath)}
-                >
-                  {filePath}
-                </div>
-              ))}
+
+        <div className="flex flex-1 overflow-hidden gap-4">
+          <div
+            className={cn(
+              "flex flex-col border-r bg-gray-50/50 transition-all duration-200",
+              sidebarOpen ? "w-80 md:w-80 sm:w-64" : "w-0 overflow-hidden",
+              "md:relative absolute md:z-0 z-10 md:bg-gray-50/50 bg-white md:shadow-none shadow-lg",
+            )}
+          >
+            <div className="p-3 border-b">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+                <Input
+                  placeholder="Search files..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="pl-10 text-sm"
+                />
+              </div>
+            </div>
+
+            <div className="p-3 border-b">
+              <div className="flex flex-wrap gap-1">
+                {fileStats.ts > 0 && (
+                  <Badge variant="secondary">{fileStats.ts} .ts</Badge>
+                )}
+                {fileStats.tsx > 0 && (
+                  <Badge variant="secondary">{fileStats.tsx} .tsx</Badge>
+                )}
+                {fileStats.json > 0 && (
+                  <Badge variant="secondary">{fileStats.json} .json</Badge>
+                )}
+                {fileStats.other > 0 && (
+                  <Badge variant="secondary">{fileStats.other} other</Badge>
+                )}
+              </div>
+            </div>
+
+            <ScrollArea className="flex-1">
+              <div className="p-2">
+                {searchTerm ? (
+                  <div className="space-y-1">
+                    {filteredFiles.map((filePath) => (
+                      <div
+                        key={filePath}
+                        className={cn(
+                          "flex items-center gap-2 px-2 py-1.5 cursor-pointer hover:bg-gray-100 rounded-sm transition-colors",
+                          selectedFile === filePath &&
+                            "bg-blue-50 border-l-2 border-l-blue-500",
+                        )}
+                        onClick={() => selectFile(filePath)}
+                      >
+                        {getFileIcon(filePath)}
+                        <span className="text-sm text-gray-800 flex-1 truncate">
+                          {filePath}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div>{renderFileTree(fileTree)}</div>
+                )}
+              </div>
             </ScrollArea>
           </div>
-          <div className="w-3/4 overflow-hidden">
-            <ScrollArea className="h-full">
-              <pre className="p-4 text-xs whitespace-pre-wrap">
-                {selectedFile ? files.get(selectedFile) : "Select a file"}
-              </pre>
-            </ScrollArea>
+
+          <div className="flex-1 flex flex-col overflow-hidden">
+            {selectedFile ? (
+              <>
+                <div className="flex items-center justify-between p-3 border-b bg-white">
+                  <div className="flex items-center gap-2 flex-1 min-w-0">
+                    {getFileIcon(selectedFile)}
+                    <span className="font-medium text-gray-900 truncate">
+                      {selectedFile}
+                    </span>
+                    <Badge variant="outline" className="text-xs shrink-0">
+                      {files.get(selectedFile)?.length || 0} chars
+                    </Badge>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() =>
+                      copyToClipboard(
+                        files.get(selectedFile) || "",
+                        selectedFile,
+                      )
+                    }
+                    className="shrink-0"
+                  >
+                    {copiedFile === selectedFile ? (
+                      <>
+                        <Check className="w-4 h-4 sm:mr-2 text-green-600" />
+                        <span className="hidden sm:inline">Copied!</span>
+                      </>
+                    ) : (
+                      <>
+                        <Copy className="w-4 h-4 sm:mr-2" />
+                        <span className="hidden sm:inline">Copy</span>
+                      </>
+                    )}
+                  </Button>
+                </div>
+
+                <div className="flex-1 overflow-hidden">
+                  <div ref={editorRef} className="h-full" />
+                </div>
+              </>
+            ) : (
+              <div className="flex-1 flex items-center justify-center text-gray-500">
+                <div className="text-center">
+                  <FileText className="w-16 h-16 mx-auto mb-4 text-gray-300" />
+                  <p className="text-lg font-medium">Select a file to view</p>
+                  <p className="text-sm">
+                    Choose from {files.size} available files
+                  </p>
+                  <Button
+                    variant="outline"
+                    className="mt-4 md:hidden"
+                    onClick={() => setSidebarOpen(true)}
+                  >
+                    <Menu className="w-4 h-4 mr-2" />
+                    Show Files
+                  </Button>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </DialogContent>

package/src/components/package-port/CodeAndPreview.tsx

@@ -1,5 +1,6 @@
 import { CodeEditor } from "@/components/package-port/CodeEditor"
 import { usePackageVisibilitySettingsDialog } from "@/components/dialogs/package-visibility-settings-dialog"
+import { useConfirmDiscardChangesDialog } from "@/components/dialogs/confirm-discard-changes-dialog"
 import { useToast } from "@/hooks/use-toast"
 import { useUrlParams } from "@/hooks/use-url-params"
 import useWarnUserOnPageChange from "@/hooks/use-warn-user-on-page-change"
@@ -14,6 +15,7 @@ import { applyEditEventsToManualEditsFile } from "@tscircuit/core"
 import { toastManualEditConflicts } from "@/lib/utils/toastManualEditConflicts"
 import { ManualEditEvent } from "@tscircuit/props"
 import { useFileManagement } from "@/hooks/useFileManagement"
+import { DEFAULT_CODE } from "@/lib/utils/package-utils"
 
 interface Props {
   pkg?: Package
@@ -24,11 +26,6 @@ interface Props {
   projectUrl?: string
 }
 
-export interface PackageFile {
-  path: string
-  content: string
-}
-
 export interface CodeAndPreviewState {
   showPreview: boolean
   fullScreen: boolean
@@ -39,17 +36,6 @@ export interface CodeAndPreviewState {
   defaultComponentFile?: string
 }
 
-export const DEFAULT_CODE = `
-export default () => (
-  <board width="10mm" height="10mm">
-    {/* write your code here! */}
-  </board>
-)
-`.trim()
-
-export const generateRandomPackageName = () =>
-  `untitled-package-${Math.floor(Math.random() * 900) + 100}`
-
 export function CodeAndPreview({ pkg, projectUrl }: Props) {
   const { toast } = useToast()
   const urlParams = useUrlParams()
@@ -73,6 +59,9 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
   const { Dialog: NewPackageSaveDialog, openDialog: openNewPackageSaveDialog } =
     usePackageVisibilitySettingsDialog()
 
+  const { Dialog: DiscardChangesDialog, openDialog: openDiscardChangesDialog } =
+    useConfirmDiscardChangesDialog()
+
   const {
     savePackage,
     isSaving,
@@ -169,6 +158,15 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     )
   }
 
+  const handleDiscardChanges = () => {
+    setLocalFiles([...initialFiles])
+    setState((prev) => ({ ...prev, lastSavedAt: Date.now() }))
+    toast({
+      title: "Changes discarded",
+      description: "All unsaved changes have been discarded.",
+    })
+  }
+
   if (urlParams.package_id && (!pkg || isLoading)) {
     return (
       <div className="flex items-center justify-center h-[60vh]">
@@ -187,9 +185,11 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
         pkg={pkg}
         packageType={packageType}
         code={String(currentFileCode)}
+        fsMap={fsMap}
         isSaving={isSaving}
         hasUnsavedChanges={hasUnsavedChanges}
         onSave={saveFiles}
+        onDiscard={() => openDiscardChangesDialog()}
         onTogglePreview={() =>
           setState((prev) => ({ ...prev, showPreview: !prev.showPreview }))
         }
@@ -254,6 +254,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
         )}
       </div>
       <NewPackageSaveDialog initialIsPrivate={false} onSave={savePackage} />
+      <DiscardChangesDialog onConfirm={handleDiscardChanges} />
     </div>
   )
 }