plutonium 0.60.5 → 0.61.0

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

@@ -0,0 +1,212 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Kanban
+      # Board shell — renders one lazy turbo-frame per column.
+      #
+      # Each frame id is "kanban-col-<key>". Its src merges view=kanban and
+      # column=<key> into the current request URL so Task 6's column endpoint
+      # fills the body on demand. The frame already contains the column header
+      # (color dot + label) so the shell is meaningful while the body loads. The
+      # header deliberately omits a card-count badge: the shell has no card data,
+      # so a "0" would flash then vanish when Kanban::Column (which renders no
+      # count badge) replaces the frame body.
+      #
+      # The outer wrapper carries data-controller="kanban" for the Stimulus
+      # drag controller wired in Task 11.
+      #
+      # Realtime subscription: when board.realtime? is true,
+      # render_realtime_subscription is called before the board wrapper.
+      # Task 14 implements the broadcaster and fills in that method body.
+      class Resource < Plutonium::UI::Component::Base
+        include ColorDot
+        include Phlex::Rails::Helpers::TurboFrameTag
+        include Phlex::Rails::Helpers::TurboStreamFrom
+
+        attr_reader :board, :grouped_data, :resource_definition, :resource_fields,
+          :resource_class, :scoped_entity
+
+        def initialize(board:, grouped_data:, resource_definition:, resource_fields:,
+          resource_class: nil, scoped_entity: nil)
+          @board = board
+          @grouped_data = grouped_data
+          @resource_definition = resource_definition
+          # TODO (Tasks 6/10): resource_fields arrives ALREADY resolved — the
+          # column endpoint / index page is responsible for the
+          # `board.card_fields || definition.grid_fields` fallback before
+          # constructing this component. Kanban::Resource (and the Card it
+          # eventually builds) just receives the final field list and renders
+          # it; it does not resolve card_fields itself.
+          @resource_fields = resource_fields
+          # Used by render_realtime_subscription (Task 14) to scope the
+          # ActionCable stream to the correct tenant + resource.
+          @resource_class = resource_class
+          @scoped_entity = scoped_entity
+        end
+
+        def view_template
+          render_realtime_subscription if board.realtime?
+
+          # Wrap in the filter-panel controller so the toolbar's Filter button
+          # can open the slideover — same structure as Grid/Table::Resource, so
+          # the board carries the shared view switcher (Table | Grid | Board),
+          # search, scopes, and filters rather than rendering bare columns.
+          div(data: filter_panel_controller_data) do
+            # Persistent append target for move-rejection toasts. It lives
+            # OUTSIDE the per-column turbo-frames so it survives the frame swaps
+            # a move triggers; toasts are position:fixed, so its location in the
+            # DOM has no layout effect. The move handler appends a flash toast
+            # here via turbo_stream when a drop is rejected (WIP / accepts /
+            # locked) so the snap-back is explained rather than silent.
+            div(id: "kanban-flash")
+            render_scopes_pills
+            render_toolbar
+
+            div(
+              class: "pu-kanban-board flex gap-4 overflow-x-auto p-4 min-h-0",
+              data: {
+                controller: "kanban",
+                # Stimulus value consumed by the drag controller to build the
+                # per-record move URL at drop time. The collection path comes from
+                # request.path so tenant / engine scoping is preserved automatically.
+                # Example: /admin/tasks/__ID__/kanban_move
+                kanban_move_url_template_value: kanban_move_url_template
+              }
+            ) do
+              grouped_data.each do |entry|
+                render_column_frame(entry[:column])
+              end
+            end
+
+            render_filter_slideover if current_query_object.filter_definitions.present?
+          end
+        end
+
+        private
+
+        def filter_panel_controller_data
+          {controller: "filter-panel"}
+        end
+
+        def render_scopes_pills
+          TableScopesPills() if current_query_object.scope_definitions.any?
+        end
+
+        # The shared index toolbar — view switcher (Table | Grid | Board),
+        # search, and the filter button. `current_view: :kanban` keeps the
+        # Board segment highlighted.
+        def render_toolbar
+          TableToolbar(
+            query: current_query_object,
+            search_url: request.path,
+            search_value: params.dig(:q, :search) || params[:search],
+            views: resource_definition.defined_index_views,
+            current_view: :kanban,
+            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_slideover
+          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"}
+          )
+          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: request.path,
+              search_value: params.dig(:q, :search) || params[:search]
+            )
+          end
+        end
+
+        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.deep_symbolize_keys.except(:search, :scope, :sort_fields, :sort_directions)
+        end
+
+        # Emits a <turbo-cable-stream-source> element that subscribes this page
+        # to the kanban board's tenant-scoped ActionCable stream.
+        #
+        # Only called when board.realtime? is true (gated by the caller in
+        # view_template). The stream name matches the one used by
+        # Plutonium::Kanban::Broadcaster#broadcast so move events reach exactly
+        # the right subscribers.
+        def render_realtime_subscription
+          turbo_stream_from(
+            *Plutonium::Kanban::Broadcaster.stream_name(
+              resource_class: resource_class,
+              scoped_entity: scoped_entity
+            )
+          )
+        end
+
+        def render_column_frame(column)
+          attrs = {src: column_frame_src(column)}
+          attrs[:loading] = "lazy" if board.lazy?
+
+          turbo_frame_tag(column_frame_id(column), **attrs) do
+            # Header is inside the frame so the shell is meaningful while the
+            # body (card list) loads. Task 6 replaces the frame contents with
+            # the full column body rendered by Kanban::Column.
+            render_column_header(column)
+          end
+        end
+
+        # Mirrors Kanban::Column#render_header structurally (no count badge) so
+        # the shell→loaded transition doesn't flash a stale count or restructure.
+        def render_column_header(column)
+          div(class: "px-3 py-2 flex items-center justify-between border-b border-[var(--pu-border)] bg-[var(--pu-surface)]") do
+            div(class: "flex items-center gap-2 min-w-0") do
+              render_color_dot(column.color) if column.color
+              span(class: "font-semibold text-sm text-[var(--pu-text)] truncate") { plain column.label }
+            end
+          end
+        end
+
+        # Builds the move URL template for the Stimulus drag controller.
+        # The collection path from the current request is used so engine
+        # mounting and path-scoped tenancy are automatically preserved.
+        # The literal string "__ID__" is a placeholder; the JS controller
+        # replaces it with the dragged card's record id at drop time.
+        def kanban_move_url_template
+          base = request.path.delete_suffix("/")
+          "#{base}/__ID__/kanban_move"
+        end
+
+        # Returns the turbo-frame element id for a column.
+        # Plain id — not turbo_scoped_dom_id which is for modal-frame scoping.
+        def column_frame_id(column)
+          "kanban-col-#{column.key}"
+        end
+
+        # Builds the frame src URL from the current request path + merged params.
+        # Merges view=kanban and column=<key> so the column endpoint (Task 6)
+        # knows which column to render without requiring an explicit route param.
+        def column_frame_src(column)
+          merged = request.query_parameters.merge(
+            "view" => "kanban",
+            "column" => column.key.to_s
+          )
+          "#{request.path}?#{merged.to_query}"
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/layout/resource_layout.rb

@@ -61,11 +61,17 @@ module Plutonium
           )
         end
 
+        # The classic shell always renders its sidebar; the modern family
+        # renders the icon rail only when the rail is active. Mirrors the
+        # classic special-casing in main_attributes/html_attributes, whose
+        # offsets are likewise rail-independent for :classic.
+        def render_sidebar? = shell == :classic || rail?
+
         def render_before_main
           super
 
           render partial("resource_header")
-          render partial("resource_sidebar") if rail?
+          render partial("resource_sidebar") if render_sidebar?
         end
       end
     end

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

@@ -24,10 +24,14 @@ module Plutonium
           (mode == :centered) ? Plutonium::UI::Modal::Centered : Plutonium::UI::Modal::Slideover
         end
 
-        def initialize(title: nil, description: nil, size: :md)
+        def initialize(title: nil, description: nil, size: :md, open_full_url: nil)
           @title = title
           @description = description
           @size = size
+          # When set, the header shows an "open full page" affordance that opens
+          # this URL in a new tab as a standalone page (no modal frame). The show
+          # modal uses it so a user can pop the record out to its full page.
+          @open_full_url = open_full_url
           validate_size!
         end
 
@@ -106,7 +110,30 @@ module Plutonium
                 p(id: description_id, class: "mt-1 text-sm text-[var(--pu-text-muted)]") { @description }
               end
             end
-            render_close_button
+            # The corner-hugging offset lives on the GROUP (not the individual
+            # buttons) so the buttons' own margins don't collapse the gap when
+            # there are two of them (open-full + close).
+            div(class: "flex items-center gap-1 shrink-0 -mt-1.5 -mr-1.5") do
+              render_open_full_link if @open_full_url
+              render_close_button
+            end
+          end
+        end
+
+        # Opens the modal's content as a standalone full page in a new tab.
+        # target=_blank gives a fresh browsing context with no Turbo-Frame
+        # header, so the destination renders full-page rather than re-entering
+        # the modal frame.
+        def render_open_full_link
+          a(
+            href: @open_full_url,
+            target: "_blank",
+            rel: "noopener",
+            class: "p-1.5 text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] rounded-md transition-colors",
+            "aria-label": "Open full page in a new tab",
+            title: "Open full page"
+          ) do
+            render Phlex::TablerIcons::ArrowsDiagonal.new(class: "w-5 h-5")
           end
         end
 
@@ -116,7 +143,7 @@ module Plutonium
           else
             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",
+              class: "p-1.5 text-[var(--pu-text-muted)] hover:text-[var(--pu-text)] hover:bg-[var(--pu-surface-alt)] rounded-md transition-colors",
               data: {action: "remote-modal#close"},
               "aria-label": "Close dialog"
             ) do

data/lib/plutonium/ui/modal/centered.rb

@@ -22,16 +22,19 @@ module Plutonium
         # Surface (bg, border, radius, backdrop) lives in `.pu-dialog` so
         # the centered modal, dirty-form-guard prompt, and Turbo confirm
         # can't drift on design tokens. The remaining utilities are
-        # positioning, sizing, and the open/close transform animation —
+        # positioning, sizing, and the open/close opacity+scale animation —
         # driven by [data-open] (set on the frame after showModal() by
         # remote_modal_controller); avoids the @starting-style spec dance.
+        # The transition must name `scale` (not `transform`): Tailwind v4's
+        # `scale-*` sets the discrete `scale` CSS property, so a
+        # `transition-[...,transform]` would leave the scale pop un-animated.
         def base_dialog_classes
           "pu-dialog " \
             "top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 " \
             "max-h-[80vh] " \
             "open:flex flex-col p-0 " \
             "opacity-0 scale-95 data-[open]:opacity-100 data-[open]:scale-100 " \
-            "transition-[opacity,transform] duration-200 ease-out"
+            "transition-[opacity,scale] duration-200 ease-out"
         end
       end
     end

data/lib/plutonium/ui/page/index.rb

@@ -38,6 +38,7 @@ module Plutonium
 
         def render_default_content
           case selected_view
+          when :kanban then render partial("resource_kanban")
           when :grid then render partial("resource_grid")
           else render partial("resource_table")
           end

data/lib/plutonium/ui/page/show.rb

@@ -19,6 +19,12 @@ module Plutonium
         end
 
         def render_default_content
+          # When the show request arrives via a modal frame (e.g. a kanban card
+          # with `show_in :modal`), wrap the details in the modal chrome — the
+          # same path New/Edit use for their forms. The aside is dropped in the
+          # modal: a slideover/centered dialog has no room for a side rail.
+          return render_modal_details if in_modal?
+
           if aside_present?
             div(class: "grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_240px] gap-6") do
               div { render partial("resource_details") }
@@ -29,6 +35,23 @@ module Plutonium
           end
         end
 
+        # The show page is ALWAYS a centered dialog when shown in a modal —
+        # deliberately not the definition's modal_mode (which styles :new/:edit
+        # as a slideover by default). A centered dialog reads as a focused
+        # "detail card" and leaves a launching board/table visible around it.
+        # `open_full_url` is the current show URL (request.path is the show
+        # route here), letting the user pop the record out to its full page.
+        def render_modal_details
+          render Plutonium::UI::Modal::Centered.new(
+            title: page_title,
+            description: page_description,
+            size: :lg,
+            open_full_url: request.path
+          ) do
+            render partial("resource_details")
+          end
+        end
+
         def page_type = :show_page
       end
     end