[senid231]

Theme 4.0 for ActiveAdmin 4. ActiveAdmin 4 replaced its Sass and jQuery front end with Tailwind CSS v4, Flowbite and import maps, so theme 3 can't be ported file by file. This PR rebuilds the theme on the new layout. Theme 3 moves to the 3.x maintenance branch.

Decisions to review

• ActiveAdmin views copied. The theme overrides 10 ActiveAdmin 4.0.0.beta23 views (layout, header, navigation, page header, sidebar, show page, _html_head). Rails always renders the copy, so ActiveAdmin fixes to those files don't reach theme users. test/aa_overrides_test.rb records a digest of each original and fails when a new ActiveAdmin version changes one. Run it with UPDATE_AA_DIGESTS=1 after you merge the upstream change into the copy.
• JavaScript. ActiveAdmin pages render only ActiveAdmin.importmap, so the engine pins the theme modules there. The theme's _html_head imports the modules listed in ActiveAdminTheme.javascripts. A pin in the host's own config/importmap.rb loads nothing on ActiveAdmin pages; the README says so.
• CSS. The theme ships two delivery routes. The npm package exports ./css. The gem-path route uses rake active_admin_theme:css, which writes the machine-specific gem path into a git-ignored active_admin_theme.generated.css.
• Requirements. Ruby 3.3 or later and ActiveAdmin 4.0.0.beta23 or later, the same as ActiveAdmin 4. The version is 4.0.0.pre.

Upstream proposals

These would shrink the copied views. None has been merged or reviewed yet.

activeadmin/activeadmin#9146 makes the layout extensible without copying views. With all five pull requests below, the theme drops its copies of the layout, _site_header, _main_navigation, _html_head and _page_header, and overrides small partials instead. I tested this against a branch that merges all five.

• Add javascript_modules setting to import modules on every page activeadmin/activeadmin#9148: javascript_modules setting
• Split the site header into leading, navigation and actions partials activeadmin/activeadmin#9149: header partials and #site-header
• Extract page content, heading, breadcrumbs and title partials activeadmin/activeadmin#9150: page content, heading, breadcrumbs and title partials, #page-header and #action-items
• Add aa-menu variant for the main menu breakpoint activeadmin/activeadmin#9151: aa-menu breakpoint variant
• Add --aa-header-height variable for the site header height activeadmin/activeadmin#9152: --aa-header-height variable

activeadmin/activeadmin#9147 supports running ActiveAdmin from a Rails engine and adding JavaScript to its pages:

• Add importmap_watches setting for the import map cache sweeper activeadmin/activeadmin#9153: importmap_watches setting, so edits to the theme's JavaScript clear ActiveAdmin's import map cache
• Build route helpers from the route set ActiveAdmin.routes draws into activeadmin/activeadmin#9154: route helpers from the engine's route set
• Explain why a resource could not be destroyed activeadmin/activeadmin#9155: show why a record could not be destroyed
• Document importmap_watches and loading custom Arbre components activeadmin/activeadmin#9156: JavaScript and custom component docs

Checklist

Packaging:

• Gemspec, Gemfile, npm package.json (exports ./css and ./*), version 4.0.0.pre
• CI: Ruby 3.3 and 3.4 with Node 22, bundle exec rake test
• Dummy app rebuilt on ActiveAdmin 4 (Propshaft, importmap, Tailwind CLI), with customers, orders, countries and cities
• Push 3.x to this repository; it is only on a fork today

Layout:

• Top menu from 768px with dropdown submenus; drawer menu below 768px
• Compact header with server clock, dark mode switch, user and logout icon
• Compact breadcrumbs, title and action items; action items styled as buttons
• Sidebar on the left, collapsible, and above the content on mobile
• Index tables scroll sideways; cells stay on one line
• Theme 3 colors, density and dark mode as --aat-* CSS custom properties
• Side-by-side comparison with theme 3 screenshots
• Logged-out layout checked on a real login page (the dummy has no Devise)

DSL and components:

• columns / column, tabs / tab, panels around sidebar sections and the show page
• confirm_dialog on the Flowbite modal, with form fields
• status_tag color variants and a color: option
• Searchable select on Tom Select (vendored 2.6.2): form and filter inputs, JSON source DSL, paging, dependent selects
• truncate_text, secret_reveal, with_tooltip, pre_wrap
• Server clock and table crisscross as ES modules without jQuery

Docs and release:

• README rewritten for theme 4
• docs/migrating-from-v3.md
• Switch to the ActiveAdmin hooks once they are released
• Release 4.0.0

Verification

bundle exec rake test passes locally: 68 runs, including headless Chrome tests for the layout, components, confirm dialog and searchable select. I checked index, show and form pages at 1280px, 820px and 390px, in light and dark mode, with test/screenshot.rb.