panda-core 0.12.2 → 1.1.0

data/app/components/panda/core/admin/search_filter_bar_component.html.erb

@@ -0,0 +1,22 @@
+<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+  <%= form_with url: url, method: :get, local: true, class: "flex flex-col gap-3 sm:flex-row sm:items-center w-full" do %>
+    <div class="flex-1 max-w-md grid grid-cols-1">
+      <%= text_field_tag search_name, search_value,
+        placeholder: search_placeholder,
+        class: "col-start-1 row-start-1 block w-full h-9 rounded-md bg-white py-1.5 pr-3 pl-9 text-sm text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-600 dark:bg-white/5 dark:text-white dark:ring-white/10 dark:placeholder:text-gray-500 dark:focus:outline-primary-500" %>
+      <i class="fa-solid fa-magnifying-glass pointer-events-none col-start-1 row-start-1 ml-3 size-4 self-center text-gray-400 dark:text-gray-500"></i>
+    </div>
+
+    <div class="flex gap-2 items-center">
+      <% filters.each do |filter| %>
+        <%= filter %>
+      <% end %>
+
+      <%= submit_tag "Filter", class: "h-9 rounded-md bg-white px-3 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-700 dark:text-white dark:ring-gray-600 dark:hover:bg-gray-600 cursor-pointer" %>
+
+      <% if show_clear %>
+        <%= link_to "Clear", clear_url, class: "rounded-md px-3 py-1.5 text-sm font-semibold text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300" %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class SearchFilterBarComponent < Panda::Core::Base
+        renders_many :filters
+
+        def initialize(url:, search_name: :q, search_value: nil, search_placeholder: "Search...", clear_url: nil, show_clear: false, **attrs)
+          @url = url
+          @search_name = search_name
+          @search_value = search_value
+          @search_placeholder = search_placeholder
+          @clear_url = clear_url || url
+          @show_clear = show_clear
+          super(**attrs)
+        end
+
+        attr_reader :url, :search_name, :search_value, :search_placeholder, :clear_url, :show_clear
+
+        def select_classes
+          "h-9 w-auto rounded-md border-0 py-1.5 pl-3 pr-10 text-sm text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-primary-600 dark:bg-gray-700 dark:text-white dark:ring-gray-600"
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/secret_field_component.html.erb

@@ -0,0 +1,24 @@
+<div data-controller="clipboard"
+     data-clipboard-secret-value="<%= value %>"
+     data-clipboard-masked-value="<%= masked %>"
+     class="bg-gray-50 rounded-lg p-3 font-mono text-sm">
+  <div class="flex items-center gap-3">
+    <code data-clipboard-target="display" class="text-gray-700 break-all flex-1"><%= display_value %></code>
+    <button type="button"
+            data-action="click->clipboard#toggleReveal"
+            data-clipboard-target="revealButton"
+            class="<%= button_classes %>"
+            aria-label="Reveal secret value">
+      <i data-clipboard-target="revealIcon" class="fa-solid fa-eye"></i>
+      <span data-clipboard-target="revealText">Reveal</span>
+    </button>
+    <button type="button"
+            data-action="click->clipboard#copy"
+            data-clipboard-target="copyButton"
+            class="<%= button_classes %>"
+            aria-label="Copy secret value to clipboard">
+      <i data-clipboard-target="copyIcon" class="fa-solid fa-copy"></i>
+      <span data-clipboard-target="copyText">Copy</span>
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class SecretFieldComponent < Panda::Core::Base
+        def initialize(value:, masked: true, **attrs)
+          @value = value
+          @masked = masked
+          super(**attrs)
+        end
+
+        attr_reader :value, :masked
+
+        def display_value
+          return value unless masked && value.present?
+
+          if value.length > 4
+            "\u2022" * 12 + value[-4..]
+          else
+            "\u2022" * value.length
+          end
+        end
+
+        def button_classes
+          "shrink-0 btn btn-secondary transition"
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/sidebar_component.html.erb

@@ -0,0 +1,160 @@
+<nav <%= tag.attributes(**attrs) %>>
+  <ul role="list" class="flex flex-col flex-1">
+    <%# Logo area — uses admin_logo config or falls back to admin_title text %>
+    <li class="hidden lg:block mt-4 mb-4 px-2">
+      <% if admin_logo %>
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-2">
+            <%= safe_html(admin_logo) %>
+          </div>
+          <% if admin_logo_actions.any? || admin_settings_path %>
+            <div class="flex items-center gap-1">
+              <% admin_logo_actions.each do |action| %>
+                <%= helpers.link_to action[:path], class: "flex items-center justify-center w-7 h-7 rounded-lg text-white/40 hover:text-white hover:bg-white/10 transition-colors", title: action[:title] do %>
+                  <i class="<%= action[:icon] %> text-sm"></i>
+                <% end %>
+              <% end %>
+              <% if admin_settings_path %>
+                <%= helpers.link_to admin_settings_path, class: "flex items-center justify-center w-7 h-7 rounded-lg text-white/40 hover:text-white hover:bg-white/10 transition-colors", title: "Settings" do %>
+                  <i class="fa-solid fa-gear text-sm"></i>
+                <% end %>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+      <% else %>
+        <a class="p-0 text-xl font-medium text-white"><%= Panda::Core.config.admin_title || "Panda Admin" %></a>
+      <% end %>
+    </li>
+
+    <%= render Panda::Core::Admin::SearchBarComponent.new %>
+
+    <%
+      nav_items = Panda::Core::NavigationRegistry.build(@user, helpers: helpers)
+
+      top_items = nav_items.select { |item| item[:position] != :bottom }
+      bottom_items = nav_items.select { |item| item[:position] == :bottom }
+
+      def collect_paths(items)
+        items.flat_map do |item|
+          paths = item[:path] ? [item[:path]] : []
+          paths += collect_paths(item[:children] || [])
+          paths
+        end
+      end
+
+      all_paths = collect_paths(nav_items).compact
+      current_path = helpers.request&.path || "/"
+      active_path = all_paths
+        .sort_by { |path| -path.length }
+        .find { |path| current_path == path || current_path.starts_with?(path + "/") }
+    %>
+
+    <% if sectioned?(top_items) %>
+      <%# Section-aware navigation — insert headings when section changes, preserving order %>
+      <% current_section = nil %>
+      <% section_count = 0 %>
+      <% top_items.each_with_index do |item, index| %>
+        <% item_section = item[:section].presence %>
+        <% if item_section && item_section != current_section %>
+          <% current_section = item_section %>
+          <li class="px-3 <%= section_count > 0 ? (compact_navigation? ? 'mt-3' : 'mt-5') : '' %> <%= compact_navigation? ? 'mb-0.5' : 'mb-1' %>">
+            <span class="text-[10px] font-bold uppercase tracking-widest text-white/40 sidebar-section-label"><%= current_section %></span>
+          </li>
+          <% section_count += 1 %>
+        <% end %>
+        <%
+          has_children = item[:children].present?
+          if has_children
+            is_active = item[:children].any? { |child| child[:path] == active_path }
+          else
+            is_active = item[:path] == active_path
+          end
+        %>
+        <%= render Panda::Core::Admin::Navigation::ItemComponent.new(
+          label: item[:label],
+          icon: item[:icon],
+          path: item[:path],
+          active: is_active,
+          menu_id: "sub-menu-#{section_count}-#{index}",
+          target: item[:target],
+          badge: item[:badge],
+          badge_color: item[:badge_color],
+          compact: compact_navigation?
+        ) do |nav_item|
+          if has_children
+            item[:children].each do |child|
+              child_is_active = child[:path] == active_path
+              nav_item.with_sub_item(label: child[:label], path: child[:path], active: child_is_active, target: child[:target])
+            end
+          end
+        end %>
+      <% end %>
+    <% else %>
+      <%# Legacy flat navigation (no section keys) %>
+      <% top_items.each_with_index do |item, index| %>
+        <%
+          has_children = item[:children].present?
+          if has_children
+            is_active = item[:children].any? { |child| child[:path] == active_path }
+          else
+            is_active = item[:path] == active_path
+          end
+        %>
+        <%= render Panda::Core::Admin::Navigation::ItemComponent.new(
+          label: item[:label],
+          icon: item[:icon],
+          path: item[:path],
+          active: is_active,
+          menu_id: "sub-menu-#{index}",
+          target: item[:target],
+          badge: item[:badge],
+          badge_color: item[:badge_color],
+          compact: compact_navigation?
+        ) do |nav_item|
+          if has_children
+            item[:children].each do |child|
+              child_is_active = child[:path] == active_path
+              nav_item.with_sub_item(label: child[:label], path: child[:path], active: child_is_active, target: child[:target])
+            end
+          end
+        end %>
+      <% end %>
+    <% end %>
+
+    <% bottom_items.each do |section| %>
+      <%
+        is_section_active = (section[:children] || []).any? { |child|
+          child[:path] && current_path.starts_with?(child[:path])
+        }
+      %>
+      <%= render Panda::Core::Admin::Navigation::UserMenuComponent.new(user: helpers.current_user, active: is_section_active) do |user_menu|
+        (section[:children] || []).each do |item|
+          item_path = item[:path]
+          if item_path.nil? && item[:path_helper]
+              helper_name = item[:path_helper].to_sym
+            item_path = helpers.panda_core.public_send(helper_name) if helpers.panda_core.respond_to?(helper_name)
+          end
+
+          item_active = item_path && current_path.starts_with?(item_path)
+          user_menu.with_sub_item(
+            label: item[:label],
+            path: item_path,
+            active: item_active,
+            method: item[:method],
+            button_options: item[:button_options] || {}
+          )
+        end
+      end %>
+    <% end %>
+
+    <% sidebar_footer = Panda::Core.config.admin_sidebar_footer %>
+    <li class="px-2 py-3 border-t border-white/10">
+      <% if sidebar_footer %>
+        <%= safe_html(sidebar_footer) %>
+      <% else %>
+        <span class="text-xs text-white/30">Panda Core v<%= Panda::Core::VERSION %></span>
+      <% end %>
+    </li>
+  </ul>
+</nav>

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

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Sidebar navigation component for admin pages
+      # Displays hierarchical navigation with toggle for nested items.
+      # Supports optional section grouping via the :section key on nav items.
+      class SidebarComponent < Panda::Core::Base
+        def initialize(user:, **attrs)
+          @user = user
+          super(**attrs)
+        end
+
+        attr_reader :user
+
+        def admin_logo
+          Panda::Core.config.admin_logo
+        end
+
+        def admin_settings_path
+          Panda::Core.config.admin_settings_path
+        end
+
+        def compact_navigation?
+          Panda::Core.config.compact_navigation
+        end
+
+        def admin_logo_actions
+          Panda::Core.config.admin_logo_actions || []
+        end
+
+        def sectioned?(items)
+          items.any? { |item| item[:section].present? }
+        end
+
+        def safe_html(value)
+          raw = value.respond_to?(:call) ? value.call : value
+          helpers.sanitize(raw, tags: %w[svg path ellipse circle rect line polyline polygon g defs use
+            span a i div img br strong em b], attributes: %w[
+              viewBox fill stroke stroke-width stroke-linecap stroke-linejoin opacity cx cy rx ry r
+              x y x1 y1 x2 y2 width height d points transform xmlns class href style id
+              data-turbo-track rel
+            ])
+        end
+
+        private
+
+        def default_attrs
+          {class: "flex flex-col flex-1"}
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/slideover_component.html.erb

@@ -0,0 +1,67 @@
+<%# Backdrop overlay - clicks close the slideover %>
+<div class="hidden fixed inset-0 bg-gray-500/75 transition-opacity duration-500 ease-in-out dark:bg-gray-900/50 z-40"
+     data-toggle-target="toggleable"
+     data-action="click->toggle#toggle"
+     data-transition-enter="transition-opacity duration-500 ease-in-out"
+     data-transition-enter-from="opacity-0"
+     data-transition-enter-to="opacity-100"
+     data-transition-leave="transition-opacity duration-500 ease-in-out"
+     data-transition-leave-from="opacity-100"
+     data-transition-leave-to="opacity-0"></div>
+
+<%# Slideover panel %>
+<div id="slideover"
+     class="<%= slideover_classes %>"
+     data-toggle-target="toggleable"
+     data-transition-enter="transform transition ease-in-out duration-500 sm:duration-700"
+     data-transition-enter-from="translate-x-full"
+     data-transition-enter-to="translate-x-0"
+     data-transition-leave="transform transition ease-in-out duration-500 sm:duration-700"
+     data-transition-leave-from="translate-x-0"
+     data-transition-leave-to="translate-x-full">
+
+  <%# Main container %>
+  <div class="relative flex h-full flex-col bg-white shadow-xl dark:bg-gray-800">
+    <%# Header with title and close button %>
+    <div class="bg-gradient-admin px-4 py-6 sm:px-6">
+      <div class="flex items-center justify-between">
+        <h2 class="text-base font-semibold text-white" id="slideover-title">
+          <%= @title %>
+        </h2>
+        <div class="ml-3 flex items-center">
+          <%= content_tag :button,
+              type: "button",
+              data: {
+                action: "click->toggle#toggle touch->toggle#toggle"
+              },
+              class: "inline-flex items-center gap-1 rounded-full bg-white/10 px-2 py-1 text-xs text-white/80 hover:text-white cursor-pointer" do %>
+            <span>Close</span>
+            <i class="fa-solid fa-xmark"></i>
+          <% end %>
+        </div>
+      </div>
+    </div>
+
+    <%# Scrollable content area %>
+    <div class="flex-1 overflow-y-auto">
+      <% if @content_html %>
+        <%= raw(@content_html) %>
+      <% elsif @content_block %>
+        <%= @content_block.call %>
+      <% end %>
+    </div>
+
+    <%# Sticky footer (if footer content exists) %>
+    <% if footer_slot? || @footer_html || @footer_block %>
+      <div class="flex shrink-0 justify-end gap-x-3 border-t border-gray-200 px-4 py-4 dark:border-white/10">
+        <% if footer_slot? %>
+          <%= footer_slot %>
+        <% elsif @footer_html %>
+          <%= raw(@footer_html) %>
+        <% elsif @footer_block %>
+          <%= @footer_block.call %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -4,79 +4,25 @@ module Panda
   module Core
     module Admin
       class SlideoverComponent < Panda::Core::Base
-        prop :title, String, default: "Settings"
-        prop :open, _Nilable(_Boolean), default: -> { false }
+        renders_one :footer_slot
 
-        def view_template(&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 sm:duration-700",
-              transition_enter_from: "translate-x-full",
-              transition_enter_to: "translate-x-0",
-              transition_leave: "transform transition ease-in-out duration-500 sm:duration-700",
-              transition_leave_from: "translate-x-0",
-              transition_leave_to: "translate-x-full"
-            }
-          ) do
-            # Main container
-            div(class: "relative flex h-full flex-col bg-white shadow-xl dark:bg-gray-800") do
-              # Header with title and close button
-              div(class: "bg-gradient-admin px-4 py-6 sm:px-6") do
-                div(class: "flex items-center justify-between") do
-                  h2(class: "text-base font-semibold text-white", id: "slideover-title") do
-                    plain @title
-                  end
-                  div(class: "ml-3 flex h-7 items-center") do
-                    button(
-                      type: "button",
-                      data: {action: "click->toggle#toggle touch->toggle#toggle"},
-                      class: "relative rounded-md text-white/80 hover:text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-                    ) do
-                      span(class: "absolute -inset-2.5")
-                      span(class: "sr-only") { "Close panel" }
-                      # SVG close icon
-                      svg(viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "1.5", aria_hidden: "true", class: "size-6") do
-                        path(d: "M6 18 18 6M6 6l12 12", stroke_linecap: "round", stroke_linejoin: "round")
-                      end
-                    end
-                  end
-                end
-              end
+        def initialize(title: "Settings", open: false, **attrs)
+          @title = title
+          @open = open
+          super(**attrs)
+        end
 
-              # Scrollable content area
-              div(class: "flex-1 overflow-y-auto") do
-                if @content_html
-                  raw(@content_html)
-                elsif @content_block
-                  instance_eval(@content_block)
-                end
-              end
+        attr_reader :title, :open
 
-              # Sticky footer (if footer content exists)
-              if @footer_html || @footer_block
-                div(class: "flex shrink-0 justify-end gap-x-3 border-t border-gray-200 px-4 py-4 dark:border-white/10") do
-                  if @footer_html
-                    raw(@footer_html)
-                  elsif @footer_block
-                    instance_eval(&@footer_block)
-                  end
-                end
-              end
-            end
+        def before_render
+          # Store main content if provided
+          # In ViewComponent, content is already rendered HTML (SafeBuffer), not a block
+          if content.present?
+            @content_html = content
           end
         end
 
+        # Legacy method for backwards compatibility
         def footer(&block)
           if defined?(view_context) && view_context
             @footer_html = view_context.capture(&block)
@@ -85,8 +31,6 @@ module Panda
           end
         end
 
-        alias_method :with_footer, :footer
-
         private
 
         def default_attrs
@@ -97,10 +41,27 @@ module Panda
         end
 
         def slideover_classes
-          base = "ml-auto block size-full max-w-md transform absolute right-0 h-full z-50"
+          # Use fixed positioning to escape parent overflow clipping
+          base = "ml-auto block size-full max-w-md transform fixed right-0 top-0 h-full z-50"
           visibility = @open ? "" : "hidden"
           [base, visibility].compact.join(" ")
         end
+
+        def close_icon
+          content_tag(:svg,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            stroke_width: "1.5",
+            aria: {hidden: "true"},
+            class: "size-6") do
+            tag.path(
+              d: "M6 18 18 6M6 6l12 12",
+              stroke_linecap: "round",
+              stroke_linejoin: "round"
+            )
+          end
+        end
       end
     end
   end

data/app/components/panda/core/admin/statistics_component.html.erb

@@ -0,0 +1,4 @@
+<div class="overflow-hidden p-4 bg-white rounded-2xl border border-gray-200">
+  <dt class="text-sm font-medium text-gray-500 truncate"><%= @metric %></dt>
+  <dd class="mt-1 text-2xl font-semibold tracking-tight text-gray-900"><%= @value %></dd>
+</div>

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

@@ -4,15 +4,13 @@ module Panda
   module Core
     module Admin
       class StatisticsComponent < Panda::Core::Base
-        prop :metric, String
-        prop :value, _Nilable(_Union(String, Integer, Float))
-
-        def view_template
-          div(class: "overflow-hidden p-4 bg-gradient-to-br rounded-lg border-2 from-light/20 to-light border-mid") do
-            dt(class: "text-base font-medium truncate text-dark") { @metric }
-            dd(class: "mt-1 text-3xl font-medium tracking-tight text-dark") { @value }
-          end
+        def initialize(metric: "", value: nil, **attrs)
+          @metric = metric
+          @value = value
+          super(**attrs)
         end
+
+        attr_reader :metric, :value
       end
     end
   end

data/app/components/panda/core/admin/tab_bar_component.html.erb

@@ -0,0 +1,48 @@
+<div class="mt-3">
+  <%# Mobile select dropdown %>
+  <div class="sm:hidden">
+    <%= tag.label "Select a tab", for: "tabs", class: "sr-only" %>
+    <%= tag.select id: "tabs",
+        name: "tabs",
+        onchange: "window.location.href=this.value",
+        class: "block py-1.5 pr-10 pl-3 w-full text-gray-900 rounded-md border-0 ring-1 ring-inset focus:ring-2 focus:ring-inset ring-primary-400 focus:border-primary-600 focus:ring-primary-600" do %>
+      <% @tabs.each_with_index do |tab, index| %>
+        <%= tag.option tab[:name], value: tab[:url] || "#", selected: tab_current?(tab, index) %>
+      <% end %>
+    <% end %>
+  </div>
+
+  <%# Desktop tab navigation %>
+  <div class="hidden sm:block">
+    <div class="flex items-center border-b border-gray-200">
+      <nav class="flex flex-1 -mb-px space-x-6 xl:space-x-8" aria-label="Tabs">
+        <% @tabs.each_with_index do |tab, index| %>
+          <%= content_tag :a,
+              tab[:name],
+              href: tab[:url] || "#",
+              class: tab_classes(tab, index),
+              aria: {current: tab_current?(tab, index) ? "page" : nil} %>
+        <% end %>
+      </nav>
+
+      <%# View toggle buttons %>
+      <div class="hidden items-center p-0.5 ml-6 bg-gray-100 rounded-lg sm:flex">
+        <%# List view button %>
+        <%= content_tag :button,
+            type: "button",
+            class: view_button_classes(false) do %>
+          <%= list_view_icon %>
+          <span class="sr-only">Use list view</span>
+        <% end %>
+
+        <%# Grid view button %>
+        <%= content_tag :button,
+            type: "button",
+            class: view_button_classes(true) do %>
+          <%= grid_view_icon %>
+          <span class="sr-only">Use grid view</span>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>