plutonium 0.49.1 → 0.50.0

data/lib/plutonium/ui/table/base.rb

@@ -6,6 +6,15 @@ module Plutonium
       class Base < Phlexi::Table::Base
         include Plutonium::UI::Component::Behaviour
 
+        # Make every body row a row-click candidate. The controller
+        # delegates to whatever element inside the row is tagged
+        # `data-row-click-target="show"` (typically the show action
+        # button). Rows without such a target become a no-op — no
+        # special-casing needed in this layer.
+        def table_body_row_attributes(wrapped_object)
+          super.merge(data: {controller: "row-click", action: "click->row-click#click"})
+        end
+
         # Use custom SelectionColumn with Stimulus data attributes
         class SelectionColumn < Plutonium::UI::Table::Components::SelectionColumn; end
 
@@ -16,6 +25,103 @@ module Plutonium
             end
           end
         end
+
+        # Override DataColumn to use our enhanced SortableHeaderCell
+        class DataColumn < Phlexi::Table::Components::DataColumn
+          def header_cell
+            SortableHeaderCell.new(label, sort_params:)
+          end
+        end
+
+        # Enhanced sortable header cell with:
+        # - plain click → replace sort (single column); shift-click → multi-sort
+        # - direction indicator (↑/↓) with priority badge when multi-sort active
+        # - ⋯ column menu with Clear sort + disabled placeholders
+        class SortableHeaderCell < Phlexi::Table::Components::SortableHeaderCell
+          def view_template
+            if !sort_params
+              div(class: themed(:header_cell_content_wrapper)) { plain label_text }
+              return
+            end
+
+            div(class: themed(:header_cell_sort_wrapper), data: {controller: "table-header"}) do
+              render_sort_link
+              render_column_menu
+            end
+          end
+
+          private
+
+          attr_reader :sort_params
+
+          def label_text
+            @value.to_s
+          end
+
+          def render_sort_link
+            a(
+              href: sort_params[:url],
+              class: themed(:header_cell_link),
+              data: {
+                action: "click->table-header#headerClick",
+                table_header_multi_href: sort_params[:multi_url]
+              }
+            ) do
+              span { plain label_text }
+              render_sort_indicator
+            end
+          end
+
+          def render_sort_indicator
+            direction = sort_params[:direction]
+
+            if direction.present?
+              span(class: themed(:sort_icon_active)) do
+                if direction == "ASC"
+                  render Phlex::TablerIcons::ArrowUp.new(class: "w-3 h-3")
+                else
+                  render Phlex::TablerIcons::ArrowDown.new(class: "w-3 h-3")
+                end
+              end
+              if sort_params[:multi]
+                span(class: themed(:sort_priority_badge)) do
+                  plain((sort_params[:position] + 1).to_s)
+                end
+              end
+            else
+              span(class: themed(:sort_icon_inactive)) do
+                render Phlex::TablerIcons::Selector.new(class: "w-3 h-3")
+              end
+            end
+          end
+
+          def render_column_menu
+            div(class: "relative group/col-menu", data: {controller: "table-column-menu"}) do
+              button(
+                type: "button",
+                class: themed(:column_menu_trigger),
+                data: {action: "click->table-column-menu#toggle"},
+                aria: {label: "Column options"}
+              ) do
+                render Phlex::TablerIcons::Dots.new(class: "w-3 h-3")
+              end
+
+              div(
+                class: themed(:column_menu_panel),
+                data: {"table-column-menu-target": "panel"}
+              ) do
+                render_menu_item("Clear sort", sort_params[:reset_url], icon: Phlex::TablerIcons::X)
+              end
+            end
+          end
+
+          def render_menu_item(label, href, icon: nil)
+            a(href: href, class: themed(:column_menu_item)) do
+              render icon.new(class: "w-4 h-4 shrink-0") if icon
+              span { plain label }
+            end
+          end
+        end
       end
     end
   end

data/lib/plutonium/ui/table/components/bulk_actions_toolbar.rb

@@ -23,33 +23,41 @@ module Plutonium
           end
 
           def view_template
-            # Always render toolbar - hidden by default, Stimulus shows it when items are selected
             div(
-              class: "hidden flex pu-toolbar",
+              class: "hidden flex items-center gap-3 px-4 py-2 border-b border-[var(--pu-border)] bg-primary-50 dark:bg-primary-950/30",
               data: {bulk_actions_target: "toolbar"}
             ) do
               render_selected_count
               render_action_buttons
+              render_clear_selection
             end
           end
 
           private
 
           def render_selected_count
-            span(class: "pu-toolbar-text") do
+            div(class: "text-sm font-medium text-primary-700 dark:text-primary-300") do
               span(data: {bulk_actions_target: "selectedCount"}) { "0" }
               plain " selected"
             end
           end
 
           def render_action_buttons
-            div(class: "pu-toolbar-actions") do
+            div(class: "flex items-center gap-1.5") do
               @bulk_actions.each do |action|
                 render_action_button(action)
               end
             end
           end
 
+          def render_clear_selection
+            button(
+              type: "button",
+              data: {action: "click->bulk-actions#clearSelection"},
+              class: "ml-auto text-xs text-primary-700 dark:text-primary-300 hover:underline"
+            ) { "Clear selection" }
+          end
+
           def render_action_button(action)
             url = route_options_to_url(action.route_options, resource_class)
 

data/lib/plutonium/ui/table/components/filter_form.rb

@@ -0,0 +1,171 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      module Components
+        # Phlexi form rendering the filter slideover body. Submits via GET
+        # with `q[<filter>][<input>]=value` so the existing query object
+        # parses values exactly as the legacy filter dropdown did. Hidden
+        # fields preserve sort, scope and search state across applies.
+        class FilterForm < Plutonium::UI::Form::Base
+          attr_reader :query_object, :search_value, :search_param
+
+          def initialize(*, query_object:, search_url:, search_param: :q, search_value: nil, attributes: {}, **opts, &)
+            opts[:as] = :q
+            opts[:method] = :get
+            attributes = attributes.deep_merge(
+              id: "filter-form",
+              data: {turbo_frame: nil}
+            )
+            super(*, attributes:, **opts, &)
+            @query_object = query_object
+            @search_url = search_url
+            @search_param = search_param
+            @search_value = search_value
+          end
+
+          def form_class
+            "flex-1 flex flex-col min-h-0"
+          end
+
+          def form_template
+            render_header
+            render_fields_region
+            render_footer
+            render_hidden_state
+          end
+
+          private
+
+          def render_header
+            div(class: "shrink-0 flex items-center justify-between gap-4 px-6 pt-5 pb-4 " \
+                       "border-b border-[var(--pu-border)]") do
+              h2(class: "text-lg font-semibold text-[var(--pu-text)]") { "Filters" }
+              div(class: "flex items-center gap-1") do
+                button(
+                  type: "button",
+                  class: "text-sm text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] px-2 py-1 rounded transition-colors",
+                  data: {action: "filter-panel#clear"}
+                ) { "Clear" }
+                button(
+                  type: "button",
+                  class: "p-1.5 -m-1.5 text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] rounded-md transition-colors",
+                  data: {action: "filter-panel#close"},
+                  "aria-label": "Close filters"
+                ) do
+                  render Phlex::TablerIcons::X.new(class: "w-5 h-5")
+                end
+              end
+            end
+          end
+
+          def render_fields_region
+            div(class: "flex-1 min-h-0 overflow-y-auto px-6 py-5 space-y-4") do
+              query_object.filter_definitions.each do |filter_name, definition|
+                nest_one filter_name do |nested|
+                  inputs = definition.defined_inputs
+                  has_multiple_inputs = inputs.size > 1
+                  inputs.each do |input_name, _|
+                    label = if has_multiple_inputs
+                      "#{filter_name.to_s.humanize} (#{input_name.to_s.humanize.downcase})"
+                    else
+                      filter_name.to_s.humanize
+                    end
+                    render_filter_field(nested, definition, input_name, filter_label: label)
+                  end
+                end
+              end
+            end
+          end
+
+          def render_footer
+            div(class: "shrink-0 px-6 py-3 border-t border-[var(--pu-border)] " \
+                       "flex items-center justify-end gap-2") do
+              render field(:submit).submit_button_tag(
+                name: nil,
+                class!: "pu-btn pu-btn-md pu-btn-primary"
+              ) { "Apply" }
+            end
+          end
+
+          # Hidden inputs preserve query state (sort, scope, search) so
+          # applying a filter doesn't reset them.
+          def render_hidden_state
+            div(hidden: true) do
+              if search_value.present?
+                input(name: "#{search_param}[search]", value: search_value, type: :hidden, hidden: true)
+              end
+              # Preserve the current view selection across filter applies
+              # and clears so the user stays where they were.
+              if helpers.params[:view].present?
+                input(name: "view", value: helpers.params[:view], type: :hidden, hidden: true)
+              end
+              render_sort_fields
+              render_scope_fields
+            end
+          end
+
+          def render_sort_fields
+            field :sort_fields do |name|
+              render name.input_array_tag do |array|
+                render array.input_tag(type: :hidden, hidden: true)
+              end
+            end
+            nest_one :sort_directions do |nested|
+              query_object.sort_definitions.each do |filter_name, _|
+                nested.field(filter_name) do |f|
+                  render f.input_tag(type: :hidden, hidden: true)
+                end
+              end
+            end
+          end
+
+          def render_scope_fields
+            return if query_object.scope_definitions.blank?
+            render field(:scope).input_tag(type: :hidden, hidden: true)
+          end
+
+          def render_filter_field(nested, resource_definition, name, filter_label: nil)
+            input_definition = resource_definition.defined_inputs[name] || {}
+            input_options = input_definition[:options] || {}
+            field_options = resource_definition.defined_fields[name] ? resource_definition.defined_fields[name][:options].dup : {}
+
+            tag = input_options[:as] || field_options[:as]
+            tag_attributes = input_options.except(:wrapper, :as)
+
+            tag_block = input_definition[:block] || ->(f) {
+              tag ||= f.inferred_field_component
+              f.send(:"#{tag}_tag", **tag_attributes, class: "w-full")
+            }
+
+            field_options = field_options.except(:as)
+
+            # Explicitly thread the current param value as the field's
+            # initial value. Phlexi *can* read it off the form's hash
+            # record via `object[key]`, but going through `value:` is
+            # unambiguous and avoids subtle differences between the
+            # form's hash navigation and direct param reads.
+            current_value = current_param_value(nested.key, name)
+
+            div(class: "space-y-1.5") do
+              label(class: "text-sm font-medium text-[var(--pu-text)]") { filter_label }
+              nested.field(name, value: current_value, **field_options) do |f|
+                f.placeholder(input_options[:include_blank] || "All") if input_options[:include_blank]
+                render instance_exec(f, &tag_block)
+              end
+            end
+          end
+
+          def current_param_value(filter_name, input_name)
+            helpers.params.dig(search_param, filter_name, input_name)
+          end
+
+          def form_action
+            @search_url
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/components/filter_pills.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      module Components
+        class FilterPills < Plutonium::UI::Component::Base
+          def initialize(query:, total_count: nil)
+            @query = query
+            @total_count = total_count
+          end
+
+          def view_template
+            return if @query.active_filter_descriptions.empty? && @total_count.to_i.zero?
+
+            div(
+              class: "flex items-center gap-1.5 px-4 py-2 border-b border-[var(--pu-border)] flex-wrap",
+              data: {bulk_actions_target: "filterPills"}
+            ) do
+              @query.active_filter_descriptions.each { |f| render_pill(f) }
+              if @query.active_filter_descriptions.any?
+                render_add_filter_pill
+                render_clear_all_pill
+              end
+              render_result_count if @total_count
+            end
+          end
+
+          private
+
+          def render_pill(filter)
+            span(class: "inline-flex items-center gap-1.5 h-6 px-2 rounded-full bg-primary-50 border border-primary-200 text-xs text-primary-700 dark:bg-primary-950/40 dark:border-primary-900/60 dark:text-primary-300") do
+              span { plain "#{filter[:label]}: #{filter[:value_label]}" }
+              a(href: filter[:clear_url],
+                aria: {label: "Remove #{filter[:label]} filter"},
+                class: "ml-0.5 inline-flex items-center justify-center w-4 h-4 rounded hover:bg-primary-200 dark:hover:bg-primary-900/60") do
+                render Phlex::TablerIcons::X.new(class: "w-3 h-3")
+              end
+            end
+          end
+
+          def render_add_filter_pill
+            button(type: "button",
+              data: {action: "click->filter-panel#toggle"},
+              class: "inline-flex items-center gap-1 h-6 px-2 rounded-full border border-dashed border-[var(--pu-border)] text-xs text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] hover:border-[var(--pu-border-strong)]") do
+              render Phlex::TablerIcons::Plus.new(class: "w-3 h-3")
+              plain "Filter"
+            end
+          end
+
+          def render_clear_all_pill
+            a(href: clear_all_url,
+              class: "inline-flex items-center gap-1 h-6 px-2 rounded-full text-xs text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] underline-offset-2 hover:underline") do
+              plain "Clear all"
+            end
+          end
+
+          # Strip every active filter param while preserving search, scope,
+          # sort, view, and pagination state.
+          def clear_all_url
+            keep = request.query_parameters.dup
+            q = keep[:q] || keep["q"]
+            if q.is_a?(Hash) || q.is_a?(ActionController::Parameters)
+              filter_keys = @query.filter_definitions.keys.map(&:to_s)
+              # to_unsafe_h on Parameters; to_h on Hash both yield a
+              # plain Hash. Using to_h on Parameters would raise
+              # UnfilteredParameters in newer Rails versions.
+              raw = q.respond_to?(:to_unsafe_h) ? q.to_unsafe_h : q.to_h
+              cleaned = raw.reject { |k, _| filter_keys.include?(k.to_s) }
+              if cleaned.empty?
+                keep.delete(:q)
+                keep.delete("q")
+              else
+                keep["q"] = cleaned
+              end
+            end
+            "#{request.path}?#{keep.to_query}"
+          end
+
+          def render_result_count
+            div(class: "ml-auto text-xs text-[var(--pu-text-muted)]") do
+              plain "#{@total_count} #{(@total_count == 1) ? "result" : "results"}"
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/components/row_actions_dropdown.rb

@@ -38,33 +38,34 @@ module Plutonium
               style: "box-shadow: var(--pu-shadow-lg)",
               data: {resource_drop_down_target: "menu"}
             ) do
-              render_secondary_actions if secondary_actions.any?
-              render_danger_divider if secondary_actions.any? && danger_actions.any?
-              render_danger_actions if danger_actions.any?
+              render_group(primary_actions)
+              render_divider if primary_actions.any? && (secondary_actions.any? || danger_actions.any?)
+              render_group(secondary_actions)
+              render_divider if secondary_actions.any? && danger_actions.any?
+              render_group(danger_actions)
             end
           end
 
-          def render_secondary_actions
+          def render_group(actions)
+            return if actions.empty?
             div(class: "py-1") do
-              secondary_actions.each { |action| render_action_item(action) }
+              actions.each { |action| render_action_item(action) }
             end
           end
 
-          def render_danger_divider
+          def render_divider
             div(class: "border-t border-[var(--pu-border-muted)]")
           end
 
-          def render_danger_actions
-            div(class: "py-1") do
-              danger_actions.each { |action| render_action_item(action) }
-            end
-          end
-
           def render_action_item(action)
             url = route_options_to_url(action.route_options, @record)
             render Plutonium::UI::ActionButton.new(action, url: url, variant: :row_dropdown)
           end
 
+          def primary_actions
+            @primary_actions ||= @actions.select { |a| a.category.primary? }.sort_by(&:position)
+          end
+
           def secondary_actions
             @secondary_actions ||= @actions.select { |a| a.category.secondary? }.sort_by(&:position)
           end

data/lib/plutonium/ui/table/components/scopes_pills.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      module Components
+        class ScopesPills < Plutonium::UI::Component::Base
+          def view_template
+            return if scopes.empty?
+
+            nav(role: "tablist",
+              aria: {label: "Scope"},
+              class: "flex items-center gap-1 px-4 py-2 border-b border-[var(--pu-border)]") do
+              render_all_pill
+              scopes.each_key { |key| render_pill(key) }
+            end
+          end
+
+          private
+
+          def render_all_pill
+            active = all_scope_active?
+            a(
+              id: "all-scope",
+              href: current_query_object.build_url(scope: nil),
+              role: "tab",
+              aria: {selected: active},
+              class: pill_classes(active)
+            ) { "All" }
+          end
+
+          def render_pill(key)
+            active = current_query_object.selected_scope.to_s == key.to_s
+            label = key.to_s.humanize
+
+            a(
+              id: "#{key}-scope",
+              href: current_query_object.build_url(scope: key),
+              role: "tab",
+              aria: {selected: active},
+              class: pill_classes(active)
+            ) { label }
+          end
+
+          def pill_classes(active)
+            base = "px-3 py-1 rounded-md text-sm transition-colors"
+            state = if active
+              "bg-primary-100 text-primary-700 dark:bg-primary-950/40 dark:text-primary-300"
+            else
+              "text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)]"
+            end
+            "#{base} #{state}"
+          end
+
+          def all_scope_active?
+            current_query_object.all_scope_selected? ||
+              (!raw_resource_query_params.key?(:scope) && current_query_object.default_scope_name.blank?)
+          end
+
+          def scopes
+            @scopes ||= current_query_object.scope_definitions
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/components/selection_column.rb

@@ -15,21 +15,12 @@ module Plutonium
             SelectionDataCell.new(wrapped_object.field(value_key).dom.value, allowed_actions)
           end
 
-          # Add hidden class and Stimulus target to header cell
           def header_cell_attributes
-            {
-              class: "hidden w-12",
-              data: {bulk_actions_target: "selectionCell"}
-            }
+            {class: "w-12"}
           end
 
-          # Add hidden class and Stimulus target to data cell
           def data_cell_attributes(wrapped_object)
-            {
-              scope: :row,
-              class: "hidden",
-              data: {bulk_actions_target: "selectionCell"}
-            }
+            {scope: :row}
           end
 
           private

data/lib/plutonium/ui/table/components/toolbar.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      module Components
+        # Modern index toolbar combining view switcher, filter/group controls,
+        # inline search, and column config / overflow icon buttons into a single
+        # tight strip rendered above the table when shell == :modern.
+        class Toolbar < Plutonium::UI::Component::Base
+          def initialize(query:, search_url:, search_param: :q, search_value: nil, views: [:table], current_view: :table, view_cookie_name: nil, view_cookie_path: "/")
+            @query = query
+            @search_url = search_url
+            @search_param = search_param
+            @search_value = search_value
+            @views = views
+            @current_view = current_view
+            @view_cookie_name = view_cookie_name
+            @view_cookie_path = view_cookie_path
+          end
+
+          def render?
+            @views.size > 1 || has_filters? || has_search?
+          end
+
+          def view_template
+            div(class: "flex items-center gap-2 px-4 py-2 border-b border-[var(--pu-border)] bg-[var(--pu-surface-alt)]") do
+              switcher = ViewSwitcher.new(views: @views, current: @current_view, cookie_name: @view_cookie_name, cookie_path: @view_cookie_path)
+              render switcher
+              render_divider if switcher.render?
+              render_filter_button
+              div(class: "flex-1")
+              render_search if has_search?
+            end
+          end
+
+          private
+
+          def has_filters?
+            @query && @query.filter_definitions.present?
+          end
+
+          def has_search?
+            @query && @query.search_filter.present?
+          end
+
+          def active_filter_count
+            @query ? @query.active_filter_descriptions.size : 0
+          end
+
+          def render_divider
+            div(class: "w-px h-5 bg-[var(--pu-border)]")
+          end
+
+          def render_filter_button
+            return unless has_filters?
+
+            count = active_filter_count
+            button(
+              type: "button",
+              class: "pu-btn pu-btn-outline pu-btn-sm",
+              data: {action: "click->filter-panel#toggle"}
+            ) do
+              render Phlex::TablerIcons::AdjustmentsHorizontal.new(class: "w-4 h-4 shrink-0")
+              span { "Filter" }
+              if count > 0
+                span(class: "ml-1 inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 " \
+                            "rounded-full bg-primary-600 text-white text-[10px] font-semibold leading-none") do
+                  plain count.to_s
+                end
+              end
+            end
+          end
+
+          def render_search
+            form(method: :get, action: @search_url) do
+              div(class: "relative") do
+                div(class: "absolute inset-y-0 left-0 flex items-center pl-2 pointer-events-none") do
+                  render Phlex::TablerIcons::Search.new(class: "w-4 h-4 text-[var(--pu-text-muted)]")
+                end
+                input(
+                  id: "pu-toolbar-search",
+                  type: "search",
+                  name: "#{@search_param}[search]",
+                  value: @search_value,
+                  placeholder: "Search...",
+                  class: "pu-input pu-input-toolbar pu-input-icon-left w-[220px]",
+                  # turbo-permanent + a stable id keep the DOM node
+                  # across Turbo morphs so focus / caret / IME state
+                  # survive the search-as-you-type submit cycle.
+                  data: {
+                    controller: "autosubmit",
+                    action: "input->autosubmit#submit search->autosubmit#submit",
+                    turbo_permanent: true
+                  }
+                )
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end