Split codebase (#455)

packages/ui/src/components/tree/TreeDropMarker.tsx

@@ -0,0 +1,36 @@
+import classNames from "classnames";
+import { useAtomValue } from "jotai";
+import { memo } from "react";
+import { DropMarker } from "../DropMarker";
+import { hoveredParentDepthFamily, isIndexHoveredFamily } from "./atoms";
+import type { TreeNode } from "./common";
+import { useIsCollapsed } from "./context";
+
+export const TreeDropMarker = memo(function TreeDropMarker<T extends { id: string }>({
+  className,
+  treeId,
+  node,
+  index,
+}: {
+  treeId: string;
+  index: number;
+  node: TreeNode<T> | null;
+  className?: string;
+}) {
+  const isHovered = useAtomValue(isIndexHoveredFamily({ treeId, index }));
+  const parentDepth = useAtomValue(hoveredParentDepthFamily(treeId));
+  const collapsed = useIsCollapsed(node?.item.id);
+
+  // Only show if we're hovering over this index
+  if (!isHovered) return null;
+
+  // Don't show if we're right under a collapsed folder, or empty folder. We have a separate
+  // delayed expansion animation for that.
+  if (collapsed || node?.children?.length === 0) return null;
+
+  return (
+    <div className="drop-marker relative" style={{ paddingLeft: `${parentDepth}rem` }}>
+      <DropMarker className={classNames(className)} />
+    </div>
+  );
+});