panda-core 0.4.1 → 0.6.0

data/app/components/panda/core/admin/flash_message_component.rb

@@ -7,15 +7,23 @@ module Panda
         prop :message, String
         prop :kind, Symbol
         prop :temporary, _Boolean, default: true
+        prop :subtitle, _Nilable(String), default: -> {}
 
         def view_template
-          div(**container_attrs) do
-            div(class: "overflow-hidden w-full max-w-sm bg-white rounded-lg ring-1 ring-black ring-opacity-5 shadow-lg") do
-              div(class: "p-4") do
-                div(class: "flex items-start") do
-                  render_icon
-                  render_content
-                  render_close_button
+          # Global notification container (fixed position)
+          div(
+            aria: {live: "assertive"},
+            class: "pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6 z-50"
+          ) do
+            div(class: "flex w-full flex-col items-center space-y-4 sm:items-end") do
+              # Notification panel with Tailwind Plus styling
+              div(**notification_attrs) do
+                div(class: "p-4") do
+                  div(class: "flex items-start") do
+                    render_icon
+                    render_content
+                    render_close_button
+                  end
                 end
               end
             end
@@ -24,71 +32,81 @@ module Panda
 
         private
 
-        def container_attrs
-          attrs = {
-            class: "fixed top-2 right-2 z-[9999] p-2 space-y-4 w-full max-w-sm sm:items-end",
+        def notification_attrs
+          {
+            class: "pointer-events-auto w-full max-w-sm translate-y-0 transform rounded-lg bg-white opacity-100 shadow-lg transition duration-300 ease-out sm:translate-x-0 dark:bg-gray-800 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0 #{border_color_css}",
             data: {
               controller: "alert",
-              transition_enter: "ease-in-out duration-500",
-              transition_enter_from: "translate-x-full opacity-0",
-              transition_enter_to: "translate-x-0 opacity-100",
-              transition_leave: "ease-in-out duration-500",
-              transition_leave_from: "translate-x-0 opacity-100",
-              transition_leave_to: "translate-x-full opacity-0"
-            }
+              alert_dismiss_after_value: (@temporary ? "5000" : nil)
+            }.compact
           }
-
-          attrs[:data][:alert_dismiss_after_value] = "3000" if @temporary
-          attrs
         end
 
         def render_icon
-          div(class: "flex-shrink-0") do
-            i(class: "fa-regular text-xl #{icon_css} #{text_colour_css}")
+          div(class: "shrink-0") do
+            i(class: "fa-solid size-6 #{icon_css} #{icon_colour_css}")
           end
         end
 
         def render_content
-          div(class: "flex-1 pt-0.5 ml-3 w-0") do
-            p(class: "mb-1 text-sm font-medium flash-message-title #{text_colour_css}") { @kind.to_s.titleize }
-            p(class: "mt-1 mb-0 text-sm text-gray-500 flash-message-text") { @message }
+          div(class: "ml-3 w-0 flex-1 pt-0.5") do
+            p(class: "text-sm font-medium text-gray-900 dark:text-white flash-message-title") { @message }
+            if @subtitle
+              p(class: "mt-1 text-sm text-gray-500 dark:text-gray-400 flash-message-subtitle") { @subtitle }
+            end
           end
         end
 
         def render_close_button
-          div(class: "flex flex-shrink-0 ml-4") do
+          div(class: "ml-4 flex shrink-0") do
             button(
               type: "button",
-              class: "inline-flex text-gray-400 bg-white rounded-md transition duration-150 ease-in-out hover:text-gray-500 focus:ring-2 focus:ring-offset-2 focus:outline-none focus:ring-sky-500",
+              class: "inline-flex rounded-md text-gray-400 hover:text-gray-500 focus:outline-2 focus:outline-offset-2 focus:outline-blue-600 dark:hover:text-white dark:focus:outline-blue-500",
               data: {action: "alert#close"}
             ) do
               span(class: "sr-only") { "Close" }
               svg(
-                class: "w-5 h-5",
                 viewBox: "0 0 20 20",
                 fill: "currentColor",
-                aria: {hidden: "true"}
+                data: {slot: "icon"},
+                aria: {hidden: "true"},
+                class: "size-5"
               ) do |s|
                 s.path(
-                  d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+                  d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
                 )
               end
             end
           end
         end
 
-        def text_colour_css
+        def icon_colour_css
+          case @kind
+          when :success
+            "text-green-400 dark:text-green-500"
+          when :alert, :error
+            "text-red-400 dark:text-red-500"
+          when :warning
+            "text-yellow-400 dark:text-yellow-500"
+          when :info, :notice
+            "text-blue-400 dark:text-blue-500"
+          else
+            "text-gray-400 dark:text-gray-500"
+          end
+        end
+
+        def border_color_css
           case @kind
           when :success
-            "text-green-600"
+            "ring-2 ring-green-400/20 dark:ring-green-500/30"
           when :alert, :error
-            "text-red-600"
+            "ring-2 ring-red-400/20 dark:ring-red-500/30"
           when :warning
-            "text-yellow-600"
+            "ring-2 ring-yellow-400/20 dark:ring-yellow-500/30"
           when :info, :notice
-            "text-blue-600"
+            "ring-2 ring-blue-400/20 dark:ring-blue-500/30"
           else
-            "text-gray-600"
+            "ring-1 ring-gray-400/10 dark:ring-gray-500/20"
           end
         end
 

data/app/components/panda/core/admin/heading_component.rb

@@ -21,7 +21,7 @@ module Panda
           when 3
             h3(class: heading_classes) { render_content }
           when :panel
-            h3(class: panel_heading_classes) { render_content }
+            h3(class: panel_heading_classes) { @text }
           else
             h2(class: heading_classes) { render_content }
           end
@@ -35,12 +35,13 @@ module Panda
         private
 
         def render_content
-          div(class: "grow") { @text }
+          div(class: "grow flex items-center gap-x-2") do
+            i(class: @icon) if @icon.present?
+            span { @text }
+          end
 
-          if @buttons&.any?
-            span(class: "actions flex gap-x-2 -mt-1") do
-              @buttons.each { |btn| render(btn) }
-            end
+          span(class: "actions flex gap-x-2 -mt-1 min-h-[2.5rem]") do
+            @buttons&.each { |btn| render(btn) }
           end
         end
 
@@ -61,7 +62,7 @@ module Panda
         end
 
         def panel_heading_classes
-          "text-base font-medium p-4 text-white"
+          "text-base font-medium px-4 py-3 text-white"
         end
 
         def additional_styles_array

data/app/components/panda/core/admin/page_header_component.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Page header component with title, optional breadcrumbs, and action buttons.
+      #
+      # Follows Tailwind UI Plus pattern for page headers with responsive layout
+      # and support for multiple action buttons.
+      #
+      # @example Basic header with title only
+      #   render Panda::Core::Admin::PageHeaderComponent.new(
+      #     title: "Back End Developer"
+      #   )
+      #
+      # @example Header with breadcrumbs
+      #   render Panda::Core::Admin::PageHeaderComponent.new(
+      #     title: "Back End Developer",
+      #     breadcrumbs: [
+      #       { text: "Jobs", href: "/admin/jobs" },
+      #       { text: "Engineering", href: "/admin/jobs/engineering" },
+      #       { text: "Back End Developer", href: "/admin/jobs/engineering/1" }
+      #     ]
+      #   )
+      #
+      # @example Header with action buttons using block
+      #   render Panda::Core::Admin::PageHeaderComponent.new(
+      #     title: "Back End Developer",
+      #     breadcrumbs: breadcrumb_items
+      #   ) do |header|
+      #     header.button(text: "Edit", variant: :secondary, href: edit_path)
+      #     header.button(text: "Publish", variant: :primary, href: publish_path)
+      #   end
+      #
+      class PageHeaderComponent < Panda::Core::Base
+        prop :title, String
+        prop :breadcrumbs, _Nilable(Array), default: -> {}
+        prop :show_back, _Boolean, default: true
+
+        def initialize(**props)
+          super
+          @buttons = []
+        end
+
+        def view_template(&block)
+          # Allow buttons to be defined via block
+          instance_eval(&block) if block_given?
+
+          div do
+            # Breadcrumbs section
+            if @breadcrumbs
+              render Panda::Core::Admin::BreadcrumbComponent.new(
+                items: @breadcrumbs,
+                show_back: @show_back
+              )
+            end
+
+            # Title and actions section
+            div(class: "mt-2 md:flex md:items-center md:justify-between") do
+              # Title
+              div(class: "min-w-0 flex-1") do
+                h2(class: "text-2xl/7 font-bold text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight dark:text-white") do
+                  @title
+                end
+              end
+
+              # Action buttons
+              if @buttons.any?
+                div(class: "mt-4 flex shrink-0 md:mt-0 md:ml-4") do
+                  @buttons.each_with_index do |button_data, index|
+                    render create_button(button_data, index)
+                  end
+                end
+              end
+            end
+          end
+        end
+
+        # Define a button to be rendered in the header actions area
+        #
+        # @param text [String] Button text
+        # @param variant [Symbol] Button variant (:primary or :secondary)
+        # @param href [String] Link href
+        # @param props [Hash] Additional button properties
+        def button(text:, variant: :secondary, href: "#", **props)
+          @buttons << {text: text, variant: variant, href: href, **props}
+        end
+
+        private
+
+        def create_button(button_data, index)
+          Panda::Core::UI::Button.new(
+            text: button_data[:text],
+            variant: button_data[:variant],
+            href: button_data[:href],
+            class: button_margin_class(index),
+            **button_data.except(:text, :variant, :href)
+          )
+        end
+
+        def button_margin_class(index)
+          index.zero? ? "" : "ml-3"
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/panel_component.rb

@@ -16,7 +16,7 @@ module Panda
             end
           end
 
-          div(class: "col-span-3 mt-5 rounded-lg shadow-md bg-gray-500 shadow-inherit/20") do
+          div(class: "col-span-3 mt-5 rounded-lg shadow-md bg-dark shadow-inherit/20") do
             @heading_content&.call
 
             div(class: "p-4 text-black bg-white rounded-b-lg") do

data/app/components/panda/core/admin/slideover_component.rb

@@ -5,13 +5,71 @@ module Panda
     module Admin
       class SlideoverComponent < Panda::Core::Base
         prop :title, String, default: "Settings"
+        prop :open, _Nilable(_Boolean), default: -> { false }
 
         def view_template(&block)
-          # Set content_for equivalents that can be accessed by the layout
-          helpers.content_for(:sidebar_title) { title }
-          helpers.content_for(:sidebar) do
-            aside(class: "hidden overflow-y-auto w-96 h-full bg-white lg:block", &block)
+          # Capture block content
+          if block_given?
+            if defined?(view_context) && view_context
+              @content_html = view_context.capture(&block)
+            else
+              @content_block = block
+            end
           end
+
+          div(
+            **default_attrs,
+            data: {
+              toggle_target: "toggleable",
+              transition_enter: "transform transition ease-in-out duration-500",
+              transition_enter_from: "translate-x-full",
+              transition_enter_to: "translate-x-0",
+              transition_leave: "transform transition ease-in-out duration-500",
+              transition_leave_from: "translate-x-0",
+              transition_leave_to: "translate-x-full"
+            }
+          ) do
+            # Header with title and close button
+            div(class: "py-3 px-4 mb-4 bg-black") do
+              div(class: "flex justify-between items-center") do
+                h2(class: "text-base font-semibold leading-6 text-white", id: "slideover-title") do
+                  i(class: "mr-2 fa-light fa-gear")
+                  plain " #{@title}"
+                end
+                button(
+                  type: "button",
+                  data: {action: "click->toggle#toggle touch->toggle#toggle"},
+                  class: "text-white hover:text-gray-300 transition"
+                ) do
+                  i(class: "font-bold fa-regular fa-xmark right")
+                end
+              end
+            end
+
+            # Content area
+            div(class: "overflow-y-auto px-4 pb-6 space-y-6") do
+              if @content_html
+                raw(@content_html)
+              elsif @content_block
+                instance_eval(&@content_block)
+              end
+            end
+          end
+        end
+
+        private
+
+        def default_attrs
+          {
+            id: "slideover",
+            class: slideover_classes
+          }
+        end
+
+        def slideover_classes
+          base = "flex absolute right-0 flex-col h-full bg-white divide-y divide-gray-200 shadow-xl basis-3/12 z-50"
+          visibility = @open ? "" : "hidden"
+          [base, visibility].compact.join(" ")
         end
       end
     end

data/app/components/panda/core/admin/table_component.rb

@@ -6,6 +6,7 @@ module Panda
       class TableComponent < Panda::Core::Base
         prop :term, String
         prop :rows, _Nilable(Object), default: -> { [] }
+        prop :icon, String, default: ""
 
         attr_reader :columns
 
@@ -25,25 +26,22 @@ module Panda
           end
         end
 
-        def column(label, &cell_block)
-          @columns << Column.new(label, &cell_block)
+        def column(label, width: nil, &cell_block)
+          @columns << Column.new(label, width, &cell_block)
         end
 
         private
 
         def render_table_with_rows
-          div(class: "table overflow-x-auto mb-12 w-full rounded-lg border border-dark") do
+          div(class: "table overflow-x-auto mb-12 w-full rounded-lg border border-dark", style: "table-layout: fixed;") do
             render_header
             render_rows
           end
         end
 
         def render_empty_table
-          div(class: "table overflow-x-auto mb-12 w-full rounded-lg border border-dark") do
-            render_header
-          end
-
-          div(class: "text-center mx-12 block border border-dashed py-12 rounded-lg") do
+          div(class: "text-center block border border-dashed py-12 rounded-lg") do
+            i(class: "#{@icon} text-4xl text-gray-400 mb-3") if @icon.present?
             h3(class: "py-1 text-xl font-semibold text-gray-900") { "No #{@term.pluralize}" }
             p(class: "py-1 text-base text-gray-500") { "Get started by creating a new #{@term}." }
           end
@@ -57,7 +55,8 @@ module Panda
                 header_classes += " rounded-tl-md" if i.zero?
                 header_classes += " rounded-tr-md" if i == @columns.size - 1
 
-                div(class: header_classes) { column.label }
+                header_style = column.width ? "width: #{column.width};" : nil
+                div(class: header_classes, style: header_style) { column.label }
               end
             end
           end
@@ -106,10 +105,11 @@ module Panda
       end
 
       class Column
-        attr_reader :label, :cell
+        attr_reader :label, :cell, :width
 
-        def initialize(label, &block)
+        def initialize(label, width = nil, &block)
           @label = label
+          @width = width
           @cell = block
         end
       end

data/app/components/panda/core/admin/tag_component.rb

@@ -6,6 +6,7 @@ module Panda
       class TagComponent < Panda::Core::Base
         prop :status, Symbol, default: :active
         prop :text, _Nilable(String), default: -> {}
+        prop :page_type, _Nilable(Symbol), default: -> {}
 
         def view_template
           span(class: tag_classes) { computed_text }
@@ -14,12 +15,44 @@ module Panda
         private
 
         def computed_text
-          @text || @status.to_s.humanize
+          if @page_type
+            @text || type_display_text
+          else
+            @text || @status.to_s.humanize
+          end
+        end
+
+        def type_display_text
+          case @page_type
+          when :standard
+            "Active"
+          when :hidden_type
+            "Hidden"
+          else
+            @page_type.to_s.humanize
+          end
         end
 
         def tag_classes
           base = "inline-flex items-center py-1 px-2 text-xs font-medium rounded-md ring-1 ring-inset "
-          base + status_classes
+          base + (@page_type ? type_classes : status_classes)
+        end
+
+        def type_classes
+          case @page_type
+          when :system
+            "text-red-700 bg-red-100 ring-red-600/20 dark:bg-red-400/10 dark:text-red-400"
+          when :posts
+            "text-purple-700 bg-purple-100 ring-purple-600/20 dark:bg-purple-400/10 dark:text-purple-400"
+          when :code
+            "text-blue-700 bg-blue-100 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400"
+          when :standard
+            "text-green-700 bg-green-100 ring-green-600/20 dark:bg-green-400/10 dark:text-green-400"
+          when :hidden_type
+            "text-gray-700 bg-gray-100 ring-gray-600/20 dark:bg-gray-400/10 dark:text-gray-400"
+          else
+            "text-gray-700 bg-gray-100 ring-gray-600/20 dark:bg-gray-400/10 dark:text-gray-400"
+          end
         end
 
         def status_classes
@@ -30,6 +63,10 @@ module Panda
             "text-black ring-black/30 bg-yellow-400"
           when :inactive, :hidden
             "text-black ring-black/30 bg-black/5 bg-white"
+          when :auto
+            "text-blue-700 bg-blue-100 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400"
+          when :static
+            "text-gray-700 bg-gray-100 ring-gray-600/20 dark:bg-gray-400/10 dark:text-gray-400"
           else
             "text-black bg-white"
           end

data/app/components/panda/core/admin/user_display_component.rb

@@ -30,15 +30,14 @@ module Panda
         end
 
         def render_avatar
-          has_image = resolved_user.respond_to?(:image_url) &&
-            resolved_user.image_url.present? &&
-            !resolved_user.image_url.empty?
+          has_image = resolved_user.respond_to?(:avatar_url) &&
+            resolved_user.avatar_url.present?
 
           if has_image
             div do
               img(
-                class: "inline-block w-10 h-10 rounded-full",
-                src: resolved_user.image_url,
+                class: "inline-block w-10 h-10 rounded-full object-cover",
+                src: resolved_user.avatar_url,
                 alt: ""
               )
             end

data/app/controllers/panda/core/admin/my_profile_controller.rb

@@ -21,7 +21,7 @@ module Panda
             flash[:success] = "Your profile has been updated successfully."
             redirect_to edit_admin_my_profile_path
           else
-            render :edit, locals: {user: current_user}, status: :unprocessable_entity
+            render :edit, locals: {user: current_user}, status: :unprocessable_content
           end
         end
 
@@ -36,7 +36,7 @@ module Panda
         # @return ActionController::StrongParameters
         def user_params
           # Base parameters that Core always allows
-          base_params = [:name, :email, :current_theme]
+          base_params = [:name, :email, :current_theme, :avatar]
 
           # Allow additional params from configuration
           additional_params = Core.config.additional_user_params || []

data/app/controllers/panda/core/admin/sessions_controller.rb

@@ -30,7 +30,9 @@ module Panda
           if user.persisted?
             # Check if user is admin before allowing access
             unless user.admin?
-              redirect_to admin_login_path, flash: {error: "You do not have permission to access the admin area"}
+              flash[:error] = "You do not have permission to access the admin area"
+              flash.keep(:error) if Rails.env.test?
+              redirect_to admin_login_path
               return
             end
 
@@ -58,7 +60,9 @@ module Panda
           strategy = params[:strategy] || "unknown"
 
           Rails.logger.error "OmniAuth failure: strategy=#{strategy}, message=#{message}"
-          redirect_to admin_login_path, flash: {error: "Authentication failed: #{message}"}
+          flash[:error] = "Authentication failed: #{message}"
+          flash.keep(:error) if Rails.env.test?
+          redirect_to admin_login_path
         end
 
         def destroy

data/app/controllers/panda/core/admin/test_sessions_controller.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Test-only controller for setting up authentication in system tests
+      # This bypasses OAuth to avoid cross-process issues with Capybara
+      # Security: This route is only defined in test environments, never in production
+      #
+      # Usage in tests:
+      #   post "/admin/test_sessions", params: { user_id: user.id }
+      #   post "/admin/test_sessions", params: { user_id: user.id, return_to: "/some/path" }
+      class TestSessionsController < ActionController::Base
+        # Enable CSRF protection for consistency, then skip for test-only endpoint
+        protect_from_forgery with: :exception
+        skip_before_action :verify_authenticity_token, raise: false
+
+        def create
+          user = Panda::Core::User.find(params[:user_id])
+
+          # Check if user is admin (mimics real OAuth behavior)
+          unless user.admin?
+            # Non-admin users are redirected to login with error (mimics real OAuth flow)
+            flash[:alert] = "You do not have permission to access the admin area."
+            # Keep flash for one more request to survive redirect in tests
+            flash.keep(:alert) if Rails.env.test?
+            # Use string path since route helpers aren't available in ActionController::Base
+            redirect_to "#{Panda::Core.config.admin_path || "/admin"}/login", allow_other_host: false, status: :found
+            return
+          end
+
+          # Set session (mimics real OAuth callback)
+          session[:user_id] = user.id
+          Panda::Core::Current.user = user
+
+          # Support custom redirect path for test flexibility
+          redirect_path = params[:return_to] || determine_default_redirect_path
+          redirect_to redirect_path, allow_other_host: false, status: :found
+        rescue ActiveRecord::RecordNotFound
+          render html: "User not found: #{params[:user_id]}", status: :not_found
+        rescue => e
+          render html: "Error: #{e.class} - #{e.message}<br>#{e.backtrace.first(5).join("<br>")}", status: :internal_server_error
+        end
+
+        private
+
+        def determine_default_redirect_path
+          # Use configured dashboard path if available, otherwise default to admin root
+          if Panda::Core.config.dashboard_redirect_path
+            path = Panda::Core.config.dashboard_redirect_path
+            path.respond_to?(:call) ? path.call : path
+          else
+            # Use string path since route helpers aren't available in ActionController::Base
+            Panda::Core.config.admin_path || "/admin"
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/panda/core/asset_helper.rb

@@ -10,13 +10,39 @@ module Panda
 
       # Include only Core JavaScript
       def panda_core_javascript
-        js_url = Panda::Core::AssetLoader.javascript_url
-        return "" unless js_url
+        # Use asset_tags for development mode (importmap) compatibility
+        # In development, this will use importmap; in production/test, compiled bundles
+        if Panda::Core::AssetLoader.use_github_assets?
+          js_url = Panda::Core::AssetLoader.javascript_url
+          return "" unless js_url
 
-        if js_url.start_with?("/panda-core-assets/")
-          javascript_include_tag(js_url)
+          if js_url.start_with?("/panda-core-assets/")
+            javascript_include_tag(js_url)
+          else
+            javascript_include_tag(js_url, type: "module")
+          end
         else
-          javascript_include_tag(js_url, type: "module")
+          # Development mode - Load JavaScript with import map
+          # Files are served by Rack::Static middleware from engine's app/javascript
+          importmap_html = <<~HTML
+            <script type="importmap">
+              {
+                "imports": {
+                  "@hotwired/stimulus": "/panda/core/vendor/@hotwired--stimulus.js",
+                  "@hotwired/turbo": "/panda/core/vendor/@hotwired--turbo.js",
+                  "@rails/actioncable/src": "/panda/core/vendor/@rails--actioncable--src.js",
+                  "tailwindcss-stimulus-components": "/panda/core/tailwindcss-stimulus-components.js",
+                  "@fortawesome/fontawesome-free": "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@7.1.0/js/all.js",
+                  "panda/core/application": "/panda/core/application.js",
+                  "panda/core/controllers/toggle_controller": "/panda/core/controllers/toggle_controller.js",
+                  "panda/core/controllers/theme_form_controller": "/panda/core/controllers/theme_form_controller.js"
+                }
+              }
+            </script>
+            <script type="module" src="/panda/core/application.js"></script>
+            <script type="module" src="/panda/core/controllers/index.js"></script>
+          HTML
+          importmap_html.html_safe
         end
       end