Add unified/side-by-side toggle to diff view

src/commands/diff.html

@@ -23,6 +23,12 @@
 <div class="header">
   <h1><code>{{BRANCH}}</code></h1>
   {{PROMPT_SECTION}}
+  <div style="margin: 12px 0;">
+    <label style="cursor:pointer; user-select:none; font-size:14px; color:#8b949e;">
+      <input type="checkbox" id="unified-toggle" style="cursor:pointer; vertical-align:middle; margin-right:6px;">
+      Unified
+    </label>
+  </div>
   <div class="meta">
     {{LOG_SECTION}}
     {{STAT_SECTION}}
@@ -34,16 +40,25 @@
 <script>
   const diffString = {{DIFF_JSON}};
   const targetElement = document.getElementById("diff");
-  const configuration = {
-    drawFileList: true,
-    matching: "lines",
-    outputFormat: "side-by-side",
-    highlight: true,
-    colorScheme: "dark",
-  };
-  const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, configuration);
-  diff2htmlUi.draw();
-  diff2htmlUi.highlightCode();
+  const toggle = document.getElementById("unified-toggle");
+
+  function renderDiff(outputFormat) {
+    const diff2htmlUi = new Diff2HtmlUI(targetElement, diffString, {
+      drawFileList: true,
+      matching: "lines",
+      outputFormat,
+      highlight: true,
+      colorScheme: "dark",
+    });
+    diff2htmlUi.draw();
+    diff2htmlUi.highlightCode();
+  }
+
+  renderDiff("side-by-side");
+
+  toggle.addEventListener("change", function () {
+    renderDiff(this.checked ? "line-by-line" : "side-by-side");
+  });
 </script>
 </body>
 </html>