feat: empty equal cell style refactor

Author: utkuakyuz

src/components/DiffViewer/components/VirtualizedDiffViewer.tsx

@@ -30,6 +30,7 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
   miniMapWidth,
   inlineDiffOptions,
 }) => {
+  const outerRef = useRef<Node>(null);
   const listRef = useRef<List>(null);
   const [scrollTop, setScrollTop] = useState(0);
 
@@ -167,6 +168,33 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
     onScroll: (scrollTop: number) => listRef.current?.scrollTo(scrollTop),
   };
 
+  // Observe DOM changes in the diff viewer and update cells with the "empty-equal-cell" class
+  // whenever new rows are rendered, ensuring virtualized/scroll-loaded cells are handled.
+  useEffect(() => {
+    const container = outerRef.current as HTMLElement | null;
+    if (!container)
+      return;
+
+    const observer = new MutationObserver(() => {
+      const tds = container?.querySelectorAll<HTMLTableCellElement>(
+        ".json-diff-viewer td.line-equal",
+      );
+
+      tds.forEach((td, index) => {
+        td.classList.remove("empty-equal-cell");
+
+        const spans = td.querySelectorAll("pre > span");
+        if (index % 2 === 1 && spans.length === 1 && spans[0].textContent?.trim() === "") {
+          td.classList.add("empty-equal-cell");
+        }
+      });
+    });
+
+    observer.observe(container!, { childList: true, subtree: true });
+
+    return () => observer.disconnect();
+  }, []);
+
   return (
     <div className={`diff-viewer-container${className ? ` ${className}` : ""}`}>
       {/* Header & Search */}
@@ -208,6 +236,7 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
       {/* List & Minimap */}
       <div style={{ display: "flex", gap: "8px", position: "relative" }}>
         <List
+          outerRef={outerRef}
           ref={listRef}
           className="virtual-json-diff-list-container"
           height={height}

src/components/DiffViewer/styles/JsonDiffCustomTheme.css

@@ -25,6 +25,7 @@
   background: #282a36;
   color: #f8f8f2;
   width: 100%;
+  border-spacing: 0;
   font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@@ -95,6 +96,12 @@
   background: rgba(182, 180, 67, 0.08);
 }
 
+.json-diff-viewer.json-diff-viewer-theme-custom tr .empty-equal-cell {
+  opacity: 0.4;
+  background: repeating-linear-gradient(-53deg, rgb(69, 69, 70), rgb(69, 69, 70) 1.5px, #282a36 1.5px, #282a36 4px);
+  background-attachment: fixed;
+}
+
 .json-diff-viewer.json-diff-viewer-theme-custom tr .line-number {
   background: unset;
   padding: 0 4px;