solid_web_ui 0.1.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 733e4f6cdd63c6b22b5e3ca4166576ebfe2db2a482d6b2fa7e25035e0a12c7a9
-  data.tar.gz: e1b1e0755169b3ba6f74d576f155bcce21bf029f5d1a2de3e833be7713d806e5
+  metadata.gz: c473be31f5f3992b41cfca6aaf1855045104194afa6507947110feb311d374ee
+  data.tar.gz: '059154707b3a45e39a94904824c7dca137170549f0f7a8bf52432c51aa11a898'
 SHA512:
-  metadata.gz: 66d72bca337446f1df7ae48b7faebe2c760c56e1079eba0a280deb1047bd6ef0a0719bcd64137609a0df7207bc7632239eff6920aa30f16fb28775f7d4b97fa9
-  data.tar.gz: ae241b3d25a1108b038b88a92e81e36da9137c5c3af126a1abd4c6767ca135e46b9f3200641239cc162a74c690bb73eaa3ad6145450a6b61231e60717afb5348
+  metadata.gz: a1a32a7e4292847fb8fa0ecd9df72d8e5c1b8211ac91eed54043373956015e7435a46720e4857d274fa8ba8ca6adeb5e5d1af576b95e3950cb037d20083c099d
+  data.tar.gz: d0b391dde5552ab3152edb019427c6caf0fbb77e545fc013580fe0f3491dd9f24ec71dd5399a26140c34dc9029663b25e86248a316a6be211dac63acada112a8

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Anton Radushev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -1,5 +1,10 @@
 # solid_web_ui
 
+[![Gem Version](https://img.shields.io/gem/v/solid_web_ui)](https://rubygems.org/gems/solid_web_ui)
+[![Downloads](https://img.shields.io/gem/dt/solid_web_ui)](https://rubygems.org/gems/solid_web_ui)
+[![CI](https://github.com/doromones/solid-web/actions/workflows/ci.yml/badge.svg)](https://github.com/doromones/solid-web/actions/workflows/ci.yml)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue)](LICENSE)
+
 Web dashboards for Rails' **Solid Queue**, **Solid Cache** and **Solid Cable** — one gem
 (`solid_web_ui`) with three independently mountable Rails engines sharing one design system.
 
@@ -15,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

@@ -1,15 +1,36 @@
-<div class="swui-page">
-  <header class="swui-page__header">
-    <h1 class="swui-page__title"><%= title %></h1>
-    <% if nav.any? %>
-      <nav class="swui-nav">
-        <% nav.each do |item| %>
-          <%= link_to item[:label], item[:href], class: nav_link_class(item) %>
-        <% end %>
-      </nav>
-    <% end %>
-  </header>
-  <main class="swui-page__body">
-    <%= content %>
-  </main>
+<%# Self-scoping under .solid-web-ui so the dashboard is themed correctly whether %>
+<%# it renders in the gem's standalone layout or inside a host layout. %>
+<div class="solid-web-ui" data-color-scheme="<%= SolidWebUi.config.color_scheme %>">
+  <div class="swui-page">
+    <header class="swui-page__header">
+      <h1 class="swui-page__title"><%= title %></h1>
+      <% if nav.any? %>
+        <nav class="swui-nav">
+          <% nav.each do |item| %>
+            <%= link_to item[:label], item[:href], class: nav_link_class(item) %>
+          <% end %>
+        </nav>
+      <% end %>
+    </header>
+    <main class="swui-page__body">
+      <% 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/controllers/solid_web_ui/cable/application_controller.rb

@@ -2,7 +2,7 @@
 
 module SolidWebUi::Cable
   class ApplicationController < SolidWebUi.resolve_base_controller(SolidWebUi::Cable.config.base_controller_class)
-    layout "solid_web_ui"
+    layout -> { SolidWebUi::Cable.config.layout }
     helper SolidWebUi::ComponentHelper
 
     private

data/app/controllers/solid_web_ui/cache/application_controller.rb

@@ -2,7 +2,7 @@
 
 module SolidWebUi::Cache
   class ApplicationController < SolidWebUi.resolve_base_controller(SolidWebUi::Cache.config.base_controller_class)
-    layout "solid_web_ui"
+    layout -> { SolidWebUi::Cache.config.layout }
     helper SolidWebUi::ComponentHelper
 
     private

data/app/controllers/solid_web_ui/queue/application_controller.rb

@@ -5,7 +5,7 @@ module SolidWebUi::Queue
   # so host authentication/authorization applies. Resolved lazily at autoload
   # time, after host initializers have set `base_controller_class`.
   class ApplicationController < SolidWebUi.resolve_base_controller(SolidWebUi::Queue.config.base_controller_class)
-    layout "solid_web_ui"
+    layout -> { SolidWebUi::Queue.config.layout }
     helper SolidWebUi::ComponentHelper
 
     private

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/layouts/solid_web_ui.html.erb

@@ -5,29 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title><%= content_for?(:title) ? yield(:title) : "Solid Web" %></title>
   <%= csrf_meta_tags %>
-
-  <% if SolidWebUi.config.stylesheet %>
-    <%= stylesheet_link_tag "solid_web_ui", "data-turbo-track": "reload" %>
-  <% end %>
-  <% Array(SolidWebUi.config.extra_stylesheets).each do |sheet| %>
-    <%= stylesheet_link_tag sheet, "data-turbo-track": "reload" %>
-  <% end %>
-
-  <%# Theme tokens (host re-themes by overriding these values, never the stylesheet). %>
-  <style>
-    .solid-web-ui { <%= SolidWebUi::Theme.css_vars(SolidWebUi.config.theme).html_safe %> }
-    <% if SolidWebUi.config.color_scheme.to_s == "dark" %>
-      .solid-web-ui { <%= SolidWebUi::Theme.dark_css_vars(SolidWebUi.config.theme).html_safe %> }
-    <% elsif SolidWebUi.config.color_scheme.to_s == "auto" %>
-      @media (prefers-color-scheme: dark) {
-        .solid-web-ui { <%= SolidWebUi::Theme.dark_css_vars(SolidWebUi.config.theme).html_safe %> }
-      }
-    <% end %>
-  </style>
+  <%= solid_web_ui_head_tags %>
 </head>
 <body>
-  <div class="solid-web-ui" data-color-scheme="<%= SolidWebUi.config.color_scheme %>">
-    <%= yield %>
-  </div>
+  <%= yield %>
 </body>
 </html>

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/configurable.rb

@@ -15,6 +15,12 @@ module SolidWebUi
       base.setting :per_page, default: 25
       base.setting :time_zone, default: "UTC"
       base.setting :page_title, default: base.respond_to?(:name) ? base.name : "Solid Web"
+      # Which layout the dashboards render in. Default is the gem's standalone,
+      # full-page layout. Point it at a host layout (e.g. "admin") to render the
+      # dashboards inside the host's chrome (sidebar/header). The host layout must
+      # then include `<%= solid_web_ui_head_tags %>` and reference its own routes
+      # via `main_app.` (so they resolve from the isolated engine's context).
+      base.setting :layout, default: "solid_web_ui"
     end
   end
 end

data/lib/solid_web_ui/engine.rb

@@ -9,5 +9,12 @@ module SolidWebUi
   # three web engines (queue/cache/cable) resolve the shared layout, components
   # and the single precompiled stylesheet without any manual view-path wiring.
   class Engine < ::Rails::Engine
+    # Expose solid_web_ui_head_tags to every host view, so a host layout can pull
+    # in the dashboards' stylesheet + theme tokens when embedding them.
+    initializer "solid_web_ui.head_helper" do
+      ActiveSupport.on_load(:action_view) do
+        include SolidWebUi::HeadHelper
+      end
+    end
   end
 end

data/lib/solid_web_ui/head_helper.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module SolidWebUi
+  # Emits the dashboards' stylesheet + theme tokens. Included into ActionView
+  # app-wide (see SolidWebUi::Engine) so a host layout can drop
+  # `<%= solid_web_ui_head_tags %>` into its <head> when rendering the dashboards
+  # inside its own chrome (config.layout = "your_layout").
+  #
+  # Defined in lib/ (not app/helpers) because it is mixed into ActionView during
+  # boot, before the engine's autoload paths are ready.
+  module HeadHelper
+    def solid_web_ui_head_tags
+      tags = []
+      if SolidWebUi.config.stylesheet
+        tags << stylesheet_link_tag("solid_web_ui", "data-turbo-track": "reload")
+      end
+      Array(SolidWebUi.config.extra_stylesheets).each do |sheet|
+        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
+
+    private
+
+    def solid_web_ui_theme_style_tag
+      theme = SolidWebUi.config.theme
+      css = +".solid-web-ui { #{SolidWebUi::Theme.css_vars(theme)} }"
+      case SolidWebUi.config.color_scheme.to_s
+      when "dark"
+        css << " .solid-web-ui { #{SolidWebUi::Theme.dark_css_vars(theme)} }"
+      when "auto"
+        css << " @media (prefers-color-scheme: dark) { .solid-web-ui { #{SolidWebUi::Theme.dark_css_vars(theme)} } }"
+      end
+      content_tag(:style, css.html_safe) # rubocop:disable Rails/OutputSafety
+    end
+  end
+end

data/lib/solid_web_ui/version.rb

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

data/lib/solid_web_ui.rb

@@ -6,6 +6,7 @@ require "solid_web_ui/version"
 require "solid_web_ui/configurable"
 require "solid_web_ui/theme"
 require "solid_web_ui/paginator"
+require "solid_web_ui/head_helper"
 require "solid_web_ui/engine"
 
 module SolidWebUi
@@ -16,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.1.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Anton Radushev
@@ -114,12 +114,18 @@ executables: []
 extensions: []
 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
@@ -163,6 +169,7 @@ files:
 - lib/solid_web_ui/cache/routes.rb
 - lib/solid_web_ui/configurable.rb
 - lib/solid_web_ui/engine.rb
+- lib/solid_web_ui/head_helper.rb
 - lib/solid_web_ui/paginator.rb
 - lib/solid_web_ui/queue.rb
 - lib/solid_web_ui/queue/engine.rb