panda-core 0.12.2 → 1.1.0

data/app/components/panda/core/admin/my_profile/connected_account_component.html.erb

@@ -0,0 +1,41 @@
+<div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
+  <div class="flex items-center gap-4">
+    <%# Provider icon %>
+    <div class="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-100">
+      <i class="<%= provider_info[:icon] %> text-2xl" style="color: <%= provider_info[:color] %>;"></i>
+    </div>
+
+    <%# Provider details %>
+    <div>
+      <h3 class="font-medium text-gray-900"><%= provider_info[:name] %></h3>
+      <% if connected? %>
+        <p class="text-sm text-green-600">
+          <i class="fa-solid fa-check-circle"></i>
+          Connected
+        </p>
+      <% else %>
+        <p class="text-sm text-gray-500">Not connected</p>
+      <% end %>
+    </div>
+  </div>
+
+  <%# Action button %>
+  <div>
+    <% if connected? %>
+      <%= render Panda::Core::Admin::ButtonComponent.new(
+        text: "Connected",
+        action: :secondary,
+        as_button: true,
+        disabled: true
+      ) %>
+    <% else %>
+      <%= render Panda::Core::Admin::ButtonComponent.new(
+        text: "Connect",
+        action: :primary,
+        href: "#",
+        disabled: true,
+        title: "OAuth re-connection coming soon"
+      ) %>
+    <% end %>
+  </div>
+</div>

data/app/components/panda/core/admin/my_profile/connected_account_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      module MyProfile
+        class ConnectedAccountComponent < Panda::Core::Base
+          def initialize(provider:, user:)
+            @provider = provider
+            @user = user
+            @provider_info = Panda::Core::OAuthProviders.info(provider)
+            # TODO: Track which provider user logged in with
+            # For now, we don't track the provider, so we can't show connection status
+            @is_connected = user.respond_to?(:oauth_provider) && user.oauth_provider == provider.to_s
+            super()
+          end
+
+          attr_reader :provider_info
+
+          def connected?
+            @is_connected
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/navigation/item_component.html.erb

@@ -0,0 +1,34 @@
+<li>
+  <% if expandable? %>
+    <div class="<%= margin_class %>" data-controller="navigation-toggle">
+      <div data-navigation-toggle-target="wrapper"
+           class="<%= 'rounded-xl bg-white/10 overflow-hidden' if active? %>">
+        <button type="button"
+                data-navigation-toggle-target="button"
+                data-action="click->navigation-toggle#toggle"
+                aria-controls="<%= menu_id %>"
+                aria-expanded="false"
+                class="<%= parent_classes %>">
+          <span class="text-center w-6"><i class="<%= icon %> text-xl fa-fw"></i></span>
+          <span class="flex-1 text-left"><%= label %></span>
+          <%= badge_tag %>
+          <i class="fa-solid fa-chevron-right text-xs transition-transform duration-150 ease-in-out"
+             data-navigation-toggle-target="icon"></i>
+        </button>
+        <div id="<%= menu_id %>"
+             class="overflow-hidden transition-all duration-200 ease-out <%= active? ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0' %>"
+             data-navigation-toggle-target="menu">
+          <% sub_items.each do |sub_item| %>
+            <%= sub_item %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  <% else %>
+    <%= helpers.link_to path, class: link_classes, target: target do %>
+      <span class="text-center w-6"><i class="<%= icon %> text-xl fa-fw"></i></span>
+      <span class="flex-1"><%= label %></span>
+      <%= badge_tag %>
+    <% end %>
+  <% end %>
+</li>

data/app/components/panda/core/admin/navigation/item_component.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      module Navigation
+        # A top-level navigation item
+        # Can be a simple link or an expandable menu with children
+        class ItemComponent < Panda::Core::Base
+          BASE_CLASSES = "transition-all group flex items-center gap-x-3 px-3 " \
+                         "text-sm font-medium cursor-pointer"
+          SPACIOUS_PADDING = "py-2.5"
+          COMPACT_PADDING = "py-1.5"
+          ACTIVE_CLASSES = "bg-primary-500/20 text-white rounded-xl"
+          EXPANDED_BUTTON_CLASSES = "bg-white/15 text-white rounded-t-xl"
+          INACTIVE_CLASSES = "text-white/80 hover:bg-white/5 rounded-xl"
+
+          renders_many :sub_items, SubItemComponent
+
+          def initialize(label:, icon:, path: nil, active: false, menu_id: nil, target: nil, badge: nil, badge_color: nil, compact: false, **attrs) # rubocop:disable Metrics/ParameterLists
+            @label = label
+            @icon = icon
+            @path = path
+            @active = active
+            @menu_id = menu_id
+            @target = target
+            @badge = badge
+            @badge_color = badge_color
+            @compact = compact
+            super(**attrs)
+          end
+
+          attr_reader :label, :icon, :path, :active, :menu_id, :target, :badge, :badge_color
+
+          def active?
+            @active
+          end
+
+          def expandable?
+            sub_items.any?
+          end
+
+          def padding_class
+            @compact ? COMPACT_PADDING : SPACIOUS_PADDING
+          end
+
+          def margin_class
+            @compact ? "mb-0.5" : "mb-2"
+          end
+
+          def parent_classes
+            "#{BASE_CLASSES} #{padding_class} w-full #{active? ? EXPANDED_BUTTON_CLASSES : INACTIVE_CLASSES}"
+          end
+
+          def link_classes
+            "#{BASE_CLASSES} #{padding_class} rounded-xl #{margin_class} #{active? ? "#{ACTIVE_CLASSES} relative" : INACTIVE_CLASSES}"
+          end
+
+          def badge_tag
+            return unless badge
+            helpers.content_tag(:span, badge,
+              class: "ml-auto px-1.5 py-0.5 text-[10px] font-semibold rounded-full text-white",
+              style: "background-color: #{badge_color || "#52B788"}")
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/navigation/sub_item_component.html.erb

@@ -0,0 +1,9 @@
+<% if button? %>
+  <%= helpers.button_to path, method: method, **button_options, class: "#{item_classes} text-left" do %>
+    <%= label %>
+  <% end %>
+<% else %>
+  <%= helpers.link_to path, class: item_classes, target: target do %>
+    <%= label %>
+  <% end %>
+<% end %>

data/app/components/panda/core/admin/navigation/sub_item_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      module Navigation
+        # A child item within an expandable navigation menu
+        # Can render as a link or a button (for logout, etc.)
+        class SubItemComponent < Panda::Core::Base
+          BASE_CLASSES = "group flex items-center w-full px-3 py-2 cursor-pointer " \
+                         "text-sm font-medium transition-colors"
+          ACTIVE_CLASSES = "bg-primary-500/20 text-white"
+          INACTIVE_CLASSES = "text-white/70 hover:bg-white/5"
+
+          # rubocop:disable Metrics/ParameterLists
+          def initialize(label:, path: nil, active: false, method: nil, button_options: {}, target: nil, **attrs)
+            @label = label
+            @path = path
+            @active = active
+            @method = method
+            @button_options = button_options
+            @target = target
+            super(**attrs)
+          end
+          # rubocop:enable Metrics/ParameterLists
+
+          attr_reader :label, :path, :active, :method, :button_options, :target
+
+          def active?
+            @active
+          end
+
+          def button?
+            method.present?
+          end
+
+          def item_classes
+            "#{BASE_CLASSES} #{active? ? ACTIVE_CLASSES : INACTIVE_CLASSES}"
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/panda/core/admin/navigation/user_menu_component.html.erb

@@ -0,0 +1,30 @@
+<li class="mt-auto">
+  <div class="mb-2" data-controller="navigation-toggle">
+    <div data-navigation-toggle-target="wrapper"
+         class="<%= 'rounded-xl bg-white/10 overflow-hidden' if active? %>">
+      <button type="button"
+              data-navigation-toggle-target="button"
+              data-action="click->navigation-toggle#toggle"
+              aria-controls="user-menu"
+              aria-expanded="false"
+              class="<%= button_classes %>">
+        <% avatar = user.avatar_url %>
+        <% if avatar.present? %>
+          <span class="text-center w-6"><img src="<%= avatar %>" alt="<%= user.name %>" class="w-auto h-7 rounded-full object-cover"></span>
+        <% else %>
+          <span class="text-center w-6"><i class="text-xl fa-solid fa-circle-user fa-fw"></i></span>
+        <% end %>
+        <span class="flex-1 text-left"><%= user.name %></span>
+        <i class="fa-solid fa-chevron-right text-xs transition-transform duration-150 ease-in-out"
+           data-navigation-toggle-target="icon"></i>
+      </button>
+      <div id="user-menu"
+           class="overflow-hidden transition-all duration-200 ease-out <%= active? ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0' %>"
+           data-navigation-toggle-target="menu">
+        <% sub_items.each do |sub_item| %>
+          <%= sub_item %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</li>

data/app/components/panda/core/admin/navigation/user_menu_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      module Navigation
+        # User profile menu component for the sidebar footer
+        # Displays user avatar/name with expandable menu for profile, security, and logout
+        class UserMenuComponent < Panda::Core::Base
+          BASE_CLASSES = "transition-all group flex items-center w-full gap-x-3 px-3 py-2.5 " \
+                         "text-sm font-medium cursor-pointer"
+          EXPANDED_BUTTON_CLASSES = "bg-white/15 text-white rounded-t-xl"
+          INACTIVE_CLASSES = "text-white/80 hover:bg-white/5 rounded-xl"
+
+          renders_many :sub_items, SubItemComponent
+
+          def initialize(user:, active: false, **attrs)
+            @user = user
+            @active = active
+            super(**attrs)
+          end
+
+          attr_reader :user
+
+          def active?
+            @active
+          end
+
+          def button_classes
+            "#{BASE_CLASSES} #{active? ? EXPANDED_BUTTON_CLASSES : INACTIVE_CLASSES}"
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,28 @@
+<div>
+  <%# 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">
+    <%# Title %>
+    <div class="min-w-0 flex-1">
+      <h2 class="text-2xl/7 font-bold text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight dark:text-white">
+        <%= @title %>
+      </h2>
+    </div>
+
+    <%# Action buttons %>
+    <% if buttons.any? %>
+      <div class="mt-4 flex shrink-0 md:mt-0 md:ml-4">
+        <% buttons.each_with_index do |button_data, index| %>
+          <%= render create_button(button_data, index) %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -33,47 +33,31 @@ module Panda
       #   end
       #
       class PageHeaderComponent < Panda::Core::Base
-        prop :title, String
-        prop :breadcrumbs, _Nilable(Array), default: -> {}
-        prop :show_back, _Boolean, default: true
-
-        def initialize(**props)
-          super
+        def initialize(title: "", breadcrumbs: nil, show_back: true, **attrs, &block)
+          @title = title
+          @breadcrumbs = breadcrumbs
+          @show_back = show_back
           @buttons = []
+          @setup_block = block
+          super(**attrs)
         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
+        attr_reader :title, :breadcrumbs, :show_back
 
-              # 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
+        # Lazy accessor that ensures buttons are registered before returning them.
+        # Supports two patterns:
+        # 1. Block passed to new() - executed here (for tests)
+        # 2. Block passed to render() - executed via content (for ERB templates)
+        def buttons
+          unless @buttons_registered
+            if @setup_block
+              @setup_block.call(self)
+            else
+              content
             end
+            @buttons_registered = true
           end
+          @buttons
         end
 
         # Define a button to be rendered in the header actions area

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

@@ -0,0 +1,33 @@
+<nav aria-label="Pagination" class="mt-4 flex items-center justify-between border-t border-gray-200 dark:border-gray-700 pt-4">
+  <div class="text-sm text-gray-500 dark:text-gray-400">
+    Showing <%= first_item %> to <%= last_item %> of <%= total_count %> <%= item_name %>
+  </div>
+  <div class="flex gap-1">
+    <% if previous_page? %>
+      <%= link_to page_url(page - 1),
+        class: "rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800",
+        "aria-label": "Previous page" do %>
+        <i class="fa-solid fa-chevron-left"></i>
+      <% end %>
+    <% end %>
+
+    <% (1..total_pages).each do |page_num| %>
+      <% if page_num == page %>
+        <span class="rounded-md bg-primary-600 px-3 py-2 text-sm font-medium text-white" aria-current="page"><%= page_num %></span>
+      <% elsif show_page?(page_num) %>
+        <%= link_to page_num, page_url(page_num),
+          class: "rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800" %>
+      <% elsif show_ellipsis?(page_num) %>
+        <span class="px-2 py-2 text-sm text-gray-400">&hellip;</span>
+      <% end %>
+    <% end %>
+
+    <% if next_page? %>
+      <%= link_to page_url(page + 1),
+        class: "rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800",
+        "aria-label": "Next page" do %>
+        <i class="fa-solid fa-chevron-right"></i>
+      <% end %>
+    <% end %>
+  </div>
+</nav>

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

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class PaginationComponent < Panda::Core::Base
+        def initialize(page:, total_pages:, total_count:, per_page:, item_name: "items", **attrs)
+          @page = page
+          @total_pages = total_pages
+          @total_count = total_count
+          @per_page = per_page
+          @item_name = item_name
+          super(**attrs)
+        end
+
+        attr_reader :page, :total_pages, :total_count, :per_page, :item_name
+
+        def render?
+          total_pages > 1
+        end
+
+        def first_item
+          ((page - 1) * per_page) + 1
+        end
+
+        def last_item
+          [page * per_page, total_count].min
+        end
+
+        def previous_page?
+          page > 1
+        end
+
+        def next_page?
+          page < total_pages
+        end
+
+        def show_page?(page_num)
+          page_num == page ||
+            (page_num - page).abs <= 2 ||
+            page_num == 1 ||
+            page_num == total_pages
+        end
+
+        def show_ellipsis?(page_num)
+          (page_num - page).abs == 3
+        end
+
+        def page_url(page_num)
+          query = helpers.request.query_parameters.merge("page" => page_num)
+          "#{helpers.request.path}?#{query.to_query}"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+<%# Chrome (bg/border/radius) is themeable via --panda-panel-* tokens — see
+    app/assets/tailwind/application.css. Fallbacks resolve to today's
+    bg-white/border-gray-200/rounded-2xl exactly, so this is a no-op unless a
+    host app sets data-theme. %>
+<div class="col-span-3 mt-4 rounded-[var(--panda-panel-radius,var(--radius-2xl))] border border-[var(--panda-panel-border,var(--color-gray-200))] bg-[var(--panda-panel-bg,var(--color-white))] shadow-sm">
+  <% if heading_slot? %>
+    <div class="flex items-center text-sm font-medium px-4 py-3 text-gray-500 truncate border-b border-[var(--panda-panel-border,var(--color-gray-200))]">
+      <%= heading_slot %>
+    </div>
+  <% end %>
+
+  <div class="px-4 py-3 text-black">
+    <% if body_slot? %>
+      <%= body_slot %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  </div>
+</div>

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

@@ -4,37 +4,12 @@ module Panda
   module Core
     module Admin
       class PanelComponent < Panda::Core::Base
-        def view_template(&block)
-          # Capture block content differently based on context (ERB vs Phlex)
-          if block_given?
-            if defined?(view_context) && view_context
-              # Called from ERB - capture HTML output
-              @body_html = view_context.capture { yield(self) }
-            else
-              # Called from Phlex - execute block directly to set instance variables
-              yield(self)
-            end
-          end
+        renders_one :heading_slot
 
-          div(class: "col-span-3 mt-5 rounded-lg shadow-md bg-dark shadow-inherit/20") do
-            @heading_content&.call
+        renders_one :body_slot
 
-            div(class: "p-4 text-black bg-white rounded-b-lg") do
-              if @body_content
-                @body_content.call
-              elsif @body_html
-                raw(@body_html)
-              end
-            end
-          end
-        end
-
-        def heading(**props)
-          @heading_content = -> { render(Panda::Core::Admin::HeadingComponent.new(**props.merge(level: :panel))) }
-        end
-
-        def body(&block)
-          @body_content = block
+        def initialize(**attrs)
+          super
         end
       end
     end

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

@@ -0,0 +1,6 @@
+<%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
+  <% panel.with_heading_slot { heading } %>
+  <div class="<%= prose_classes %>">
+    <%= simple_format(text) %>
+  </div>
+<% end %>

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

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      # Renders a PanelComponent containing prose-formatted text via `simple_format`.
+      # Self-hides via `render?` when text is blank.
+      #
+      # Lives in panda-core because rich-text prose display inside panels is a generic
+      # admin pattern (notes, descriptions, agendas) used across any Panda app, not
+      # specific to any single domain.
+      #
+      # @example Basic usage
+      #   render Panda::Core::Admin::ProsePanelComponent.new(heading: "Notes", text: @person.notes)
+      #
+      # @example With extra prose styling
+      #   render Panda::Core::Admin::ProsePanelComponent.new(
+      #     heading: "Internal Notes",
+      #     text: @case.notes,
+      #     prose_class: "text-gray-600"
+      #   )
+      class ProsePanelComponent < Panda::Core::Base
+        attr_reader :heading, :text, :prose_class
+
+        def initialize(heading:, text:, prose_class: "", **attrs)
+          @heading = heading
+          @text = text
+          @prose_class = prose_class
+          super(**attrs)
+        end
+
+        def render?
+          text.present?
+        end
+
+        def prose_classes
+          base = "prose prose-sm max-w-none"
+          prose_class.present? ? "#{base} #{prose_class}" : base
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,19 @@
+<div class="relative px-2 mb-2" data-controller="global-search" data-global-search-url-value="<%= search_url %>">
+  <div class="relative">
+    <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-white/40 text-xs pointer-events-none"></i>
+    <input
+      type="text"
+      placeholder="Search..."
+      autocomplete="off"
+      data-global-search-target="input"
+      data-action="input->global-search#onInput keydown->global-search#onInputKeydown focus->global-search#onFocus"
+      class="w-full rounded-lg border border-white/10 bg-white/5 pl-9 pr-12 py-2 text-sm text-white placeholder-white/40 focus:bg-white/10 focus:border-white/20 focus:outline-none focus:ring-0 transition-colors"
+    />
+    <kbd class="absolute right-2.5 top-1/2 -translate-y-1/2 text-[10px] text-white/30 border border-white/15 rounded px-1.5 py-0.5 pointer-events-none"><%= shortcut_hint %></kbd>
+  </div>
+
+  <div
+    data-global-search-target="results"
+    class="hidden absolute left-2 right-2 top-full mt-1 max-h-80 overflow-y-auto rounded-xl border border-white/10 bg-gray-900/95 backdrop-blur-sm shadow-xl z-50"
+  ></div>
+</div>

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module Admin
+      class SearchBarComponent < Panda::Core::Base
+        def initialize(**attrs)
+          super
+        end
+
+        def render?
+          Panda::Core::SearchRegistry.providers.any? { |p| p[:search_class].respond_to?(:admin_search) }
+        end
+
+        def search_url
+          Panda::Core::Engine.routes.url_helpers.admin_search_path
+        end
+
+        def shortcut_hint
+          mac? ? "\u2318K" : "Ctrl+K"
+        end
+
+        private
+
+        def mac?
+          true # Safe default for shortcut display; JS handles both
+        end
+      end
+    end
+  end
+end