FileExplorer.ts

// FileExplorer — file tree view in sidebar, backed by VirtualFileSystem.

import VirtualFileSystem, { VFSEntry } from './VirtualFileSystem';

export type FileOpenCallback = (path: string) => void;

export default class FileExplorer {
    private container: HTMLElement;
    private vfs: VirtualFileSystem;
    private onOpen: FileOpenCallback;
    private treeEl: HTMLElement;
    private expandedDirs = new Set<string>(['/']);
    private selectedPath: string | null = null;

    constructor(container: HTMLElement, vfs: VirtualFileSystem, onOpen: FileOpenCallback) {
        this.container = container;
        this.vfs = vfs;
        this.onOpen = onOpen;

        // Header with toolbar
        const header = document.createElement('div');
        header.className = 'explorer-header';

        const title = document.createElement('span');
        title.textContent = 'EXPLORER';
        title.className = 'explorer-title';
        header.appendChild(title);

        const toolbar = document.createElement('span');
        toolbar.className = 'explorer-toolbar';

        const newFileBtn = document.createElement('button');
        newFileBtn.className = 'explorer-action';
        newFileBtn.title = 'New File';
        newFileBtn.textContent = '+';
        newFileBtn.addEventListener('click', () => this.newFile());
        toolbar.appendChild(newFileBtn);

        const newFolderBtn = document.createElement('button');
        newFolderBtn.className = 'explorer-action';
        newFolderBtn.title = 'New Folder';
        newFolderBtn.textContent = '\u{1F4C1}';
        newFolderBtn.addEventListener('click', () => this.newFolder());
        toolbar.appendChild(newFolderBtn);

        header.appendChild(toolbar);
        container.appendChild(header);

        // Tree container
        this.treeEl = document.createElement('div');
        this.treeEl.className = 'explorer-tree';
        container.appendChild(this.treeEl);

        // Listen for VFS changes
        this.vfs.on(() => this.render());

        // Context menu handler
        this.treeEl.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            const target = (e.target as HTMLElement).closest('.explorer-item') as HTMLElement | null;
            if (target && target.dataset.path) {
                this.showContextMenu(e.clientX, e.clientY, target.dataset.path);
            }
        });

        this.render();
    }

    render(): void {
        this.treeEl.innerHTML = '';
        const entries = this.vfs.listDir('/');
        this.renderEntries(entries, this.treeEl, 0);

        if (entries.length === 0) {
            const empty = document.createElement('div');
            empty.className = 'explorer-empty';
            empty.textContent = 'No files';
            this.treeEl.appendChild(empty);
        }
    }

    private renderEntries(entries: VFSEntry[], parent: HTMLElement, depth: number): void {
        for (const entry of entries) {
            const item = document.createElement('div');
            item.className = 'explorer-item' + (entry.path === this.selectedPath ? ' explorer-selected' : '');
            item.style.paddingLeft = (8 + depth * 16) + 'px';
            item.dataset.path = entry.path;

            if (entry.isDirectory) {
                const expanded = this.expandedDirs.has(entry.path);
                const arrow = document.createElement('span');
                arrow.className = 'explorer-arrow';
                arrow.textContent = expanded ? '\u25BE' : '\u25B8';
                item.appendChild(arrow);

                const name = document.createElement('span');
                name.className = 'explorer-name';
                name.textContent = this.basename(entry.path);
                item.appendChild(name);

                item.addEventListener('click', () => {
                    if (this.expandedDirs.has(entry.path)) {
                        this.expandedDirs.delete(entry.path);
                    } else {
                        this.expandedDirs.add(entry.path);
                    }
                    this.render();
                });

                parent.appendChild(item);

                if (expanded) {
                    const children = this.vfs.listDir(entry.path);
                    this.renderEntries(children, parent, depth + 1);
                }
            } else {
                const icon = document.createElement('span');
                icon.className = 'explorer-file-icon';
                icon.textContent = '\u{1F4C4}';
                item.appendChild(icon);

                const name = document.createElement('span');
                name.className = 'explorer-name';
                name.textContent = this.basename(entry.path);
                item.appendChild(name);

                item.addEventListener('click', () => {
                    this.selectedPath = entry.path;
                    this.render();
                    this.onOpen(entry.path);
                });

                parent.appendChild(item);
            }
        }
    }

    private basename(path: string): string {
        const parts = path.split('/');
        return parts[parts.length - 1] || path;
    }

    private newFile(): void {
        const name = prompt('File name:');
        if (!name) return;
        const path = '/' + name.toUpperCase().replace(/\\/g, '/');
        this.vfs.writeFile(path, '');
        this.onOpen(path);
    }

    private newFolder(): void {
        const name = prompt('Folder name:');
        if (!name) return;
        const path = '/' + name.toUpperCase().replace(/\\/g, '/');
        this.vfs.mkdir(path);
    }

    private showContextMenu(x: number, y: number, path: string): void {
        // Remove existing context menu
        const existing = document.querySelector('.explorer-context-menu');
        if (existing) existing.remove();

        const menu = document.createElement('div');
        menu.className = 'explorer-context-menu';
        menu.style.left = x + 'px';
        menu.style.top = y + 'px';

        const renameBtn = document.createElement('button');
        renameBtn.textContent = 'Rename';
        renameBtn.addEventListener('click', () => {
            menu.remove();
            const newName = prompt('New name:', this.basename(path));
            if (newName) {
                const parent = path.slice(0, path.lastIndexOf('/')) || '/';
                this.vfs.rename(path, parent + '/' + newName.toUpperCase());
            }
        });
        menu.appendChild(renameBtn);

        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'Delete';
        deleteBtn.addEventListener('click', () => {
            menu.remove();
            if (confirm(`Delete "${this.basename(path)}"?`)) {
                this.vfs.deleteFile(path);
            }
        });
        menu.appendChild(deleteBtn);

        document.body.appendChild(menu);

        // Close on click outside
        const close = (e: MouseEvent) => {
            if (!menu.contains(e.target as Node)) {
                menu.remove();
                document.removeEventListener('click', close);
            }
        };
        setTimeout(() => document.addEventListener('click', close), 0);
    }
}