File Diff

const ROWS = [
  { old: 12, cur: 12, type: "ctx", text: "export function getToken() {" },
  { old: 13, cur: null, type: "del", text: "  return localStorage.token;" },
  { old: null, cur: 13, type: "add", text: '  const t = cookies.get("session");' },
  { old: null, cur: 14, type: "add", text: '  if (!t) throw new Error("no session");' },
  { old: null, cur: 15, type: "add", text: "  return t;" },
  { old: 14, cur: 16, type: "ctx", text: "}" },
];

export function FileDiff({ file = "src/auth.ts", rows = ROWS }) {
  const added = rows.filter((r) => r.type === "add").length;
  const removed = rows.filter((r) => r.type === "del").length;
  return (
    <div className="diff">
      <div className="diff-head">
        <span className="diff-file-wrap">
          <svg className="diff-icon" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
            <path d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          <span className="diff-file">{file}</span>
        </span>
        <span className="diff-stat">
          <span className="add">+{added}</span>
          <span className="del">-{removed}</span>
        </span>
      </div>
      <div className="diff-body">
        {rows.map((r, i) => (
          <div key={i} className={"diff-row " + r.type}>
            <span className="ln old">{r.old ?? ""}</span>
            <span className="ln new">{r.cur ?? ""}</span>
            <span className="sign">
              {r.type === "add" ? "+" : r.type === "del" ? "-" : ""}
            </span>
            <code>{r.text}</code>
          </div>
        ))}
      </div>
    </div>
  );
}

/* FileDiff.css */
.diff { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.diff-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; font-size: 12.5px; margin-left: -2px;
}
.diff-file-wrap { display: inline-flex; align-items: center; gap: 7px; }
.diff-icon { display: block; width: 15px; height: 15px; color: #a1a1a1; flex: none; transform: translateY(-1px); }
.diff-file { color: #1a1a1a; line-height: 1; transform: translateY(-1px); }
.diff-stat { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1; transform: translateY(-1px); }
.diff-stat .add { color: #1a7f37; }
.diff-stat .del { color: #cf222e; }
.diff-body {
  position: relative;
  border: 1px solid #e6e8eb; border-radius: 8px; overflow: hidden;
  padding: 4px 0; font-size: 12.5px; line-height: 20px;
}
/* full-height gutter divider at the line-number edge (32px + 32px), unaffected
   by the body padding; z-index keeps it above the tinted add/del rows */
.diff-body::before { content: ""; position: absolute; top: 0; bottom: 0; left: 64px; width: 0.5px; background: #e6e8eb; z-index: 1; }
.diff-row {
  position: relative;
  display: grid; grid-template-columns: 32px 32px 18px 1fr; align-items: stretch;
}
.diff-row .ln, .diff-row .sign { user-select: none; color: #a1a1a1; font-size: 11px; }
.diff-row .ln { text-align: right; padding: 0 7px; }
.diff-row .sign { text-align: center; }
.diff-row code { white-space: pre; padding: 0 12px 0 8px; color: #a1a1a1; }
/* left accent bar: solid green for additions, red hatch for deletions */
.diff-row.add::before, .diff-row.del::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
}
.diff-row.add::before { background: #1a7f37; }
.diff-row.del::before {
  background: repeating-linear-gradient(45deg, #cf222e 0, #cf222e 1.5px, transparent 1.5px, transparent 3px);
}
.diff-row.add { background: rgba(26, 127, 55, 0.09); }
.diff-row.add .sign, .diff-row.add .new { color: #1a7f37; }
.diff-row.add code { color: #1a1a1a; }
.diff-row.del { background: rgba(207, 34, 46, 0.09); }
.diff-row.del .sign, .diff-row.del .old { color: #cf222e; }
.diff-row.del code { color: #1a1a1a; }
@media (prefers-color-scheme: dark) {
  .diff-file { color: #f5f5f5; }
  .diff-stat .add { color: #3fb950; }
  .diff-stat .del { color: #f85149; }
  .diff-body { border-color: #303030; }
  .diff-body::before { background: #303030; }
  .diff-row.add { background: rgba(63, 185, 80, 0.15); }
  .diff-row.add::before { background: #3fb950; }
  .diff-row.add .sign, .diff-row.add .new { color: #3fb950; }
  .diff-row.add code { color: #f5f5f5; }
  .diff-row.del { background: rgba(248, 81, 73, 0.15); }
  .diff-row.del::before { background: repeating-linear-gradient(45deg, #f85149 0, #f85149 1.5px, transparent 1.5px, transparent 3px); }
  .diff-row.del .sign, .diff-row.del .old { color: #f85149; }
  .diff-row.del code { color: #f5f5f5; }
}