From 332ffbeed90cf07342925b82ed3fda1762346be2 Mon Sep 17 00:00:00 2001
From: erdgeist <erdgeist@erdgeist.org>
Date: Thu, 9 Jul 2026 02:25:56 +0200
Subject: Restyle revisions#index: sticky diff bar, computation button style,
 pre-selected defaults

Adds a fourth button category, .computation -- teal, matching Preview's
existing color -- for actions that compute a view without changing state,
the first case in the app that didn't fit reversible/state-changing/
destructive. Diff revisions now starts disabled and only enables once two
distinct revisions are selected, matching the disabled-state pattern
already used for Unlock + Back.

The header row is wrapped in a real <thead> (previously flat inside the
table alongside data rows) so a sticky diff bar can sit above the fold on
long revision lists -- selecting a comparison pair no longer requires
scrolling back up to find the button, or back down to confirm what's
selected, both surfaced live via one shared JS function.

The two most recent revisions are pre-selected by default, covering the
most common comparison (current against previous) with no extra clicks.
Deliberately scoped to numbered revisions only -- comparing draft/head or
autosave/draft was raised and set aside, since neither exists as a row in
this table by design and extending the comparison to them is a separate
feature, not a default on this one.

Also drops the dead "Edit" subnav link, redundant with nodes#show's
Status section covering the same action with state-aware labeling this
static link could never have.
---
 app/views/revisions/index.html.erb | 100 +++++++++++++++++++++++--------------
 1 file changed, 62 insertions(+), 38 deletions(-)

(limited to 'app/views')

diff --git a/app/views/revisions/index.html.erb b/app/views/revisions/index.html.erb
index 26a9ff4..a6a981a 100644
--- a/app/views/revisions/index.html.erb
+++ b/app/views/revisions/index.html.erb
@@ -1,46 +1,70 @@
-<% content_for :subnavigation do %>
-  <%= link_to 'Edit', edit_node_path(@node) %>
-<% end %>
-
 <h2>Revisions for Node: <%= @node.unique_name %></h2>
 
-<table id="revisions">
-  <tr class="header">
-    <th>First</th>
-    <th>Last</th>
-    <th>Rev.</th>
-    <th>Title</th>
-    <th>Editor</th>
-    <th>Date</th>
-    <th></th>
-    <th></th>
-  </tr>
-<% (@pages || @node.pages.all).reverse.each do |page| %>
-  <tr>
-    <td><%= radio_button_tag :start_revision, page.revision %></td>
-    <td><%= radio_button_tag :end_revision, page.revision %></td>
-    <td class="revision"><%= page.revision %></td>
-    <td class="title"><%= page.title %></td>
-    <td class="user"><%= page.editor.try(:login) %></td>
-    <td class="date"><%= page.updated_at %></td>
-    <td><%= link_to 'show', node_revision_path(@node, page) %></td>
-    <td>
-      <%= button_to 'restore', restore_node_revision_path(@node, page),
-            method: :put,
-            form: { data: { confirm: "Restore this revision?" }, class: 'button_to state_changing' } %>
-    </td>
-  </tr>
-<% end %>
-  <tr class="no_hover">
-    <td colspan="8" class="right">
-      <%= button_to 'Diff revisions', diff_node_revisions_path(@node),
-            method: :post,
-            form: { id: 'diff_form' } %>
-    </td>
-  </tr>
+<table id="revisions" class="revisions_table">
+  <thead>
+    <tr class="header">
+      <th>First</th>
+      <th>Last</th>
+      <th>Rev.</th>
+      <th>Title</th>
+      <th>Editor</th>
+      <th>Date</th>
+      <th></th>
+      <th></th>
+    </tr>
+    <tr class="no_hover diff_sticky_bar">
+      <td colspan="8">
+        <%= button_to 'Diff revisions', diff_node_revisions_path(@node),
+              method: :post,
+              form: { id: 'diff_form', class: 'button_to computation' },
+              disabled: true %>
+        <span id="diff_selection_label"></span>
+      </td>
+    </tr>
+  </thead>
+  <tbody>
+  <% pages = (@pages || @node.pages.all).reverse %>
+  <% pages.each_with_index do |page, index| %>
+    <tr>
+      <td><%= radio_button_tag :start_revision, page.revision, index == 1 %></td>
+      <td><%= radio_button_tag :end_revision, page.revision, index == 0 %></td>
+      <td class="revision"><%= page.revision %></td>
+      <td class="title"><%= page.title %></td>
+      <td class="user"><%= page.editor.try(:login) %></td>
+      <td class="date"><%= page.updated_at %></td>
+      <td><%= link_to 'show', node_revision_path(@node, page) %></td>
+      <td>
+        <%= button_to 'restore', restore_node_revision_path(@node, page),
+              method: :put,
+              form: { data: { confirm: "Restore this revision?" }, class: 'button_to state_changing' } %>
+      </td>
+    </tr>
+  <% end %>
+  </tbody>
 </table>
 
 <script>
+  function update_diff_button_state() {
+    var start = document.querySelector('input[name="start_revision"]:checked');
+    var end = document.querySelector('input[name="end_revision"]:checked');
+    var valid = start && end && start.value !== end.value;
+    document.querySelector('#diff_form button[type="submit"]').disabled = !valid;
+
+    var label = document.getElementById('diff_selection_label');
+    if (start && end) {
+      label.textContent = start.value + ' against ' + end.value;
+    } else if (start || end) {
+      label.textContent = (start || end).value + ' selected';
+    } else {
+      label.textContent = '';
+    }
+  }
+
+  document.querySelectorAll('input[name="start_revision"], input[name="end_revision"]')
+    .forEach(function(radio) { radio.addEventListener('change', update_diff_button_state); });
+
+  update_diff_button_state();
+
   document.getElementById('diff_form').addEventListener('submit', function(e) {
     var start = document.querySelector('input[name="start_revision"]:checked');
     var end = document.querySelector('input[name="end_revision"]:checked');
-- 
cgit v1.3