[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { FileExplorer } from "@/components/file-explorer" export default function Home() { return (

VS Code-like File Explorer

) } [V0_FILE]typescriptreact:file="components/context-menu.tsx" "use client" import type { ReactNode } from "react" interface ContextMenuProps { x: number y: number onClose: () => void options: { label: string icon?: ReactNode onClick: () => void }[] } export function ContextMenu({ x, y, onClose, options }: ContextMenuProps) { const handleClick = (callback: () => void) => { callback() onClose() } return (

e.stopPropagation()} > {options.map((option, index) => (

handleClick(option.onClick)} > {option.icon && {option.icon}} {option.label}

))}

) } [V0_FILE]typescriptreact:file="components/explorer-header.tsx" isQuickEdit="true" "use client" import { FolderPlus, FilePlus, FolderClosed } from "lucide-react" interface ExplorerHeaderProps { onAddFile: () => void onAddFolder: () => void onCloseAll: () => void selectedFolder: string | null } export function ExplorerHeader({ onAddFile, onAddFolder, onCloseAll, selectedFolder }: ExplorerHeaderProps) { return (

EXPLORER

{selectedFolder &&

Selected: {selectedFolder}

}

) } [V0_FILE]typescriptreact:file="components/accordion-controls.tsx" "use client" import { useState } from "react" import { Clock } from "lucide-react" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Button } from "@/components/ui/button" import { Slider } from "@/components/ui/slider" interface AccordionControlsProps { onSetExpandDelay: (delay: number) => void currentDelay: number } export function AccordionControls({ onSetExpandDelay, currentDelay }: AccordionControlsProps) { const [delay, setDelay] = useState(currentDelay) const handleDelayChange = (value: number[]) => { setDelay(value[0]) } const handleApply = () => { onSetExpandDelay(delay) } return (

Accordion Expand Delay

{delay}ms

) } [V0_FILE]typescriptreact:file="components/file-tree.tsx" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { ChevronRight, ChevronDown, File, Folder, FolderOpen, FilePlus, FolderPlus, Trash2, Edit } from "lucide-react" import type { FileSystemItem } from "./file-explorer" import { ContextMenu } from "./context-menu" interface FileTreeProps { items: FileSystemItem[] level?: number onToggleFolder: (id: string) => void onAddFile: (id: string) => void onAddFolder: (id: string) => void onRename: (id: string, newName: string) => void onDelete: (id: string) => void onStartEditing: (id: string) => void onSelectItem: (id: string) => void expandDelay?: number } export function FileTree({ items, level = 0, onToggleFolder, onAddFile, onAddFolder, onRename, onDelete, onStartEditing, onSelectItem, expandDelay = 0, }: FileTreeProps) { const [contextMenu, setContextMenu] = useState<{ x: number y: number itemId: string itemType: "file" | "folder" } | null>(null) const handleContextMenu = (e: React.MouseEvent, id: string, type: "file" | "folder") => { e.preventDefault() setContextMenu({ x: e.clientX, y: e.clientY, itemId: id, itemType: type, }) } useEffect(() => { const handleClickOutside = () => setContextMenu(null) window.addEventListener("click", handleClickOutside) return () => window.removeEventListener("click", handleClickOutside) }, []) return (

{items.map((item) => ( ))} {contextMenu && ( setContextMenu(null)} options={[ ...(contextMenu.itemType === "folder" ? [ { label: "New File", icon: , onClick: () => onAddFile(contextMenu.itemId), }, { label: "New Folder", icon: , onClick: () => onAddFolder(contextMenu.itemId), }, ] : []), { label: "Rename", icon: , onClick: () => onStartEditing(contextMenu.itemId), }, { label: "Delete", icon: , onClick: () => onDelete(contextMenu.itemId), }, ]} /> )}

) } interface FileTreeItemProps { item: FileSystemItem level: number onToggleFolder: (id: string) => void onContextMenu: (e: React.MouseEvent, id: string, type: "file" | "folder") => void onRename: (id: string, newName: string) => void onStartEditing: (id: string) => void onAddFile: (id: string) => void onAddFolder: (id: string) => void onDelete: (id: string) => void onSelectItem: (id: string) => void expandDelay?: number } function FileTreeItem({ item, level, onToggleFolder, onContextMenu, onRename, onStartEditing, onAddFile, onAddFolder, onDelete, onSelectItem, expandDelay = 0, }: FileTreeItemProps) { const inputRef = useRef(null) const [isHovering, setIsHovering] = useState(false) useEffect(() => { if (item.isEditing && inputRef.current) { inputRef.current.focus() // Select name without extension for files if (item.type === "file") { const dotIndex = item.name.lastIndexOf(".") if (dotIndex > 0) { inputRef.current.setSelectionRange(0, dotIndex) } else { inputRef.current.select() } } else { inputRef.current.select() } } }, [item.isEditing, item.name, item.type]) const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter") { onRename(item.id, e.currentTarget.value) } else if (e.key === "Escape") { onRename(item.id, item.name) // Cancel editing } } const handleBlur = (e: React.FocusEvent) => { onRename(item.id, e.target.value) } return (

{ if (item.type === "folder") { // Only toggle the folder that was clicked onToggleFolder(item.id) e.stopPropagation() } // Select the item regardless of type onSelectItem(item.id) }} onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)} onContextMenu={(e) => onContextMenu(e, item.id, item.type)} onDoubleClick={() => item.type === "file" && onStartEditing(item.id)} > {item.type === "folder" && ( {item.isOpen ? : } )} {item.type === "folder" ? ( item.isOpen ? ( ) : ( ) ) : ( )} {item.isEditing ? ( ) : ( {item.name} )} {isHovering && item.type === "folder" && !item.isEditing && (

)}

{item.type === "folder" && item.isOpen && item.children && ( )}

) } [V0_FILE]typescriptreact:file="components/file-explorer.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { FileTree } from "./file-tree" import { AccordionControls } from "./accordion-controls" import { FilePlus, FolderPlus, FolderClosed } from "lucide-react" export type FileSystemItem = { id: string name: string type: "file" | "folder" children?: FileSystemItem[] isOpen?: boolean isEditing?: boolean isSelected?: boolean } export function FileExplorer() { const [items, setItems] = useState([ { id: "1", name: "src", type: "folder", isOpen: true, children: [ { id: "2", name: "components", type: "folder", children: [ { id: "3", name: "Button.tsx", type: "file" }, { id: "4", name: "Card.tsx", type: "file" }, ], }, { id: "5", name: "App.tsx", type: "file" }, { id: "6", name: "index.tsx", type: "file" }, ], }, { id: "7", name: "public", type: "folder", children: [ { id: "8", name: "index.html", type: "file" }, { id: "9", name: "favicon.ico", type: "file" }, ], }, { id: "10", name: "package.json", type: "file" }, { id: "11", name: "tsconfig.json", type: "file" }, ]) const [selectedId, setSelectedId] = useState(null) const [expandDelay, setExpandDelay] = useState(300) const [pendingToggle, setPendingToggle] = useState(null) // Handle delayed folder expansion useEffect(() => { if (pendingToggle) { const timer = setTimeout(() => { setItems( updateItemsRecursively(items, pendingToggle, (item) => ({ ...item, isOpen: !item.isOpen, })), ) setPendingToggle(null) }, expandDelay) return () => clearTimeout(timer) } }, [pendingToggle, expandDelay, items]) const toggleFolder = (id: string) => { if (expandDelay > 0) { setPendingToggle(id) } else { setItems( updateItemsRecursively(items, id, (item) => ({ ...item, isOpen: !item.isOpen, })), ) } } const closeAllFolders = () => { const closeAllRecursively = (items: FileSystemItem[]): FileSystemItem[] => { return items.map((item) => { if (item.type === "folder") { return { ...item, isOpen: false, children: item.children ? closeAllRecursively(item.children) : [], } } return item }) } setItems(closeAllRecursively(items)) } const selectItem = (id: string) => { setItems( updateItemsRecursively(items, null, (item) => ({ ...item, isSelected: false, })), ) setItems( updateItemsRecursively(items, id, (item) => ({ ...item, isSelected: true, ...(item.type === "folder" && expandDelay === 0 ? { isOpen: true } : {}), })), ) setSelectedId(id) } const addItem = (parentId: string | null, type: "file" | "folder") => { const newId = Date.now().toString() const newName = type === "file" ? "new-file.txt" : "new-folder" const newItem: FileSystemItem = { id: newId, name: newName, type, isEditing: true, ...(type === "folder" ? { children: [], isOpen: true } : {}), } if (!parentId) { if (selectedId) { const selectedItem = findItemById(items, selectedId) if (selectedItem && selectedItem.type === "folder") { setItems( updateItemsRecursively(items, selectedId, (item) => ({ ...item, isOpen: true, children: [...(item.children || []), newItem], })), ) return } } setItems([...items, newItem]) return } setItems( updateItemsRecursively(items, parentId, (item) => ({ ...item, isOpen: true, children: [...(item.children || []), newItem], })), ) } const renameItem = (id: string, newName: string) => { setItems( updateItemsRecursively(items, id, (item) => ({ ...item, name: newName, isEditing: false, })), ) } const deleteItem = (id: string) => { const deleteRecursively = (items: FileSystemItem[]): FileSystemItem[] => { return items.filter((item) => { if (item.id === id) return false if (item.children) { item.children = deleteRecursively(item.children) } return true }) } setItems(deleteRecursively(items)) } const startEditing = (id: string) => { setItems( updateItemsRecursively(items, id, (item) => ({ ...item, isEditing: true, })), ) } const updateItemsRecursively = ( items: FileSystemItem[], id: string | null, updateFn: (item: FileSystemItem) => FileSystemItem, ): FileSystemItem[] => { return items.map((item) => { if (item.id === id || id === null) { const updatedItem = updateFn(item) if (item.children) { return { ...updatedItem, children: id === null ? updateItemsRecursively(item.children, id, updateFn) : item.children, } } return updatedItem } if (item.children) { return { ...item, children: updateItemsRecursively(item.children, id, updateFn), } } return item }) } const findItemById = (items: FileSystemItem[], id: string): FileSystemItem | null => { for (const item of items) { if (item.id === id) { return item } if (item.children) { const found = findItemById(item.children, id) if (found) { return found } } } return null } return (

EXPLORER

{selectedId && (

Selected: {findItemById(items, selectedId)?.name}

)}

addItem(id, "file")} onAddFolder={(id) => addItem(id, "folder")} onRename={renameItem} onDelete={deleteItem} onStartEditing={startEditing} onSelectItem={selectItem} expandDelay={expandDelay} />

) }