zidane-ui 9.0.4 → 9.1.3

package/src/code/editor/FileTree.tsx

@@ -1,414 +0,0 @@
-/**
- * Workspace tree (@pierre/trees) with our tokens. Takes a flat path list
- * (`TreeEntry[]`, the app's `workspace:list`) and git status; reports the
- * selected path and an explicit "open" (a click on a file row, or Enter on
- * the selected one) since the library has no open callback of its own.
- * Arrow keys only move the selection. The open carries the held modifiers
- * so the host can route ⌘/Ctrl-click elsewhere.
- *
- * With `editing`, rows rename in place (F2, or `control.startRename`), new
- * entries are named in place (`control.startCreate`: a placeholder row the
- * name replaces; Esc or an empty name drops it), rows drag onto folders
- * (⌥ held: a copy), and files dragged in from outside the page drop onto a
- * folder. The tree shows each change at once and reports it; the host does
- * it, then hands new `entries` (or calls `control.resync` when it failed).
- */
-import { FileTree as PierreFileTree, useFileTree } from '@pierre/trees/react';
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type CSSProperties,
-  type DragEvent,
-  type KeyboardEvent,
-  type MouseEvent,
-  type RefObject,
-} from 'react';
-
-import { useLabels } from '../../labels';
-
-import { TREES_HOST_STYLE, TREES_UNSAFE_CSS } from './pierre-theme';
-
-/** The drag data type a tree row carries (its path, relative to the tree's root): what an editor takes to open it. */
-export const TREE_PATH_MIME = 'application/x-zidane-tree-path';
-
-/** One path in the tree. */
-export interface TreeEntry {
-  /** Relative to the tree's root; directories end with `/` (listed only when empty). */
-  path: string;
-  /** A file or a directory. */
-  kind: 'file' | 'dir';
-  /** Dimmed (gitignored). */
-  ignored?: boolean;
-}
-
-/** A path's git status, painted on its row. */
-export interface TreeGitStatus {
-  /** Relative to the tree's root, without a trailing `/`. */
-  path: string;
-  /** The change git reports for the path; `ignored` dims the row. */
-  status: 'added' | 'deleted' | 'ignored' | 'modified' | 'renamed' | 'untracked';
-}
-
-/** Imperative handle for the bits of the model the tab drives itself. */
-export interface FileTreeControl {
-  /** Filter rows by substring; `null` clears. */
-  setSearch: (value: string | null) => void;
-  /** Expand ancestors, scroll to and select only `path` (a folder expands too). `false`: the tree has no such row. */
-  reveal: (path: string) => boolean;
-  /**
-   * With `editing`: a placeholder row named `name` (or the next free variant) in folder `dir` (`''`: the root),
-   * renamed in place; the chosen name goes to `editing.onCreate`. `false` when the tree can't.
-   */
-  startCreate: (dir: string, kind: 'file' | 'folder', name: string) => boolean;
-  /** With `editing`: renames `path` in place. `false` when the tree has no such row. */
-  startRename: (path: string) => boolean;
-  /** Drops what the tree changed on its own (an optimistic rename or move that failed) and shows `entries` again. */
-  resync: () => void;
-  /** Reveals `path` now, or once the next `entries` hold it (a row the host just made). */
-  revealSoon: (path: string) => void;
-}
-
-/** What the tree reports when it is editable. Paths are relative to its root, without a trailing `/`. */
-export interface FileTreeEditing {
-  /** A row renamed in place. */
-  onRename: (from: string, to: string, kind: 'file' | 'folder') => void;
-  /** A placeholder row (`control.startCreate`) named: create it. */
-  onCreate: (path: string, kind: 'file' | 'folder') => void;
-  /** Rows dragged onto folder `toDir` (`''`: the root); `copy`: ⌥ was held. */
-  onMove: (paths: readonly string[], toDir: string, copy: boolean) => void;
-  /** Files dragged in from outside the page, dropped on folder `toDir`. Read `data` now: it empties after the drop. */
-  onDropFiles?: (toDir: string, data: DataTransfer) => void;
-  /** The tree refused a name itself (a sibling has it, or it is empty). */
-  onError?: (message: string) => void;
-}
-
-/** Props for {@link FileTree}. */
-export interface FileTreeProps {
-  /** Receives the imperative handle for search and reveal. */
-  controlRef?: RefObject<FileTreeControl | null>;
-  /** The paths to show, flat. */
-  entries: readonly TreeEntry[];
-  /** Git status painted on the rows. */
-  gitStatus: readonly TreeGitStatus[];
-  /** The selected row's path; `null` for none. */
-  selectedPath: string | null;
-  /** Called with the newly selected path, or `null` when the selection clears. */
-  onSelect: (path: string | null) => void;
-  /** Fired when the user activates a file (click / Enter), with the modifiers held. */
-  onOpen: (path: string, modifiers: { metaKey: boolean; ctrlKey: boolean }) => void;
-  /**
-   * Files open in the editor: the folders holding them start expanded, every
-   * other folder starts collapsed. Read when the tree is created only.
-   */
-  openPaths?: readonly string[];
-  /** Right-click on a row. */
-  onContextMenu?: (target: { path: string; kind: 'file' | 'folder' }, at: { x: number; y: number }) => void;
-  /** Extra classes on the root element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-  /** Accessible name. Default: the `fileTree` label. */
-  label?: string;
-  /** Rename, create, drag and drop. Absent: the tree only browses. Read when the tree is created. */
-  editing?: FileTreeEditing;
-}
-
-/**
- * The workspace file tree: rows from `entries`, painted with `gitStatus`, reporting selection,
- * opens and right-clicks.
- *
- * @param props - The paths, git status and selection to show, and the handlers it reports to.
- */
-export function FileTree({
-  controlRef,
-  entries,
-  gitStatus,
-  selectedPath,
-  onSelect,
-  onOpen,
-  onContextMenu,
-  className,
-  style,
-  openPaths,
-  label,
-  editing,
-}: FileTreeProps) {
-  const labels = useLabels();
-  // Derived per data change, not per render: the tree re-renders on every
-  // keystroke in the search box and these lists can be thousands long.
-  const paths = useMemo(() => entries.map((e) => e.path), [entries]);
-  // The latest handlers and paths, for the model's callbacks (created once).
-  const editingRef = useRef(editing);
-  // eslint-disable-next-line react-hooks/refs -- a latest-value ref: written in render, read by callbacks and effects
-  editingRef.current = editing;
-  const pathsRef = useRef(paths);
-  // eslint-disable-next-line react-hooks/refs -- a latest-value ref: written in render, read by callbacks and effects
-  pathsRef.current = paths;
-  /** The placeholder row being named (`startCreate`), canonical (a folder ends with `/`). */
-  const creating = useRef<{ path: string; kind: 'file' | 'folder' } | null>(null);
-  /** ⌥ held during the current drag: a drop copies. */
-  const copyDrag = useRef(false);
-  const [externalDrag, setExternalDrag] = useState(false);
-  /** A row to reveal once the next entries land (`revealSoon`). */
-  const revealNext = useRef<string | null>(null);
-  const [editable] = useState(() => editing !== undefined);
-  // Ignored entries ride git status as `ignored` so the tree dims them.
-  const decorated = useMemo(
-    () => [
-      ...gitStatus,
-      ...entries.filter((e) => e.ignored).map((e) => ({ path: e.path.replace(/\/$/, ''), status: 'ignored' as const })),
-    ],
-    [entries, gitStatus],
-  );
-  // Captured once: the model reads its initial expansion when it is created.
-  const [expanded] = useState(() => ancestorDirs(openPaths ?? []));
-  const { model } = useFileTree({
-    paths,
-    initialExpansion: 'closed',
-    initialExpandedPaths: expanded,
-    density: 'compact',
-    icons: { set: 'complete', colored: true },
-    gitStatus: decorated,
-    unsafeCSS: TREES_UNSAFE_CSS,
-    onSelectionChange: (selected) => onSelect(selected[0] ?? null),
-    ...(editable
-      ? {
-          renaming: {
-            onRename: ({ sourcePath, destinationPath, isFolder }) => {
-              const kind = isFolder ? 'folder' : 'file';
-              const from = bare(sourcePath);
-              const to = bare(destinationPath);
-              const pending = creating.current;
-              if (pending && bare(pending.path) === from) {
-                creating.current = null;
-                editingRef.current?.onCreate(to, pending.kind);
-                return;
-              }
-              editingRef.current?.onRename(from, to, kind);
-            },
-            onError: (message) => {
-              // A placeholder given a taken name: drop it rather than create it under its own.
-              const pending = creating.current;
-              if (pending) {
-                creating.current = null;
-                model.remove(pending.path, pending.kind === 'folder' ? { recursive: true } : undefined);
-              }
-              editingRef.current?.onError?.(message);
-            },
-          },
-          dragAndDrop: {
-            onDropComplete: ({ draggedPaths, target }) => {
-              const toDir = target.kind === 'root' || !target.directoryPath ? '' : bare(target.directoryPath);
-              const moved = draggedPaths.map(bare);
-              const copy = copyDrag.current;
-              copyDrag.current = false;
-              // A copy leaves the originals where they were: undo the tree's own move, the host adds the copies.
-              if (copy) model.resetPaths(pathsRef.current);
-              editingRef.current?.onMove(moved, toDir, copy);
-            },
-          },
-        }
-      : {}),
-  });
-
-  // A placeholder dropped (Esc, an empty name): nothing to create.
-  useEffect(() => {
-    if (!editable) return;
-    return model.onMutation('remove', (event) => {
-      if (creating.current && 'path' in event && event.path === creating.current.path) creating.current = null;
-    });
-  }, [model, editable]);
-  // A placeholder committed under its own name: the tree reports no rename for that, so look once it settled.
-  useEffect(() => {
-    if (!editable) return;
-    return model.subscribe(() => {
-      const pending = creating.current;
-      if (!pending) return;
-      requestAnimationFrame(() => {
-        if (creating.current !== pending || !model.getItem(pending.path)) return;
-        const root = model.getFileTreeContainer()?.shadowRoot;
-        if (root?.querySelector('input[aria-label^="Rename"]')) return;
-        creating.current = null;
-        editingRef.current?.onCreate(bare(pending.path), pending.kind);
-      });
-    });
-  }, [model, editable]);
-
-  const revealPath = useCallback(
-    (path: string): boolean => {
-      const item = model.getItem(path) ?? model.getItem(`${path}/`);
-      if (!item) return false;
-      if ('expand' in item) item.expand();
-      // Only this row: the library's `select` adds to the selection, and every revealed row
-      // (each image stepped through in the editor) would stay selected.
-      for (const selected of model.getSelectedPaths()) {
-        if (selected !== item.getPath()) model.getItem(selected)?.deselect();
-      }
-      item.select();
-      model.scrollToPath(item.getPath(), { focus: true });
-      return true;
-    },
-    [model],
-  );
-
-  useEffect(() => {
-    if (!controlRef) return;
-    controlRef.current = {
-      revealSoon: (path) => {
-        revealNext.current = revealPath(path) ? null : path;
-      },
-      startCreate: (dir, kind, name) => {
-        if (!editable || creating.current) return false;
-        const base = dir ? `${bare(dir)}/` : '';
-        let leaf = name;
-        for (let n = 2; model.getItem(`${base}${leaf}`) || model.getItem(`${base}${leaf}/`); n++) leaf = `${name} ${n}`;
-        const path = `${base}${leaf}${kind === 'folder' ? '/' : ''}`;
-        if (base) (model.getItem(base) as { expand?: () => void } | null)?.expand?.();
-        model.add(path);
-        creating.current = { path, kind };
-        if (model.startRenaming(path, { removeIfCanceled: true })) return true;
-        creating.current = null;
-        model.remove(path, kind === 'folder' ? { recursive: true } : undefined);
-        return false;
-      },
-      startRename: (path) => {
-        if (!editable) return false;
-        const item = model.getItem(path) ?? model.getItem(`${path}/`);
-        return item ? model.startRenaming(item.getPath()) : false;
-      },
-      resync: () => model.resetPaths(pathsRef.current),
-      setSearch: (value) => model.setSearch(value && value.length > 0 ? value : null),
-      reveal: revealPath,
-    };
-    return () => {
-      controlRef.current = null;
-    };
-  }, [controlRef, model, editable, revealPath]);
-
-  // The model is created once; later data goes through its mutators.
-  const initial = useRef(true);
-  useEffect(() => {
-    // The model already holds the initial paths.
-    if (initial.current) {
-      initial.current = false;
-      return;
-    }
-    // A placeholder being named stays through a refresh (the listing doesn't know it yet).
-    const pending = creating.current?.path;
-    model.resetPaths(pending && !paths.includes(pending) ? [...paths, pending] : paths);
-    // One try, on the first listing after the ask: a row that never comes is not revealed later by surprise.
-    const next = revealNext.current;
-    revealNext.current = null;
-    if (next) revealPath(next);
-  }, [model, paths, revealPath]);
-  useEffect(() => {
-    model.setGitStatus(decorated);
-  }, [model, decorated]);
-
-  const rowOf = (e: MouseEvent<HTMLElement>): Element | undefined =>
-    (e.nativeEvent.composedPath() as Element[]).find(
-      (el) => el instanceof Element && el.hasAttribute?.('data-item-path'),
-    );
-  const rowPath = (e: MouseEvent<HTMLElement>): string | null => rowOf(e)?.getAttribute('data-item-path') ?? null;
-  // Open = a click on a file row (the library selects it too). Shift-click
-  // extends the selection and opens nothing.
-  const onClickCapture = (e: MouseEvent<HTMLElement>) => {
-    if (e.shiftKey || e.button !== 0) return;
-    const path = rowPath(e);
-    if (!path) return;
-    const isFile = !path.endsWith('/') && entries.some((en) => en.path === path && en.kind === 'file');
-    if (isFile) onOpen(path, { metaKey: e.metaKey, ctrlKey: e.ctrlKey });
-  };
-  const onKeyDown = (e: KeyboardEvent<HTMLElement>) => {
-    if (e.key === 'Enter' && selectedPath && !selectedPath.endsWith('/'))
-      onOpen(selectedPath, { metaKey: e.metaKey, ctrlKey: e.ctrlKey });
-  };
-
-  /** The folder a drop at `e` lands in: the row's own folder, a file's parent, else the root. */
-  const dropDir = (e: DragEvent<HTMLElement>): string => {
-    const row = (e.nativeEvent.composedPath() as Element[]).find(
-      (el) => el instanceof Element && el.hasAttribute?.('data-item-path'),
-    );
-    const path = row?.getAttribute('data-item-path') ?? '';
-    if (!path) return '';
-    if (row?.getAttribute('data-item-type') === 'folder') return bare(path);
-    const at = path.lastIndexOf('/');
-    return at < 0 ? '' : path.slice(0, at);
-  };
-  const fromOutside = (e: DragEvent<HTMLElement>) =>
-    editable && !!editingRef.current?.onDropFiles && Array.from(e.dataTransfer?.types ?? []).includes('Files');
-
-  return (
-    <PierreFileTree
-      model={model}
-      className={className}
-      style={style ? { ...TREES_HOST_STYLE, ...style } : TREES_HOST_STYLE}
-      aria-label={label ?? labels.fileTree}
-      data-zg-file-drop={externalDrag ? 'true' : undefined}
-      // ⌥ read as the drop starts (before the tree completes it inside its shadow root).
-      onDragStart={(e) => {
-        // The row's path under our own type, so an editor can open it (a plain text drop would not say it is a row).
-        const path = e.dataTransfer.getData('text/plain');
-        if (path && !path.endsWith('/')) e.dataTransfer.setData(TREE_PATH_MIME, path);
-        e.dataTransfer.effectAllowed = 'copyMove';
-      }}
-      onDragOverCapture={editable ? (e) => void (copyDrag.current = e.altKey) : undefined}
-      onDropCapture={editable ? (e) => void (copyDrag.current = e.altKey) : undefined}
-      onDragOver={(e) => {
-        if (!fromOutside(e)) return;
-        e.preventDefault();
-        e.dataTransfer.dropEffect = 'copy';
-        if (!externalDrag) setExternalDrag(true);
-      }}
-      onDragLeave={(e) => {
-        if (externalDrag && !(e.relatedTarget instanceof Node && e.currentTarget.contains(e.relatedTarget)))
-          setExternalDrag(false);
-      }}
-      onDrop={(e) => {
-        if (!fromOutside(e)) return;
-        e.preventDefault();
-        setExternalDrag(false);
-        editingRef.current?.onDropFiles?.(dropDir(e), e.dataTransfer);
-      }}
-      onClickCapture={onClickCapture}
-      onContextMenu={(e) => {
-        const row = rowOf(e);
-        const path = row?.getAttribute('data-item-path');
-        if (!onContextMenu) return;
-        // The empty area of an editable tree: the root folder (New file, Paste there).
-        if ((!row || !path) && editable) {
-          e.preventDefault();
-          onContextMenu({ path: '', kind: 'folder' }, { x: e.clientX, y: e.clientY });
-          return;
-        }
-        if (!row || !path) return;
-        e.preventDefault();
-        const kind = row.getAttribute('data-item-type') === 'folder' ? 'folder' : 'file';
-        onContextMenu({ path: path.replace(/\/$/, ''), kind }, { x: e.clientX, y: e.clientY });
-      }}
-      onKeyDown={onKeyDown}
-    />
-  );
-}
-
-/** A tree id without the folder's trailing `/`. */
-function bare(path: string): string {
-  return path.replace(/\/$/, '');
-}
-
-/**
- * Every folder holding one of `paths` (`src/`, `src/chat/`), as tree ids.
- *
- * @param paths - File paths relative to the tree's root.
- */
-export function ancestorDirs(paths: readonly string[]): string[] {
-  const dirs = new Set<string>();
-  for (const path of paths) {
-    const parts = path.split('/').filter(Boolean);
-    for (let i = 1; i < parts.length; i++) dirs.add(`${parts.slice(0, i).join('/')}/`);
-  }
-  return [...dirs];
-}