Function FileBrowser

src/components/FileBrowser.tsx:276–774

({ workspace, path, onNavigate, viewMode = "list" }: FileBrowserProps)

// ─── Main FileBrowser Component ────────────────────────────────────────────────
export function FileBrowser({ workspace, path, onNavigate, viewMode = "list" }: FileBrowserProps) {
  const [items, setItems] = useState<FileEntry[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [previewFile, setPreviewFile] = useState<{ workspace: string; path: string; name: string } | null>(null);
  const [editorFile, setEditorFile] = useState<{ workspace: string; path: string; name: string } | null>(null);
  const [dragging, setDragging] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [confirmDelete, setConfirmDelete] = useState<FileEntry | null>(null);
  const [newFolderName, setNewFolderName] = useState("");
  const [showNewFolder, setShowNewFolder] = useState(false);
  const [newFileName, setNewFileName] = useState("");
  const [showNewFile, setShowNewFile] = useState(false);
  const [actionMenu, setActionMenu] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const loadItems = useCallback(() => {
    setLoading(true);
    setError(null);
    fetch(`/api/browse?workspace=${encodeURIComponent(workspace)}&path=${encodeURIComponent(path)}`)
      .then((res) => {
        if (!res.ok) throw new Error("Failed to load directory");
        return res.json();
      })
      .then((data) => {
        setItems(data.items || []);
        setLoading(false);
      })
      .catch((err) => {
        setError(err.message);
        setLoading(false);
      });
  }, [workspace, path]);

  useEffect(() => {
    loadItems();
  }, [loadItems]);

  const handleItemClick = (item: FileEntry) => {
    if (item.type === "folder") {
      const newPath = path ? `${path}/${item.name}` : item.name;
      onNavigate(newPath);
    } else {
      const filePath = path ? `${path}/${item.name}` : item.name;
      if (isEditable(item.name)) {
        setEditorFile({ workspace, path: filePath, name: item.name });
      } else {
        setPreviewFile({ workspace, path: filePath, name: item.name });
      }
    }
  };

  // Upload handler
  const handleUpload = async (files: FileList | null) => {
    if (!files || files.length === 0) return;
    setUploading(true);
    try {
      const formData = new FormData();