chadtmiller.com/pds.js

Switch repository

Loading…

/** How many blocks the bar draws, which is a forge's five. */
const BLOCKS = 5;

/**
 * What a diff adds and takes away, as a count and as a bar.
 *
 * The bar is a proportion rather than a size: five blocks split between what
 * arrived and what left, so a hundred-line change and a thousand-line one read
 * the same when they lean the same way. The numbers beside it carry the size.
 *
 * Weight rather than hue, the way the diffs themselves read here. A line
 * added is not a success and a line taken away is not a failure, so the two
 * are told apart by how heavily they are drawn.
 *
 * A side with anything in it keeps at least one block, because rounding a
 * real deletion away would say something untrue.
 */
export function DiffStat({ files }) {
  let additions = 0;
  let deletions = 0;
  for (const file of files ?? []) {
    additions += file.additions ?? 0;
    deletions += file.deletions ?? 0;
  }
  const total = additions + deletions;
  if (total === 0) return null;

  const added =
    additions === 0
      ? 0
      : Math.max(
          1,
          Math.min(
            deletions === 0 ? BLOCKS : BLOCKS - 1,
            Math.round((additions / total) * BLOCKS),
          ),
        );

  return (
    <span className="flex shrink-0 items-center gap-1.5 font-mono text-[12px]">
      <span className="font-semibold text-diff-add-ink">+{additions}</span>
      <span className="text-diff-del-ink">-{deletions}</span>
      <span className="flex gap-px" aria-hidden="true">
        {/* A block is a position on a bar and has no identity of its own, so
            the index is the only key there is. */}
        {Array.from({ length: BLOCKS }, (_, index) => (
          <span
            // biome-ignore lint/suspicious/noArrayIndexKey: a bar's blocks are positions
            key={index}
            className={`size-2 rounded-[1px] ${
              index < added ? 'bg-diff-add-ink' : 'bg-diff-del-ink'
            }`}
          />
        ))}
      </span>
    </span>
  );
}