mnote/wolai-frontend/src/components/sidebar/tree-shell-surface.tsx

"use client";

import type { DragEvent, MouseEvent } from "react";
import { FileTree } from "@/components/sidebar/file-tree";
import { PrivateTree } from "@/components/sidebar/private-tree";
import { TreeShellHost, type TreeRendererFamily } from "@/components/sidebar/tree-shell-host";
import type { SidebarTreeNode } from "@/lib/kernel-sidebar";
import type { FileTreeRow } from "@/lib/file-tree/types";
import type { PageTreeProjectionItem } from "@/lib/tree-projection";
import { cn } from "@/lib/utils";

export type { TreeRendererFamily } from "@/components/sidebar/tree-shell-host";

type SidebarPageTreeSurfaceProps = {
  mode: "page";
  rendererFamily?: TreeRendererFamily;
  workspaceId: string | null;
  treeShellEnabled?: boolean;
  rows: PageTreeProjectionItem[];
  expanded: Set<string>;
  activeId: string;
  className?: string;
  onToggleExpand: (id: string) => void;
  onMove: (nodeId: string, parentId: string | null, index: number) => void;
  onCreateChild: (parentId: string | null) => void;
  onContextMenu: (event: MouseEvent, node: SidebarTreeNode) => void;
  onNavigate?: (documentId: string) => void;
  onPageContextMenu?: (payload: { documentId: string; x: number; y: number }) => void;
  onTreeMutation?: (payload: { type: string; documentId: string | null }) => void;
};

type SidebarFileTreeSurfaceProps = {
  mode: "filetree";
  rendererFamily?: TreeRendererFamily;
  workspaceId: string | null;
  treeShellEnabled?: boolean;
  rows: FileTreeRow[];
  activeId: string;
  selectedRowIds: Set<string>;
  className?: string;
  onRowClick: (row: FileTreeRow, event: MouseEvent) => void;
  onRowDoubleClick: (row: FileTreeRow, event: MouseEvent) => void;
  onRowContextMenu: (row: FileTreeRow, event: MouseEvent) => void;
  onRowDragStart?: (row: FileTreeRow, event: DragEvent) => void;
  onToggleExpand: (docId: string) => void;
  onToggleAssetFolderExpand?: (assetId: string) => void;
  onCreateChild: (parentId: string | null) => void;
  onBlankMouseDown?: (event: MouseEvent) => void;
  onDropFiles?: (docId: string, files: FileList | File[], targetRow?: FileTreeRow) => void;
  onInternalDrop?: (args: { targetRow: FileTreeRow; rowIds: string[]; copy: boolean }) => void;
  onNavigate?: (documentId: string) => void;
  onFileTreeContextMenu?: (payload: {
    documentId: string | null;
    assetId: string | null;
    rowId: string | null;
    rowKind: string | null;
    x: number;
    y: number;
  }) => void;
  onFileTreeSelectionChange?: (payload: {
    selectedRowIds: string[];
    anchorRowId: string | null;
    focusedRowId: string | null;
  }) => void;
  onAssetOpen?: (payload: { assetId: string; documentId: string | null }) => void;
  onTreeMutation?: (payload: { type: string; documentId: string | null }) => void;
};

export type SidebarTreeSurfaceProps =
  | SidebarPageTreeSurfaceProps
  | SidebarFileTreeSurfaceProps;

export type TreePickerSurfaceItem =
  | { kind: "root"; id: null; title: string; subtitle?: string }
  | { kind: "doc"; id: string; title: string; subtitle?: string; depth?: number };

type TreePickerSurfaceProps = {
  rendererFamily?: TreeRendererFamily;
  workspaceId: string | null;
  treeShellEnabled?: boolean;
  activeDocumentId?: string | null;
  allowRootPick?: boolean;
  excludeIds?: string[];
  treeShellItems?: TreePickerSurfaceItem[];
  items: TreePickerSurfaceItem[];
  highlighted: number;
  className?: string;
  emptyText?: string;
  onHighlight: (index: number) => void;
  onPick: (targetId: string | null) => void;
};

export function SidebarTreeSurface(props: SidebarTreeSurfaceProps) {
  const surfaceTestId =
    props.mode === "page"
      ? "sidebar-page-tree-shell"
      : "sidebar-file-tree-shell";
  const rendererFamily = props.rendererFamily ?? "react";
  const fallbackContent =
    props.mode === "page" ? (
      <PrivateTree
        rows={props.rows}
        expanded={props.expanded}
        activeId={props.activeId}
        onToggleExpand={props.onToggleExpand}
        onMove={props.onMove}
        onCreateChild={props.onCreateChild}
        onContextMenu={props.onContextMenu}
      />
    ) : (
      <FileTree
        rows={props.rows}
        activeId={props.activeId}
        selectedRowIds={props.selectedRowIds}
        onRowClick={props.onRowClick}
        onRowDoubleClick={props.onRowDoubleClick}
        onRowContextMenu={props.onRowContextMenu}
        onRowDragStart={props.onRowDragStart}
        onToggleExpand={props.onToggleExpand}
        onToggleAssetFolderExpand={props.onToggleAssetFolderExpand}
        onCreateChild={props.onCreateChild}
        onBlankMouseDown={props.onBlankMouseDown}
        onDropFiles={props.onDropFiles}
        onInternalDrop={props.onInternalDrop}
      />
    );

  return (
    <TreeShellHost
      mode={props.mode}
      surfaceTestId={surfaceTestId}
      rendererFamily={rendererFamily}
      treeShellEnabled={props.treeShellEnabled}
      workspaceId={props.workspaceId}
      activeDocumentId={props.activeId}
      fileTreeRows={props.mode === "filetree" ? props.rows : undefined}
      onNavigate={props.onNavigate}
      onPageContextMenu={props.mode === "page" ? props.onPageContextMenu : undefined}
      onFileTreeContextMenu={props.mode === "filetree" ? props.onFileTreeContextMenu : undefined}
      onFileTreeSelectionChange={props.mode === "filetree" ? props.onFileTreeSelectionChange : undefined}
      onInternalDrop={props.mode === "filetree" ? props.onInternalDrop : undefined}
      onDropFiles={props.mode === "filetree" ? props.onDropFiles : undefined}
      onAssetOpen={props.mode === "filetree" ? props.onAssetOpen : undefined}
      onTreeMutation={props.onTreeMutation}
      className={cn(
        "h-full w-full min-w-0 overflow-x-hidden rounded-md border border-[#eff2f6] bg-white",
        props.className,
      )}
    >
      {fallbackContent}
    </TreeShellHost>
  );
}

export function TreePickerSurface({
  rendererFamily = "react",
  workspaceId,
  treeShellEnabled = true,
  activeDocumentId = null,
  allowRootPick = false,
  excludeIds = [],
  treeShellItems,
  items,
  highlighted,
  className,
  emptyText = "没有匹配结果",
  onHighlight,
  onPick,
}: TreePickerSurfaceProps) {
  const hasItems = items.length > 0;

  return (
    <TreeShellHost
      mode="picker"
      surfaceTestId="tree-picker-surface"
      rendererFamily={rendererFamily}
      treeShellEnabled={treeShellEnabled}
      workspaceId={workspaceId}
      activeDocumentId={activeDocumentId}
      allowRootPick={allowRootPick}
      excludeIds={excludeIds}
      pickerItems={treeShellItems}
      onPick={onPick}
      className={cn(hasItems ? "py-2" : null, className)}
    >
      {!hasItems ? (
        <div className="p-4 text-sm text-gray-400">{emptyText}</div>
      ) : (
        items.map((item, index) => {
          const isRoot = item.kind === "root";
          return (
            <button
              key={isRoot ? "root" : item.id}
              data-testid={isRoot ? "tree-picker-root" : "tree-picker-row"}
              data-node-id={isRoot ? "" : item.id}
              type="button"
              className={cn(
                "w-full px-4 py-3 text-left transition-colors hover:bg-[#eef2ff]",
                index === highlighted && "bg-[#e3ecff]",
              )}
              onMouseEnter={() => onHighlight(index)}
              onClick={() => onPick(item.id)}
            >
              <div
                className="text-sm font-medium text-gray-900"
                style={!isRoot ? { paddingLeft: 12 * (item.depth ?? 0) } : undefined}
              >
                {item.title}
              </div>
              {item.subtitle ? (
                <div className="mt-1 text-xs text-gray-500">{item.subtitle}</div>
              ) : null}
            </button>
          );
        })
      )}
    </TreeShellHost>
  );
}