Show new/deleted files as line-by-line diff

src/commands/diff.html

@@ -42,22 +42,43 @@
   const targetElement = document.getElementById("diff");
   const toggle = document.getElementById("unified-toggle");
 
-  function renderDiff(outputFormat) {
+  // Split raw diff into per-file chunks and classify each
-    const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, {
+  function splitDiff(raw) {
-      drawFileList: true,
+    const files = [];
-      matching: "lines",
+    const parts = raw.split(/^(?=diff --git )/m);
-      outputFormat,
+    for (const part of parts) {
-      highlight: true,
+      if (!part.trim()) continue;
-      colorScheme: "dark",
+      const isNew = /^new file mode/m.test(part);
-    });
+      const isDeleted = /^deleted file mode/m.test(part);
-    diff2htmlUi.draw();
+      files.push({ raw: part, isNew, isDeleted });
-    diff2htmlUi.highlightCode();
+    }
+    return files;
   }
 
-  renderDiff("side-by-side");
+  const files = splitDiff(diffString);
+
+  function renderAll(modifiedFormat) {
+    targetElement.innerHTML = "";
+    for (const file of files) {
+      const div = document.createElement("div");
+      targetElement.appendChild(div);
+      const format = (file.isNew || file.isDeleted) ? "line-by-line" : modifiedFormat;
+      const ui = new Diff2HtmlUI(div, file.raw, {
+        drawFileList: false,
+        matching: "lines",
+        outputFormat: format,
+        highlight: true,
+        colorScheme: "dark",
+      });
+      ui.draw();
+      ui.highlightCode();
+    }
+  }
+
+  renderAll("side-by-side");
 
   toggle.addEventListener("change", function () {
-    renderDiff(this.checked ? "line-by-line" : "side-by-side");
+    renderAll(this.checked ? "line-by-line" : "side-by-side");
   });
 </script>
 </body>