panda-cms 0.8.2 → 0.10.2

data/app/javascript/panda/cms/stimulus-loading.js

@@ -1,14 +1,13 @@
 // Stimulus loading utilities for Panda CMS
 // This provides the loading functionality that would normally come from stimulus-rails
 
-import { Application } from "@hotwired/stimulus"
+// Import the shared Stimulus application from Panda Core
+// This ensures all controllers (Core and CMS) are registered in the same application
+// Use the importmap module name, not an absolute path
+import { application } from "panda/core/application"
 
-const application = Application.start()
-
-// Configure debug mode based on environment
-const railsEnv = document.body?.dataset?.environment || "production";
-application.debug = railsEnv === "development"
-window.Stimulus = application
+// The application is already started and configured in Core
+// No need to start it again or configure debug mode
 
 // Auto-registration functionality
 function eagerLoadControllersFrom(context) {

data/app/models/panda/cms/block_content.rb

@@ -12,8 +12,17 @@ module Panda
 
       validates :block, presence: true, uniqueness: {scope: :page}
 
+      after_save :refresh_page_cached_timestamp
+      after_destroy :refresh_page_cached_timestamp
+
       store_accessor :content, [], prefix: true
       store_accessor :cached_content, [], prefix: true
+
+      private
+
+      def refresh_page_cached_timestamp
+        page&.refresh_last_updated_at!
+      end
     end
   end
 end

data/app/models/panda/cms/menu.rb

@@ -6,6 +6,7 @@ module Panda
       self.table_name = "panda_cms_menus"
 
       after_save :generate_auto_menu_items, if: -> { kind == "auto" }
+      after_commit :clear_menu_cache
 
       has_many :menu_items, lambda {
         order(lft: :asc)
@@ -50,6 +51,17 @@ module Panda
 
         errors.add(:start_page, "can't be blank")
       end
+
+      #
+      # Clear fragment cache when menu is updated
+      # This ensures menu changes appear immediately on the front-end
+      #
+      # @return nil
+      # @visibility private
+      #
+      def clear_menu_cache
+        Rails.cache.delete("panda_cms_menu/#{name}/#{id}")
+      end
     end
   end
 end

data/app/models/panda/cms/page.rb

@@ -38,12 +38,47 @@ module Panda
       enum :status, {
         active: "active",
         draft: "draft",
+        pending_review: "pending_review",
         hidden: "hidden",
         archived: "archived"
       }
 
+      enum :page_type, {
+        standard: "standard",
+        hidden_type: "hidden",
+        system: "system",
+        posts: "posts",
+        code: "code"
+      }, prefix: :type
+
+      enum :seo_index_mode, {
+        visible: "visible",
+        invisible: "invisible"
+      }, prefix: :seo
+
+      enum :og_type, {
+        website: "website",
+        article: "article",
+        profile: "profile",
+        video: "video",
+        book: "book"
+      }, prefix: :og
+
+      # Active Storage attachment for Open Graph image
+      has_one_attached :og_image do |attachable|
+        attachable.variant :og_share, resize_to_limit: [1200, 630]
+      end
+
+      # SEO validations
+      validates :seo_title, length: {maximum: 70}, allow_blank: true
+      validates :seo_description, length: {maximum: 160}, allow_blank: true
+      validates :og_title, length: {maximum: 60}, allow_blank: true
+      validates :og_description, length: {maximum: 200}, allow_blank: true
+      validates :canonical_url, format: {with: URI::DEFAULT_PARSER.make_regexp(%w[http https])}, allow_blank: true
+
       # Callbacks
       after_save :handle_after_save
+      before_save :update_cached_last_updated_at
 
       #
       # Update any menus which include this page or its parent as a menu item
@@ -56,6 +91,110 @@ module Panda
         menus_of_parent.find_each(&:generate_auto_menu_items)
       end
 
+      #
+      # Returns the most recent update time between the page and its block contents
+      # Uses cached value for performance
+      #
+      # @return [Time] The most recent updated_at timestamp
+      # @visibility public
+      #
+      def last_updated_at
+        cached_last_updated_at || updated_at
+      end
+
+      #
+      # Refresh the cached last updated timestamp
+      # Used when block contents are updated
+      #
+      # @return [Time] The updated timestamp
+      # @visibility public
+      #
+      def refresh_last_updated_at!
+        block_content_updated_at = block_contents.maximum(:updated_at)
+        new_timestamp = [updated_at, block_content_updated_at].compact.max
+        update_column(:cached_last_updated_at, new_timestamp)
+        new_timestamp
+      end
+
+      #
+      # Returns the effective SEO title for this page
+      # Falls back to page title if not set, with optional inheritance
+      #
+      # @return [String] The SEO title to use
+      # @visibility public
+      #
+      def effective_seo_title
+        return seo_title if seo_title.present?
+        return title unless inherit_seo
+
+        # Traverse up tree to find inherited value
+        self_and_ancestors.reverse.find { |p| p.seo_title.present? }&.seo_title || title
+      end
+
+      #
+      # Returns the effective SEO description for this page
+      # With optional inheritance from parent pages
+      #
+      # @return [String, nil] The SEO description to use
+      # @visibility public
+      #
+      def effective_seo_description
+        return seo_description if seo_description.present?
+        return nil unless inherit_seo
+
+        self_and_ancestors.reverse.find { |p| p.seo_description.present? }&.seo_description
+      end
+
+      #
+      # Returns the effective Open Graph title
+      # Falls back to SEO title, then page title
+      #
+      # @return [String] The OG title to use
+      # @visibility public
+      #
+      def effective_og_title
+        og_title.presence || effective_seo_title
+      end
+
+      #
+      # Returns the effective Open Graph description
+      # Falls back to SEO description
+      #
+      # @return [String, nil] The OG description to use
+      # @visibility public
+      #
+      def effective_og_description
+        og_description.presence || effective_seo_description
+      end
+
+      #
+      # Returns the effective canonical URL for this page
+      # Falls back to the page's own URL if not explicitly set
+      #
+      # @return [String] The canonical URL to use
+      # @visibility public
+      #
+      def effective_canonical_url
+        canonical_url.presence || path
+      end
+
+      #
+      # Generates the robots meta tag content based on seo_index_mode
+      #
+      # @return [String] The robots meta tag content (e.g., "index, follow")
+      # @visibility public
+      #
+      def robots_meta_content
+        case seo_index_mode
+        when "visible"
+          "index, follow"
+        when "invisible"
+          "noindex, nofollow"
+        else
+          "index, follow" # Default fallback
+        end
+      end
+
       private
 
       def validate_unique_path_in_scope
@@ -124,6 +263,14 @@ module Panda
           destination_path: new_path
         )
       end
+
+      def update_cached_last_updated_at
+        # Will be set to updated_at automatically during save
+        # Block content updates will call refresh_last_updated_at! separately
+        # Only update if column exists (for backwards compatibility with older schemas)
+        return unless self.class.column_names.include?("cached_last_updated_at")
+        self.cached_last_updated_at = Time.current
+      end
     end
   end
 end

data/app/models/panda/cms/post.rb

@@ -33,10 +33,36 @@ module Panda
       enum :status, {
         active: "active",
         draft: "draft",
+        pending_review: "pending_review",
         hidden: "hidden",
         archived: "archived"
       }
 
+      enum :seo_index_mode, {
+        visible: "visible",
+        invisible: "invisible"
+      }, prefix: :seo
+
+      enum :og_type, {
+        website: "website",
+        article: "article",
+        profile: "profile",
+        video: "video",
+        book: "book"
+      }, prefix: :og
+
+      # Active Storage attachment for Open Graph image
+      has_one_attached :og_image do |attachable|
+        attachable.variant :og_share, resize_to_limit: [1200, 630]
+      end
+
+      # SEO validations
+      validates :seo_title, length: {maximum: 70}, allow_blank: true
+      validates :seo_description, length: {maximum: 160}, allow_blank: true
+      validates :og_title, length: {maximum: 60}, allow_blank: true
+      validates :og_description, length: {maximum: 200}, allow_blank: true
+      validates :canonical_url, format: {with: URI::DEFAULT_PARSER.make_regexp(%w[http https])}, allow_blank: true
+
       def to_param
         # For date-based URLs, return just the slug portion
         parts = CGI.unescape(slug).delete_prefix("/").split("/")
@@ -87,6 +113,78 @@ module Panda
         text.truncate(length).html_safe
       end
 
+      #
+      # Returns the effective SEO title for this post
+      # Falls back to post title if not set
+      #
+      # @return [String] The SEO title to use
+      # @visibility public
+      #
+      def effective_seo_title
+        seo_title.presence || title
+      end
+
+      #
+      # Returns the effective SEO description for this post
+      # Falls back to excerpt if not set
+      #
+      # @return [String, nil] The SEO description to use
+      # @visibility public
+      #
+      def effective_seo_description
+        seo_description.presence || excerpt(160, squish: true)
+      end
+
+      #
+      # Returns the effective Open Graph title
+      # Falls back to SEO title, then post title
+      #
+      # @return [String] The OG title to use
+      # @visibility public
+      #
+      def effective_og_title
+        og_title.presence || effective_seo_title
+      end
+
+      #
+      # Returns the effective Open Graph description
+      # Falls back to SEO description or excerpt
+      #
+      # @return [String, nil] The OG description to use
+      # @visibility public
+      #
+      def effective_og_description
+        og_description.presence || effective_seo_description
+      end
+
+      #
+      # Returns the effective canonical URL for this post
+      # Falls back to the post's own URL if not explicitly set
+      #
+      # @return [String] The canonical URL to use
+      # @visibility public
+      #
+      def effective_canonical_url
+        canonical_url.presence || slug
+      end
+
+      #
+      # Generates the robots meta tag content based on seo_index_mode
+      #
+      # @return [String] The robots meta tag content (e.g., "index, follow")
+      # @visibility public
+      #
+      def robots_meta_content
+        case seo_index_mode
+        when "visible"
+          "index, follow"
+        when "invisible"
+          "noindex, nofollow"
+        else
+          "index, follow" # Default fallback
+        end
+      end
+
       private
 
       def clear_menu_cache

data/app/views/layouts/homepage.html.erb

@@ -2,10 +2,7 @@
 <html>
 <head>
   <title>Test Homepage</title>
-  <% if params[:embed_id].present? %>
-    <!-- Include Panda CMS assets for editor functionality when in edit mode -->
-    <%= panda_cms_complete_assets %>
-  <% end %>
+  <!-- CMS assets are automatically injected by editor_iframe_controller when in edit mode -->
 </head>
 <body>
   <h1><%= @page.title %></h1>

data/app/views/layouts/page.html.erb

@@ -2,10 +2,7 @@
 <html>
 <head>
   <title>Test Page</title>
-  <% if params[:embed_id].present? %>
-    <!-- Include Panda CMS assets for editor functionality when in edit mode -->
-    <%= panda_cms_complete_assets %>
-  <% end %>
+  <!-- CMS assets are automatically injected by editor_iframe_controller when in edit mode -->
 </head>
 <body>
   <h1><%= @page.title %></h1>

data/app/views/panda/cms/admin/dashboard/show.html.erb

@@ -1,12 +1,12 @@
 <div class="" data-controller="dashboard">
   <%= render Panda::Core::Admin::ContainerComponent.new do |container| %>
-    <% container.with_heading(text: "Dashboard", level: 1) do |heading| %>
-      <% heading.with_button(action: :add, text: "Add Page", link: new_admin_cms_page_path) %>
+    <% container.heading(text: "Dashboard", level: 1) do |heading| %>
+      <% heading.button(action: :add, text: "Add Page", href: new_admin_cms_page_path) %>
     <% end %>
     <dl class="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-3">
-      <%= render Panda::CMS::Admin::StatisticsComponent.new(metric: "Views Today", value: Panda::CMS::Visit.group_by_day(:visited_at, last: 1).count.values.first) %>
-      <%= render Panda::CMS::Admin::StatisticsComponent.new(metric: "Views Last Week", value: Panda::CMS::Visit.group_by_week(:visited_at, last: 1).count.values.first) %>
-      <%= render Panda::CMS::Admin::StatisticsComponent.new(metric: "Views Last Month", value: Panda::CMS::Visit.group_by_month(:visited_at, last: 1).count.values.first) %>
+      <%= render Panda::Core::Admin::StatisticsComponent.new(metric: "Views Today", value: Panda::CMS::Visit.group_by_day(:visited_at, last: 1).count.values.first) %>
+      <%= render Panda::Core::Admin::StatisticsComponent.new(metric: "Views Last Week", value: Panda::CMS::Visit.group_by_week(:visited_at, last: 1).count.values.first) %>
+      <%= render Panda::Core::Admin::StatisticsComponent.new(metric: "Views Last Month", value: Panda::CMS::Visit.group_by_month(:visited_at, last: 1).count.values.first) %>
     </dl>
   <% end %>
 </div>

data/app/views/panda/cms/admin/files/_file_details.html.erb

@@ -0,0 +1,45 @@
+<div>
+  <div class="block overflow-hidden w-full rounded-lg aspect-h-7 aspect-w-10">
+    <% if file.image? %>
+      <%= image_tag main_app.rails_blob_path(file, only_path: true), alt: file.filename.to_s, class: "object-cover" %>
+    <% else %>
+      <div class="flex items-center justify-center h-full bg-gray-100">
+        <div class="text-center">
+          <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+          </svg>
+          <p class="mt-1 text-xs text-gray-500 uppercase"><%= file.content_type&.split("/")&.last || "file" %></p>
+        </div>
+      </div>
+    <% end %>
+  </div>
+  <div class="flex justify-between items-start mt-4">
+    <div>
+      <h2 class="text-lg font-medium text-gray-900"><span class="sr-only">Details for </span><%= file.filename %></h2>
+      <p class="text-sm font-medium text-gray-500"><%= number_to_human_size(file.byte_size) %></p>
+    </div>
+  </div>
+</div>
+
+<div>
+  <h3 class="font-medium text-gray-900">Information</h3>
+  <dl class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200">
+    <div class="flex justify-between py-3 text-sm font-medium">
+      <dt class="text-gray-500">Created</dt>
+      <dd class="text-gray-900 whitespace-nowrap"><%= file.created_at.strftime("%B %-d, %Y") %></dd>
+    </div>
+    <div class="flex justify-between py-3 text-sm font-medium">
+      <dt class="text-gray-500">Content Type</dt>
+      <dd class="text-gray-900 whitespace-nowrap"><%= file.content_type %></dd>
+    </div>
+    <div class="flex justify-between py-3 text-sm font-medium">
+      <dt class="text-gray-500">Checksum</dt>
+      <dd class="text-gray-900 whitespace-nowrap font-mono text-xs"><%= file.checksum %></dd>
+    </div>
+  </dl>
+</div>
+
+<div class="flex gap-x-3">
+  <%= link_to "Download", main_app.rails_blob_path(file, disposition: "attachment"), class: "flex-1 py-2 px-3 text-sm font-semibold text-white bg-black rounded-md shadow-sm hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-panda-dark text-center" %>
+  <%= button_tag "Delete", type: "button", class: "flex-1 py-2 px-3 text-sm font-semibold text-gray-900 bg-white rounded-md ring-1 ring-inset shadow-sm hover:bg-gray-50 ring-mid", data: { confirm: "Are you sure you want to delete this file?" } %>
+</div>

data/app/views/panda/cms/admin/files/index.html.erb

@@ -1,124 +1,17 @@
 <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.with_heading(text: "Files", level: 1) %>
+  <% component.heading(text: "Files", level: 1) %>
 
-  <% component.with_slideover(title: "File Details") do %>
-    <div class="pt-4 pb-16 space-y-6">
-      <div>
-        <div class="block overflow-hidden w-full rounded-lg aspect-h-7 aspect-w-10">
-          <img src="https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&q=80" alt="" class="object-cover">
-        </div>
-        <div class="flex justify-between items-start mt-4">
-          <div>
-            <h2 class="text-lg font-medium text-gray-900"><span class="sr-only">Details for </span>IMG_4985.HEIC</h2>
-            <p class="text-sm font-medium text-gray-500">3.9 MB</p>
-          </div>
-          <button type="button" class="flex relative justify-center items-center ml-4 w-8 h-8 text-gray-400 bg-white rounded-full hover:text-gray-500 hover:bg-gray-100 focus:ring-2 focus:outline-none focus:ring-panda-dark">
-            <span class="absolute -inset-1.5"></span>
-            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
-            </svg>
-            <span class="sr-only">Favorite</span>
-          </button>
-        </div>
-      </div>
-      <div>
-        <h3 class="font-medium text-gray-900">Information</h3>
-        <dl class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200">
-          <div class="flex justify-between py-3 text-sm font-medium">
-            <dt class="text-gray-500">Uploaded by</dt>
-            <dd class="text-gray-900 whitespace-nowrap">Marie Culver</dd>
-          </div>
-          <div class="flex justify-between py-3 text-sm font-medium">
-            <dt class="text-gray-500">Created</dt>
-            <dd class="text-gray-900 whitespace-nowrap">June 8, 2020</dd>
-          </div>
-          <div class="flex justify-between py-3 text-sm font-medium">
-            <dt class="text-gray-500">Last modified</dt>
-            <dd class="text-gray-900 whitespace-nowrap">June 8, 2020</dd>
-          </div>
-          <div class="flex justify-between py-3 text-sm font-medium">
-            <dt class="text-gray-500">Dimensions</dt>
-            <dd class="text-gray-900 whitespace-nowrap">4032 x 3024</dd>
-          </div>
-          <div class="flex justify-between py-3 text-sm font-medium">
-            <dt class="text-gray-500">Resolution</dt>
-            <dd class="text-gray-900 whitespace-nowrap">72 x 72</dd>
-          </div>
-        </dl>
-      </div>
-      <div>
-        <h3 class="font-medium text-gray-900">Description</h3>
-        <div class="flex justify-between items-center mt-2">
-          <p class="text-sm italic text-gray-500">Add a description to this image.</p>
-          <button type="button" class="flex relative justify-center items-center w-8 h-8 text-gray-400 bg-white rounded-full hover:text-gray-500 hover:bg-gray-100 focus:ring-2 focus:outline-none focus:ring-panda-dark">
-            <span class="absolute -inset-1.5"></span>
-            <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-              <path d="M2.695 14.763l-1.262 3.154a.5.5 0 00.65.65l3.155-1.262a4 4 0 001.343-.885L17.5 5.5a2.121 2.121 0 00-3-3L3.58 13.42a4 4 0 00-.885 1.343z" />
-            </svg>
-            <span class="sr-only">Add description</span>
-          </button>
-        </div>
-      </div>
-      <div>
-        <h3 class="font-medium text-gray-900">Shared with</h3>
-        <ul role="list" class="mt-2 border-t border-b border-gray-200 divide-y divide-gray-200">
-          <li class="flex justify-between items-center py-3">
-            <div class="flex items-center">
-              <img src="https://images.unsplash.com/photo-1502685104226-ee32379fefbe?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=1024&h=1024&q=80" alt="" class="w-8 h-8 rounded-full">
-              <p class="ml-4 text-sm font-medium text-gray-900">Aimee Douglas</p>
-            </div>
-            <button type="button" class="ml-6 text-sm font-medium bg-white rounded-md focus:ring-2 focus:ring-offset-2 focus:outline-none text-panda-dark hover:text-panda-dark focus:ring-panda-dark">Remove<span class="sr-only"> Aimee Douglas</span></button>
-          </li>
-          <li class="flex justify-between items-center py-3">
-            <div class="flex items-center">
-              <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=oilqXxSqey&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="w-8 h-8 rounded-full">
-              <p class="ml-4 text-sm font-medium text-gray-900">Andrea McMillan</p>
-            </div>
-            <button type="button" class="ml-6 text-sm font-medium bg-white rounded-md focus:ring-2 focus:ring-offset-2 focus:outline-none text-panda-dark hover:text-panda-dark focus:ring-panda-dark">Remove<span class="sr-only"> Andrea McMillan</span></button>
-          </li>
-
-          <li class="flex justify-between items-center py-2">
-            <button type="button" class="flex items-center p-1 -ml-1 bg-white rounded-md focus:ring-2 focus:outline-none group focus:ring-panda-dark">
-              <span class="flex justify-center items-center w-8 h-8 text-gray-400 rounded-full border-2 border-gray-300 border-dashed">
-                <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
-                </svg>
-              </span>
-              <span class="ml-4 text-sm font-medium text-panda-dark group-hover:text-panda-dark">Share</span>
-            </button>
-          </li>
-        </ul>
-      </div>
-      <div class="flex gap-x-3">
-        <button type="button" class="flex-1 py-2 px-3 text-sm font-semibold text-white bg-black rounded-md shadow-sm hover:bg-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-panda-dark">Download</button>
-        <button type="button" class="flex-1 py-2 px-3 text-sm font-semibold text-gray-900 bg-white rounded-md ring-1 ring-inset shadow-sm hover:bg-gray-50 ring-mid">Delete</button>
-      </div>
+  <% component.slideover(title: "File Details") do %>
+    <div class="pt-4 pb-16 space-y-6" data-file-gallery-target="slideoverContent">
+      <% if @selected_file %>
+        <%= render partial: "file_details", locals: { file: @selected_file } %>
+      <% else %>
+        <p class="text-sm text-gray-500">Select a file to view details</p>
+      <% end %>
     </div>
   <% end %>
 
-  <% component.with_tab_bar do %>
-    <%= component.with_tab(name: "Recently Viewed", active: true) %>
-    <%= component.with_tab(name: "Recently Added") %>
-    <%= component.with_tab(name: "Favourited") %>
-  <% end %>
-
-  <section>
-    <h2 id="gallery-heading" class="sr-only">Recently viewed</h2>
-    <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
-      <li class="relative">
-        <!-- Current: "ring-2 ring-panda-dark ring-offset-2", Default: "focus-within:ring-2 focus-within:ring-panda-dark focus-within:ring-offset-2 focus-within:ring-offset-gray-100" -->
-        <div class="block overflow-hidden w-full bg-gray-100 rounded-lg ring-2 ring-offset-2 ring-panda-dark aspect-w-10 aspect-h-7 group">
-          <!-- Current: "", Default: "group-hover:opacity-75" -->
-          <img src="https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=512&q=80" alt="" class="object-cover pointer-events-none">
-          <button type="button" class="absolute inset-0 focus:outline-none">
-            <span class="sr-only">View details for IMG_4985.HEIC</span>
-          </button>
-        </div>
-        <p class="block mt-2 text-sm font-medium text-gray-900 pointer-events-none truncate">IMG_4985.HEIC</p>
-        <p class="block text-sm font-medium text-gray-500 pointer-events-none">3.9 MB</p>
-      </li>
-
-      <!-- More files... -->
-    </ul>
-  </section>
+  <div data-controller="file-gallery" class="pb-24">
+    <%= Panda::Core::Admin::FileGalleryComponent.new(files: @files, selected_file: @selected_file) %>
+  </div>
 <% end %>

data/app/views/panda/cms/admin/forms/index.html.erb

@@ -1,8 +1,8 @@
 <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.with_heading(text: "Forms", level: 1) do |heading| %>
+  <% component.heading(text: "Forms", level: 1, icon: "fa-solid fa-inbox") do |heading| %>
   <% end %>
 
-  <%= render Panda::Core::Admin::TableComponent.new(term: "form", rows: forms) do |table| %>
+  <%= render Panda::Core::Admin::TableComponent.new(term: "form", rows: forms, icon: "fa-solid fa-inbox") do |table| %>
     <% table.column("Name") { |form| block_link_to form.name, admin_cms_form_path(form) } %>
     <% table.column("Status") { |form| render Panda::Core::Admin::TagComponent.new(status: :active) } %>
     <% table.column("Last Submission") do |form| %>

data/app/views/panda/cms/admin/forms/new.html.erb

@@ -1,6 +1,5 @@
 <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.with_heading(text: "Add Page", level: 1) do |heading| %>
-  <% end %>
+  <% component.heading(text: "Add Form", level: 1) %>
   <%= panda_cms_form_with model: page, url: admin_cms_pages_path, method: :post do |f| %>
     <% options = nested_set_options(Panda::CMS::Page, page) { |i| "#{"-" * i.level} #{i.title} (#{i.path})" } %>
     <div data-controller="slug">

data/app/views/panda/cms/admin/forms/show.html.erb

@@ -1,35 +1,20 @@
 <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.with_heading(text: form.name, level: 1) do |heading| %>
+  <% component.heading(text: form.name, level: 1) do |heading| %>
   <% end %>
 
-  <div class="overflow-x-auto -mx-4 rounded-lg ring-1 sm:mx-0 sm:rounded-lg ring-mid">
-    <table class="min-w-full divide-y divide-gray-300 border-collapse table-auto">
-      <thead>
-        <tr>
-          <% fields.each do |field, title| %>
-          <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900"><%= title %></th>
-          <% end %>
-          <th scope="col" class="py-3.5 px-3 text-sm font-semibold text-left text-gray-900">Submitted</th>
-        </tr>
-      </thead>
-      <tbody class="bg-white divide-y divide-gray-200">
-        <% submissions.each do |submission| %>
-        <tr class="relative bg-white cursor-pointer hover:bg-gray-50">
-          <% fields.each do |field| %>
-          <td class="py-5 px-3 text-sm text-gray-500">
-            <% if field[0] == "email" || field[0] == "email_address" %>
-              <a href="mailto:<%= submission.data[field[0]] %>" class="border-b border-gray-500 hover:text-gray-900"><%= submission.data[field[0]] %></a>
-            <% else %>
-              <%= simple_format(submission.data[field[0]]) %>
-            <% end %>
-          </td>
-          <% end %>
-          <td class="py-5 px-3 text-sm text-gray-500 whitespace-nowrap">
-            <div class="text-gray-500"><%= time_ago_in_words(submission.created_at) %> ago</div>
-          </td>
-        </tr>
+  <%= render Panda::Core::Admin::TableComponent.new(term: "submission", rows: submissions) do |table| %>
+    <% fields.each do |field, title| %>
+      <% table.column(title) do |submission| %>
+        <% if field == "email" || field == "email_address" %>
+          <a href="mailto:<%= submission.data[field] %>" class="border-b border-gray-500 hover:text-gray-900"><%= submission.data[field] %></a>
+        <% else %>
+          <%= simple_format(submission.data[field]) %>
         <% end %>
-      </tbody>
-    </table>
-  </div>
+      <% end %>
+    <% end %>
+
+    <% table.column("Submitted") do |submission| %>
+      <%= time_ago_in_words(submission.created_at) %> ago
+    <% end %>
+  <% end %>
 <% end %>