activeadmin_favorites 0.1.4 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5e9bfde6f82c66411cf985ef89e74433f9f6651726d8ae554e32c4a56852a6f0
-  data.tar.gz: ea0ec745f66df6282044bdbea08598072e34194c2a6d78efb1629d441595b778
+  metadata.gz: 1d95f2a47f409353aaaa307098bf24dc0b94abc2bf116f47101259a81f8e481a
+  data.tar.gz: 9842f18c72d0e9fbe731b934a5d58c0eae9633eb0438849a57b8d09c10b87aaf
 SHA512:
-  metadata.gz: b677efa90bdf4b467645703ec784c25a22d652e837b98b8daeaaa5eb755349e1040dd8f564b2025a3f6ba0d0450e34996a916ad031069f85febb3d80a2739677
-  data.tar.gz: db2cbb3c3a772863a0a46451e6830470737e199265d8fdfc70b0fe13d7ed351b5719143746011d6ce6b55b1fe49eb817166f343fc0cd9661806034a3a0b78388
+  metadata.gz: 52d6fd9962c311fcee1f14c98211478337761a916eb074e83ebb641063370eb16c8b81ad921f45d59af4c8ad0b4e328fa83c6b52e9ef6423fa823ce660d1c9a5
+  data.tar.gz: ba88cae3210e174538ec0dd397f7085f451093e9b86c364219d4ba2453302917fbb0c7d6918843a2d83abffb8a7ea11a1dc765811f2cd160ab70188dded4dbec

data/CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## 0.1.6 (2026-10-27)
+
+- Link the personalization menu stylesheet from Active Admin's HTML head so hosts no longer need a Tailwind `@import` of the Propshaft path.
+- Document `ActiveAdmin::Favorites.personalization_menu_stylesheet_path` for hosts that concatenate the plain CSS into a Tailwind CLI entry.
+
+## 0.1.5 (2026-10-26)
+
+- Keep personalization menu actions in view while a long catalog scrolls.
+- Add `activeadmin_favorites/personalization_menu.css` for hosts to import into the ActiveAdmin stylesheet.
+
 ## 0.1.4 (2026-10-26)
 
 - Fix column and panel personalization so the lens catalog on index and show pages parses in the browser.

data/README.md

@@ -59,6 +59,22 @@ end
 
 When using ActionPolicy, add `save_lens_favorite?` and `reset?` to `ActiveAdmin::PagePolicy` (or equivalent) so the view lens preference page actions authorize correctly.
 
+### Stylesheet
+
+The engine links `activeadmin_favorites/personalization_menu` from Active Admin's HTML head so the cogwheel dropdown can scroll the catalog while keeping action buttons in view. The file is plain CSS served through Propshaft; it does not need Tailwind processing.
+
+If the host overrides `active_admin/_html_head`, add the link there:
+
+```erb
+<%= stylesheet_link_tag "activeadmin_favorites/personalization_menu" %>
+```
+
+Do not bare-`@import` that Propshaft logical path into an Active Admin CSS entry that Tailwind CLI compiles from a generated `tmp` file. Tailwind resolves imports from the input file directory, not through Propshaft. Hosts that must fold the rules into one built stylesheet can concatenate the absolute file instead:
+
+```ruby
+File.read(ActiveAdmin::Favorites.personalization_menu_stylesheet_path)
+```
+
 ### Locales
 
 English ships with the gem. Copy `config/locales/activeadmin_favorites.host.yml.example` into your locale files and translate `active_admin.favorites` keys.

data/app/assets/controllers/activeadmin_favorites/personalization_controller.js

@@ -58,7 +58,8 @@ export default class extends Controller {
 
     const groups = Object.keys(grouped)
     if (groups.length === 0) {
-      this.catalogGroupsTarget.innerHTML = `<p class="text-sm text-gray-600 dark:text-gray-300">${this.escapeHtml(this.emptyCatalogLabelValue)}</p>`
+      this.catalogGroupsTarget.innerHTML =
+        `<p class="favorites-personalization-menu__empty">${this.escapeHtml(this.emptyCatalogLabelValue)}</p>`
       return
     }
 
@@ -70,11 +71,11 @@ export default class extends Controller {
         const entryId = this.escapeHtml(entry.id)
         return `
           <li>
-            <label class="inline-flex items-center gap-2 text-sm">
+            <label class="favorites-personalization-menu__item">
               <input
                 type="checkbox"
                 checked
-                class="rounded border-gray-300 dark:border-white/20"
+                class="favorites-personalization-menu__checkbox"
                 data-group="${entryGroup}"
                 data-entry-id="${entryId}"
                 data-${this.identifier}-target="visibilityCheckbox"
@@ -86,9 +87,9 @@ export default class extends Controller {
       }).join("")
 
       return `
-        <div class="mb-4">
-          <h4 class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-2">${label}</h4>
-          <ul class="space-y-2 max-h-40 overflow-y-auto">${items}</ul>
+        <div class="favorites-personalization-menu__group">
+          <h4 class="favorites-personalization-menu__group-title">${label}</h4>
+          <ul class="favorites-personalization-menu__list">${items}</ul>
         </div>
       `
     }).join("")

data/app/assets/stylesheets/activeadmin_favorites/personalization_menu.css

@@ -0,0 +1,145 @@
+/* Catalog scrolls; action buttons stay visible inside the menu. */
+.favorites-personalization-menu__body {
+  display: flex;
+  flex-direction: column;
+  max-height: min(70vh, calc(100dvh - 5rem));
+  padding: 0.625rem 0.75rem;
+}
+
+.favorites-personalization-menu__title {
+  flex-shrink: 0;
+  margin: 0 0 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--color-gray-800, #1f2937);
+}
+
+.dark .favorites-personalization-menu__title {
+  color: var(--color-gray-100, #f3f4f6);
+}
+
+.favorites-personalization-menu__catalog {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-right: 0.125rem;
+}
+
+.favorites-personalization-menu__empty {
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1.35;
+  color: var(--color-gray-500, #6b7280);
+}
+
+.favorites-personalization-menu__group {
+  margin-bottom: 0.5rem;
+}
+
+.favorites-personalization-menu__group:last-child {
+  margin-bottom: 0;
+}
+
+.favorites-personalization-menu__group-title {
+  margin: 0 0 0.25rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-gray-500, #6b7280);
+}
+
+.favorites-personalization-menu__list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.favorites-personalization-menu__list > li + li {
+  margin-top: 0.125rem;
+}
+
+.favorites-personalization-menu__item {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.375rem;
+  font-size: 0.75rem;
+  line-height: 1.3;
+  color: var(--color-gray-800, #1f2937);
+}
+
+.dark .favorites-personalization-menu__item {
+  color: var(--color-gray-100, #f3f4f6);
+}
+
+.favorites-personalization-menu__checkbox {
+  margin-top: 0.1rem;
+  border-radius: 0.25rem;
+  border-color: var(--color-gray-300, #d1d5db);
+}
+
+.favorites-personalization-menu__actions {
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.375rem;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--color-gray-200, #e5e7eb);
+}
+
+.dark .favorites-personalization-menu__actions {
+  border-top-color: var(--color-gray-700, #374151);
+}
+
+.favorites-personalization-menu__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.75rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--color-gray-300, #d1d5db);
+  border-radius: 0.375rem;
+  background: var(--color-gray-50, #f9fafb);
+  color: var(--color-gray-800, #1f2937);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1.2;
+  text-align: center;
+  cursor: pointer;
+}
+
+.favorites-personalization-menu__action:hover {
+  background: var(--color-gray-100, #f3f4f6);
+}
+
+.dark .favorites-personalization-menu__action {
+  border-color: var(--color-gray-600, #4b5563);
+  background: var(--color-gray-900, #111827);
+  color: var(--color-gray-100, #f3f4f6);
+}
+
+.dark .favorites-personalization-menu__action:hover {
+  background: var(--color-gray-800, #1f2937);
+}
+
+.favorites-personalization-menu__action--wide,
+.favorites-personalization-menu__link {
+  grid-column: 1 / -1;
+}
+
+.favorites-personalization-menu__link {
+  display: block;
+  padding-top: 0.125rem;
+  font-size: 0.6875rem;
+  text-align: center;
+  color: var(--color-blue-500, #3b82f6);
+  text-decoration: none;
+}
+
+.favorites-personalization-menu__link:hover {
+  text-decoration: underline;
+}

data/app/views/active_admin/_html_head.html.erb

@@ -0,0 +1,14 @@
+<%= stylesheet_link_tag "active_admin" %>
+<%= stylesheet_link_tag ActiveAdmin::Favorites::PERSONALIZATION_MENU_STYLESHEET %>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<%= csrf_meta_tags %>
+<%= csp_meta_tag %>
+<% # On page load or when changing themes, best to add inline in `head` to avoid FOUC %>
+<%= javascript_tag nonce: true do %>
+  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+  }
+<% end %>
+<%= javascript_importmap_tags "active_admin", importmap: ActiveAdmin.importmap %>

data/app/views/active_admin/favorites/_personalization_trigger.html.erb

@@ -4,6 +4,7 @@
   resource_key = active_admin_config.resource_name.route_key
   hidden = layout.layout.fetch("hidden", {})
   catalog_element_id = "favorites-lens-catalog-#{resource_key}-#{action_name}"
+  menu_id = "personalization-menu-#{resource_key}-#{action_name}"
 %>
 <div
   class="relative"
@@ -30,7 +31,7 @@
     type="button"
     class="action-item-button inline-flex items-center gap-2"
     aria-label="<%= t("active_admin.favorites.personalize_page") %>"
-    data-dropdown-toggle="personalization-menu-<%= resource_key %>-<%= action_name %>"
+    data-dropdown-toggle="<%= menu_id %>"
     data-dropdown-offset-distance="3"
     data-dropdown-placement="bottom-end"
     data-action="click-><%= stimulus_controller %>#prepareMenu"
@@ -43,27 +44,50 @@
   </button>
 
   <div
-    id="personalization-menu-<%= resource_key %>-<%= action_name %>"
-    class="z-50 hidden w-80 max-w-[calc(100vw-2rem)] rounded-md bg-white p-4 shadow-lg ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10"
+    id="<%= menu_id %>"
+    class="favorites-personalization-menu z-50 hidden w-72 max-w-[calc(100vw-2rem)] overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10"
     role="region"
     aria-label="<%= t("active_admin.favorites.personalization_region") %>"
     data-<%= stimulus_controller %>-target="menu"
   >
-    <h3 class="text-sm font-semibold mb-3"><%= t("active_admin.favorites.personalization_region") %></h3>
+    <div class="favorites-personalization-menu__body">
+      <h3 class="favorites-personalization-menu__title">
+        <%= t("active_admin.favorites.personalization_region") %>
+      </h3>
 
-    <div data-<%= stimulus_controller %>-target="catalogGroups"></div>
+      <div
+        class="favorites-personalization-menu__catalog"
+        data-<%= stimulus_controller %>-target="catalogGroups"
+      ></div>
 
-    <div class="flex flex-col gap-2 border-t border-gray-200 pt-3 dark:border-white/10">
-      <button type="button" class="action-item-button w-full" data-action="<%= stimulus_controller %>#saveDefault">
-        <%= t("active_admin.favorites.save_default") %>
-      </button>
-      <button type="button" class="action-item-button w-full" data-action="<%= stimulus_controller %>#resetDefault">
-        <%= t("active_admin.favorites.reset_default") %>
-      </button>
-      <button type="button" class="action-item-button w-full" data-action="<%= stimulus_controller %>#saveLensFavorite">
-        <%= t("active_admin.favorites.save_lens_favorite") %>
-      </button>
-      <%= link_to t("active_admin.favorites.menu"), admin_favorites_path, class: "text-sm text-center no-underline hover:underline" %>
+      <div class="favorites-personalization-menu__actions">
+        <button
+          type="button"
+          class="favorites-personalization-menu__action"
+          data-action="<%= stimulus_controller %>#saveDefault"
+        >
+          <%= t("active_admin.favorites.save_default") %>
+        </button>
+        <button
+          type="button"
+          class="favorites-personalization-menu__action"
+          data-action="<%= stimulus_controller %>#resetDefault"
+        >
+          <%= t("active_admin.favorites.reset_default") %>
+        </button>
+        <button
+          type="button"
+          class="favorites-personalization-menu__action favorites-personalization-menu__action--wide"
+          data-action="<%= stimulus_controller %>#saveLensFavorite"
+        >
+          <%= t("active_admin.favorites.save_lens_favorite") %>
+        </button>
+        <%=
+          link_to t("active_admin.favorites.menu"),
+            admin_favorites_path,
+            class: "favorites-personalization-menu__link"
+        %>
+      </div>
     </div>
   </div>
 </div>

data/lib/activeadmin/favorites/engine.rb

@@ -29,6 +29,7 @@ module ActiveAdmin
         next unless app.config.respond_to?(:assets)
 
         app.config.assets.precompile << "activeadmin_favorites/personalization_controller.js"
+        app.config.assets.precompile << "activeadmin_favorites/personalization_menu.css"
       end
 
       initializer "activeadmin_favorites.importmap", after: :importmap do

data/lib/activeadmin/favorites/version.rb

@@ -2,6 +2,6 @@
 
 module ActiveAdmin
   module Favorites
-    VERSION = "0.1.4"
+    VERSION = "0.1.6"
   end
 end

data/lib/activeadmin/favorites.rb

@@ -5,6 +5,8 @@ require "activeadmin/favorites/configuration"
 
 module ActiveAdmin
   module Favorites
+    PERSONALIZATION_MENU_STYLESHEET = "activeadmin_favorites/personalization_menu"
+
     class << self
       def config
         @config ||= Configuration.new
@@ -14,6 +16,13 @@ module ActiveAdmin
         yield config
       end
 
+      # Absolute path to the plain CSS file Propshaft serves. Hosts that
+      # concatenate into a Tailwind CLI entry can File.read this path; do not
+      # bare-@import the Propshaft logical path from a tmp Tailwind input.
+      def personalization_menu_stylesheet_path
+        Engine.root.join("app/assets/stylesheets/#{PERSONALIZATION_MENU_STYLESHEET}.css")
+      end
+
       def install!
         require "activeadmin/favorites/install"
         Install.call

data/sig/activeadmin/favorites.rbs

@@ -1,5 +1,8 @@
 module ActiveAdmin
   module Favorites
     VERSION: String
+    PERSONALIZATION_MENU_STYLESHEET: String
+
+    def self.personalization_menu_stylesheet_path: () -> Pathname
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: activeadmin_favorites
 version: !ruby/object:Gem::Version
-  version: 0.1.4
+  version: 0.1.6
 platform: ruby
 authors:
 - Andrei Makarov
@@ -340,6 +340,7 @@ files:
 - SECURITY.md
 - activeadmin_favorites.gemspec
 - app/assets/controllers/activeadmin_favorites/personalization_controller.js
+- app/assets/stylesheets/activeadmin_favorites/personalization_menu.css
 - app/models/active_admin/favorites.rb
 - app/models/active_admin/favorites/application_record.rb
 - app/models/active_admin/favorites/combined_favorite.rb
@@ -354,6 +355,7 @@ files:
 - app/models/active_admin/favorites/lens_favorite.rb
 - app/models/active_admin/favorites/view_lens/layout.rb
 - app/models/active_admin/favorites/view_lens_default.rb
+- app/views/active_admin/_html_head.html.erb
 - app/views/active_admin/favorites/_lens_catalog_data.html.erb
 - app/views/active_admin/favorites/_macro_fields.html.erb
 - app/views/active_admin/favorites/_personalization_trigger.html.erb