Show and extend the elevation window

A banner appears while elevated, counting down in minutes and carrying
extend and drop controls. Three extensions of 30 minutes are allowed, so
the window is at most two hours without a fresh code; a code resets the
budget. The countdown is advisory, the server-side check authoritative, so
it says "expired" rather than vanishing.

The post-login flash tells an admin the timer has started.

2 files changed, 48 insertions, 0 deletions

diff --git a/app/views/layouts/_elevation_banner.html.erb b/app/views/layouts/_elevation_banner.html.erb
new file mode 100644
index 00000000..a7d15a2e
--- /dev/null
+++ b/app/views/layouts/_elevation_banner.html.erb
@@ -0,0 +1,47 @@
+<% if elevated? %>
+  <div id="elevation_banner"
+       data-expires-at="<%= elevation_expires_at.to_i %>"
+       data-label-minutes="<%= t(".minutes_short") %>"
+       data-label-less-than-a-minute="<%= t(".less_than_a_minute") %>"
+       data-label-expired="<%= t(".expired") %>">
+    <span class="elevation_state">
+      <%= icon("shield-check", library: "tabler", "aria-hidden": true) %>
+      <%= t(".active") %>
+      <span id="elevation_remaining"></span>
+    </span>
+    <span class="elevation_actions">
+      <% if elevation_extensions_left > 0 %>
+        <%= button_to t(".renew"), renew_elevation_path, method: :post,
+              form: { class: "button_to state_changing" } %>
+      <% end %>
+      <%= button_to t(".drop"), elevation_path, method: :delete,
+            form: { class: "button_to destructive" } %>
+    </span>
+  </div>
+
+  <%= javascript_tag nonce: true do %>
+    (function () {
+      var banner = document.getElementById("elevation_banner");
+      if (!banner) return;
+      var out = document.getElementById("elevation_remaining");
+      var expires = parseInt(banner.dataset.expiresAt, 10) * 1000;
+
+      function tick() {
+        var ms = expires - Date.now();
+        if (ms <= 0) {
+          out.textContent = banner.dataset.labelExpired;
+          banner.classList.remove("elevation_soon");
+          banner.classList.add("elevation_expired");
+          return;
+        }
+        var mins = Math.floor(ms / 60000);
+        out.textContent = mins < 1
+          ? banner.dataset.labelLessThanAMinute
+          : banner.dataset.labelMinutes.replace("%{count}", mins);
+        if (mins < 5) banner.classList.add("elevation_soon");
+        setTimeout(tick, 15000);
+      }
+      tick();
+    })();
+  <% end %>
+<% end %>
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index 43f09b96..a84c8927 100644
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -43,6 +43,7 @@
         </div>
       </div>
       <div class="admin_content_spacer"></div>
+      <%= render "layouts/elevation_banner" %>
       <%= render "layouts/flash" %>
       <div id="content">
         <%= yield %>