From b22ed7ed8885302cd2e319f8f992c08db36ae5ec Mon Sep 17 00:00:00 2001
From: dgtlmoon <dgtlmoon@gmail.com>
Date: Tue, 4 Nov 2025 10:18:33 +0100
Subject: [PATCH] Adding keyboard nav

---
 .../blueprint/ui/templates/diff.html          | 11 ++-
 changedetectionio/static/js/diff-overview.js  | 67 +++++++++++++++++++
 2 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/changedetectionio/blueprint/ui/templates/diff.html b/changedetectionio/blueprint/ui/templates/diff.html
index 138afd36..7d124625 100644
--- a/changedetectionio/blueprint/ui/templates/diff.html
+++ b/changedetectionio/blueprint/ui/templates/diff.html
@@ -43,6 +43,13 @@
                 </select>
                 <button type="submit" class="pure-button pure-button-primary reset-margin">Go</button>
             {% endif %}
+            {%- if versions|length >= 2 -%}
+                <div id="keyboard-nav">
+                    <strong>Keyboard: </strong><a href="" class="pure-button pure-button-primary" id="btn-previous">
+                    &larr; Previous</a> &nbsp; <a class="pure-button pure-button-primary" id="btn-next" href="">
+                    &rarr; Next</a>
+                </div>
+            {%- endif -%}
         </fieldset>
         <fieldset>
                 <strong>Style</strong>
@@ -86,7 +93,7 @@
 
 <div id="diff-ui">
     <div class="tab-pane-inner" id="error-text">
-        <div class="snapshot-age error">{{watch_a.error_text_ctime|format_seconds_ago}} seconds ago</div>
+        <div class="snapshot-age error">{{watch_a.error_text_ctime|format_seconds_ago}} seconds ago.</div>
         <pre>
             {{ last_error_text }}
         </pre>
@@ -107,7 +114,7 @@
             <div{% if cell.class %} class="{{ cell.class }}"{% endif %}></div>
             {%- endfor -%}
         </div>
-        <div class="snapshot-age">{{ watch_a.snapshot_text_ctime|format_timestamp_timeago }}</div>
+        <div class="snapshot-age">{{ watch_a.snapshot_text_ctime|format_timestamp_timeago }} <a href="{{ url_for("ui.ui_views.preview_page", uuid=uuid) }}">Goto single snapshot</a></div>
         <pre id="difference" style="border-left: 2px solid #ddd;">{{ content| diff_unescape_difference_spans }}</pre>
     </div>
 
diff --git a/changedetectionio/static/js/diff-overview.js b/changedetectionio/static/js/diff-overview.js
index a7a55f34..1c890538 100644
--- a/changedetectionio/static/js/diff-overview.js
+++ b/changedetectionio/static/js/diff-overview.js
@@ -1,3 +1,65 @@
+function setupDiffNavigation() {
+    var $fromSelect = $('#diff-version');
+    var $toSelect = $('#current-version');
+    var $fromSelected = $fromSelect.find('option:selected');
+    var $toSelected = $toSelect.find('option:selected');
+
+    if ($fromSelected.length && $toSelected.length) {
+        // Find the previous pair (move both back one position)
+        var $prevFrom = $fromSelected.prev();
+        var $prevTo = $toSelected.prev();
+
+        // Find the next pair (move both forward one position)
+        var $nextFrom = $fromSelected.next();
+        var $nextTo = $toSelected.next();
+
+        // Build URL with current diff preferences
+        var currentParams = new URLSearchParams(window.location.search);
+
+        // Previous button: only show if both can move back
+        if ($prevFrom.length && $prevTo.length) {
+            currentParams.set('from_version', $prevFrom.val());
+            currentParams.set('to_version', $prevTo.val());
+            $('#btn-previous').attr('href', '?' + currentParams.toString());
+        } else {
+            $('#btn-previous').remove();
+        }
+
+        // Next button: only show if both can move forward
+        if ($nextFrom.length && $nextTo.length) {
+            currentParams.set('from_version', $nextFrom.val());
+            currentParams.set('to_version', $nextTo.val());
+            $('#btn-next').attr('href', '?' + currentParams.toString());
+        } else {
+            $('#btn-next').remove();
+        }
+    }
+
+    // Keyboard navigation
+    $(document).on('keydown', function (event) {
+        var $fromSelected = $fromSelect.find('option:selected');
+        var $toSelected = $toSelect.find('option:selected');
+
+        if ($fromSelected.length && $toSelected.length) {
+            if (event.key === 'ArrowLeft') {
+                var $prevFrom = $fromSelected.prev();
+                var $prevTo = $toSelected.prev();
+                if ($prevFrom.length && $prevTo.length) {
+                    event.preventDefault();
+                    window.location.href = $('#btn-previous').attr('href');
+                }
+            } else if (event.key === 'ArrowRight') {
+                var $nextFrom = $fromSelected.next();
+                var $nextTo = $toSelected.next();
+                if ($nextFrom.length && $nextTo.length) {
+                    event.preventDefault();
+                    window.location.href = $('#btn-next').attr('href');
+                }
+            }
+        }
+    });
+}
+
 $(document).ready(function () {
     $('.needs-localtime').each(function () {
         for (var option of this.options) {
@@ -9,6 +71,11 @@ $(document).ready(function () {
         }
     });
 
+    // Setup keyboard navigation for diff versions
+    if ($('#diff-version').length && $('#current-version').length) {
+        setupDiffNavigation();
+    }
+
     // Load it when the #screenshot tab is in use, so we dont give a slow experience when waiting for the text diff to load
     window.addEventListener('hashchange', function (e) {
         toggle(location.hash);