ChangeBox

tcmts.share.ChangeBox · #upcpwx3h · term · runs anywhere

One changed definition: its kind, name and hashes, and its lines (DiffLines); extra goes in its head, children after its lines.

import { shortHash } from "#codebase/tcmts/core/hash";
import { BADGES, codeHref, DiffLines, foldDiff } from "#codebase/tcmts/share";
import type { ReviewItem } from "#codebase/tcmts/share";
import type { ReactNode } from "react";

export function ChangeBox({
  item,
  extra,
  children,
}: {
  item: ReviewItem;
  extra?: ReactNode;
  children?: ReactNode;
}) {
  const hashes =
    item.old && item.hash
      ? `${shortHash(item.old)} → ${shortHash(item.hash)}`
      : item.hash || item.old
        ? `${shortHash((item.hash ?? item.old)!)}`
        : "";
  const [cls, label] = BADGES[item.change];
  return (
    <div className="box" id={`d-${item.path}`}>
      <div className="boxhead">
        <span className={`badge ${cls}`}>{label}</span>
        {item.change === "removed" ? (
          <b className="mono">{item.path}</b>
        ) : (
          <a className="mono" href={codeHref(item.path)}>
            <b>{item.path}</b>
          </a>
        )}
        <span className="hash">{hashes}</span>
        {item.test && <span className="chip">test</span>}
        {extra}
      </div>
      {item.change === "renamed" && (
        <div className="boxbody muted">
          from <code>{item.from}</code>: the same definition, by hash. A rename changes no code.
        </div>
      )}
      {item.change === "reworded" && (
        <div className="boxbody muted" style={{ paddingBottom: 0 }}>
          Its comments, layout or doc changed; the code is the same.
        </div>
      )}
      <DiffLines
        rows={foldDiff(item.lines, item.html)}
        more={item.change === "removed" ? undefined : codeHref(item.path)}
      />
      {children}
    </div>
  );
}

uses

used by