Repository: supabase/supabase
File: apps/studio/components/ui/FileExplorerAndEditor/index.tsx (TypeScript)

Code before:
          } else if (newFileIndex !== -1) {
            // Replace file in the newFiles array (from earlier in this operation)
            newFiles[newFileIndex] = {
              ...newFiles[newFileIndex],
              content: extractedFile.content,
              selected: false,
            }
            replacedCount++
          } else {
            // Add as new file
            const newId =
              Math.max(
                0,
                ...files.map((f) => f.id),
                ...updatedFiles.map((f) => f.id),
                ...newFiles.map((f) => f.id)
              ) + 1
            newFiles.push({
              id: newId,
              name: extractedFile.name,
              content: extractedFile.content,
              selected: false,
            })
            extractedCount++
          }
        }

        setIsExtractingZip(false)
        setExtractionProgress(null)

        // Show success message
        const messages: string[] = []
        if (extractedCount > 0) {
          messages.push(`Added ${extractedCount} new file${extractedCount > 1 ? 's' : ''}`)
        }
        if (replacedCount > 0) {
          messages.push(`Replaced ${replacedCount} existing file${replacedCount > 1 ? 's' : ''}`)
        }

        toast.success(
          <div className="flex flex-col gap-y-1">
            <p className="text-foreground">Successfully extracted {zipFile.name}</p>
            <p className="text-foreground-light">{messages.join(' • ')}</p>
          </div>,
          { duration: 5000 }
        )
      } catch (error) {
        console.error(`Failed to extract zip file ${zipFile.name}:`, error)
        setIsExtractingZip(false)
        setExtractionProgress(null)


Review comment (suggestion):
This can be cleaned up a bit instead of doing findIndex and the using 2 variable. Why not create a method that returns an enum like `NEW_FILE`, `REPLACE_FILE` `CREATE_FILE`. Then this if else, else can be a switch statement that marks the new file assignment

Code after:
              ...newFiles.map((f) => f.id)
            ) + 1
          newFiles.push({
            id: newId,
            name: file.name,
            content: file.content,
            selected: false,
          })
          extractedCount++
          break
      }
    }

    // Show success message
    const messages: string[] = []
    if (extractedCount > 0) {
      messages.push(`Added ${extractedCount} new file${extractedCount > 1 ? 's' : ''}`)
    }
    if (replacedCount > 0) {
      messages.push(`Replaced ${replacedCount} existing file${replacedCount > 1 ? 's' : ''}`)
    }
    const totalFilesProcessed = extractedCount + replacedCount

    if (totalFilesProcessed > 0) {
      toast.success(
        <div className="flex flex-col gap-y-1">
          <p className="text-foreground">
            Successfully added dropped file{totalFilesProcessed > 1 ? 's' : ''}
          </p>
          <p className="text-foreground-light">{messages.join(', ')}.</p>
        </div>,
        { duration: 5000 }
      )
    }

    // Select the last added/modified file
    if (newFiles.length > 0) {
      newFiles[newFiles.length - 1].selected = true
      onFilesChange([...updatedFiles, ...newFiles])
    } else if (hasReplacedFiles) {
      // If we only replaced files, select the first one
      updatedFiles[0].selected = true
      onFilesChange(updatedFiles)
    }
  }

  const handleStartRename = (id: number) => {
    // Force re-render of the TreeView with the updated metadata
    setTreeData({
      name: '',
      children: files.map((file) => ({