panda-cms 0.8.0 → 0.10.0

data/app/javascript/panda/cms/controllers/tree_controller.js

@@ -0,0 +1,214 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["row", "toggle", "container"]
+  static values = {
+    collapsed: { type: Array, default: [] }
+  }
+
+  connect() {
+    const hasStoredState = localStorage.getItem('panda-cms-pages-collapsed')
+
+    if (hasStoredState) {
+      this.loadCollapsedState()
+    } else {
+      this.initializeTree()
+    }
+  }
+
+  // Helper to get the actual table row element from our target div
+  getTableRow(rowTarget) {
+    return rowTarget.closest('.table-row')
+  }
+
+  initializeTree() {
+    // Collapse all level 1 pages (direct children of Home) by default
+    this.rowTargets.forEach(row => {
+      const level = parseInt(row.dataset.level)
+      const pageId = row.dataset.pageId
+
+      // If it's a level 1 page with children, mark it as collapsed
+      if (level === 1) {
+        const hasChildren = row.querySelector('[data-tree-target="toggle"]')
+        if (hasChildren) {
+          this.collapsedValue = [...this.collapsedValue, pageId]
+          this.updateToggleIcon(pageId, true)
+        }
+      }
+
+      // Hide everything below level 1 (level > 1)
+      if (level > 1) {
+        const tableRow = this.getTableRow(row)
+        if (tableRow) tableRow.style.display = 'none'
+      }
+    })
+
+    // Save the initial collapsed state
+    this.saveCollapsedState()
+
+    // Fade in the tree after initialization
+    this.showTree()
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    const row = event.currentTarget.closest('[data-tree-target="row"]')
+    const pageId = row.dataset.pageId
+    const level = parseInt(row.dataset.level)
+
+    if (this.isCollapsed(pageId)) {
+      this.expand(pageId, level)
+    } else {
+      this.collapse(pageId, level)
+    }
+
+    this.saveCollapsedState()
+  }
+
+  collapse(pageId, level) {
+    // Add to collapsed set
+    if (!this.collapsedValue.includes(pageId)) {
+      this.collapsedValue = [...this.collapsedValue, pageId]
+    }
+
+    // Hide all descendant rows
+    const descendants = this.getDescendantRows(pageId, level)
+    descendants.forEach(row => {
+      const tableRow = this.getTableRow(row)
+      if (tableRow) {
+        tableRow.style.display = 'none'
+      }
+    })
+
+    // Update toggle icon
+    this.updateToggleIcon(pageId, true)
+  }
+
+  expand(pageId, level) {
+    // Remove from collapsed set
+    this.collapsedValue = this.collapsedValue.filter(id => id !== pageId)
+
+    // Show direct children only (they will handle their own children)
+    const directChildren = this.getDirectChildRows(pageId, level)
+    directChildren.forEach(row => {
+      const tableRow = this.getTableRow(row)
+      if (tableRow) tableRow.style.display = ''
+    })
+
+    // Update toggle icon
+    this.updateToggleIcon(pageId, false)
+  }
+
+  getDescendantRows(pageId, parentLevel) {
+    const allRows = this.rowTargets
+    const parentIndex = allRows.findIndex(row => row.dataset.pageId === pageId)
+    const descendants = []
+
+    for (let i = parentIndex + 1; i < allRows.length; i++) {
+      const rowLevel = parseInt(allRows[i].dataset.level)
+      if (rowLevel <= parentLevel) break
+      descendants.push(allRows[i])
+    }
+
+    return descendants
+  }
+
+  getDirectChildRows(pageId, parentLevel) {
+    const allRows = this.rowTargets
+    const parentIndex = allRows.findIndex(row => row.dataset.pageId === pageId)
+    const children = []
+
+    for (let i = parentIndex + 1; i < allRows.length; i++) {
+      const rowLevel = parseInt(allRows[i].dataset.level)
+      if (rowLevel <= parentLevel) break
+      if (rowLevel === parentLevel + 1) children.push(allRows[i])
+    }
+
+    return children
+  }
+
+  isCollapsed(pageId) {
+    return this.collapsedValue.includes(pageId)
+  }
+
+  updateToggleIcon(pageId, collapsed) {
+    const row = this.rowTargets.find(r => r.dataset.pageId === pageId)
+    if (!row) return
+
+    const toggle = row.querySelector('[data-tree-target="toggle"]')
+    if (!toggle) return
+
+    const icon = toggle.querySelector('i')
+    if (icon) {
+      if (collapsed) {
+        icon.classList.remove('fa-chevron-down')
+        icon.classList.add('fa-chevron-right')
+      } else {
+        icon.classList.remove('fa-chevron-right')
+        icon.classList.add('fa-chevron-down')
+      }
+    }
+  }
+
+  loadCollapsedState() {
+    try {
+      const stored = localStorage.getItem('panda-cms-pages-collapsed')
+      if (stored) {
+        this.collapsedValue = JSON.parse(stored)
+
+        // First, show all pages at level 1 (direct children of Home)
+        this.rowTargets.forEach(row => {
+          const level = parseInt(row.dataset.level)
+          if (level === 1) {
+            const tableRow = this.getTableRow(row)
+            if (tableRow) tableRow.style.display = ''
+          }
+        })
+
+        // Then apply collapsed state - hiding descendants of collapsed items
+        this.collapsedValue.forEach(pageId => {
+          const row = this.rowTargets.find(r => r.dataset.pageId === pageId)
+          if (row) {
+            const level = parseInt(row.dataset.level)
+            this.collapse(pageId, level)
+          }
+        })
+
+        // For level 1 items NOT in collapsed list, show their children
+        this.rowTargets.forEach(row => {
+          const level = parseInt(row.dataset.level)
+          const pageId = row.dataset.pageId
+          const hasToggle = row.querySelector('[data-tree-target="toggle"]')
+
+          if (level === 1 && hasToggle && !this.isCollapsed(pageId)) {
+            // This level 1 item is expanded, show its direct children
+            this.getDirectChildRows(pageId, level).forEach(childRow => {
+              const tableRow = this.getTableRow(childRow)
+              if (tableRow) tableRow.style.display = ''
+            })
+          }
+        })
+
+        // Fade in the tree after loading state
+        this.showTree()
+      }
+    } catch (e) {
+      console.error('Error loading collapsed state:', e)
+    }
+  }
+
+  showTree() {
+    // Fade in the container
+    if (this.hasContainerTarget) {
+      this.containerTarget.style.opacity = '1'
+    }
+  }
+
+  saveCollapsedState() {
+    try {
+      localStorage.setItem('panda-cms-pages-collapsed', JSON.stringify(this.collapsedValue))
+    } catch (e) {
+      console.error('Error saving collapsed state:', e)
+    }
+  }
+}

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

@@ -1,14 +1,12 @@
 // 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
+import { application } from "/panda/core/application.js"
 
-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/page.rb

@@ -38,12 +38,22 @@ 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
+
       # 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 +66,31 @@ 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
+
       private
 
       def validate_unique_path_in_scope
@@ -124,6 +159,12 @@ 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
+        self.cached_last_updated_at = Time.current
+      end
     end
   end
 end

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

@@ -33,6 +33,7 @@ module Panda
       enum :status, {
         active: "active",
         draft: "draft",
+        pending_review: "pending_review",
         hidden: "hidden",
         archived: "archived"
       }

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", link: 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">
+    <%= render 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[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 %>
-      </tbody>
-    </table>
-  </div>
+      <% end %>
+    <% end %>
+
+    <% table.column("Submitted") do |submission| %>
+      <%= time_ago_in_words(submission.created_at) %> ago
+    <% end %>
+  <% end %>
 <% end %>

data/app/views/panda/cms/admin/menus/_menu_item_fields.html.erb

@@ -0,0 +1,11 @@
+<div class="mb-6 pb-6 border-b border-gray-200 dark:border-gray-700 nested-form-wrapper" data-new-record="<%= form.object.new_record? %>">
+  <%= form.text_field :text, placeholder: "Menu item text" %>
+  <%= form.collection_select :panda_cms_page_id, Panda::CMS::Page.order(:title), :id, :title, { include_blank: "Select a page (optional)" }, { class: "mt-1" } %>
+  <%= form.text_field :external_url, placeholder: "External URL (optional)" %>
+
+  <div class="mt-3">
+    <%= render Panda::Core::Admin::ButtonComponent.new(text: "Remove", action: :delete, link: "#", size: :small, data: { action: "click->nested-form#remove" }) %>
+  </div>
+
+  <%= form.hidden_field :_destroy %>
+</div>