plutonium 0.49.1 → 0.50.0

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

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      module Components
+        # Segmented control for switching between index views (Table /
+        # Grid). Renders nothing unless at least two views are enabled.
+        # Selection is persisted in a per-resource cookie that the
+        # server reads on the next request — no `?view=` URL pollution
+        # so filters / search / clear-x links don't have to thread it
+        # through. The Stimulus controller sets the cookie on click,
+        # then reloads.
+        class ViewSwitcher < Plutonium::UI::Component::Base
+          SEGMENT_LABELS = {
+            table: {label: "Table", icon: Phlex::TablerIcons::Table},
+            grid: {label: "Grid", icon: Phlex::TablerIcons::LayoutGrid}
+          }.freeze
+
+          def initialize(views:, current:, cookie_name:, cookie_path: "/")
+            @views = views
+            @current = current
+            @cookie_name = cookie_name
+            @cookie_path = cookie_path
+          end
+
+          def render?
+            @views.size > 1
+          end
+
+          def view_template
+            div(
+              role: "tablist",
+              aria: {label: "View"},
+              class: "inline-flex h-8 rounded-md border border-[var(--pu-border)] bg-[var(--pu-surface)] overflow-hidden",
+              data: {
+                controller: "view-switcher",
+                view_switcher_cookie_name_value: @cookie_name,
+                view_switcher_cookie_path_value: @cookie_path
+              }
+            ) do
+              @views.each_with_index do |key, i|
+                render_segment(key, last: i == @views.length - 1)
+              end
+            end
+          end
+
+          private
+
+          def render_segment(key, last:)
+            meta = SEGMENT_LABELS.fetch(key) { {label: key.to_s.titleize, icon: Phlex::TablerIcons::LayoutGrid} }
+            active = key == @current
+
+            classes = ["px-2.5 inline-flex items-center gap-1.5 text-sm transition-colors"]
+            classes << "border-r border-[var(--pu-border)]" unless last
+            classes << if active
+              "bg-primary-50 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
+
+            button(
+              type: "button",
+              role: "tab",
+              class: classes.join(" "),
+              title: meta[:label],
+              aria: {selected: active.to_s},
+              data: {
+                action: "click->view-switcher#select",
+                view_switcher_view_param: key.to_s
+              }
+            ) do
+              render meta[:icon].new(class: "w-4 h-4 shrink-0")
+              span { meta[:label] }
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -13,22 +13,55 @@ module Plutonium
         end
 
         def view_template
-          render_search_bar
-          render_scopes_bar
+          # filter-panel controller wraps everything so the toolbar's
+          # filter button AND the FilterPills "+ Filter" pill (a sibling
+          # below the toolbar) share the same controller scope and can
+          # toggle the slideover rendered alongside them.
+          div(data: filter_panel_controller_data) do
+            render_scopes_pills
+            render_toolbar
+
+            div(data: bulk_actions_controller_data) do
+              render_filter_pills
+              render_bulk_actions_toolbar
+              collection.empty? ? render_empty_card : render_table
+            end
 
-          collection.empty? ? render_empty_card : render_table
+            render_filter_slideover if current_query_object.filter_definitions.present?
+          end
 
           render_footer
         end
 
         private
 
-        def render_search_bar
-          TableSearchBar()
+        def render_scopes_pills
+          TableScopesPills() if current_query_object.scope_definitions.any?
+        end
+
+        def render_toolbar
+          TableToolbar(
+            query: current_query_object,
+            search_url: current_search_url,
+            search_value: params.dig(:q, :search) || params[:search],
+            views: resource_definition.defined_views,
+            current_view: :table,
+            view_cookie_name: Plutonium::UI::Page::Index.view_cookie_name(resource_class),
+            view_cookie_path: Plutonium::UI::Page::Index.view_cookie_path(request)
+          )
+        end
+
+        def render_filter_pills
+          TableFilterPills(query: current_query_object, total_count: pagy_instance&.count)
         end
 
-        def render_scopes_bar
-          TableScopesBar()
+        def current_search_url
+          request.path
+        end
+
+        def render_bulk_actions_toolbar
+          return unless bulk_actions.any?
+          BulkActionsToolbar(bulk_actions:)
         end
 
         def render_empty_card
@@ -42,91 +75,84 @@ module Plutonium
         end
 
         def render_table
-          # Wrap table in Stimulus controller for bulk actions
-          div(data: bulk_actions_controller_data) do
-            # Bulk actions toolbar (hidden by default, shown when items selected)
-            BulkActionsToolbar(bulk_actions:) if bulk_actions.any?
-
-            render Plutonium::UI::Table::Base.new(collection) do |table|
-              # Selection column for bulk actions (hidden by default, Stimulus shows it)
-              # Use :_selection as column key to avoid conflicts with field columns
-              # value_key defaults to model's primary_key
+          render Plutonium::UI::Table::Base.new(collection) do |table|
+            # Selection column only renders when bulk actions exist —
+            # the server already knows, so no JS toggle is needed.
+            # Use :_selection as column key to avoid conflicts with field columns;
+            # value_key defaults to model's primary_key.
+            if bulk_actions.any?
               table.selection_column :_selection,
                 bulk_actions:,
                 policy_resolver: ->(record) { policy_for(record:) }
+            end
 
-              @resource_fields.each do |name|
-                # field :name, as: :string
-                # column :description, class: "text-red-700"
-                # column :age, align: :end
-                # column :description do |record|
-                #   record.description&.truncate(50)
-                # end
-
-                field_options = resource_definition.defined_fields[name] ? resource_definition.defined_fields[name][:options].dup : {}
-
-                display_definition = resource_definition.defined_displays[name] || {}
-                display_options = display_definition[:options] || {}
-
-                column_definition = resource_definition.defined_columns[name] || {}
-                column_options = column_definition[:options] || {}
-
-                # Check for conditional rendering
-                condition = column_options[:condition]
-                conditionally_hidden = condition && !instance_exec(&condition)
-                next if conditionally_hidden
-
-                tag = column_options[:as] || display_definition[:as] || field_options[:as]
-
-                # Extract field-level options from display_options and column_options
-                # These are Phlexi field options that should NOT be passed to the tag builder
-                field_level_keys = [:label, :description, :placeholder]
-                display_tag_attributes = display_options.except(:wrapper, :as, :condition, *field_level_keys)
-                column_tag_attributes = column_options.except(:wrapper, :as, :align, :condition, *field_level_keys)
-                tag_attributes = display_tag_attributes.merge(column_tag_attributes)
-                tag_block = if column_definition[:block]
-                  # User-provided blocks receive the raw record for convenience
-                  user_block = column_definition[:block]
-                  ->(wrapped_object, _key) { user_block.call(wrapped_object.unwrapped) }
-                else
-                  ->(wrapped_object, key) {
-                    f = wrapped_object.field(key)
-                    tag ||= f.inferred_field_component
-                    f.send(:"#{tag}_tag", **tag_attributes)
-                  }
-                end
-
-                # For table columns, only extract column-level options (label and align)
-                # Field-level options like description and placeholder don't make sense in table cells
-                field_options = field_options.except(:condition).merge(**column_options.slice(:align, :label))
-                table.column name,
-                  **field_options,
-                  sort_params: current_query_object.sort_params_for(name),
-                  &tag_block
+            @resource_fields.each do |name|
+              field_options = resource_definition.defined_fields[name] ? resource_definition.defined_fields[name][:options].dup : {}
+
+              display_definition = resource_definition.defined_displays[name] || {}
+              display_options = display_definition[:options] || {}
+
+              column_definition = resource_definition.defined_columns[name] || {}
+              column_options = column_definition[:options] || {}
+
+              # Check for conditional rendering
+              condition = column_options[:condition]
+              conditionally_hidden = condition && !instance_exec(&condition)
+              next if conditionally_hidden
+
+              tag = column_options[:as] || display_definition[:as] || field_options[:as]
+
+              # Extract field-level options from display_options and column_options
+              # These are Phlexi field options that should NOT be passed to the tag builder
+              field_level_keys = [:label, :description, :placeholder]
+              display_tag_attributes = display_options.except(:wrapper, :as, :condition, *field_level_keys)
+              column_tag_attributes = column_options.except(:wrapper, :as, :align, :condition, *field_level_keys)
+              tag_attributes = display_tag_attributes.merge(column_tag_attributes)
+              tag_block = if column_definition[:block]
+                # User-provided blocks receive the raw record for convenience
+                user_block = column_definition[:block]
+                ->(wrapped_object, _key) { user_block.call(wrapped_object.unwrapped) }
+              else
+                ->(wrapped_object, key) {
+                  f = wrapped_object.field(key)
+                  tag ||= f.inferred_field_component
+                  f.send(:"#{tag}_tag", **tag_attributes)
+                }
               end
 
-              table.actions do |wrapped_object|
-                record = wrapped_object.unwrapped
-                policy = policy_for(record:)
-
-                actions = resource_definition.defined_actions
-                  .select { |k, a| a.collection_record_action? && policy.allowed_to?(:"#{k}?") }
-                  .values
-
-                primary_actions = actions.select { |a| a.category.primary? }.sort_by(&:position)
-                dropdown_actions = actions.reject { |a| a.category.primary? }.sort_by(&:position)
+              # For table columns, only extract column-level options (label and align)
+              # Field-level options like description and placeholder don't make sense in table cells
+              field_options = field_options.except(:condition).merge(**column_options.slice(:align, :label))
+              table.column name,
+                **field_options,
+                sort_params: current_query_object.sort_params_for(name),
+                &tag_block
+            end
 
-                div(class: "flex items-center gap-1") do
-                  # Primary actions as buttons
-                  primary_actions.each do |action|
-                    url = route_options_to_url(action.route_options, record)
-                    ActionButton(action, url:, variant: :table)
-                  end
+            table.actions do |wrapped_object|
+              record = wrapped_object.unwrapped
+              policy = policy_for(record:)
+
+              actions = resource_definition.defined_actions
+                .select { |k, a| a.collection_record_action? && policy.allowed_to?(:"#{k}?") }
+                .values
+
+              primary_actions = actions.select { |a| a.category.primary? }.sort_by(&:position)
+              dropdown_actions = actions.reject { |a| a.category.primary? }.sort_by(&:position)
+
+              div(class: "flex items-center gap-1") do
+                # Primary actions as buttons. The :show action is also
+                # tagged so the `row-click` controller on the <tr> can
+                # delegate row-body clicks to it.
+                primary_actions.each do |action|
+                  url = route_options_to_url(action.route_options, record)
+                  data = (action.name == :show) ? {row_click_target: "show"} : {}
+                  ActionButton(action, url:, variant: :table, data: data)
+                end
 
-                  # Secondary/danger actions in dropdown
-                  if dropdown_actions.any?
-                    RowActionsDropdown(actions: dropdown_actions, record:)
-                  end
+                # Secondary/danger actions in dropdown
+                if dropdown_actions.any?
+                  RowActionsDropdown(actions: dropdown_actions, record:)
                 end
               end
             end
@@ -139,15 +165,58 @@ module Plutonium
             .values
         end
 
+        def filter_panel_controller_data
+          {controller: "filter-panel"}
+        end
+
+        # Hash of the current `q` params reduced to filter values only —
+        # used as the FilterForm's record so Phlexi prefills inputs from
+        # the URL (it reads values via `object[key]` for Hashes).
+        def filter_form_values
+          raw = params[:q]
+          return {} unless raw
+
+          hash = raw.respond_to?(:to_unsafe_h) ? raw.to_unsafe_h : raw.to_h
+          hash = hash.deep_symbolize_keys
+          hash.except(:search, :scope, :sort_fields, :sort_directions)
+        end
+
+        def render_filter_slideover
+          # Backdrop — click-to-close; transparent until panel opens.
+          div(
+            class: "fixed inset-0 z-40 bg-black/40 opacity-0 pointer-events-none " \
+                   "transition-opacity duration-200 " \
+                   "data-[open]:opacity-100 data-[open]:pointer-events-auto",
+            data: {filter_panel_target: "backdrop", action: "click->filter-panel#close"}
+          )
+
+          # Panel — fixed slideover from the right; the form inside owns
+          # its scroll region and pinned action strip.
+          aside(
+            class: "fixed top-0 right-0 bottom-0 z-50 w-full sm:w-[420px] max-w-full " \
+                   "bg-[var(--pu-surface)] border-l border-[var(--pu-border)] " \
+                   "translate-x-full transition-transform duration-300 ease-out " \
+                   "data-[open]:translate-x-0 " \
+                   "flex flex-col",
+            role: "dialog",
+            aria: {label: "Filters", hidden: "true", modal: "true"},
+            data: {filter_panel_target: "panel"}
+          ) do
+            render Plutonium::UI::Table::Components::FilterForm.new(
+              filter_form_values,
+              query_object: current_query_object,
+              search_url: current_search_url,
+              search_value: params.dig(:q, :search) || params[:search]
+            )
+          end
+        end
+
         def bulk_actions_controller_data
-          {
-            controller: "bulk-actions",
-            bulk_actions_has_actions_value: bulk_actions.any?
-          }
+          {controller: "bulk-actions"}
         end
 
         def render_footer
-          div(class: "lg:sticky lg:dyna:static bottom-[-2px] mt-1 p-4 pb-6 w-full z-30 bg-[var(--pu-body)]") {
+          div(class: "lg:sticky bottom-[-2px] mt-1 p-4 pb-6 w-full z-30 bg-[var(--pu-body)]") {
             TableInfo(pagy_instance)
             TablePagination(pagy_instance)
           }

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

@@ -25,10 +25,11 @@ module Plutonium
             # Header
             header: "pu-table-header",
             header_grouping_cell: "pu-table-header-cell text-center text-sm border-b border-t border-r last:border-r-0 border-[var(--pu-table-border)]",
-            header_cell: "pu-table-header-cell",
+            header_cell: "pu-table-header-cell group",
             header_cell_content_wrapper: "inline-flex items-center",
-            header_cell_sort_wrapper: "flex items-center",
+            header_cell_sort_wrapper: "flex items-center justify-between gap-1",
             header_cell_sort_indicator: "ml-1.5",
+            header_cell_link: "flex items-center gap-1 cursor-pointer hover:text-[var(--pu-text)]",
 
             # Body
             body_row: "pu-table-body-row",
@@ -36,11 +37,19 @@ module Plutonium
 
             # Sorting
             sort_icon: "w-3 h-3",
-            sort_icon_active: "text-primary-600 dark:text-primary-400",
-            sort_icon_inactive: "text-[var(--pu-text-subtle)]",
+            sort_icon_active: "ml-1 inline-flex text-primary-600 dark:text-primary-400",
+            sort_icon_inactive: "ml-1 inline-flex text-[var(--pu-text-subtle)] opacity-0 group-hover:opacity-100 transition-opacity",
+            sort_priority_badge: "ml-1 inline-flex items-center justify-center w-4 h-4 text-[10px] font-semibold rounded bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300",
             sort_index_clear_link: "ml-2",
             sort_index_clear_link_text: "text-xs font-bold text-[var(--pu-text-subtle)]",
-            sort_index_clear_link_icon: "ml-1 text-danger-600 dark:text-danger-400"
+            sort_index_clear_link_icon: "ml-1 text-danger-600 dark:text-danger-400",
+
+            # Column menu
+            column_menu_trigger: "p-1 rounded text-[var(--pu-text-subtle)] hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] opacity-0 group-hover:opacity-100 transition-opacity",
+            column_menu_panel: "hidden absolute right-0 top-full mt-1 z-50 min-w-[180px] bg-[var(--pu-surface)] border border-[var(--pu-border)] rounded-md shadow-lg p-1",
+            column_menu_item: "flex items-center gap-2 px-2 py-1.5 text-sm text-[var(--pu-text)] rounded hover:bg-[var(--pu-surface-alt)] w-full",
+            column_menu_item_disabled: "flex items-center gap-2 px-2 py-1.5 text-sm text-[var(--pu-text-subtle)] opacity-60 cursor-not-allowed",
+            column_menu_separator: "my-1 border-t border-[var(--pu-border)]"
           })
         end
       end

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.49.1"
+  VERSION = "0.50.0"
   NEXT_MAJOR_VERSION = VERSION.split(".").tap { |v|
     v[1] = v[1].to_i + 1
     v[2] = 0

data/lib/plutonium.rb

@@ -22,6 +22,12 @@ module Plutonium
   # Custom error class for Plutonium-specific exceptions
   class Error < StandardError; end
 
+  # Turbo frame id used by the modal/slideover renderer. The layout wraps
+  # itself in this frame, in_modal? checks against it, and Action and
+  # Definition default to targeting it. Kept as a single constant so the
+  # frame name lives in one place.
+  REMOTE_MODAL_FRAME = "remote_modal"
+
   # Set up Zeitwerk loader for the Plutonium gem
   # @return [Zeitwerk::Loader] configured Zeitwerk loader instance
   Loader = Zeitwerk::Loader.for_gem(warn_on_extra_files: false).tap do |loader|

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.49.1",
+  "version": "0.50.0",
   "description": "Build production-ready Rails apps in minutes, not days. Convention-driven, fully customizable, AI-ready.",
   "type": "module",
   "main": "src/js/core.js",