@tscircuit/fake-snippets 0.0.71 → 0.0.73

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

@@ -1,28 +1,18 @@
 import { CodeEditor } from "@/components/package-port/CodeEditor"
 import { usePackageVisibilitySettingsDialog } from "@/components/dialogs/package-visibility-settings-dialog"
-import { useAxios } from "@/hooks/use-axios"
-import { useGlobalStore } from "@/hooks/use-global-store"
 import { useToast } from "@/hooks/use-toast"
 import { useUrlParams } from "@/hooks/use-url-params"
 import useWarnUserOnPageChange from "@/hooks/use-warn-user-on-page-change"
-import { decodeUrlHashToText } from "@/lib/decodeUrlHashToText"
 import { getSnippetTemplate } from "@/lib/get-snippet-template"
 import { cn } from "@/lib/utils"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 import { Loader2 } from "lucide-react"
-import { useEffect, useMemo, useState } from "react"
+import { useMemo, useState } from "react"
 import EditorNav from "@/components/package-port/EditorNav"
 import { SuspenseRunFrame } from "../SuspenseRunFrame"
 import { applyEditEventsToManualEditsFile } from "@tscircuit/core"
-import { usePackageFileById, usePackageFiles } from "@/hooks/use-package-files"
-import { useCreatePackageMutation } from "@/hooks/use-create-package-mutation"
-import { useCreatePackageReleaseMutation } from "@/hooks/use-create-package-release-mutation"
-import { useUpdatePackageFilesMutation } from "@/hooks/useUpdatePackageFilesMutation"
-import { usePackageFilesLoader } from "@/hooks/usePackageFilesLoader"
-import { findTargetFile } from "@/lib/utils/findTargetFile"
 import { toastManualEditConflicts } from "@/lib/utils/toastManualEditConflicts"
 import { ManualEditEvent } from "@tscircuit/props"
-import { isValidFileName } from "@/lib/utils/isValidFileName"
 import { useFileManagement } from "@/hooks/useFileManagement"
 
 interface Props {
@@ -34,29 +24,17 @@ export interface PackageFile {
   content: string
 }
 
-export interface CreateFileProps {
-  newFileName: string
-  setErrorMessage: (message: string) => void
-  onFileSelect: (fileName: string) => void
-  setNewFileName: (fileName: string) => void
-  setIsCreatingFile: (isCreatingFile: boolean) => void
-}
-
 export interface CodeAndPreviewState {
-  pkgFilesWithContent: PackageFile[]
-  initialFilesLoad: PackageFile[]
   showPreview: boolean
   fullScreen: boolean
   lastSavedAt: number
   circuitJson: null | any
   isPrivate: boolean
   lastRunCode: string
-  pkgFilesLoaded: boolean
-  currentFile: string
   defaultComponentFile?: string
 }
 
-const DEFAULT_CODE = `
+export const DEFAULT_CODE = `
 export default () => (
   <board width="10mm" height="10mm">
     {/* write your code here! */}
@@ -65,236 +43,76 @@ export default () => (
 `.trim()
 
 export const generateRandomPackageName = () =>
-  `untitled-package-${Math.floor(Math.random() * 90) + 10}`
+  `untitled-package-${Math.floor(Math.random() * 900) + 100}`
 
 export function CodeAndPreview({ pkg }: Props) {
   const { toast } = useToast()
-  const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
-  const loggedInUser = useGlobalStore((s) => s.session)
   const urlParams = useUrlParams()
 
   const templateFromUrl = useMemo(
     () => (urlParams.template ? getSnippetTemplate(urlParams.template) : null),
     [urlParams.template],
   )
-
-  const pkgFiles = usePackageFiles(pkg?.latest_package_release_id)
-  const indexFileFromHook = usePackageFileById(
-    pkgFiles.data?.find((x) => x.file_path === "index.tsx")?.package_file_id ??
-      null,
-  )
-
-  const defaultCode = useMemo(() => {
-    if (indexFileFromHook.data?.content_text)
-      return indexFileFromHook.data.content_text
-    return (
-      templateFromUrl?.code ??
-      decodeUrlHashToText(window.location.toString()) ??
-      (urlParams.package_id ? "" : DEFAULT_CODE)
-    )
-  }, [indexFileFromHook.data, templateFromUrl, urlParams.package_id])
-
   const [state, setState] = useState<CodeAndPreviewState>({
-    pkgFilesWithContent: !pkg
-      ? [{ path: "index.tsx", content: defaultCode }]
-      : [],
-    initialFilesLoad: [],
     showPreview: true,
     fullScreen: false,
     lastSavedAt: Date.now(),
     circuitJson: null,
     isPrivate: false,
-    lastRunCode: defaultCode,
-    pkgFilesLoaded: !urlParams.package_id,
-    currentFile: "",
+    lastRunCode: "",
   })
 
-  const manualEditsFileContent = useMemo(() => {
-    return (
-      state.pkgFilesWithContent.find((x) => x.path === "manual-edits.json")
-        ?.content ?? ""
-    )
-  }, [state.pkgFilesWithContent])
-
-  const entryPointCode = useMemo(() => {
-    const defaultComponentFile = findTargetFile(state.pkgFilesWithContent, null)
-    if (defaultComponentFile?.content) {
-      setState((prev) => ({
-        ...prev,
-        defaultComponentFile: defaultComponentFile.path,
-      }))
-      return defaultComponentFile.content
-    }
-    return (
-      state.pkgFilesWithContent.find((x) => x.path === "index.tsx")?.content ??
-      defaultCode
-    )
-  }, [state.pkgFilesWithContent, defaultCode])
-
   const packageType =
     pkg?.snippet_type ?? templateFromUrl?.type ?? urlParams.snippet_type
 
   const { Dialog: NewPackageSaveDialog, openDialog: openNewPackageSaveDialog } =
     usePackageVisibilitySettingsDialog()
 
-  const { data: loadedFiles, isLoading: isLoadingFiles } =
-    usePackageFilesLoader(pkg)
-
-  useEffect(() => {
-    if (!pkgFiles.data?.length) {
-      if (pkg && state.pkgFilesWithContent.length === 0) {
-        const defaultFiles = [{ path: "index.tsx", content: defaultCode }]
-        setState((prev) => ({
-          ...prev,
-          pkgFilesWithContent: defaultFiles,
-          initialFilesLoad: defaultFiles,
-          lastRunCode: defaultCode,
-        }))
-      }
-      return
-    }
-
-    if (loadedFiles && !isLoadingFiles) {
-      const processedResults = [...loadedFiles]
-      setState((prev) => ({
-        ...prev,
-        pkgFilesWithContent: processedResults,
-        pkgFilesLoaded: true,
-        initialFilesLoad: processedResults,
-        lastRunCode:
-          processedResults.find((x) => x.path === "index.tsx")?.content ??
-          defaultCode,
-      }))
-    }
-  }, [isLoadingFiles, pkg, pkgFiles.data, defaultCode])
-
-  const createPackageMutation = useCreatePackageMutation()
-  const { mutate: createRelease } = useCreatePackageReleaseMutation({
-    onSuccess: () => {
-      toast({
-        title: "Package released",
-        description: "Your package has been released successfully.",
-      })
+  const {
+    savePackage,
+    isSaving,
+    currentFile,
+    fsMap,
+    isLoading,
+    createFile,
+    deleteFile,
+    onFileSelect,
+    saveFiles,
+    setLocalFiles,
+    localFiles,
+    initialFiles,
+  } = useFileManagement({
+    templateCode: templateFromUrl?.code,
+    currentPackage: pkg,
+    fileChoosen: urlParams.file_path ?? null,
+    openNewPackageSaveDialog,
+    updateLastUpdated: () => {
+      setState((prev) => ({ ...prev, lastSavedAt: Date.now() }))
     },
   })
 
-  const axios = useAxios()
-
-  const updatePackageFilesMutation = useUpdatePackageFilesMutation({
-    pkg,
-    pkgFilesWithContent: state.pkgFilesWithContent,
-    initialFilesLoad: state.initialFilesLoad,
-    pkgFiles,
-    axios,
-    toast,
-  })
-
   const hasUnsavedChanges = useMemo(
     () =>
-      !updatePackageFilesMutation.isLoading &&
-      Date.now() - state.lastSavedAt > 1000 &&
-      state.pkgFilesWithContent.some((file) => {
-        const initialFile = state.initialFilesLoad.find(
-          (x) => x.path === file.path,
-        )
-        return initialFile?.content !== file.content
-      }),
-    [
-      state.pkgFilesWithContent,
-      state.initialFilesLoad,
-      updatePackageFilesMutation.isLoading,
-      state.lastSavedAt,
-    ],
+      (!isSaving &&
+        Date.now() - state.lastSavedAt > 1000 &&
+        localFiles.some((file) => {
+          const initialFile = initialFiles.find((x) => x.path === file.path)
+          return initialFile?.content !== file.content
+        })) ||
+      localFiles.length !== initialFiles.length,
+    [localFiles, initialFiles, isSaving, state.lastSavedAt],
   )
 
   useWarnUserOnPageChange({ hasUnsavedChanges })
 
-  const handleNewPackageSaveRequest = async (isPrivate: boolean) => {
-    setState((prev) => ({ ...prev, lastSavedAt: Date.now() }))
-    const newPackage = await createPackageMutation.mutateAsync({
-      name: `${loggedInUser?.github_username}/${generateRandomPackageName()}`,
-      is_private: isPrivate,
-    })
-
-    if (newPackage) {
-      createRelease(
-        {
-          package_name_with_version: `${newPackage.name}@latest`,
-        },
-        {
-          onSuccess: () => {
-            updatePackageFilesMutation.mutate({
-              package_name_with_version: `${newPackage.name}@latest`,
-              ...newPackage,
-            })
-          },
-        },
-      )
-    }
-  }
-
-  const handleSave = async () => {
-    if (!isLoggedIn) {
-      toast({
-        title: "Not Logged In",
-        description: "You must be logged in to save your package.",
-        variant: "destructive",
-      })
-      return
-    }
-
-    if (!pkg) {
-      openNewPackageSaveDialog()
-      return
-    }
-
-    setState((prev) => ({ ...prev, lastSavedAt: Date.now() }))
-
-    if (pkg) {
-      updatePackageFilesMutation.mutate(
-        {
-          package_name_with_version: `${pkg.name}@latest`,
-          ...pkg,
-        },
-        {
-          onSuccess: () => {
-            setState((prev) => ({
-              ...prev,
-              initialFilesLoad: [...prev.pkgFilesWithContent],
-            }))
-            pkgFiles.refetch()
-          },
-        },
-      )
-    }
-  }
-
   const currentFileCode = useMemo(
     () =>
-      state.pkgFilesWithContent.find((x) => x.path === state.currentFile)
-        ?.content ??
+      localFiles.find((x) => x.path === currentFile)?.content ??
       state.defaultComponentFile ??
       DEFAULT_CODE,
-    [state.pkgFilesWithContent, state.currentFile],
+    [localFiles, currentFile],
   )
 
-  const fsMap = useMemo(() => {
-    return {
-      "manual-edits.json": manualEditsFileContent || "{}",
-      ...state.pkgFilesWithContent.reduce(
-        (acc, file) => {
-          acc[file.path] = file.content
-          return acc
-        },
-        {} as Record<string, string>,
-      ),
-    }
-  }, [
-    manualEditsFileContent,
-    entryPointCode,
-    packageType,
-    state.pkgFilesWithContent,
-  ])
   const mainComponentPath = useMemo(() => {
     const isReactComponentExported =
       /export function\s+\w+/.test(currentFileCode) ||
@@ -303,52 +121,50 @@ export function CodeAndPreview({ pkg }: Props) {
       /export default\s+function\s*(\w*)\s*\(/.test(currentFileCode) ||
       /export default\s*\(\s*\)\s*=>/.test(currentFileCode)
 
-    return (state.currentFile?.endsWith(".tsx") ||
-      state.currentFile?.endsWith(".ts")) &&
-      !!state.pkgFilesWithContent.some((x) => x.path == state.currentFile) &&
+    return (currentFile?.endsWith(".tsx") || currentFile?.endsWith(".ts")) &&
+      !!localFiles.some((x) => x.path == currentFile) &&
       isReactComponentExported
-      ? state.currentFile
+      ? currentFile
       : state.defaultComponentFile
-  }, [state.currentFile, state.pkgFilesWithContent, currentFileCode])
+  }, [currentFile, localFiles, currentFileCode])
 
   const handleEditEvent = (event: ManualEditEvent) => {
-    const parsedManualEdits = JSON.parse(manualEditsFileContent || "{}")
+    const parsedManualEdits = JSON.parse(
+      localFiles.find((x) => x.path === "manual-edits.json")?.content || "{}",
+    )
     const newManualEditsFileContent = applyEditEventsToManualEditsFile({
       circuitJson: state.circuitJson,
       editEvents: [event],
       manualEditsFile: parsedManualEdits,
     })
 
-    setState((prev) => {
-      const manualEditsIndex = prev.pkgFilesWithContent.findIndex(
-        (file) => file.path === "manual-edits.json",
-      )
-
-      const updatedFiles = [...prev.pkgFilesWithContent]
+    setLocalFiles(
+      (() => {
+        const manualEditsIndex = localFiles.findIndex(
+          (file) => file.path === "manual-edits.json",
+        )
 
-      if (manualEditsIndex !== -1) {
-        // Update existing manual-edits.json
-        updatedFiles[manualEditsIndex] = {
-          ...updatedFiles[manualEditsIndex],
-          content: JSON.stringify(newManualEditsFileContent, null, 2),
+        const updatedFiles = [...localFiles]
+
+        if (manualEditsIndex !== -1) {
+          // Update existing manual-edits.json
+          updatedFiles[manualEditsIndex] = {
+            ...updatedFiles[manualEditsIndex],
+            content: JSON.stringify(newManualEditsFileContent, null, 2),
+          }
+        } else {
+          // Add new manual-edits.json
+          updatedFiles.push({
+            path: "manual-edits.json",
+            content: JSON.stringify(newManualEditsFileContent, null, 2),
+          })
         }
-      } else {
-        // Add new manual-edits.json
-        updatedFiles.push({
-          path: "manual-edits.json",
-          content: JSON.stringify(newManualEditsFileContent, null, 2),
-        })
-      }
-      return {
-        ...prev,
-        pkgFilesWithContent: updatedFiles,
-      }
-    })
+        return updatedFiles
+      })(),
+    )
   }
 
-  const { handleCreateFile } = useFileManagement(state, setState)
-
-  if ((!pkg && urlParams.package_id) || pkgFiles.isLoading || isLoadingFiles) {
+  if ((!pkg && urlParams.package_id) || isLoading) {
     return (
       <div className="flex items-center justify-center h-64">
         <div className="flex flex-col items-center justify-center">
@@ -366,9 +182,9 @@ export function CodeAndPreview({ pkg }: Props) {
         pkg={pkg}
         packageType={packageType}
         code={String(currentFileCode)}
-        isSaving={updatePackageFilesMutation.isLoading}
+        isSaving={isSaving}
         hasUnsavedChanges={hasUnsavedChanges}
-        onSave={handleSave}
+        onSave={saveFiles}
         onTogglePreview={() =>
           setState((prev) => ({ ...prev, showPreview: !prev.showPreview }))
         }
@@ -384,24 +200,22 @@ export function CodeAndPreview({ pkg }: Props) {
           )}
         >
           <CodeEditor
-            handleCreateFile={handleCreateFile}
-            currentFile={state.currentFile}
-            setCurrentFile={(file) =>
-              setState((prev) => ({ ...prev, currentFile: file }))
-            }
-            files={state.pkgFilesWithContent}
+            handleCreateFile={createFile}
+            handleDeleteFile={deleteFile}
+            currentFile={currentFile}
+            onFileSelect={onFileSelect}
+            files={localFiles}
             onCodeChange={(newCode, filename) => {
-              const targetFilename = filename ?? state.currentFile
-              setState((prev) => ({
-                ...prev,
-                pkgFilesWithContent: prev.pkgFilesWithContent.map((file) =>
+              const targetFilename = filename ?? currentFile
+              setLocalFiles((prev) =>
+                prev.map((file) =>
                   file.path === targetFilename
                     ? { ...file, content: newCode }
                     : file,
                 ),
-              }))
+              )
             }}
-            pkgFilesLoaded={state.pkgFilesLoaded}
+            pkgFilesLoaded={!isLoading}
           />
         </div>
         {state.showPreview && (
@@ -427,15 +241,12 @@ export function CodeAndPreview({ pkg }: Props) {
               onEditEvent={(event) => {
                 handleEditEvent(event)
               }}
-              fsMap={fsMap}
+              fsMap={fsMap ?? {}}
             />
           </div>
         )}
       </div>
-      <NewPackageSaveDialog
-        initialIsPrivate={false}
-        onSave={handleNewPackageSaveRequest}
-      />
+      <NewPackageSaveDialog initialIsPrivate={false} onSave={savePackage} />
     </div>
   )
 }

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

@@ -24,12 +24,20 @@ import {
 import { EditorView } from "codemirror"
 import { useEffect, useMemo, useRef, useState } from "react"
 import tsModule from "typescript"
-import CodeEditorHeader from "@/components/package-port/CodeEditorHeader"
+import CodeEditorHeader, {
+  FileName,
+} from "@/components/package-port/CodeEditorHeader"
 import { useCodeCompletionApi } from "@/hooks/use-code-completion-ai-api"
 import FileSidebar from "../FileSidebar"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
-import type { CreateFileProps, PackageFile } from "./CodeAndPreview"
+import type { PackageFile } from "./CodeAndPreview"
 import { useShikiHighlighter } from "@/hooks/use-shiki-highlighter"
+import {
+  ICreateFileProps,
+  ICreateFileResult,
+  IDeleteFileProps,
+  IDeleteFileResult,
+} from "@/hooks/useFileManagement"
 
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -46,19 +54,21 @@ export const CodeEditor = ({
   onFileContentChanged,
   pkgFilesLoaded,
   currentFile,
-  setCurrentFile,
+  onFileSelect,
   handleCreateFile,
+  handleDeleteFile,
 }: {
   onCodeChange: (code: string, filename?: string) => void
   files: PackageFile[]
-  handleCreateFile: (props: CreateFileProps) => void
+  handleCreateFile: (props: ICreateFileProps) => ICreateFileResult
+  handleDeleteFile: (props: IDeleteFileProps) => IDeleteFileResult
   readOnly?: boolean
   isStreaming?: boolean
   pkgFilesLoaded?: boolean
   showImportAndFormatButtons?: boolean
   onFileContentChanged?: (path: string, content: string) => void
-  currentFile: string
-  setCurrentFile: (path: string) => void
+  currentFile: string | null
+  onFileSelect: (path: string) => void
 }) => {
   const editorRef = useRef<HTMLDivElement>(null)
   const viewRef = useRef<EditorView | null>(null)
@@ -85,7 +95,6 @@ export const CodeEditor = ({
     if (files.length === 0 || !pkgFilesLoaded || currentFile) return
 
     const targetFile = findTargetFile(files, filePathFromUrl)
-
     if (targetFile) {
       handleFileChange(targetFile.path)
       setCode(targetFile.content)
@@ -229,7 +238,7 @@ export const CodeEditor = ({
     // Set up base extensions
     const baseExtensions = [
       basicSetup,
-      currentFile.endsWith(".json")
+      currentFile?.endsWith(".json")
         ? json()
         : javascript({ typescript: true, jsx: true }),
       keymap.of([indentWithTab]),
@@ -237,7 +246,7 @@ export const CodeEditor = ({
       EditorView.updateListener.of((update) => {
         if (update.docChanged) {
           const newContent = update.state.doc.toString()
-
+          if (!currentFile) return
           if (newContent === lastFilesEventContent[currentFile]) return
           lastFilesEventContent[currentFile] = newContent
 
@@ -272,12 +281,12 @@ export const CodeEditor = ({
 
     // Add TypeScript-specific extensions and handlers
     const tsExtensions =
-      currentFile.endsWith(".tsx") || currentFile.endsWith(".ts")
+      currentFile?.endsWith(".tsx") || currentFile?.endsWith(".ts")
         ? [
             tsFacet.of({
               env,
-              path: currentFile.endsWith(".ts")
-                ? currentFile.replace(/\.ts$/, ".tsx")
+              path: currentFile?.endsWith(".ts")
+                ? currentFile?.replace(/\.ts$/, ".tsx")
                 : currentFile,
             }),
             tsSync(),
@@ -407,7 +416,7 @@ export const CodeEditor = ({
                       const end = start + match[0].length
                       decorations.push(
                         Decoration.mark({
-                          class: "cm-underline",
+                          class: "cm-underline cursor-pointer",
                         }).range(start, end),
                       )
                     }
@@ -421,7 +430,7 @@ export const CodeEditor = ({
         : []
 
     const state = EditorState.create({
-      doc: fileMap[currentFile] || "",
+      doc: fileMap[currentFile || ""] || "",
       extensions: [...baseExtensions, ...tsExtensions],
     })
 
@@ -432,7 +441,7 @@ export const CodeEditor = ({
 
     viewRef.current = view
 
-    if (currentFile.endsWith(".tsx") || currentFile.endsWith(".ts")) {
+    if (currentFile?.endsWith(".tsx") || currentFile?.endsWith(".ts")) {
       ata(`${defaultImports}${code}`)
     }
 
@@ -459,7 +468,7 @@ export const CodeEditor = ({
   }
 
   const updateEditorToMatchCurrentFile = () => {
-    const currentContent = fileMap[currentFile] || ""
+    const currentContent = fileMap[currentFile || ""] || ""
     updateCurrentEditorContent(currentContent)
   }
 
@@ -468,14 +477,14 @@ export const CodeEditor = ({
   useEffect(() => {
     if (
       ataRef.current &&
-      (currentFile.endsWith(".tsx") || currentFile.endsWith(".ts"))
+      (currentFile?.endsWith(".tsx") || currentFile?.endsWith(".ts"))
     ) {
       ataRef.current(`${defaultImports}${code}`)
     }
   }, [codeImports])
 
   const handleFileChange = (path: string) => {
-    setCurrentFile(path)
+    onFileSelect(path)
     try {
       // Set url query to file path
       const urlParams = new URLSearchParams(window.location.search)
@@ -484,7 +493,8 @@ export const CodeEditor = ({
     } catch {}
   }
 
-  const updateFileContent = (path: string, newContent: string) => {
+  const updateFileContent = (path: FileName | null, newContent: string) => {
+    if (!path) return
     if (currentFile === path) {
       setCode(newContent)
       onCodeChange(newContent, path)
@@ -523,6 +533,7 @@ export const CodeEditor = ({
         }
         onFileSelect={handleFileChange}
         handleCreateFile={handleCreateFile}
+        handleDeleteFile={handleDeleteFile}
       />
       <div className="flex flex-col flex-1 w-full min-w-0 h-full">
         {showImportAndFormatButtons && (

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

@@ -23,9 +23,9 @@ import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 export type FileName = string
 
 interface CodeEditorHeaderProps {
-  currentFile: FileName
+  currentFile: FileName | null
   files: Record<FileName, string>
-  updateFileContent: (filename: FileName, content: string) => void
+  updateFileContent: (filename: FileName | null, content: string) => void
   fileSidebarState: ReturnType<typeof useState<boolean>>
   handleFileChange: (filename: FileName) => void
   entrypointFileName?: string
@@ -46,6 +46,7 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
 
   const handleFormatFile = useCallback(() => {
     if (!window.prettier || !window.prettierPlugins) return
+    if (!currentFile) return
     try {
       const currentContent = files[currentFile]
       let fileExtension = currentFile.split(".").pop()?.toLowerCase()
@@ -148,9 +149,9 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
           </div>
         </button>
         <div>
-          <Select value={currentFile} onValueChange={handleFileChange}>
+          <Select value={currentFile || ""} onValueChange={handleFileChange}>
             <SelectTrigger
-              className={`h-7 px-3 bg-white select-none transition-[margin] duration-300 ease-in-out ${
+              className={`h-7 w-24 px-3 bg-white select-none transition-[margin] duration-300 ease-in-out ${
                 sidebarOpen ? "-ml-2" : "-ml-1"
               }`}
             >
@@ -197,7 +198,7 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
         </div>
 
         <div className="flex items-center overflow-x-hidden gap-2 px-2 py-1 ml-auto">
-          {checkIfManualEditsImported(files, currentFile) && (
+          {checkIfManualEditsImported(files, currentFile || "") && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
@@ -235,7 +236,7 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
         </div>
         <ImportSnippetDialog
           onSnippetSelected={(snippet: any) => {
-            const newContent = `import {} from "@tsci/${snippet.owner_name}.${snippet.unscoped_name}"\n${files[currentFile]}`
+            const newContent = `import {} from "@tsci/${snippet.owner_name}.${snippet.unscoped_name}"\n${files[currentFile || ""]}`
             updateFileContent(currentFile, newContent)
           }}
         />