yaak-mountain-loop/src-web/components/core/tree/TreeIndentGuide.tsx

import classNames from 'classnames';
import { useAtomValue } from 'jotai';
import { memo } from 'react';
import { hoveredParentDepthFamily, isAncestorHoveredFamily } from './atoms';

export const TreeIndentGuide = memo(function TreeIndentGuide({
  treeId,
  depth,
  ancestorIds,
}: {
  treeId: string;
  depth: number;
  ancestorIds: string[];
}) {
  const parentDepth = useAtomValue(hoveredParentDepthFamily(treeId));
  const isHovered = useAtomValue(isAncestorHoveredFamily({ treeId, ancestorIds }));

  return (
    <div className="flex">
      {Array.from({ length: depth }).map((_, i) => (
        <div
          key={i}
          className={classNames(
            'w-[1rem] border-r border-r-text-subtlest',
            !(parentDepth === i + 1 && isHovered) && 'opacity-30',
          )}
        />
      ))}
    </div>
  );
});