paper_view 0.1.1 → 0.2.1

data/app/views/paper_view/shared/_script.html.erb

@@ -1,96 +1,198 @@
 <%= javascript_tag nonce: true do %>
-  document.addEventListener("submit", function (event) {
-    var button = event.target.querySelector("button[type=submit]");
-    if (button && !button.querySelector(".pv-spinner")) {
-      button.classList.add("pv-btn--busy");
-      button.insertAdjacentHTML("beforeend", '<span class="pv-spinner"></span>');
+  (function () {
+    function clearBusyButtons() {
+      document.querySelectorAll(".pv-btn--busy").forEach(function (button) {
+        button.classList.remove("pv-btn--busy");
+        button.querySelectorAll(".pv-spinner").forEach(function (spinner) { spinner.remove(); });
+      });
     }
-  });
-
-  document.addEventListener("change", function (event) {
-    var select = event.target.closest("select[data-pv-autosubmit]");
-    if (!select || !select.form) return;
 
-    if (select.form.requestSubmit) {
-      select.form.requestSubmit();
-    } else {
-      select.form.submit();
+    // Turbo never removes stylesheets it merged into the head, so a per request CSP nonce would pile them up.
+    function dropStaleStyles() {
+      var styles = document.head.querySelectorAll("style[data-pv-styles]");
+      for (var index = 0; index < styles.length - 1; index++) styles[index].remove();
     }
-  });
 
-  window.addEventListener("pageshow", function () {
-    document.querySelectorAll(".pv-btn--busy").forEach(function (button) {
-      button.classList.remove("pv-btn--busy");
-      button.querySelectorAll(".pv-spinner").forEach(function (spinner) { spinner.remove(); });
-    });
-  });
+    function initTimeline() {
+      var timeline = document.querySelector("[data-pv-timeline]");
+      var panels = document.querySelector("[data-pv-panels]");
+      if (!timeline || !panels) return;
 
-  (function () {
-    var timeline = document.querySelector("[data-pv-timeline]");
-    var panels = document.querySelector("[data-pv-panels]");
-    if (!timeline || !panels) return;
+      var footer = timeline.parentNode.querySelector(".pv-footer");
 
-    function collapse(panel) {
-      panel.querySelectorAll("[data-pv-toggle]").forEach(function (toggle) { setExpanded(toggle, false); });
-      panel.querySelectorAll("[data-pv-copy]").forEach(function (button) { button.textContent = "Copy"; });
-    }
+      function collapse(panel) {
+        panel.querySelectorAll("[data-pv-toggle]").forEach(function (toggle) { setExpanded(toggle, false); });
+        panel.querySelectorAll("[data-pv-copy]").forEach(function (button) { button.textContent = "Copy"; });
+      }
 
-    function setExpanded(toggle, expanded) {
-      var target = document.getElementById(toggle.getAttribute("data-pv-toggle"));
-      toggle.setAttribute("aria-expanded", expanded);
-      toggle.querySelector(".pv-disclosure__arrow").textContent = expanded ? "▾" : "▸";
-      if (target) target.hidden = !expanded;
-    }
+      function setExpanded(toggle, expanded) {
+        var target = document.getElementById(toggle.getAttribute("data-pv-toggle"));
+        toggle.setAttribute("aria-expanded", expanded);
+        toggle.querySelector(".pv-disclosure__arrow").textContent = expanded ? "▾" : "▸";
+        if (target) target.hidden = !expanded;
+      }
+
+      function select(id) {
+        timeline.querySelectorAll("[data-pv-version]").forEach(function (row) {
+          var active = row.getAttribute("data-pv-version") === id;
+          row.classList.toggle("pv-version--selected", active);
+          row.setAttribute("aria-pressed", active);
+        });
+
+        panels.querySelectorAll("[data-pv-panel]").forEach(function (panel) {
+          panel.hidden = panel.getAttribute("data-pv-panel") !== id;
+          if (panel.hidden) collapse(panel);
+        });
+
+        panels.scrollTop = 0;
 
-    function select(id) {
-      timeline.querySelectorAll("[data-pv-version]").forEach(function (row) {
-        var active = row.getAttribute("data-pv-version") === id;
-        row.classList.toggle("pv-version--selected", active);
-        row.setAttribute("aria-pressed", active);
+        var url = new URL(window.location.href);
+        url.searchParams.set("version", id);
+        window.history.replaceState(window.history.state, "", url);
+      }
+
+      function rows() {
+        return Array.prototype.slice.call(timeline.querySelectorAll("[data-pv-version]"));
+      }
+
+      function focusRow(row) {
+        select(row.getAttribute("data-pv-version"));
+        row.focus();
+      }
+
+      function move(row, step) {
+        var all = rows();
+        var next = all[all.indexOf(row) + step];
+        if (next) return focusRow(next);
+
+        var control = step > 0 && footer && footer.querySelector("a[href], select, button");
+        if (control) control.focus();
+      }
+
+      timeline.addEventListener("click", function (event) {
+        if (event.target.closest("a")) return;
+        var row = event.target.closest("[data-pv-version]");
+        if (row) select(row.getAttribute("data-pv-version"));
       });
 
-      panels.querySelectorAll("[data-pv-panel]").forEach(function (panel) {
-        panel.hidden = panel.getAttribute("data-pv-panel") !== id;
-        if (panel.hidden) collapse(panel);
+      timeline.addEventListener("keydown", function (event) {
+        var row = event.target.closest("[data-pv-version]");
+        if (!row) return;
+
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+          event.preventDefault();
+          move(row, event.key === "ArrowDown" ? 1 : -1);
+          return;
+        }
+
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        select(row.getAttribute("data-pv-version"));
       });
 
-      panels.scrollTop = 0;
+      if (footer) {
+        footer.addEventListener("keydown", function (event) {
+          // Inside a select or input the arrow keys belong to the control itself.
+          if (event.key !== "ArrowUp" || event.target.closest("select, input")) return;
 
-      var url = new URL(window.location.href);
-      url.searchParams.set("version", id);
-      window.history.replaceState({}, "", url);
+          var all = rows();
+          if (!all.length) return;
+          event.preventDefault();
+          focusRow(all[all.length - 1]);
+        });
+      }
+
+      panels.addEventListener("click", function (event) {
+        var toggle = event.target.closest("[data-pv-toggle]");
+        if (toggle) {
+          setExpanded(toggle, toggle.getAttribute("aria-expanded") !== "true");
+          return;
+        }
+
+        var copy = event.target.closest("[data-pv-copy]");
+        if (!copy || !navigator.clipboard) return;
+        navigator.clipboard.writeText(document.getElementById(copy.getAttribute("data-pv-copy")).textContent);
+        copy.textContent = "Copied";
+      });
+
+      if (new URL(window.location.href).searchParams.get("version")) {
+        var selected = timeline.querySelector(".pv-version--selected");
+        if (selected) selected.scrollIntoView({block: "center"});
+      }
     }
 
-    timeline.addEventListener("click", function (event) {
-      if (event.target.closest("a")) return;
-      var row = event.target.closest("[data-pv-version]");
-      if (row) select(row.getAttribute("data-pv-version"));
-    });
+    function measureLayoutTop() {
+      var layout = document.querySelector(".pv-layout");
+      if (!layout) return;
+      var top = layout.getBoundingClientRect().top + window.scrollY;
+      document.documentElement.style.setProperty("--pv-layout-top", Math.round(top) + "px");
+    }
+
+    function initStats() {
+      var pending = document.querySelector("[data-pv-stats]");
+      if (!pending || !window.fetch) return;
+
+      var source = pending.getAttribute("data-pv-stats");
+      var started = Date.now();
+      pending.removeAttribute("data-pv-stats");
+
+      function show(html) {
+        var elapsed = Date.now() - started;
+
+        // Nothing is on screen before 350ms, and once the skeleton is there it stays long enough to read as a load.
+        setTimeout(function () {
+          pending.innerHTML = html;
+          pending.removeAttribute("aria-busy");
+          pending.classList.remove("pv-pending");
+          pending.classList.add("pv-loaded");
+        }, elapsed < 350 ? 0 : Math.max(0, 900 - elapsed));
+      }
 
-    timeline.addEventListener("keydown", function (event) {
-      if (event.key !== "Enter" && event.key !== " ") return;
-      var row = event.target.closest("[data-pv-version]");
-      if (!row) return;
-      event.preventDefault();
-      select(row.getAttribute("data-pv-version"));
+      fetch(source, {credentials: "same-origin", headers: {"X-Requested-With": "XMLHttpRequest"}})
+        .then(function (response) { return response.ok ? response.text() : Promise.reject(response); })
+        .then(show)
+        .catch(function () { window.location.href = source; });
+    }
+
+    function init() {
+      dropStaleStyles();
+      clearBusyButtons();
+      measureLayoutTop();
+      initTimeline();
+      initStats();
+    }
+
+    // Turbo re-runs this script after every visit, the listeners below must only be registered once.
+    if (window.paperViewStarted) return init();
+    window.paperViewStarted = true;
+
+    window.addEventListener("resize", measureLayoutTop);
+
+    document.addEventListener("submit", function (event) {
+      var button = event.target.querySelector("button[type=submit]");
+      if (button && !button.querySelector(".pv-spinner")) {
+        button.classList.add("pv-btn--busy");
+        button.insertAdjacentHTML("beforeend", '<span class="pv-spinner"></span>');
+      }
     });
 
-    panels.addEventListener("click", function (event) {
-      var toggle = event.target.closest("[data-pv-toggle]");
-      if (toggle) {
-        setExpanded(toggle, toggle.getAttribute("aria-expanded") !== "true");
-        return;
+    document.addEventListener("change", function (event) {
+      var select = event.target.closest("select[data-pv-autosubmit]");
+      if (!select || !select.form) return;
+
+      if (select.form.requestSubmit) {
+        select.form.requestSubmit();
+      } else {
+        select.form.submit();
       }
+    });
 
-      var copy = event.target.closest("[data-pv-copy]");
-      if (!copy || !navigator.clipboard) return;
-      navigator.clipboard.writeText(document.getElementById(copy.getAttribute("data-pv-copy")).textContent);
-      copy.textContent = "Copied";
+    document.addEventListener("turbo:before-fetch-request", function (event) {
+      event.detail.fetchOptions.headers["X-PaperView-Turbo"] = "1";
     });
 
-    if (new URL(window.location.href).searchParams.get("version")) {
-      var selected = timeline.querySelector(".pv-version--selected");
-      if (selected) selected.scrollIntoView({block: "center"});
-    }
+    window.addEventListener("pageshow", clearBusyButtons);
+
+    init();
   })();
 <% end %>

data/app/views/paper_view/shared/_styles.html.erb

@@ -1,4 +1,4 @@
-<style <%= paper_view_nonce_attribute %>>
+<style data-pv-styles <%= paper_view_nonce_attribute %>>
   *, *::before, *::after { box-sizing: border-box; }
   [hidden] { display: none !important; }
 
@@ -22,6 +22,8 @@
     --pv-accent-hover: #1d4ed8;
     --pv-on-accent: #ffffff;
     --pv-dot: #cbd5e1;
+    --pv-skeleton: #e4e7ec;
+    --pv-skeleton-sheen: #f2f4f7;
     --pv-del: #b91c1c;
     --pv-del-bg: #fef2f2;
     --pv-del-rule: #fca5a5;
@@ -55,6 +57,8 @@
       --pv-accent: #4a8bff;
       --pv-accent-hover: #79a9ff;
       --pv-dot: #39414d;
+      --pv-skeleton: #232a33;
+      --pv-skeleton-sheen: #2f3945;
       --pv-del: #ff7b72;
       --pv-del-bg: #2d1618;
       --pv-del-rule: #7d2a2a;
@@ -86,15 +90,27 @@
     top: 0;
     z-index: 10;
     display: flex;
-    align-items: center;
-    gap: 16px;
-    padding: 12px 24px;
+    align-items: stretch;
+    gap: 20px;
+    height: var(--pv-header-h);
+    padding: 0 24px;
     background: var(--pv-surface);
     border-bottom: 1px solid var(--pv-border);
   }
-  .pv-header__brand { display: flex; align-items: baseline; gap: 8px; color: var(--pv-ink); font-size: 15px; font-weight: 650; }
+  .pv-header__brand { display: flex; align-items: center; gap: 8px; color: var(--pv-ink); font-size: 15px; font-weight: 650; }
   .pv-header__brand:hover { color: var(--pv-ink); text-decoration: none; }
-  .pv-header__meta { margin-left: auto; color: var(--pv-ink-soft); font-size: 12.5px; }
+  .pv-header__meta { display: flex; align-items: center; margin-left: auto; color: var(--pv-ink-soft); font-size: 12.5px; }
+  .pv-header__nav { display: flex; align-items: stretch; gap: 20px; }
+  .pv-header__link {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    color: var(--pv-ink-soft);
+    font-size: 13px;
+    font-weight: 400;
+  }
+  .pv-header__link:hover { color: var(--pv-ink); text-decoration: none; }
+  .pv-header__link--active { color: var(--pv-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--pv-ink); }
 
   .pv-main { max-width: 1560px; margin: 0 auto; padding: 24px; }
   .pv-stack { display: flex; flex-direction: column; gap: 16px; }
@@ -172,6 +188,8 @@
   @keyframes pv-spin { to { transform: rotate(360deg); } }
   @media (prefers-reduced-motion: reduce) { .pv-spinner { animation-duration: 2.4s; } }
 
+  .turbo-progress-bar { height: 2px; background: var(--pv-accent); }
+
   .pv-panel--hero { width: 100%; max-width: 880px; margin: 32px auto 0; }
   .pv-hero { padding: 48px 40px 40px; text-align: center; }
   .pv-hero__title { font-size: 22px; }
@@ -220,6 +238,7 @@
     padding: 12px 18px;
     border-bottom: 1px solid var(--pv-border-subtle);
     cursor: pointer;
+    scroll-margin: calc(var(--pv-header-h) + 30px) 0 16px;
   }
   .pv-version--multi-item-view { grid-template-columns: 64px 22px 168px 1fr auto; }
   .pv-version:hover { background: var(--pv-row-hover); }
@@ -270,7 +289,7 @@
     top: calc(var(--pv-header-h) + 16px);
     width: clamp(330px, 26vw, 420px);
     flex: none;
-    max-height: calc(100vh - var(--pv-header-h) - 32px);
+    max-height: calc(100dvh - var(--pv-layout-top, 190px) - 16px);
     overflow-y: auto;
     overscroll-behavior: contain;
   }
@@ -282,13 +301,17 @@
   .pv-detail__field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
   .pv-detail__item { font: 400 13px/1.4 var(--pv-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .pv-detail__who { font: 400 13px/1.4 var(--pv-sans); color: var(--pv-ink); overflow-wrap: anywhere; }
+  .pv-detail__metadata { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--pv-border); }
+  .pv-meta { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr); gap: 4px 12px; }
+  .pv-meta__key { font: 400 12px/18px var(--pv-mono); color: var(--pv-ink-soft); overflow-wrap: anywhere; }
+  .pv-meta__value { font: 400 12px/18px var(--pv-mono); color: var(--pv-ink); overflow-wrap: anywhere; }
   .pv-detail__body { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; }
   .pv-detail__note { margin: 0; font: 400 12px/1.6 var(--pv-sans); color: var(--pv-ink-soft); }
   .pv-label { font: 600 11px/1.2 var(--pv-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--pv-ink-faint); }
 
   .pv-attribute { display: flex; flex-direction: column; gap: 6px; }
   .pv-attribute__name { font: 600 12px/1.3 var(--pv-mono); color: var(--pv-ink); word-break: break-all; }
-  .pv-attribute__unchanged {
+  .pv-attribute__unchanged, .pv-meta__more {
     align-self: flex-start;
     padding: 0;
     border: 0;
@@ -346,6 +369,65 @@
   .pv-snippet__copy:hover { background: var(--pv-pill-bg); }
   .pv-snippet__code { margin: 0; padding: 10px 12px; font: 400 11px/1.7 var(--pv-mono); color: var(--pv-ink); white-space: pre-wrap; word-break: break-all; }
 
+  .pv-tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+    gap: 1px;
+    background: var(--pv-border);
+  }
+  .pv-tile { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; background: var(--pv-surface); }
+  .pv-tile__value { font: 600 20px/1.2 var(--pv-sans); letter-spacing: -.01em; }
+  .pv-tile__note { font: 400 11.5px/1.3 var(--pv-sans); color: var(--pv-ink-faint); }
+
+  .pv-stat {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 90px 130px 200px;
+    align-items: center;
+    gap: 0 14px;
+    padding: 11px 18px;
+    border-bottom: 1px solid var(--pv-border-subtle);
+  }
+  .pv-stat:last-child { border-bottom: 0; }
+  .pv-stat:not(.pv-stat--head):hover { background: var(--pv-row-hover); }
+  .pv-stat--head { padding-top: 9px; padding-bottom: 9px; background: var(--pv-surface-muted); font: 600 11px/1.2 var(--pv-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--pv-ink-soft); }
+  .pv-stat--head:hover { background: var(--pv-surface-muted); }
+  .pv-stat__type { font: 600 13px/1.4 var(--pv-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .pv-stat__figure { font: 400 12.5px/1.4 var(--pv-mono); text-align: right; }
+  .pv-stat--head .pv-stat__figure { font: inherit; }
+  .pv-stat__share { display: flex; align-items: center; gap: 10px; }
+  .pv-stat__percent { flex: none; width: 46px; font: 400 12px/1.4 var(--pv-mono); color: var(--pv-ink-soft); text-align: right; }
+  .pv-share { flex: 1; min-width: 0; height: 8px; border-radius: 2px; background: var(--pv-border-subtle); }
+  .pv-share__fill { fill: var(--pv-accent); }
+
+  .pv-skeleton {
+    display: inline-block;
+    width: 100%;
+    height: 11px;
+    border-radius: 4px;
+    background: linear-gradient(90deg, var(--pv-skeleton) 30%, var(--pv-skeleton-sheen) 50%, var(--pv-skeleton) 70%) 0 0 / 220% 100%;
+    animation: pv-shimmer 1.6s ease-in-out infinite;
+  }
+  .pv-skeleton--value { width: 76px; height: 14px; }
+  .pv-skeleton--note { width: 150px; }
+  .pv-skeleton--type { width: 58%; }
+  .pv-skeleton--count { width: 44px; }
+  .pv-skeleton--bytes { width: 66px; }
+  .pv-skeleton--bar { flex: 1; height: 8px; border-radius: 2px; }
+  .pv-skeleton--percent { flex: none; width: 34px; }
+  .pv-stat--pending:nth-child(3n) .pv-skeleton--type { width: 42%; }
+  .pv-stat--pending:nth-child(3n + 1) .pv-skeleton--type { width: 71%; }
+  @keyframes pv-shimmer { from { background-position: 120% 0; } to { background-position: -20% 0; } }
+
+  /* Held back long enough that a small versions table never flashes a skeleton on its way in. */
+  .pv-pending { animation: pv-fade-in .3s ease-out .35s both; }
+  .pv-loaded { animation: pv-fade-in .2s ease-out both; }
+  @keyframes pv-fade-in { from { opacity: 0; } to { opacity: 1; } }
+
+  @media (prefers-reduced-motion: reduce) {
+    .pv-skeleton { animation: none; }
+    .pv-pending, .pv-loaded { animation-duration: .01ms; }
+  }
+
   .pv-empty { margin: 0; padding: 48px 16px; text-align: center; color: var(--pv-ink-soft); }
   .pv-footer {
     display: grid;
@@ -383,7 +465,12 @@
     .pv-main { padding: 16px; }
     .pv-footer { grid-template-columns: 1fr; justify-items: center; }
     .pv-footer__end, .pv-pagination { grid-column: 1; justify-content: center; }
-    .pv-header { padding: 12px 16px; }
+    .pv-header { padding: 0 16px; }
+    .pv-stat { grid-template-columns: minmax(0, 1fr) 100px; gap: 4px 12px; }
+    .pv-stat--head { display: none; }
+    .pv-stat__type { grid-column: 1 / -1; }
+    .pv-stat__figure { text-align: left; }
+    .pv-stat__share { grid-column: 1 / -1; }
   }
 
   @media (max-width: 640px) {

data/app/views/paper_view/stats/_stats.html.erb

@@ -0,0 +1,80 @@
+<section class="pv-panel">
+  <div class="pv-tiles">
+    <div class="pv-tile">
+      <span class="pv-label">Versions</span>
+      <span class="pv-tile__value"><%= stats ? number_with_delimiter(stats.total_count) : tag.span(class: "pv-skeleton pv-skeleton--value") %></span>
+    </div>
+
+    <div class="pv-tile">
+      <span class="pv-label">Item types</span>
+      <span class="pv-tile__value"><%= stats ? number_with_delimiter(stats.rows.size) : tag.span(class: "pv-skeleton pv-skeleton--value") %></span>
+    </div>
+
+    <div class="pv-tile">
+      <span class="pv-label">Table size</span>
+      <span class="pv-tile__value"><%= stats ? paper_view_bytes(stats.disk_size&.table) : tag.span(class: "pv-skeleton pv-skeleton--value") %></span>
+      <span class="pv-tile__note">
+        <% if stats %>
+          <%= paper_view_bytes(stats.estimated_total_bytes) %> payload<%= " plus #{paper_view_bytes(stats.disk_size.indexes)} of indexes" if stats.disk_size %>
+        <% else %>
+          <%= tag.span(class: "pv-skeleton pv-skeleton--note") %>
+        <% end %>
+      </span>
+    </div>
+  </div>
+</section>
+
+<% if stats&.empty? %>
+  <section class="pv-panel">
+    <p class="pv-empty">No versions have been recorded yet.</p>
+  </section>
+<% else %>
+  <section class="pv-card">
+    <div class="pv-stats">
+      <div class="pv-stat pv-stat--head">
+        <span>Item type</span>
+        <span class="pv-stat__figure">Versions</span>
+        <span class="pv-stat__figure">Size</span>
+        <span>Share</span>
+      </div>
+
+      <% if stats %>
+        <% stats.rows.each do |row| %>
+          <% share = row.share(stats.estimated_total_bytes) %>
+
+          <div class="pv-stat">
+            <span class="pv-stat__type">
+              <% if row.item_type %>
+                <%= link_to row.item_type, versions_path(item_type: row.item_type) %>
+              <% else %>
+                <span class="pv-muted"><%= PaperView::ApplicationHelper::EMPTY %></span>
+              <% end %>
+            </span>
+
+            <span class="pv-stat__figure"><%= number_with_delimiter(row.count) %></span>
+            <span class="pv-stat__figure"><%= paper_view_bytes(row.estimated_bytes) %></span>
+
+            <span class="pv-stat__share">
+              <svg class="pv-share" viewBox="0 0 100 8" preserveAspectRatio="none" aria-hidden="true">
+                <rect class="pv-share__fill" x="0" y="0" width="<%= (share * 100).round(2) %>" height="8" rx="1.5"></rect>
+              </svg>
+              <span class="pv-stat__percent"><%= paper_view_percentage(share) %></span>
+            </span>
+          </div>
+        <% end %>
+      <% else %>
+        <% 6.times do %>
+          <div class="pv-stat pv-stat--pending">
+            <span class="pv-stat__type"><%= tag.span(class: "pv-skeleton pv-skeleton--type") %></span>
+            <span class="pv-stat__figure"><%= tag.span(class: "pv-skeleton pv-skeleton--count") %></span>
+            <span class="pv-stat__figure"><%= tag.span(class: "pv-skeleton pv-skeleton--bytes") %></span>
+            <span class="pv-stat__share">
+              <%= tag.span(class: "pv-skeleton pv-skeleton--bar") %>
+              <%= tag.span(class: "pv-skeleton pv-skeleton--percent") %>
+            </span>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  </section>
+<% end %>

data/app/views/paper_view/stats/show.html.erb

@@ -0,0 +1,21 @@
+<% if @stats %>
+  <%= render "stats", stats: @stats %>
+<% else %>
+  <div
+    class="pv-stack pv-pending"
+    aria-busy="true"
+    data-pv-stats="<%= stats_path(load_content: 1) %>"
+  >
+    <%= render "stats", stats: nil %>
+  </div>
+
+  <noscript>
+    <style <%= paper_view_nonce_attribute %>>.pv-pending { display: none; }</style>
+
+    <section class="pv-panel">
+      <p class="pv-empty">
+        <%= link_to "Load the statistics", stats_path(load_content: 1) %>
+      </p>
+    </section>
+  </noscript>
+<% end %>

data/app/views/paper_view/versions/_filters.html.erb

@@ -1,4 +1,4 @@
-<%= form_with url: versions_path, method: :get, local: true, data: {turbo: false}, class: "pv-search" do %>
+<%= form_with url: versions_path, method: :get, local: true, class: "pv-search" do %>
   <%= paper_view_hidden_filters(except: %i[item_type item_id event]) %>
 
   <div class="pv-field pv-field--grow">

data/app/views/paper_view/versions/_footer.html.erb

@@ -25,7 +25,7 @@
     <% end %>
   </nav>
 
-  <%= form_with url: versions_path, method: :get, local: true, data: {turbo: false}, class: "pv-footer__end" do %>
+  <%= form_with url: versions_path, method: :get, local: true, class: "pv-footer__end" do %>
     <%= paper_view_hidden_filters(except: :per_page) %>
     <label class="pv-muted" for="pv-per-page">Per page</label>
 

data/app/views/paper_view/versions/_panel.html.erb

@@ -22,6 +22,41 @@
     </div>
   </div>
 
+  <% if row.metadata.any? %>
+    <div class="pv-detail__metadata">
+      <span class="pv-label">Metadata</span>
+
+      <div class="pv-meta">
+        <% row.metadata.visible.each do |entry| %>
+          <span class="pv-meta__key"><%= entry.name %></span>
+          <span class="pv-meta__value"><%= entry.text %></span>
+        <% end %>
+      </div>
+
+      <% if row.metadata.hidden.any? %>
+        <% rest_id = "pv-meta-#{row.id}" %>
+        <button
+          type="button"
+          class="pv-meta__more"
+          aria-expanded="false"
+          aria-controls="<%= rest_id %>"
+          data-pv-toggle="<%= rest_id %>"
+        >
+          <span class="pv-disclosure__arrow">▸</span>
+          <%= row.metadata.hidden.size %> more
+          <%= "key".pluralize(row.metadata.hidden.size) %>
+        </button>
+
+        <div class="pv-meta" id="<%= rest_id %>" hidden>
+          <% row.metadata.hidden.each do |entry| %>
+            <span class="pv-meta__key"><%= entry.name %></span>
+            <span class="pv-meta__value"><%= entry.text %></span>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
   <div class="pv-detail__body">
     <% if row.change_set.unreadable? %>
       <p class="pv-detail__note">

data/app/views/paper_view/versions/index.html.erb

@@ -27,16 +27,16 @@
     <div class="pv-layout">
       <section class="pv-card">
         <div class="pv-card__head">
-          <span class="pv-card__title"><%= @timeline.title %></span>
+          <span class="pv-card__title"><%= @query.title %></span>
 
           <span class="pv-card__meta">
             <%= number_with_delimiter(@paginator.total_count) %>
-            <%= "version".pluralize(@paginator.total_count) %><%= " · #{@timeline.items.size} items" if @timeline.multi_item_view? %>
+            <%= "version".pluralize(@paginator.total_count) %><%= " · #{@query.matched_item_types.size} item types" if @query.matched_item_types.size > 1 %>
           </span>
 
           <span class="pv-spacer"></span>
 
-          <%= form_with url: versions_path, method: :get, local: true, data: {turbo: false}, class: "pv-head-form" do %>
+          <%= form_with url: versions_path, method: :get, local: true, class: "pv-head-form" do %>
             <%= paper_view_hidden_filters(except: :sort) %>
 
             <select
@@ -58,7 +58,7 @@
               <div class="pv-timeline__day"><%= group.label %></div>
 
               <% group.rows.each do |row| %>
-                <%= render "paper_view/versions/timeline_row", row: row, multi_item_view: @timeline.multi_item_view?, selected: row == @timeline.selected %>
+                <%= render "paper_view/versions/timeline_row", row: row, multi_item_view: !@query.single_item?, selected: row == @timeline.selected %>
               <% end %>
             </div>
           <% end %>
@@ -69,7 +69,7 @@
 
       <aside class="pv-side" data-pv-panels>
         <% @timeline.rows.each do |row| %>
-          <%= render "paper_view/versions/panel", row: row, multi_item_view: @timeline.multi_item_view?, active: row == @timeline.selected %>
+          <%= render "paper_view/versions/panel", row: row, multi_item_view: !@query.single_item?, active: row == @timeline.selected %>
         <% end %>
       </aside>
     </div>

data/config/routes.rb

@@ -2,4 +2,7 @@ PaperView::Engine.routes.draw do
   root "versions#index"
 
   resources :versions, only: :index
+  resource :stats, only: :show
+
+  get "turbo-:digest.js", to: PaperView::TurboAsset, as: :turbo_asset
 end