solid_web_ui 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 71e641147c603c1191aefc81cd3cf538ce2ba6efb861bbf3e8f83c648abcce9c
-  data.tar.gz: 2c3ba40caa7d3c98c9d7af92f42bdc40e01fd4ff2a2634ea8577946212a688af
+  metadata.gz: c473be31f5f3992b41cfca6aaf1855045104194afa6507947110feb311d374ee
+  data.tar.gz: '059154707b3a45e39a94904824c7dca137170549f0f7a8bf52432c51aa11a898'
 SHA512:
-  metadata.gz: 199f01433b9facbcb155570bdc8e3724985f6b7c4cd5013db94e2067ad2c97c3e6634e5b86cfc54f09808c2600ffd835bf9ab54802fb7dd4df2493ecd83d813d
-  data.tar.gz: 923d50e464295107a7fbd2139d3971b19683a3ee4bd31e939c58c4eb9a7e4540ffd67f458394e229e7657b31baa6d7eab106248b3f060b881bcac667015423e3
+  metadata.gz: a1a32a7e4292847fb8fa0ecd9df72d8e5c1b8211ac91eed54043373956015e7435a46720e4857d274fa8ba8ca6adeb5e5d1af576b95e3950cb037d20083c099d
+  data.tar.gz: d0b391dde5552ab3152edb019427c6caf0fbb77e545fc013580fe0f3491dd9f24ec71dd5399a26140c34dc9029663b25e86248a316a6be211dac63acada112a8

data/README.md

@@ -20,6 +20,12 @@ The shared core (`SolidWebUi`) provides the layout, ViewComponents, design-token
 dry-configurable base. The engines are plain Rails mountable engines — **no ActiveAdmin required**;
 host authentication is inherited through a configurable `base_controller_class`.
 
+Every dashboard **auto-refreshes**: a frequency `<select>`, a countdown and a manual refresh
+button in the header keep the stats and tables live without a full reload (the data region is a
+turbo-frame, morphed in place when Turbo is present, otherwise fetched and swapped). Configure or
+disable it via `SolidWebUi.config.refresh_interval` / `refresh_intervals` / `javascript` — see
+[docs/configuration.md](docs/configuration.md#live-auto-refresh).
+
 ## Install
 
 ```ruby

data/app/assets/javascripts/solid_web_ui.js

@@ -0,0 +1,125 @@
+// Live auto-refresh for the Solid* dashboards.
+//
+// Self-contained, dependency-free. Drives the controls rendered by
+// SolidWebUi::Ui::RefreshControlsComponent: a frequency <select>, a countdown
+// and a manual "refresh now" button. On each tick it reloads the dashboard's
+// turbo-frame (morph, when Turbo is on the page) or falls back to fetch+replace.
+//
+// Linked via solid_web_ui_head_tags. The IIFE runs once per Turbo session (the
+// asset is data-turbo-track="reload", so Turbo navigations don't re-execute it).
+// A single module-level timer ticks for the whole session, re-reading the DOM
+// each tick — so it never holds references to elements replaced by a navigation
+// and never leaks timers/listeners across pages. Per-panel <select>/button
+// handlers are bound once via a data flag.
+(function () {
+  "use strict";
+
+  var TICK_MS = 250;
+  var SELECT = "[data-swui-refresh-select]";
+  var STATUS = "[data-swui-refresh-status]";
+  var NOW = "[data-swui-refresh-now]";
+
+  // nextAt timestamp per panel element; a WeakMap so detached panels are GC'd.
+  var nextAt = new WeakMap();
+
+  function intervalOf(panel) {
+    var select = panel.querySelector(SELECT);
+    return select ? (parseInt(select.value, 10) || 0) : 0;
+  }
+
+  function schedule(panel) {
+    var seconds = intervalOf(panel);
+    nextAt.set(panel, seconds > 0 ? Date.now() + seconds * 1000 : 0);
+  }
+
+  function reloadFrame(frameId) {
+    var frame = document.getElementById(frameId);
+    if (!frame) return;
+    if (typeof frame.reload === "function") {
+      // Real <turbo-frame>: reload its OWN current src, which Turbo keeps in sync
+      // as the user navigates within the frame (stat cards, filter tabs, pages) —
+      // so a refresh re-fetches the view on screen, never snapping back to the
+      // page first loaded. Morphs in place when the frame carries refresh="morph".
+      // First refresh on a page with no src yet: seed it from the current URL.
+      if (frame.getAttribute("src")) {
+        frame.reload();
+      } else {
+        frame.setAttribute("src", window.location.href);
+      }
+      return;
+    }
+    // Fallback (no Turbo): frames are inert, so in-frame links navigate the whole
+    // page — the frame's current URL is just the document's. Fetch and swap.
+    var url = frame.getAttribute("src") || window.location.href;
+    fetch(url, { headers: { "X-Requested-With": "XMLHttpRequest" }, credentials: "same-origin" })
+      .then(function (r) {
+        if (!r.ok) throw new Error("refresh failed: " + r.status);
+        return r.text();
+      })
+      .then(function (html) {
+        var doc = new DOMParser().parseFromString(html, "text/html");
+        var incoming = doc.getElementById(frameId);
+        if (incoming) frame.innerHTML = incoming.innerHTML;
+      })
+      .catch(function () { /* transient error — keep the last view, retry next tick */ });
+  }
+
+  function refreshNow(panel) {
+    reloadFrame(panel.dataset.frame);
+    schedule(panel);
+  }
+
+  function render(panel) {
+    var status = panel.querySelector(STATUS);
+    if (!status) return;
+    if (intervalOf(panel) <= 0) { status.textContent = "Auto-refresh off"; return; }
+    if (document.hidden) { status.textContent = "Paused"; return; }
+    var remaining = Math.max(0, Math.ceil(((nextAt.get(panel) || 0) - Date.now()) / 1000));
+    status.textContent = "Next refresh in " + remaining + "s";
+  }
+
+  // Bind the per-panel handlers exactly once (the flag survives an immediate
+  // DOMContentLoaded+turbo:load double-fire on the same element).
+  function bind(panel) {
+    if (panel.dataset.swuiRefreshReady === "1") return;
+    panel.dataset.swuiRefreshReady = "1";
+
+    var select = panel.querySelector(SELECT);
+    var storageKey = panel.dataset.storageKey;
+    if (select && storageKey) {
+      var stored = null;
+      try { stored = window.localStorage.getItem(storageKey); } catch (e) { stored = null; }
+      var offered = Array.prototype.some.call(select.options, function (o) { return o.value === stored; });
+      if (stored !== null && offered) select.value = stored;
+      select.addEventListener("change", function () {
+        try { window.localStorage.setItem(storageKey, select.value); } catch (e) { /* ignore */ }
+        schedule(panel);
+        render(panel);
+      });
+    }
+    var nowBtn = panel.querySelector(NOW);
+    if (nowBtn) nowBtn.addEventListener("click", function () { refreshNow(panel); render(panel); });
+
+    schedule(panel);
+    render(panel);
+  }
+
+  function bindAll() {
+    Array.prototype.forEach.call(document.querySelectorAll("[data-swui-refresh]"), bind);
+  }
+
+  // One timer for the whole session: re-reads the DOM each tick, so it always
+  // operates on the panels currently on the page (and does nothing when there
+  // are none) without retaining stale element references.
+  function tick() {
+    Array.prototype.forEach.call(document.querySelectorAll("[data-swui-refresh]"), function (panel) {
+      if (!nextAt.has(panel)) schedule(panel);
+      if (intervalOf(panel) > 0 && !document.hidden && Date.now() >= nextAt.get(panel)) refreshNow(panel);
+      render(panel);
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", bindAll);
+  document.addEventListener("turbo:load", bindAll);
+  window.setInterval(tick, TICK_MS);
+})();

data/app/assets/stylesheets/solid_web_ui.css

@@ -1,4 +1,5 @@
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties;
 @layer theme, components, utilities;
 @layer utilities {
   .static {
@@ -10,6 +11,12 @@
   .contents {
     display: contents;
   }
+  .hidden {
+    display: none;
+  }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
 }
 @layer components {
   .solid-web-ui {
@@ -47,6 +54,50 @@
     flex-wrap: wrap;
     gap: 0.25rem;
   }
+  .solid-web-ui .swui-refresh-bar {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: 1rem;
+  }
+  .solid-web-ui .swui-refresh {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .solid-web-ui .swui-refresh__field {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+  .solid-web-ui .swui-refresh__label {
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--swui-color-muted);
+  }
+  .solid-web-ui .swui-refresh__select {
+    padding: 0.3rem 0.5rem;
+    border: 1px solid var(--swui-color-border);
+    border-radius: var(--swui-radius);
+    background: var(--swui-color-surface);
+    color: var(--swui-color-text);
+    font: inherit;
+    font-size: 0.85rem;
+    cursor: pointer;
+  }
+  .solid-web-ui .swui-refresh__select:hover {
+    border-color: var(--swui-color-primary);
+  }
+  .solid-web-ui .swui-refresh__status {
+    font-size: 0.8rem;
+    color: var(--swui-color-muted);
+    font-variant-numeric: tabular-nums;
+    min-width: 8.5rem;
+  }
+  .solid-web-ui .swui-refresh__now {
+    line-height: 1;
+    padding: 0.35rem 0.55rem;
+  }
   .solid-web-ui .swui-nav__link {
     display: inline-block;
     padding: 0.4rem 0.75rem;
@@ -230,3 +281,75 @@
     margin: 1.5rem 0 0.75rem;
   }
 }
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+    }
+  }
+}

data/app/components/solid_web_ui/ui/action_button_component.html.erb

@@ -0,0 +1 @@
+<%= button_to label, url, method: http_method, class: css_classes, form: form_options %>

data/app/components/solid_web_ui/ui/action_button_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module SolidWebUi
+  module Ui
+    # A button that performs a mutating action through a form (Rails +button_to+):
+    # retry/discard a job, pause/resume a queue, clear the cache, trim messages.
+    #
+    # Always targets the top frame (data-turbo-frame="_top") so the action's
+    # redirect/flash escapes the dashboard's refresh turbo-frame. Pass danger: for
+    # destructive styling and confirm: for a Turbo confirmation dialog.
+    class ActionButtonComponent < ViewComponent::Base
+      def initialize(label:, url:, method: :post, danger: false, confirm: nil)
+        @label = label
+        @url = url
+        @method = method
+        @danger = danger
+        @confirm = confirm
+      end
+
+      private
+
+      attr_reader :label, :url
+
+      def http_method = @method
+
+      def css_classes
+        [ "swui-btn", (@danger ? "swui-btn--danger" : nil) ].compact.join(" ")
+      end
+
+      # button_to applies these to the <form>; the class goes on the <button>.
+      def form_options
+        data = { turbo_frame: "_top" }
+        data[:turbo_confirm] = @confirm if @confirm
+        { data: data }
+      end
+    end
+  end
+end

data/app/components/solid_web_ui/ui/page_component.html.erb

@@ -13,7 +13,24 @@
       <% end %>
     </header>
     <main class="swui-page__body">
-      <%= content %>
+      <% if refresh? %>
+        <%# Controls sit just above the data region, right-aligned, and OUTSIDE the %>
+        <%# frame so the <select> value and the countdown survive every reload. %>
+        <div class="swui-refresh-bar">
+          <%= render(SolidWebUi::Ui::RefreshControlsComponent.new(frame_id: SolidWebUi::Ui::PageComponent::FRAME_ID)) %>
+        </div>
+        <%# The body is reloaded in place by the bundled JS (morph when Turbo is %>
+        <%# present). No src here: JS sets it at refresh time to avoid a redundant %>
+        <%# fetch on initial load. data-turbo-action="advance" promotes in-frame %>
+        <%# navigations (stat cards, filter tabs, pagination) to update the URL, so %>
+        <%# the address bar tracks the current view and auto-refresh/reload target %>
+        <%# it instead of snapping back to the dashboard. %>
+        <turbo-frame id="<%= SolidWebUi::Ui::PageComponent::FRAME_ID %>" refresh="morph" data-turbo-action="advance">
+          <%= content %>
+        </turbo-frame>
+      <% else %>
+        <%= content %>
+      <% end %>
     </main>
   </div>
 </div>

data/app/components/solid_web_ui/ui/page_component.rb

@@ -4,16 +4,25 @@ module SolidWebUi
   module Ui
     # Page chrome shared by every dashboard screen: a title, an optional nav bar
     # (array of { label:, href:, active: }) and the page body as content.
+    #
+    # When +refresh+ is on (the default), the body is wrapped in a turbo-frame and
+    # the header gains the live auto-refresh controls; the bundled JS reloads that
+    # frame on the chosen interval. Pass refresh: false for a static page.
     class PageComponent < ViewComponent::Base
-      def initialize(title:, nav: [])
+      FRAME_ID = "swui-refresh-frame"
+
+      def initialize(title:, nav: [], refresh: true)
         @title = title
         @nav = nav || []
+        @refresh = refresh
       end
 
       private
 
       attr_reader :title, :nav
 
+      def refresh? = @refresh
+
       def nav_link_class(item)
         [ "swui-nav__link", item[:active] ? "swui-nav__link--active" : nil ].compact.join(" ")
       end

data/app/components/solid_web_ui/ui/refresh_controls_component.html.erb

@@ -0,0 +1,16 @@
+<div class="swui-refresh"
+     data-swui-refresh
+     data-frame="<%= frame_id %>"
+     data-interval="<%= default_interval %>"
+     data-storage-key="<%= SolidWebUi::Ui::RefreshControlsComponent::STORAGE_KEY %>">
+  <label class="swui-refresh__field">
+    <span class="swui-refresh__label">Auto-refresh</span>
+    <select class="swui-refresh__select" data-swui-refresh-select aria-label="Auto-refresh interval">
+      <% intervals.each do |seconds| %>
+        <option value="<%= seconds %>" <%= "selected" if seconds == default_interval %>><%= option_label(seconds) %></option>
+      <% end %>
+    </select>
+  </label>
+  <span class="swui-refresh__status" data-swui-refresh-status aria-live="polite"></span>
+  <button type="button" class="swui-btn swui-refresh__now" data-swui-refresh-now aria-label="Refresh now">↻</button>
+</div>

data/app/components/solid_web_ui/ui/refresh_controls_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module SolidWebUi
+  module Ui
+    # Live auto-refresh controls for a dashboard page: a frequency <select>, a
+    # countdown to the next refresh and a manual "refresh now" button. The actual
+    # polling is driven by the bundled vanilla JS (app/assets/javascripts/
+    # solid_web_ui.js), which reads the data-* attributes emitted here and reloads
+    # the turbo-frame named by +frame_id+. Rendering is pure markup, so the panel
+    # works whether or not Turbo is on the page (JS falls back to fetch+replace).
+    class RefreshControlsComponent < ViewComponent::Base
+      STORAGE_KEY = "swui:refresh-interval"
+
+      def initialize(frame_id:, default_interval: nil, intervals: nil)
+        @frame_id = frame_id
+        @default_interval = (default_interval || SolidWebUi.config.refresh_interval).to_i
+        @intervals = Array(intervals || SolidWebUi.config.refresh_intervals).map(&:to_i)
+      end
+
+      private
+
+      attr_reader :frame_id, :default_interval, :intervals
+
+      def option_label(seconds)
+        seconds.zero? ? "Off" : "#{seconds}s"
+      end
+    end
+  end
+end

data/app/helpers/solid_web_ui/component_helper.rb

@@ -5,8 +5,14 @@ module SolidWebUi
   # read `swui_page(...)` instead of `render SolidWebUi::Ui::PageComponent.new(...)`.
   # Included into each engine's controller via `helper SolidWebUi::ComponentHelper`.
   module ComponentHelper
-    def swui_page(title:, nav: [], &block)
-      render(Ui::PageComponent.new(title: title, nav: nav), &block)
+    def swui_page(title:, nav: [], refresh: true, &block)
+      render(Ui::PageComponent.new(title: title, nav: nav, refresh: refresh), &block)
+    end
+
+    def swui_refresh_controls(frame_id:, default_interval: nil, intervals: nil)
+      render(Ui::RefreshControlsComponent.new(frame_id: frame_id,
+                                              default_interval: default_interval,
+                                              intervals: intervals))
     end
 
     def swui_stat_card(label:, value:, tone: :neutral, href: nil)
@@ -17,6 +23,11 @@ module SolidWebUi
       render(Ui::StatusBadgeComponent.new(label: label, status: status))
     end
 
+    def swui_action_button(label:, url:, method: :post, danger: false, confirm: nil)
+      render(Ui::ActionButtonComponent.new(label: label, url: url, method: method,
+                                           danger: danger, confirm: confirm))
+    end
+
     def swui_table(headers:, empty_message: "Nothing to show.", &block)
       render(Ui::TableComponent.new(headers: headers, empty_message: empty_message), &block)
     end

data/app/views/solid_web_ui/cable/dashboard/index.html.erb

@@ -8,8 +8,8 @@
   </div>
 
   <% if SolidWebUi::Cable.config.enable_trim %>
-    <%= button_to "Trim old messages", trim_messages_path, method: :delete, class: "swui-btn swui-btn--danger",
-                  form: { data: { turbo_confirm: "Delete messages older than the retention window?" } } %>
+    <%= swui_action_button(label: "Trim old messages", url: trim_messages_path, method: :delete,
+                           danger: true, confirm: "Delete messages older than the retention window?") %>
   <% end %>
 
   <h2 class="swui-section-title">Top channels</h2>

data/app/views/solid_web_ui/cache/dashboard/index.html.erb

@@ -9,7 +9,7 @@
   </div>
 
   <% if SolidWebUi::Cache.config.enable_clear %>
-    <%= button_to "Clear cache", clear_entries_path, method: :delete, class: "swui-btn swui-btn--danger",
-                  form: { data: { turbo_confirm: "Delete ALL cache entries?" } } %>
+    <%= swui_action_button(label: "Clear cache", url: clear_entries_path, method: :delete,
+                           danger: true, confirm: "Delete ALL cache entries?") %>
   <% end %>
 <% end %>

data/app/views/solid_web_ui/queue/failed_executions/index.html.erb

@@ -11,11 +11,11 @@
         <td><%= short_time(failed.created_at) %></td>
         <td>
           <% if SolidWebUi::Queue.config.enable_retry %>
-            <%= button_to "Retry", retry_failed_execution_path(failed), class: "swui-btn" %>
+            <%= swui_action_button(label: "Retry", url: retry_failed_execution_path(failed)) %>
           <% end %>
           <% if SolidWebUi::Queue.config.enable_discard %>
-            <%= button_to "Discard", failed_execution_path(failed), method: :delete, class: "swui-btn swui-btn--danger",
-                          form: { data: { turbo_confirm: "Discard this job permanently?" } } %>
+            <%= swui_action_button(label: "Discard", url: failed_execution_path(failed), method: :delete,
+                                   danger: true, confirm: "Discard this job permanently?") %>
           <% end %>
         </td>
       </tr>

data/app/views/solid_web_ui/queue/queues/index.html.erb

@@ -13,9 +13,9 @@
         <td>
           <% if SolidWebUi::Queue.config.enable_pause %>
             <% if queue.paused? %>
-              <%= button_to "Resume", resume_queue_path(queue.name), class: "swui-btn" %>
+              <%= swui_action_button(label: "Resume", url: resume_queue_path(queue.name)) %>
             <% else %>
-              <%= button_to "Pause", pause_queue_path(queue.name), class: "swui-btn" %>
+              <%= swui_action_button(label: "Pause", url: pause_queue_path(queue.name)) %>
             <% end %>
           <% end %>
         </td>

data/lib/solid_web_ui/head_helper.rb

@@ -18,6 +18,9 @@ module SolidWebUi
         tags << stylesheet_link_tag(sheet, "data-turbo-track": "reload")
       end
       tags << solid_web_ui_theme_style_tag
+      if SolidWebUi.config.javascript
+        tags << javascript_include_tag("solid_web_ui", defer: true, "data-turbo-track": "reload")
+      end
       safe_join(tags)
     end
 

data/lib/solid_web_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SolidWebUi
-  VERSION = "0.2.0"
+  VERSION = "0.3.0"
 end

data/lib/solid_web_ui.rb

@@ -17,6 +17,13 @@ module SolidWebUi
   setting :color_scheme, default: "auto"  # "auto" | "light" | "dark"
   setting :stylesheet, default: true      # false → don't link the bundled CSS (host takes over)
   setting :extra_stylesheets, default: [] # extra Propshaft stylesheet names to link after ours
+  setting :javascript, default: true      # false → don't link the bundled live-refresh JS
+
+  # Live auto-refresh of the dashboards (polling a turbo-frame). The default is
+  # the pre-selected interval (seconds; 0 disables); refresh_intervals are the
+  # choices offered in the dashboard's frequency <select>.
+  setting :refresh_interval, default: 10                  # seconds; 0 = off
+  setting :refresh_intervals, default: [ 0, 2, 5, 10, 30, 60 ].freeze
 
   # Resolve a configured controller class name to a class. Called lazily when a
   # web engine's ApplicationController is autoloaded, so host initializers have

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: solid_web_ui
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Anton Radushev
@@ -116,11 +116,16 @@ extra_rdoc_files: []
 files:
 - LICENSE
 - README.md
+- app/assets/javascripts/solid_web_ui.js
 - app/assets/stylesheets/solid_web_ui.css
+- app/components/solid_web_ui/ui/action_button_component.html.erb
+- app/components/solid_web_ui/ui/action_button_component.rb
 - app/components/solid_web_ui/ui/page_component.html.erb
 - app/components/solid_web_ui/ui/page_component.rb
 - app/components/solid_web_ui/ui/paginator_component.html.erb
 - app/components/solid_web_ui/ui/paginator_component.rb
+- app/components/solid_web_ui/ui/refresh_controls_component.html.erb
+- app/components/solid_web_ui/ui/refresh_controls_component.rb
 - app/components/solid_web_ui/ui/stat_card_component.html.erb
 - app/components/solid_web_ui/ui/stat_card_component.rb
 - app/components/solid_web_ui/ui/status_badge_component.rb