From 12791266b25156d94cc5736f44dd8e303e45a803 Mon Sep 17 00:00:00 2001
From: Kevin Jilissen <info@kevinjilissen.nl>
Date: Wed, 10 Sep 2025 19:38:22 +0200
Subject: [PATCH 1/2] Change diff mode selection to radio button

Visually, this is more in line with the rest of the design. It also
clears some vertical space which can be used by the monaco editor.
---
 webapp/src/Twig/TwigExtension.php                | 16 +++++++---------
 .../jury/partials/submission_diff.html.twig      | 10 +++++++++-
 2 files changed, 16 insertions(+), 10 deletions(-)
diff --git a/webapp/src/Twig/TwigExtension.php b/webapp/src/Twig/TwigExtension.php
index aed9adf2ae..f619dc1d09 100644
--- a/webapp/src/Twig/TwigExtension.php
+++ b/webapp/src/Twig/TwigExtension.php
@@ -940,10 +940,6 @@ protected function parseSourceDiff(string $difftext): string
     public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $oldFile): string
     {
         $editor = <<<HTML
-<div class="form-check form-switch">
-    <input class="form-check-input" type="checkbox" id="__EDITOR__SBS">
-    <label class="form-check-label" for="__EDITOR__SBS">Use side-by-side diff viewer</label>
-</div>
 <div class="editor" id="__EDITOR__"></div>
 <script>
 $(function() {
@@ -960,12 +956,14 @@ public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $ol
         );
 
         const sideBySide = isDiffSideBySide()
-        sideBySideSwitch = $("#__EDITOR__SBS");
-        sideBySideSwitch.prop('checked', sideBySide);
-        sideBySideSwitch.change(function(e) {
-            setDiffSideBySide(e.target.checked);
+        const diffSelect = $("#diffselect-__EDITOR__");
+        diffSelect.find("input[value='side-by-side']").prop('checked', sideBySide);
+        diffSelect.find("input[value='inline']").prop('checked', !sideBySide);
+        diffSelect.find("input[type='radio']").change(function(e) {
+            const sbs = e.target.value === 'side-by-side';
+            setDiffSideBySide(sbs);
             diffEditor.updateOptions({
-                renderSideBySide: e.target.checked,
+                renderSideBySide: sbs,
             });
         });
 
diff --git a/webapp/templates/jury/partials/submission_diff.html.twig b/webapp/templates/jury/partials/submission_diff.html.twig
index baaabc96e4..7cb1886bd3 100644
--- a/webapp/templates/jury/partials/submission_diff.html.twig
+++ b/webapp/templates/jury/partials/submission_diff.html.twig
@@ -43,6 +43,7 @@
     {%- for filePair in oldFileStats.changedfiles %}
         <div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="diff-{{ filePair.1.submitfileid }}"
              role="tabpanel">
+            {% set diff_id = "diff" ~  filePair.1.submitfileid %}
             <div class="mb-1">
                 <a class="btn btn-secondary btn-sm"
                    href="{{ path('jury_submission_source', {submission: submission.submitid, fetch: filePair.1.rank}) }}">
@@ -54,8 +55,15 @@
                         <i class="fas fa-pencil-alt"></i> Edit
                     </a>
                 {% endif %}
+                <div id="diffselect-{{ diff_id }}" class="btn-group">
+                    <a href="#" role="button" class="btn btn-secondary btn-sm pe-none" aria-disabled="true"><i class="fas fa-code-branch"></i></a>
+                    <input type="radio" class="btn-check" name="{{ diff_id }}-mode" id="{{ diff_id }}-side-by-side" value="side-by-side" autocomplete="off">
+                    <label class="btn btn-outline-secondary btn-sm" for="{{ diff_id }}-side-by-side">side-by-side</label>
+                    <input type="radio" class="btn-check" name="{{ diff_id }}-mode" id="{{ diff_id }}-inline" value="inline" autocomplete="off">
+                    <label class="btn btn-outline-secondary btn-sm" for="{{ diff_id }}-inline">inline</label>
+                </div>
             </div>
-            {{ showDiff("diff" ~  filePair.1.submitfileid, filePair.0, filePair.1) }}
+            {{ showDiff(diff_id, filePair.0, filePair.1) }}
         </div>
     {%- endfor %}
     {%- for file in oldFileStats.unchangedfiles %}

From 3b82e458b3569d1991a85dabb364400be42473fb Mon Sep 17 00:00:00 2001
From: Kevin Jilissen <info@kevinjilissen.nl>
Date: Mon, 15 Sep 2025 19:11:54 +0200
Subject: [PATCH 2/2] Add `no-diff` mode to diff viewer.

Sometimes, you want to easily read the submission instead of the diff
with the previous submission. Unfortunately, Monaco cannot easily switch
between a diff editor and a normal editor (see
https://github.com/microsoft/monaco-editor/issues/1881). We mimic the
normal editor behaviour instead.

Store the current diff mode instead of the side-by-side boolean in local
storage. The latest release did not yet include the storage variable, so
no migration is added.
---
 webapp/public/js/domjudge.js                  | 14 ++---
 webapp/src/Twig/TwigExtension.php             | 51 ++++++++++++++-----
 .../jury/partials/submission_diff.html.twig   |  8 +--
 3 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/webapp/public/js/domjudge.js b/webapp/public/js/domjudge.js
index d500dcbac6..371ae20e92 100644
--- a/webapp/public/js/domjudge.js
+++ b/webapp/public/js/domjudge.js
@@ -124,18 +124,18 @@ function applyEditorTheme(theme = undefined, isExternal = false)
     });
 }
 
-function isDiffSideBySide()
+function getDiffMode()
 {
-    let sideBySide = localStorage.getItem('domjudge_editor_side_by_side');
-    if (sideBySide === undefined) {
-        return true;
+    let diffMode = localStorage.getItem('domjudge_editor_diff_mode');
+    if (diffMode === undefined) {
+        return 'side-by-side';
     }
-    return sideBySide == 'true';
+    return diffMode;
 }
 
-function setDiffSideBySide(value)
+function setDiffMode(value)
 {
-    localStorage.setItem('domjudge_editor_side_by_side', value);
+    localStorage.setItem('domjudge_editor_diff_mode', value);
 }
 
 // Send a notification if notifications have been enabled.
diff --git a/webapp/src/Twig/TwigExtension.php b/webapp/src/Twig/TwigExtension.php
index f619dc1d09..a985c20d9b 100644
--- a/webapp/src/Twig/TwigExtension.php
+++ b/webapp/src/Twig/TwigExtension.php
@@ -172,6 +172,11 @@ public function getGlobals(): array
                 'hc-light'                  => ['name' => 'High contrast (light)'],
                 'hc-black'                  => ['name' => 'High contrast (dark)'],
             ],
+            'diff_modes'                    => [
+                'no-diff'                   => ["name"  => "No diff"],
+                'side-by-side'              => ["name"  => "Side-by-side"],
+                'inline'                    => ["name"  => "Inline"],
+            ],
         ];
     }
 
@@ -955,16 +960,10 @@ public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $ol
             monaco.Uri.parse("diff-new/%s")
         );
 
-        const sideBySide = isDiffSideBySide()
-        const diffSelect = $("#diffselect-__EDITOR__");
-        diffSelect.find("input[value='side-by-side']").prop('checked', sideBySide);
-        diffSelect.find("input[value='inline']").prop('checked', !sideBySide);
-        diffSelect.find("input[type='radio']").change(function(e) {
-            const sbs = e.target.value === 'side-by-side';
-            setDiffSideBySide(sbs);
-            diffEditor.updateOptions({
-                renderSideBySide: sbs,
-            });
+        const initialDiffMode = getDiffMode();
+        const radios = $("#diffselect-__EDITOR__ > input[name='__EDITOR__-mode']");
+        radios.each((_, radio) => {
+            $(radio).prop('checked', radio.value === initialDiffMode);
         });
 
         const diffEditor = monaco.editor.createDiffEditor(
@@ -976,13 +975,37 @@ public function showDiff(string $id, SubmissionFile $newFile, SubmissionFile $ol
             scrollBeyondLastLine: false,
             automaticLayout: true,
             readOnly: true,
-            renderSideBySide: sideBySide,
             theme: getCurrentEditorTheme(),
         });
-        diffEditor.setModel({
-            original: originalModel,
-            modified: modifiedModel,
+
+        const updateMode = (diffMode) => {
+            setDiffMode(diffMode);
+            const noDiff = diffMode === 'no-diff';
+            diffEditor.updateOptions({
+                renderOverviewRuler: !noDiff,
+                renderSideBySide: diffMode === 'side-by-side',
+            });
+
+            const oldViewState = diffEditor.saveViewState();
+            diffEditor.setModel({
+                original: noDiff ? modifiedModel : originalModel,
+                modified: modifiedModel,
+            });
+            diffEditor.restoreViewState(oldViewState);
+
+            diffEditor.getOriginalEditor().updateOptions({
+                lineNumbers: !noDiff,
+            });
+            diffEditor.getModifiedEditor().updateOptions({
+                minimap: {
+                    enabled: noDiff,
+                },
+            })
+        };
+        radios.change((e) => {
+            updateMode(e.target.value);
         });
+        updateMode(initialDiffMode);
     });
 });
 </script>
diff --git a/webapp/templates/jury/partials/submission_diff.html.twig b/webapp/templates/jury/partials/submission_diff.html.twig
index 7cb1886bd3..c991494b33 100644
--- a/webapp/templates/jury/partials/submission_diff.html.twig
+++ b/webapp/templates/jury/partials/submission_diff.html.twig
@@ -57,10 +57,10 @@
                 {% endif %}
                 <div id="diffselect-{{ diff_id }}" class="btn-group">
                     <a href="#" role="button" class="btn btn-secondary btn-sm pe-none" aria-disabled="true"><i class="fas fa-code-branch"></i></a>
-                    <input type="radio" class="btn-check" name="{{ diff_id }}-mode" id="{{ diff_id }}-side-by-side" value="side-by-side" autocomplete="off">
-                    <label class="btn btn-outline-secondary btn-sm" for="{{ diff_id }}-side-by-side">side-by-side</label>
-                    <input type="radio" class="btn-check" name="{{ diff_id }}-mode" id="{{ diff_id }}-inline" value="inline" autocomplete="off">
-                    <label class="btn btn-outline-secondary btn-sm" for="{{ diff_id }}-inline">inline</label>
+                    {%- for mode_id, mode in diff_modes %}
+                    <input type="radio" class="btn-check" name="{{ diff_id }}-mode" id="{{ diff_id }}-{{ mode_id }}" value="{{ mode_id }}" autocomplete="off">
+                    <label class="btn btn-outline-secondary btn-sm" for="{{ diff_id }}-{{ mode_id }}">{{ mode.name }}</label>
+                    {%- endfor %}
                 </div>
             </div>
             {{ showDiff(diff_id, filePair.0, filePair.1) }}
