({ cell, side }: { cell: SplitDiffCell; side: "left" | "right" })
| 866 | } |
| 867 | |
| 868 | function SplitDiffCellView({ cell, side }: { cell: SplitDiffCell; side: "left" | "right" }) { |
| 869 | const bg = |
| 870 | cell.type === "added" |
| 871 | ? "rgba(34,197,94,0.12)" |
| 872 | : cell.type === "removed" |
| 873 | ? "rgba(248,113,113,0.13)" |
| 874 | : cell.type === "empty" |
| 875 | ? "var(--bg-subtle)" |
| 876 | : "transparent"; |
| 877 | const marker = |
| 878 | cell.type === "added" ? "+" : cell.type === "removed" ? "-" : " "; |
| 879 | const markerColor = |
| 880 | cell.type === "added" ? "#22c55e" : cell.type === "removed" ? "#f87171" : "var(--text-dim)"; |
| 881 | |
| 882 | return ( |
| 883 | <div |
| 884 | style={{ |
| 885 | display: "flex", |
| 886 | minWidth: 0, |
| 887 | background: bg, |
| 888 | borderRight: side === "left" ? "1px solid var(--border)" : "none", |
| 889 | }} |
| 890 | > |
| 891 | <span |
| 892 | style={{ |
| 893 | width: 42, |
| 894 | padding: "0 6px", |
| 895 | textAlign: "right", |
| 896 | color: "var(--text-dim)", |
| 897 | userSelect: "none", |
| 898 | background: "var(--bg-panel)", |
| 899 | borderRight: "1px solid var(--border)", |
| 900 | flexShrink: 0, |
| 901 | }} |
| 902 | > |
| 903 | {cell.lineNo ?? ""} |
| 904 | </span> |
| 905 | <span |
| 906 | style={{ |
| 907 | width: 18, |
| 908 | padding: "0 5px", |
| 909 | color: markerColor, |
| 910 | userSelect: "none", |
| 911 | fontWeight: cell.type === "context" || cell.type === "empty" ? 400 : 700, |
| 912 | flexShrink: 0, |
| 913 | }} |
| 914 | > |
| 915 | {marker} |
| 916 | </span> |
| 917 | <span |
| 918 | style={{ |
| 919 | flex: 1, |
| 920 | minWidth: 0, |
| 921 | padding: "0 10px 0 0", |
| 922 | color: cell.type === "empty" ? "var(--text-dim)" : "var(--text)", |
| 923 | whiteSpace: "pre-wrap", |
| 924 | overflowWrap: "anywhere", |
| 925 | }} |
nothing calls this directly
no outgoing calls
no test coverage detected