gitfor/platform

"use client";
import { useState } from "react";
import type { MouseEvent } from "react";
import { FileTree, useFileTree, useFileTreeSelection } from "@pierre/trees/react";
import { FileViewer } from "./FileViewer";

type FileTreeClickEvent = MouseEvent<HTMLElement> & { item?: { path?: unknown } };

export type TreeBrowserProps = {
  paths: string[];
};

export function TreeBrowser({ paths }: TreeBrowserProps) {
  const [selectedFile, setSelectedFile] = useState<string | null>(null);

  const { model } = useFileTree({
    paths,
    search: true,
    fileTreeSearchMode: "hide-non-matches",
    flattenEmptyDirectories: true,
  });

  const selectedPaths = useFileTreeSelection(model);

  const selected = selectedPaths[0];
  const currentFile = selected && !selected.endsWith("/") ? selected : selectedFile;

  return (
    <>
      <div className="flex w-72 flex-col border-r border-gray-800">
        <div className="border-b border-gray-800 px-3 py-2 text-xs font-medium text-gray-500 uppercase">Files</div>
        <div className="flex-1 overflow-auto">
          <FileTree
            model={model}
            className="h-full"
            style={{ minHeight: "100%" }}
            onClick={(event) => {
              const path = (event as FileTreeClickEvent).item?.path;
              if (typeof path === "string" && !path.endsWith("/")) {
                setSelectedFile(path);