From afbfc2df29f39da10d09640751ec7b6216ed7c58 Mon Sep 17 00:00:00 2001
From: Caleb White <cdwhite3@pm.me>
Date: Sat, 13 Sep 2025 17:17:44 -0500
Subject: [PATCH] feat: move code diff to separate tab

---
 resources/css/app.scss                        |   5 +
 .../views/_snippets/form/form_diff.blade.php  |  14 --
 .../form/tabbed_code_and_diff.blade.php       | 137 ++++++++++++++++++
 resources/views/demo/demo.blade.php           |  19 ++-
 4 files changed, 154 insertions(+), 21 deletions(-)
 delete mode 100644 resources/views/_snippets/form/form_diff.blade.php
 create mode 100644 resources/views/_snippets/form/tabbed_code_and_diff.blade.php

diff --git a/resources/css/app.scss b/resources/css/app.scss
index ba0355451..a77687755 100644
--- a/resources/css/app.scss
+++ b/resources/css/app.scss
@@ -263,6 +263,11 @@ h4 {
         border: 1px solid #eee;
         height: auto;
         font-size: 1em;
+        padding-right: 40px;
+    }
+
+    .CodeMirror-lines {
+        padding: 10px;
     }
 
     .card-header {
diff --git a/resources/views/_snippets/form/form_diff.blade.php b/resources/views/_snippets/form/form_diff.blade.php
deleted file mode 100644
index ecf037a6d..000000000
--- a/resources/views/_snippets/form/form_diff.blade.php
+++ /dev/null
@@ -1,14 +0,0 @@
-<style>
-    pre code {
-        font-size: .9em;
-        line-height: 1.28em;
-    }
-</style>
-
-@if ($rectorRun->isSuccessful())
-    <div class="col-6" style="float: right;" class="diff-snippet">
-        @foreach ($rectorRun->getDiffSnippets() as $diffSnippet)
-            <pre style="position: absolute; z-index: 10; width: 33.7em; margin-top: {{ $diffSnippet->getLine() * 1.4 + 1.7 }}em"><code class="language-diff">{{ $diffSnippet->getSnippet() }}</code></pre>
-        @endforeach
-    </div>
-@endif
diff --git a/resources/views/_snippets/form/tabbed_code_and_diff.blade.php b/resources/views/_snippets/form/tabbed_code_and_diff.blade.php
new file mode 100644
index 000000000..0fcb463f6
--- /dev/null
+++ b/resources/views/_snippets/form/tabbed_code_and_diff.blade.php
@@ -0,0 +1,137 @@
+<style>
+    .code-editor-tabs {
+        display: flex;
+        gap: 1px;
+        background: #dee2e6;
+        padding: 1px;
+        border-radius: 6px 6px 0 0;
+    }
+
+    .code-editor-tab {
+        padding: 8px 20px;
+        border: none;
+        cursor: pointer;
+        border-radius: 5px 5px 0 0;
+        flex: 1;
+        max-width: 150px;
+    }
+
+    .code-editor-tab.active { background: #495057; color: white; }
+    .code-editor-tab:hover:not(.active) { background: #f8f9fa; }
+
+    .code-editor-content-container {
+        border: 1px solid #dee2e6;
+        border-top: none;
+        border-radius: 0 0 6px 6px;
+        min-height: 400px;
+    }
+
+    .tab-pane { display: none; }
+    .tab-pane.active { display: block; }
+
+    #diff-content {
+        padding: 1em;
+        background: #f8f9fa;
+    }
+
+    #diff-content pre { margin: 0; background: transparent; border: none; }
+
+    #diff-content code {
+        display: block;
+        padding: 1em;
+        border-radius: 4px;
+        font-size: 0.875em;
+        line-height: 1.45;
+        white-space: pre;
+        overflow-x: auto;
+    }
+
+    .diff-separator {
+        text-align: center;
+        font-size: 0.85em;
+    }
+</style>
+
+@php
+    /** @var $rectorRun \App\Entity\RectorRun */
+    /** @var string $inputName */
+@endphp
+
+@error($inputName)
+    <div class="alert alert-danger">
+        @foreach ($errors->get($inputName) as $error)
+            {{ $error }} <br/>
+        @endforeach
+    </div>
+@enderror
+
+<div class="code-editor-container mb-4" id="code-editor-container">
+    <div class="code-editor-tabs">
+        <button type="button" class="code-editor-tab" id="code-tab" title="View and edit code (Ctrl+1)">Code</button>
+        <button type="button" class="code-editor-tab active" id="diff-tab" title="View changes (Ctrl+2)">Diff</button>
+    </div>
+
+    <div class="code-editor-content-container">
+        <div class="tab-pane" id="code-content">
+            <textarea
+                name="{{ $inputName }}"
+                class="codemirror_php"
+                required="required">{{ session('_old_input')[$inputName] ?? $rectorRun->getContent() }}</textarea>
+        </div>
+
+        <div class="tab-pane active" id="diff-content">
+            @foreach ($rectorRun->getDiffSnippets() as $index => $diffSnippet)
+                <pre><code class="language-diff">{{ $diffSnippet->getSnippet() }}</code></pre>
+                @if ($index < count($rectorRun->getDiffSnippets()) - 1)
+                    <div class="diff-separator">• • •</div>
+                @endif
+            @endforeach
+        </div>
+    </div>
+</div>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const codeTab = document.getElementById("code-tab");
+        const diffTab = document.getElementById("diff-tab");
+        const codeContent = document.getElementById("code-content");
+        const diffContent = document.getElementById("diff-content");
+
+        let codeTabRefreshed = false;
+
+        function switchTab(tab) {
+            if (tab === "code") {
+                codeTab.classList.add("active");
+                diffTab.classList.remove("active");
+                codeContent.classList.add("active");
+                diffContent.classList.remove("active");
+
+                if (!codeTabRefreshed) {
+                    codeTabRefreshed = true;
+                    codeContent.querySelector(".CodeMirror")?.CodeMirror.refresh();
+                }
+            } else {
+                codeTab.classList.remove("active");
+                diffTab.classList.add("active");
+                codeContent.classList.remove("active");
+                diffContent.classList.add("active");
+            }
+        }
+
+        codeTab.addEventListener("click", () => switchTab("code"));
+        diffTab.addEventListener("click", () => switchTab("diff"));
+
+        document.addEventListener("keydown", function (e) {
+            if (!e.ctrlKey && !e.metaKey) {
+                return;
+            }
+            if (e.key === "1") {
+                e.preventDefault();
+                switchTab("code");
+            } else if (e.key === "2") {
+                e.preventDefault();
+                switchTab("diff");
+            }
+        });
+    });
+</script>
diff --git a/resources/views/demo/demo.blade.php b/resources/views/demo/demo.blade.php
index b569e6d6c..e2018ef5f 100644
--- a/resources/views/demo/demo.blade.php
+++ b/resources/views/demo/demo.blade.php
@@ -22,13 +22,18 @@ class="mb-5"
                 Run Rector on your code to see what it can do for you:
             </p>
 
-            @include('_snippets.form.form_diff')
-
-            @include('_snippets.form.form_textarea', [
-                'label' => 'PHP snippet to change',
-                'inputName' => 'php_contents',
-                'defaultValue' => $rectorRun->getContent()
-            ])
+            @if ($rectorRun->isSuccessful())
+                @include('_snippets.form.tabbed_code_and_diff', [
+                    'inputName' => 'php_contents',
+                    'rectorRun' => $rectorRun
+                ])
+            @else
+                @include('_snippets.form.form_textarea', [
+                    'label' => 'PHP snippet to change',
+                    'inputName' => 'php_contents',
+                    'defaultValue' => $rectorRun->getContent()
+                ])
+            @endif
 
             <div class="clearfix pb-0 mb-0" style="clear: both"></div>