@illuma-ai/code-sandbox 1.4.0 → 1.5.0

package/src/components/FileTree.tsx

@@ -1,678 +0,0 @@
-/**
- * FileTree — Collapsible file/folder tree with icons.
- *
- * Renders a recursive tree of FileNodes. Folders expand/collapse on click.
- * Files are selectable and show the appropriate icon based on extension.
- * Uses inline SVG icons for reliable cross-platform rendering.
- */
-
-import React, { useState } from "react";
-import type {
-  FileMap,
-  FileNode,
-  FileTreeProps,
-  FileChangeStatus,
-} from "../types";
-
-/** Color for each file change status indicator dot */
-const STATUS_COLORS: Record<FileChangeStatus, string> = {
-  new: "#4ade80", // green-400
-  modified: "#fb923c", // orange-400
-  deleted: "#f87171", // red-400
-  unchanged: "transparent",
-};
-
-/** Short label for each file change status (one character) */
-const STATUS_LETTERS: Record<FileChangeStatus, string> = {
-  new: "N",
-  modified: "M",
-  deleted: "D",
-  unchanged: "",
-};
-
-/**
- * Build a tree structure from a flat FileMap.
- *
- * Converts { "routes/api.js": "...", "server.js": "..." }
- * into a nested FileNode[] tree.
- */
-export function buildFileTree(files: FileMap): FileNode[] {
-  const root: FileNode[] = [];
-  const dirs = new Map<string, FileNode>();
-
-  // Sort paths so directories come before files at each level
-  const sortedPaths = Object.keys(files).sort((a, b) => {
-    const aParts = a.split("/");
-    const bParts = b.split("/");
-    for (let i = 0; i < Math.min(aParts.length, bParts.length); i++) {
-      if (aParts[i] !== bParts[i]) {
-        const aIsDir = i < aParts.length - 1;
-        const bIsDir = i < bParts.length - 1;
-        if (aIsDir && !bIsDir) return -1;
-        if (!aIsDir && bIsDir) return 1;
-        return aParts[i].localeCompare(bParts[i]);
-      }
-    }
-    return aParts.length - bParts.length;
-  });
-
-  for (const filePath of sortedPaths) {
-    const parts = filePath.split("/");
-
-    // Ensure all parent directories exist
-    for (let i = 0; i < parts.length - 1; i++) {
-      const dirPath = parts.slice(0, i + 1).join("/");
-      if (!dirs.has(dirPath)) {
-        const dirNode: FileNode = {
-          name: parts[i],
-          path: dirPath,
-          type: "directory",
-          children: [],
-        };
-        dirs.set(dirPath, dirNode);
-
-        if (i === 0) {
-          root.push(dirNode);
-        } else {
-          const parentPath = parts.slice(0, i).join("/");
-          const parent = dirs.get(parentPath);
-          parent?.children?.push(dirNode);
-        }
-      }
-    }
-
-    const fileNode: FileNode = {
-      name: parts[parts.length - 1],
-      path: filePath,
-      type: "file",
-    };
-
-    if (parts.length === 1) {
-      root.push(fileNode);
-    } else {
-      const parentPath = parts.slice(0, -1).join("/");
-      const parent = dirs.get(parentPath);
-      parent?.children?.push(fileNode);
-    }
-  }
-
-  return root;
-}
-
-// ---------------------------------------------------------------------------
-// SVG Icons — inline for reliable rendering (no emoji issues)
-// ---------------------------------------------------------------------------
-
-/** Chevron right arrow for folder expand/collapse */
-function ChevronIcon({ expanded }: { expanded: boolean }) {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      className="shrink-0 transition-transform duration-150"
-      style={{ transform: expanded ? "rotate(90deg)" : "none" }}
-    >
-      <path
-        d="M6 4l4 4-4 4"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-/** Folder icon (open or closed) */
-function FolderIcon({ open }: { open: boolean }) {
-  if (open) {
-    return (
-      <svg
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-        className="shrink-0"
-      >
-        <path
-          d="M1.5 3.5A1 1 0 012.5 2.5h3.172a1 1 0 01.707.293L7.5 3.914a1 1 0 00.707.293H13.5a1 1 0 011 1v1.293H3.207a1 1 0 00-.966.741L1.5 10.5V3.5z"
-          fill="#dcb67a"
-        />
-        <path
-          d="M2.241 7.241A1 1 0 013.207 6.5H14.5a1 1 0 01.966 1.259l-1.5 5.5A1 1 0 0113 14H2.5a1 1 0 01-1-1V8.5a1 1 0 01.741-.966l0-.293z"
-          fill="#e8c87a"
-        />
-      </svg>
-    );
-  }
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      className="shrink-0"
-    >
-      <path
-        d="M1.5 3A1.5 1.5 0 013 1.5h3.172a1.5 1.5 0 011.06.44L8.354 3.06a.5.5 0 00.354.147H13A1.5 1.5 0 0114.5 4.707V12A1.5 1.5 0 0113 13.5H3A1.5 1.5 0 011.5 12V3z"
-        fill="#dcb67a"
-      />
-    </svg>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Per-extension file icons — compact 16x16 SVGs with distinct shapes/labels.
-// Inspired by VS Code's Seti/Material icon themes.
-// ---------------------------------------------------------------------------
-
-/** SVG wrapper — common props for all file icons */
-function IconSvg({
-  children,
-  className = "",
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      fill="none"
-      className={`shrink-0 ${className}`}
-    >
-      {children}
-    </svg>
-  );
-}
-
-/** Base document shape used by most file icons */
-function DocShape({ color }: { color: string }) {
-  return (
-    <>
-      <path
-        d="M4 1.5h5.5L13 5v9.5a1 1 0 01-1 1H4a1 1 0 01-1-1v-13a1 1 0 011-1z"
-        fill={color}
-        opacity="0.15"
-      />
-      <path
-        d="M4 1.5h5.5L13 5v9.5a1 1 0 01-1 1H4a1 1 0 01-1-1v-13a1 1 0 011-1z"
-        stroke={color}
-        strokeWidth="0.8"
-      />
-      <path d="M9.5 1.5V5H13" stroke={color} strokeWidth="0.8" />
-    </>
-  );
-}
-
-/** Label text centered on the document icon */
-function DocLabel({
-  label,
-  color,
-  y = "11.5",
-  fontSize = "5",
-}: {
-  label: string;
-  color: string;
-  y?: string;
-  fontSize?: string;
-}) {
-  return (
-    <text
-      x="8"
-      y={y}
-      textAnchor="middle"
-      fill={color}
-      fontSize={fontSize}
-      fontWeight="700"
-      fontFamily="Arial, sans-serif"
-    >
-      {label}
-    </text>
-  );
-}
-
-/** JavaScript (.js) */
-function JsIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#f0db4f" />
-      <DocLabel label="JS" color="#f0db4f" />
-    </IconSvg>
-  );
-}
-
-/** JSX (.jsx) */
-function JsxIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#61dafb" />
-      <DocLabel label="JSX" color="#61dafb" fontSize="4.5" />
-    </IconSvg>
-  );
-}
-
-/** TypeScript (.ts) */
-function TsIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#3178c6" />
-      <DocLabel label="TS" color="#3178c6" />
-    </IconSvg>
-  );
-}
-
-/** TSX (.tsx) */
-function TsxIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#3178c6" />
-      <DocLabel label="TSX" color="#61dafb" fontSize="4.5" />
-    </IconSvg>
-  );
-}
-
-/** JSON (.json) */
-function JsonIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#a8b065" />
-      <text
-        x="8"
-        y="11"
-        textAnchor="middle"
-        fill="#a8b065"
-        fontSize="7"
-        fontWeight="700"
-        fontFamily="Arial, sans-serif"
-      >
-        {"{}"}
-      </text>
-    </IconSvg>
-  );
-}
-
-/** HTML (.html) */
-function HtmlIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#e44d26" />
-      <text
-        x="8"
-        y="11.5"
-        textAnchor="middle"
-        fill="#e44d26"
-        fontSize="4.5"
-        fontWeight="700"
-        fontFamily="Arial, sans-serif"
-      >
-        {"</>"}
-      </text>
-    </IconSvg>
-  );
-}
-
-/** CSS (.css) */
-function CssIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#264de4" />
-      <DocLabel label="#" color="#264de4" fontSize="7" />
-    </IconSvg>
-  );
-}
-
-/** SCSS (.scss) */
-function ScssIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#cd6799" />
-      <DocLabel label="S" color="#cd6799" fontSize="7" />
-    </IconSvg>
-  );
-}
-
-/** Markdown (.md) */
-function MdIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#9da5b4" />
-      <DocLabel label="M↓" color="#9da5b4" fontSize="4.5" />
-    </IconSvg>
-  );
-}
-
-/** Python (.py) */
-function PyIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#3776ab" />
-      <DocLabel label="PY" color="#3776ab" />
-    </IconSvg>
-  );
-}
-
-/** Ruby (.rb) */
-function RbIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#cc342d" />
-      <text
-        x="8"
-        y="11.5"
-        textAnchor="middle"
-        fill="#cc342d"
-        fontSize="6"
-        fontWeight="700"
-        fontFamily="Arial, sans-serif"
-      >
-        {"◆"}
-      </text>
-    </IconSvg>
-  );
-}
-
-/** Go (.go) */
-function GoIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#00add8" />
-      <DocLabel label="GO" color="#00add8" />
-    </IconSvg>
-  );
-}
-
-/** Rust (.rs) */
-function RsIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#dea584" />
-      <DocLabel label="RS" color="#dea584" />
-    </IconSvg>
-  );
-}
-
-/** YAML (.yml, .yaml) */
-function YmlIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#cb171e" />
-      <DocLabel label="YML" color="#cb171e" fontSize="4" />
-    </IconSvg>
-  );
-}
-
-/** Env (.env) */
-function EnvIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#ecd53f" />
-      <text
-        x="8"
-        y="11.5"
-        textAnchor="middle"
-        fill="#ecd53f"
-        fontSize="6"
-        fontWeight="700"
-        fontFamily="Arial, sans-serif"
-      >
-        {"⚙"}
-      </text>
-    </IconSvg>
-  );
-}
-
-/** Shell (.sh, .bash) */
-function ShIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#89e051" />
-      <DocLabel label="$_" color="#89e051" fontSize="5" />
-    </IconSvg>
-  );
-}
-
-/** SQL (.sql) */
-function SqlIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#e38c00" />
-      <DocLabel label="SQL" color="#e38c00" fontSize="4" />
-    </IconSvg>
-  );
-}
-
-/** SVG (.svg) */
-function SvgIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#ffb13b" />
-      <DocLabel label="SVG" color="#ffb13b" fontSize="4" />
-    </IconSvg>
-  );
-}
-
-/** Lock files (package-lock.json, yarn.lock, etc.) */
-function LockIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#6b7280" />
-      <text
-        x="8"
-        y="11.5"
-        textAnchor="middle"
-        fill="#6b7280"
-        fontSize="6"
-        fontWeight="700"
-        fontFamily="Arial, sans-serif"
-      >
-        {"🔒"}
-      </text>
-    </IconSvg>
-  );
-}
-
-/** Generic fallback file icon */
-function DefaultFileIcon() {
-  return (
-    <IconSvg>
-      <DocShape color="#8c8c8c" />
-    </IconSvg>
-  );
-}
-
-/**
- * Map of file extensions to their icon components.
- * Falls back to DefaultFileIcon for unrecognized extensions.
- */
-const ICON_BY_EXT: Record<string, React.FC> = {
-  js: JsIcon,
-  mjs: JsIcon,
-  cjs: JsIcon,
-  jsx: JsxIcon,
-  ts: TsIcon,
-  mts: TsIcon,
-  cts: TsIcon,
-  tsx: TsxIcon,
-  json: JsonIcon,
-  html: HtmlIcon,
-  htm: HtmlIcon,
-  css: CssIcon,
-  scss: ScssIcon,
-  sass: ScssIcon,
-  less: ScssIcon,
-  md: MdIcon,
-  mdx: MdIcon,
-  py: PyIcon,
-  rb: RbIcon,
-  go: GoIcon,
-  rs: RsIcon,
-  yml: YmlIcon,
-  yaml: YmlIcon,
-  env: EnvIcon,
-  sh: ShIcon,
-  bash: ShIcon,
-  zsh: ShIcon,
-  sql: SqlIcon,
-  svg: SvgIcon,
-  lock: LockIcon,
-};
-
-/**
- * Special filename overrides — some files are identified by their full name
- * rather than extension (e.g., Dockerfile, .gitignore).
- */
-const ICON_BY_NAME: Record<string, React.FC> = {
-  "package-lock.json": LockIcon,
-  "yarn.lock": LockIcon,
-  "pnpm-lock.yaml": LockIcon,
-};
-
-/** Resolve the correct icon component for a filename */
-function FileIcon({ name }: { name: string }) {
-  // Check full filename first (for special cases)
-  const lowerName = name.toLowerCase();
-  const ByName = ICON_BY_NAME[lowerName];
-  if (ByName) return <ByName />;
-
-  // Then check by extension
-  const ext = lowerName.split(".").pop() || "";
-  // Handle dotfiles like .env, .gitignore — use the part after the dot
-  const dotfileExt = lowerName.startsWith(".") ? lowerName.slice(1) : "";
-  const Icon = ICON_BY_EXT[ext] || ICON_BY_EXT[dotfileExt] || DefaultFileIcon;
-  return <Icon />;
-}
-
-// ---------------------------------------------------------------------------
-// Components
-// ---------------------------------------------------------------------------
-
-/**
- * FileTree component — renders a collapsible tree of files and folders.
- * Shows change status indicators (N/M/D) next to modified files.
- */
-export function FileTree({
-  files,
-  selectedFile,
-  onSelectFile,
-  fileChanges,
-}: FileTreeProps) {
-  return (
-    <div className="h-full overflow-auto bg-sb-sidebar text-sm select-none overscroll-contain">
-      <div className="px-3 py-2 text-[11px] font-semibold text-sb-text-muted uppercase tracking-wider border-b border-sb-border">
-        Explorer
-      </div>
-      <div className="py-1">
-        {files.map((node) => (
-          <TreeNode
-            key={node.path}
-            node={node}
-            depth={0}
-            selectedFile={selectedFile}
-            onSelectFile={onSelectFile}
-            fileChanges={fileChanges}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-/** Individual tree node (file or folder) */
-function TreeNode({
-  node,
-  depth,
-  selectedFile,
-  onSelectFile,
-  fileChanges,
-}: {
-  node: FileNode;
-  depth: number;
-  selectedFile: string | null;
-  onSelectFile: (path: string) => void;
-  fileChanges?: Record<string, FileChangeStatus>;
-}) {
-  const [expanded, setExpanded] = useState(depth < 2);
-
-  const isSelected = node.path === selectedFile;
-  const paddingLeft = 8 + depth * 16;
-  const changeStatus: FileChangeStatus =
-    fileChanges?.[node.path] ?? "unchanged";
-
-  if (node.type === "directory") {
-    // Check if any child has changes (to show a subtle indicator on folders)
-    const hasChangedChild =
-      fileChanges &&
-      node.children?.some((c) => {
-        if (fileChanges[c.path]) return true;
-        // For directories, check recursively by prefix
-        if (c.type === "directory") {
-          return Object.keys(fileChanges).some(
-            (p) => p.startsWith(c.path + "/") && fileChanges[p] !== "unchanged",
-          );
-        }
-        return false;
-      });
-
-    return (
-      <div>
-        <button
-          className={`w-full flex items-center gap-1 py-[3px] text-left hover:bg-sb-bg-hover transition-colors ${
-            isSelected ? "bg-sb-bg-active text-sb-text-active" : "text-sb-text"
-          }`}
-          style={{ paddingLeft }}
-          onClick={() => setExpanded(!expanded)}
-        >
-          <ChevronIcon expanded={expanded} />
-          <FolderIcon open={expanded} />
-          <span className="truncate ml-0.5 flex-1">{node.name}</span>
-          {hasChangedChild && (
-            <span
-              className="w-1.5 h-1.5 rounded-full shrink-0 mr-2"
-              style={{ backgroundColor: "#fb923c" }}
-            />
-          )}
-        </button>
-        {expanded && node.children && (
-          <div>
-            {node.children.map((child) => (
-              <TreeNode
-                key={child.path}
-                node={child}
-                depth={depth + 1}
-                selectedFile={selectedFile}
-                onSelectFile={onSelectFile}
-                fileChanges={fileChanges}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <button
-      className={`w-full flex items-center gap-1 py-[3px] text-left hover:bg-sb-bg-hover transition-colors ${
-        isSelected ? "bg-sb-bg-active text-sb-text-active" : "text-sb-text"
-      }`}
-      style={{ paddingLeft: paddingLeft + 20 }}
-      onClick={() => onSelectFile(node.path)}
-    >
-      <FileIcon name={node.name} />
-      <span className="truncate ml-0.5 flex-1">{node.name}</span>
-      {changeStatus !== "unchanged" && (
-        <span
-          className="text-[9px] font-bold shrink-0 mr-2"
-          style={{ color: STATUS_COLORS[changeStatus] }}
-          title={changeStatus}
-        >
-          {STATUS_LETTERS[changeStatus]}
-        </span>
-      )}
-    </button>
-  );
-}