avo 1.25.2 → 2.0.0

data/app/components/avo/fields/common/status_viewer_component.html.erb

@@ -5,9 +5,9 @@
 %>
 <div class="flex flex-shrink-0 <%= classes %> items-center">
   <% if @status == 'success' %>
-    <%= helpers.svg 'check-circle-sm', class: 'h-4' %>
+    <%= helpers.svg 'heroicons/solid/check-circle', class: 'h-4' %>
   <% elsif @status == 'failed' %>
-    <%= helpers.svg 'x-circle-sm', class: 'h-4' %>
+    <%= helpers.svg 'heroicons/solid/x-circle', class: 'h-4' %>
   <% elsif @status == 'loading' %>
     <div class="spinner">
       <div class="double-bounce1 bg-gray-600"></div>

data/app/components/avo/fields/external_image_field/index_component.html.erb

@@ -3,7 +3,7 @@
     <%= image_tag @field.value,
       height: @field.height,
       width: @field.width,
-      style: "border-radius: #{@field.radius}px"
+      style: "border-radius: #{@field.radius}px; max-height: #{@field.height}#{@field.height.to_s&.ends_with?('px') ? '' : 'px'};"
     %>
   <% end %>
 <% end %>

data/app/components/avo/fields/file_field/edit_component.html.erb

@@ -1,7 +1,7 @@
 <%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
   <% if @field.value.present? %>
     <div class="mb-2">
-      <%= render Avo::Fields::Common::SingleFileViewerComponent.new resource: @resource, id: @field.id, file: @field.value, is_image: @field.is_image, is_audio: @field.is_audio, button_size: :md %>
+      <%= render Avo::Fields::Common::SingleFileViewerComponent.new resource: @resource, field: @field %>
     </div>
   <% end %>
 

data/app/components/avo/fields/file_field/show_component.html.erb

@@ -1,3 +1,3 @@
 <%= show_field_wrapper field: @field do %>
-  <%= render Avo::Fields::Common::SingleFileViewerComponent.new resource: @resource, id: @field.id, file: @field.value.attachment, is_image: @field.is_image, is_audio: @field.is_audio,  button_size: :md %>
+  <%= render Avo::Fields::Common::SingleFileViewerComponent.new resource: @resource, field: @field %>
 <% end %>

data/app/components/avo/fields/has_many_field/show_component.html.erb

@@ -1,3 +1,3 @@
-<turbo-frame id="<%= @field.turbo_frame %>" src="<%= @field.frame_url %>" target="_top">
+<turbo-frame id="<%= @field.turbo_frame %>" src="<%= @field.frame_url %>" target="_top" class="block">
   <%= render(Avo::LoadingComponent.new(title: @field.name)) %>
 </turbo-frame>

data/app/components/avo/fields/has_one_field/show_component.html.erb

@@ -1,20 +1,20 @@
 <% if @field.value %>
-  <turbo-frame id="<%= @field.turbo_frame %>" src="<%= @field.frame_url %>" target="_top">
+  <turbo-frame id="<%= @field.turbo_frame %>" src="<%= @field.frame_url %>" target="_top" class="block">
     <%= render(Avo::LoadingComponent.new(title: @field.name)) %>
   </turbo-frame>
 <% else %>
   <%= render Avo::PanelComponent.new(title: @field.id.capitalize) do |c| %>
     <% c.tools do %>
       <% if !@field.readonly && can_attach? %>
-        <%= a_link attach_path, color: 'indigo', 'data-turbo-frame': 'attach_modal' do %>
-          <%= svg 'view-grid-add' %> <%= t('avo.attach_item', item: @field.id).capitalize %>
+        <%= a_link attach_path, icon: 'heroicons/outline/link', color: :primary, 'data-turbo-frame': 'attach_modal' do %>
+          <%= t('avo.attach_item', item: @field.id).capitalize %>
         <% end %>
       <% end %>
     <% end %>
 
     <% c.body do %>
       <div class="py-8 flex justify-center items-center">
-        <%= empty_state @field.id %>
+        <%= empty_state resource_name: @field.id, related_name: params[:related_name] %>
       </div>
     <% end %>
   <% end %>

data/app/components/avo/fields/heading_field/edit_component.html.erb

@@ -1,3 +1,3 @@
-<div <% if @index == 0 %> class="overflow-hidden rounded-t-xl" <% end %> data-field-id="<%= @field.id %>">
+<div <% if @index == 0 %> class="overflow-hidden rounded-t" <% end %> data-field-id="<%= @field.id %>">
   <%= render Avo::Fields::Common::HeadingComponent.new value: @field.name, as_html: @field.as_html %>
 </div>

data/app/components/avo/fields/heading_field/show_component.html.erb

@@ -1,3 +1,3 @@
-<div <% if @index == 0 %> class="overflow-hidden rounded-t-xl" <% end %> data-field-id="<%= @field.id %>">
+<div <% if @index == 0 %> class="overflow-hidden rounded-t" <% end %> data-field-id="<%= @field.id %>">
   <%= render Avo::Fields::Common::HeadingComponent.new value: @field.name, as_html: @field.as_html %>
 </div>

data/app/components/avo/fields/trix_field/edit_component.html.erb

@@ -9,6 +9,7 @@
     data-hide-attachment-filename="<%= @field.hide_attachment_filename %>"
     data-hide-attachment-filesize="<%= @field.hide_attachment_filesize %>"
     data-hide-attachment-url="<%= @field.hide_attachment_url %>"
+    class="relative block overflow-x-auto max-w-full"
   >
     <% trix_id = "trix_#{@resource.name.underscore}_#{@field.id}" %>
     <trix-editor data-trix-field-target="editor" input="<%= trix_id %>" placeholder="<%= @field.placeholder %>"><%== @field.value %></trix-editor>

data/app/components/avo/filters_component.html.erb

@@ -0,0 +1,37 @@
+<div data-controller="toggle-panel">
+  <div class="relative w-full flex justify-between z-30">
+    <%= a_button class: 'focus:outline-none',
+      color: :primary,
+      size: :sm,
+      icon: 'filter',
+      title: t('avo.click_to_reveal_filters'),
+      'data-button': 'resource-filters',
+      'data-action': 'click->toggle-panel#togglePanel',
+      'data-tippy': 'tooltip' do
+    %>
+    <%= t 'avo.filters' %>
+    <% if params[:filters].present? %>
+      <span class="ml-1">(<%=JSON.parse(Base64.decode64(params[:filters])).count%> applied)</span>
+    <% end %>
+  <% end %>
+  <div
+      class="absolute block inset-auto sm:right-0 top-full bg-white min-w-[300px] mt-2 z-20 shadow-modal rounded hidden divide-y divide-gray-300"
+      data-toggle-panel-target="panel"
+    >
+    <% @filters.each do |filter| %>
+      <%= render partial: filter.class.template, locals: {filter: filter} %>
+    <% end %>
+    <div class="p-4 border-gray-300 border-t">
+      <% if params[:filters].present? %>
+        <%= a_link helpers.resources_path(resource: @resource, filters: nil, keep_query_params: true), color: :gray, size: :sm, class: 'w-full justify-center' do %>
+          <%= t('avo.reset_filters') %>
+        <% end %>
+      <% else %>
+        <%= a_button class: 'w-full justify-center', disabled: true do %>
+          <%= t('avo.reset_filters') %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</div>
+</div>

data/app/components/avo/filters_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class Avo::FiltersComponent < ViewComponent::Base
+  include Avo::ApplicationHelper
+
+  def initialize(filters: [], resource: nil)
+    @filters = filters
+    @resource = resource
+  end
+
+  def render?
+    @filters.present?
+  end
+end

data/app/components/avo/{alerts_component.html.erb → flash_alerts_component.html.erb}

@@ -1,3 +1,3 @@
-<% helpers.flash.each do |type, message| %>
+<% @flashes.each do |type, message| %>
   <%= render Avo::AlertComponent.new type.to_sym, message %>
 <% end %>

data/app/components/avo/flash_alerts_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Avo::FlashAlertsComponent < ViewComponent::Base
+  include Avo::ApplicationHelper
+
+  def initialize(flashes: [])
+    @flashes = flashes
+  end
+end

data/app/components/avo/index/field_wrapper_component.html.erb

@@ -1,7 +1,13 @@
-<td class="px-4 py-2 leading-tight whitespace-nowrap h-12 text-slate-800 <%= @classes %>" data-field-id="<%= @field.id %>" data-field-type="<%= @field.type %>">
+<td class="min-h-[3rem] px-4 py-3 leading-tight whitespace-nowrap h-full text-slate-800 <%= @classes %>" data-field-id="<%= @field.id %>" data-field-type="<%= @field.type %>">
   <% if @field.value.blank? && @dash_if_blank %>
     —
   <% else %>
-    <%= content %>
+    <% if @center_content %>
+    <div class="flex items-center justify-center">
+      <%= content %>
+    </div>
+    <% else %>
+      <%= content %>
+    <% end %>
   <% end %>
 </td>

data/app/components/avo/index/field_wrapper_component.rb

@@ -1,9 +1,10 @@
 # frozen_string_literal: true
 
 class Avo::Index::FieldWrapperComponent < ViewComponent::Base
-  def initialize(field: nil, dash_if_blank: true, **args)
+  def initialize(field: nil, dash_if_blank: true, center_content: false, **args)
     @field = field
     @dash_if_blank = dash_if_blank
+    @center_content = center_content
     @classes = args[:class].present? ? args[:class] : ""
     @args = args
   end

data/app/components/avo/index/grid_item_component.html.erb

@@ -1,20 +1,24 @@
-<div class="relative bg-white rounded-xl shadow-xl flex flex-col group"
+<div
+  class="relative bg-white rounded shadow-modal flex flex-col group"
   <%== item_selector_init @resource %>
 >
-  <div class="relative w-full pb-3/4 rounded-t-xl overflow-hidden">
+  <div class="relative w-full pb-3/4 rounded-t overflow-hidden">
     <%== item_selector_input floating: true, size: :lg %>
-
     <% if cover.blank? %>
-      <%= render Avo::Index::GridCoverEmptyStateComponent.new %>
+      <%= link_to cover.link_to_resource do %>
+        <%= render Avo::Index::GridCoverEmptyStateComponent.new %>
+      <% end %>
     <% elsif cover.respond_to?(:to_image) && cover.to_image.present? %>
       <%= link_to_if cover.link_to_resource, image_tag(cover.to_image, class: 'absolute h-full w-full object-cover'), helpers.resource_path(model: @resource.model, resource: @resource), class: 'absolute h-full w-full object-cover', title: title.value %>
     <% elsif cover.type == 'file' %>
       <% if cover.value.attached? && cover.value.representable? %>
         <%= link_to_if cover.link_to_resource, image_tag(helpers.main_app.url_for(cover.value.variant(resize_to_limit: [480, 480])), class: 'absolute h-full w-full object-cover'), helpers.resource_path(model: @resource.model, resource: @resource), class: 'absolute h-full w-full object-cover', title: title.value %>
       <% else %>
-        <div class="absolute bg-gray-100 w-full h-full">
-          <%= helpers.svg 'avocado', class: 'relative transform -translate-x-1/2 -translate-y-1/2 h-20 text-gray-400 inset-auto top-1/2 left-1/2' %>
-        </div>
+        <%= link_to @resource.record_path do %>
+          <div class="absolute bg-gray-100 w-full h-full">
+            <%= helpers.svg 'avocado', class: 'relative transform -translate-x-1/2 -translate-y-1/2 h-20 text-gray-400 inset-auto top-1/2 left-1/2' %>
+          </div>
+        <% end %>
       <% end %>
     <% elsif cover.value.present? %>
       <%= link_to_if cover.link_to_resource, image_tag(cover.value, class: 'absolute h-full w-full object-cover'), helpers.resource_path(model: @resource.model, resource: @resource), class: 'absolute h-full w-full object-cover', title: title.value %>
@@ -23,11 +27,11 @@
     <% end %>
   </div>
   <div class="grid grid-cols-1 place-content-between p-4 h-full">
-    <div class="mb-4">
+    <div class="mb-4 h-full flex flex-col space-between">
       <div class="grid font-semibold leading-tight text-lg mb-2">
         <%= link_to_if title.link_to_resource, title.value, helpers.resource_path(model: @resource.model, resource: @resource) if title.present? %>
       </div>
-      <div class="text-sm break-words">
+      <div class="text-sm break-words text-gray-500">
         <%= body.value if body.present? %>
       </div>
     </div>
@@ -36,4 +40,3 @@
     </div>
   </div>
 </div>
-

data/app/components/avo/index/ordering/buttons_component.rb

@@ -36,6 +36,8 @@ class Avo::Index::Ordering::ButtonsComponent < Avo::Index::Ordering::BaseCompone
   end
 
   def visible_on_option
+    return [] if ordering.nil?
+
     [ordering[:visible_on]].flatten
   end
 

data/app/components/avo/index/resource_controls_component.html.erb

@@ -1,8 +1,9 @@
-<div class="space-x-2 flex flex-row justify-around items-center w-full">
+<div class="space-x-2 flex flex-row justify-around w-full">
+  <% button_classes = "text-gray-600 h-6 hover:text-gray-600" %>
   <%= render Avo::Index::Ordering::ButtonsComponent.new resource: @resource, reflection: @reflection, view_type: @view_type %>
 
   <% if can_view? %>
-    <%= link_to helpers.svg('eye', class: 'text-gray-400 h-6 hover:text-gray-600'),
+    <%= link_to helpers.svg('eye', class: button_classes),
       show_path,
       title: t('avo.view_item', item: singular_resource_name).capitalize,
       data: {
@@ -14,7 +15,7 @@
   <% end %>
 
   <% if can_edit? %>
-    <%= link_to helpers.svg('edit', class: 'text-gray-400 h-6 hover:text-gray-600'),
+    <%= link_to helpers.svg('edit', class: button_classes),
       edit_path,
       title: t('avo.edit_item', item: singular_resource_name).capitalize,
       data: {
@@ -30,7 +31,7 @@
     <%= form_with url: helpers.resource_detach_path(params[:resource_name], params[:id], params[:related_name], @resource.model.id), method: :delete, html: {
         'data-turbo-frame': params[:turbo_frame]
       } do |form| %>
-      <%= form.button helpers.svg('trash-sm', class: 'text-gray-400 h-6 hover:text-gray-600'),
+      <%= form.button helpers.svg('detach', class: button_classes),
         title: t('avo.detach_item', item: singular_resource_name).capitalize,
         type: :submit,
         data: {
@@ -53,7 +54,7 @@
       html: {
         'data-turbo-frame': params[:turbo_frame]
       } do |form| %>
-      <%= form.button helpers.svg('trash', class: 'text-gray-400 h-6 hover:text-gray-600'),
+      <%= form.button helpers.svg('trash', class: button_classes),
         title: t('avo.delete_item',  item: singular_resource_name).capitalize,
         type: :submit,
         data: {

data/app/components/avo/index/resource_grid_component.html.erb

@@ -1,5 +1,5 @@
 <% if @resources.present?%>
-  <div class="w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6 gap-6">
+  <div class="w-full grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-6 mt-8">
     <% @resources.each_with_index do |resource, index| %>
       <% cache_if Avo.configuration.cache_resources_on_index_view, resource.cache_hash(@parent_model) do %>
         <%= render(Avo::Index::GridItemComponent.new(resource: resource, reflection: @reflection, parent_model: @parent_model)) %>
@@ -7,7 +7,7 @@
     <% end %>
   </div>
 <% else %>
-  <div class="bg-white rounded-xl shadow-xl">
-    <%= helpers.empty_state @resource.name.downcase.pluralize %>
+  <div class="bg-white rounded shadow-panel">
+    <%= helpers.empty_state resource_name: @resource.name.downcase.pluralize, related_name: params[:related_name], view_type: :grid %>
   </div>
 <% end %>

data/app/components/avo/index/resource_table_component.html.erb

@@ -1,16 +1,12 @@
-<div class="w-full">
-  <% if @resources.present?%>
-    <table class="w-full px-4 overflow-hidden" data-resource-name='<%= @resource.model_key %>' data-controller='item-select-all'>
-      <%= render partial: 'avo/partials/table_header', locals: {fields: @resource.get_fields(reflection: @reflection)} %>
-      <tbody>
-        <% @resources.each_with_index do |resource, index| %>
-          <% cache_if Avo.configuration.cache_resources_on_index_view, resource.cache_hash(@parent_model) do %>
-            <%= render Avo::Index::TableRowComponent.new(resource: resource, reflection: @reflection, parent_model: @parent_model) %>
-          <% end %>
+<div class="w-full ">
+  <table class="w-full px-4 bg-white rounded" data-resource-name='<%= @resource.model_key %>' data-controller='item-select-all'>
+    <%= render partial: 'avo/partials/table_header', locals: {fields: @resource.get_fields(reflection: @reflection)} %>
+    <tbody class="divide-y">
+      <% @resources.each_with_index do |resource, index| %>
+        <% cache_if Avo.configuration.cache_resources_on_index_view, resource.cache_hash(@parent_model) do %>
+          <%= render Avo::Index::TableRowComponent.new(resource: resource, reflection: @reflection, parent_model: @parent_model) %>
         <% end %>
-      </tbody>
-    </table>
-  <% else %>
-    <%= helpers.empty_state @resource.name.downcase.pluralize %>
-  <% end %>
+      <% end %>
+    </tbody>
+  </table>
 </div>

data/app/components/avo/index/table_row_component.html.erb

@@ -1,5 +1,5 @@
 <tr
-  class="hover:bg-sky-50 hover:shadow-row relative z-20 border-b"
+  class="bg-white hover:bg-blue-50 hover:shadow-row hover:z-[21] relative z-20 border-b"
   <%== item_selector_init @resource %>
 >
   <td class="w-10">

data/app/components/avo/modal_component.html.erb

@@ -1,17 +1,19 @@
-<div class="modal-container fixed inset-0 w-full min-h-screen z-50 flex justify-center items-center"
+<div class="modal-container fixed inset-0 w-full min-h-screen z-[100] flex justify-center items-center"
   data-controller="modal"
   data-modal-target="modal"
 >
   <div aria-expanded="true" class="modal-overlay absolute w-full h-full bg-opacity-25 bg-gray-800 flex justify-center items-center" data-action="click->modal#close"></div>
-  <div aria-expanded="true" role="dialog" aria-modal="true" class="modal-body rounded-xl overflow-hidden inset-auto w-11/12 md:3/4 lg:w-1/2 sm:max-w-168 min-h-1/3 bg-white flex z-50 relative">
+  <div aria-expanded="true" role="dialog" aria-modal="true" class="modal-body rounded-lg overflow-hidden inset-auto w-11/12 lg:w-1/2 sm:max-w-168 min-h-1/4 bg-white flex z-50 relative shadow-modal">
     <div class="flex-1 flex flex-col justify-between">
-      <div class="p-4 my-4 text-lg tracking-wide font-bold text-center text-gray-700">
-        <%= heading %>
-      </div>
       <div>
-        <%= content %>
+        <div class="p-6 text-2xl tracking-normal font-semibold text-black">
+          <%= heading %>
+        </div>
+        <div class="px-6 text-base text-gray-500">
+          <%= content %>
+        </div>
       </div>
-      <div class="flex justify-end items-baseline space-x-4 p-4 bg-gray-200">
+      <div class="flex justify-end items-baseline space-x-4 p-4 bg-gray-100">
         <%= controls %>
       </div>
     </div>

data/app/{views/avo/partials/_paginator.html.erb → components/avo/paginator_component.html.erb}

@@ -1,24 +1,21 @@
 <%
-  per_page_options = [*Avo.configuration.per_page_steps, Avo.configuration.per_page.to_i, @index_params[:per_page].to_i]
+  per_page_options = [*Avo.configuration.per_page_steps, Avo.configuration.per_page.to_i, index_params[:per_page].to_i]
 
-  if @parent_resource.present?
+  if parent_resource.present?
     per_page_options.prepend Avo.configuration.via_per_page
   end
 
   per_page_options = per_page_options.sort.uniq
 %>
-
-<div class="bg-white px-4 flex items-center justify-between aborder-t aborder-slate-200 sm:px-6 rounded-xl">
-  <div class="hidden sm:flex-2 sm:flex sm:items-center sm:justify-between">
+<div class="flex flex-col sm:flex-row items-center justify-between aborder-t aborder-slate-200 rounded-xl space-y-2 sm:space-y-0">
+  <div class="flex-2 sm:flex sm:items-center sm:justify-between">
     <div>
       <div class="text-sm leading-5 text-slate-600 flex items-center">
-        <div class="mr-2"><%== pagy_info @pagy %></div>
-
         <div data-controller="per-page">
           <div class="flex items-center">
             <%= select_tag 'per_page',
-              options_for_select(per_page_options, @index_params[:per_page]),
-              class: 'appearance-none inline-flex bg-slate-100 disabled:bg-slate-400 disabled:cursor-not-allowed focus:bg-white text-slate-700 disabled:text-slate-600 rounded-md py-1 px-2 leading-tight border border-slate-300 outline-none focus:border-slate-400 outline w-16 mr-1 text-sm',
+              options_for_select(per_page_options, index_params[:per_page]),
+              class: 'appearance-none inline-flex bg-white-100 disabled:bg-white-400 disabled:cursor-not-allowed focus:bg-white text-slate-700 disabled:text-slate-600 rounded-md py-1 px-2 leading-tight border border-slate-300 outline-none focus:border-slate-400 outline w-16 mr-1 text-sm',
               data: {
                 'turbo-frame': turbo_frame,
                 'per-page-target': 'selector',
@@ -26,12 +23,11 @@
               }
             %> <%= t('avo.per_page').downcase %>
           </div>
-
           <% per_page_options.each do |option| %>
-            <% if @parent_resource.present? %>
-              <%= link_to "Change to #{option} items per page", related_resources_path(@parent_resource.model_class, @resource.model_class, per_page: option, keep_query_params: true), class: 'hidden', 'data-per-page-option': option, 'data-turbo-frame': turbo_frame %>
+            <% if parent_resource.present? %>
+              <%= link_to "Change to #{option} items per page", helpers.related_resources_path(parent_resource.model_class, resource.model_class, per_page: option, keep_query_params: true), class: 'hidden', 'data-per-page-option': option, 'data-turbo-frame': turbo_frame %>
             <% else %>
-              <%= link_to "Change to #{option} items per page", resources_path(resource: @resource, per_page: option, keep_query_params: true), class: 'hidden', 'data-per-page-option': option, 'data-turbo-frame': turbo_frame %>
+              <%= link_to "Change to #{option} items per page", helpers.resources_path(resource: resource, per_page: option, keep_query_params: true), class: 'hidden', 'data-per-page-option': option, 'data-turbo-frame': turbo_frame %>
             <% end %>
           <% end %>
         </div>
@@ -39,10 +35,14 @@
     </div>
   </div>
   <div class="flex">
-    <div class="flex-2 sm:flex sm:items-center sm:justify-between">
-      <%# @todo: add first & last page. make the first and last buttons rounded %>
+    <div class="flex-2 sm:flex sm:items-center sm:justify-between space-y-2 sm:space-y-0 text-center sm:text-left">
+      <% if @pagy.count > 0 %>
+        <div class="text-sm text-slate-600 mr-4"><%== helpers.pagy_info @pagy %></div>
+      <% end %>
+
       <% if @pagy.pages > 1 %>
-        <%== pagy_nav @pagy %>
+        <%# @todo: add first & last page. make the first and last buttons rounded %>
+        <%== helpers.pagy_nav @pagy %>
       <% end %>
     </div>
   </div>

data/app/components/avo/paginator_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class Avo::PaginatorComponent < ViewComponent::Base
+  attr_reader :pagy
+  attr_reader :turbo_frame
+  attr_reader :index_params
+  attr_reader :resource
+  attr_reader :parent_resource
+
+  def initialize(resource: nil, parent_resource: nil, pagy:, turbo_frame:, index_params:)
+    @pagy = pagy
+    @turbo_frame = turbo_frame
+    @index_params = index_params
+    @resource = resource
+    @parent_resource = parent_resource
+  end
+end

data/app/components/avo/panel_component.html.erb

@@ -1,31 +1,35 @@
 <div <%== data_attributes %>>
-  <div class="mb-6">
-    <div>
-      <% if display_breadcrumbs? %>
-        <div class="breadcrumbs">
-          <%= helpers.render_breadcrumbs(separator: helpers.svg('chevron-right', class: 'inline-block h-3 stroke-current relative top-[-1px] ml-1' )) if Avo.configuration.display_breadcrumbs %>
+  <% if render_header? %>
+    <div class="bg-white rounded shadow p-4 flex-1 flex flex-col xl:flex-row justify-between mb-6">
+      <div class="overflow-hidden mr-4">
+        <% if display_breadcrumbs? %>
+          <div class="breadcrumbs truncate mb-2">
+            <%= helpers.render_breadcrumbs(separator: helpers.svg('chevron-right', class: 'inline-block h-3 stroke-current relative top-[-1px] ml-1' )) if Avo.configuration.display_breadcrumbs %>
+          </div>
+        <% end %>
+
+        <div class="text-2xl tracking-normal font-semibold text-gray-800 truncate" data-target="title">
+          <%= @title %>
         </div>
-      <% end %>
-      <div class="text-2xl tracking-normal font-bold text-gray-800 truncate" data-target="title">
-        <%= @title %>
-      </div>
-      <div class="text-sm tracking-normal text-gray-600" data-target="description">
-        <%== description %>
+
+        <% if description.present? %>
+        <div class="text-base tracking-normal font-medium text-gray-600 truncate" data-target="description">
+          <%== description %>
+        </div>
+        <% end %>
       </div>
-    </div>
 
-    <div>
-      <div class="flex justify-end space-x-2 mb-6">
+      <div class="flex-1 w-full flex flex-col sm:flex-row xl:justify-end sm:items-end space-y-2 sm:space-y-0 sm:space-x-2 mt-4 xl:mt-0">
         <%= tools %>
       </div>
     </div>
-  </div>
+  <% end %>
 
-  <div class="relative bg-white rounded-xl shadow-xl mb-8 <%= @body_classes %>">
+  <div class="relative bg-white rounded shadow <%= @body_classes %>">
     <%= body %>
   </div>
 
-  <div class="relative mb-8">
+  <div class="relative">
     <%= bare_content %>
   </div>
 

data/app/components/avo/panel_component.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class Avo::PanelComponent < ViewComponent::Base
+  attr_reader :title
+
   renders_one :tools
   renders_one :body
   renders_one :bare_content
@@ -24,12 +26,16 @@ class Avo::PanelComponent < ViewComponent::Base
   end
 
   def display_breadcrumbs?
-    @display_breadcrumbs
+    @display_breadcrumbs == true && Avo.configuration.display_breadcrumbs == true
   end
 
   def description
     return @description if @description.present?
 
-    '&nbsp;'
+    ""
+  end
+
+  def render_header?
+    @title.present? || description.present? || tools.present? || display_breadcrumbs?
   end
 end

data/app/components/avo/profile_item_component.html.erb

@@ -0,0 +1,3 @@
+<%= link_to @path, class: "flex-1 flex items-center justify-center bg-white text-left cursor-pointer text-gray-800 font-semibold hover:bg-blue-100 block px-4 py-1 w-full py-3 text-center rounded w-full" do %>
+  <%= @icon if @icon.present? %> <%= @label %>
+<% end %>

data/app/components/avo/profile_item_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Avo::ProfileItemComponent < ViewComponent::Base
+  def initialize(label: nil, icon: nil, path: nil, active: :inclusive, target: nil)
+    @label = label
+    @icon = icon
+    @path = path
+    @active = active
+    @target = target
+  end
+end

data/app/components/avo/resource_component.rb

@@ -17,7 +17,7 @@ class Avo::ResourceComponent < Avo::BaseComponent
     if @reflection.present?
       reflection_resource = ::Avo::App.get_resource_by_model_name(@reflection.active_record.name)
       reflection_resource.hydrate(model: @parent_model) if @parent_model.present?
-      association_name = params['related_name']
+      association_name = params["related_name"]
 
       if association_name.present?
         method_name = "#{policy_method}_#{association_name}?".to_sym

data/app/components/avo/show/field_wrapper_component.html.erb

@@ -1,16 +1,9 @@
-<div class="flex items-start leading-tight <%= @classes %> min-h-16" data-field-id="<%= @field.id %>" data-field-type="<%= @field.type %>">
-  <div class="h-16 flex self-start items-center text-slate-800">
-    <div class="w-48 md:w-64 px-8" data-slot="label">
-      <%= @field.name %> <% if @field.required %> <span class="text-red-600">*</span> <% end %>
-    </div>
+<%= render Avo::CommonFieldWrapperComponent.new(field: @field, dash_if_blank: @dash_if_blank, full_width: @full_width) do %>
+  <div class="self-center <% if @full_width %> w-full <% else %> w-full md:w-8/12 <% end %>" data-slot="value">
+    <% if @field.value.blank? and @dash_if_blank %>
+      —
+    <% else %>
+      <%= content %>
+    <% end %>
   </div>
-  <div class="flex-1 flex flex-row h-full ml-2 min-h-inherit">
-    <div class="px-6 py-3 self-center <% if @full_width %> w-full <% else %> w-8/12 <% end %>" data-slot="value">
-      <% if @field.value.blank? and @dash_if_blank %>
-        —
-      <% else %>
-        <%= content %>
-      <% end %>
-    </div>
-  </div>
-</div>
+<% end %>

data/app/components/avo/show/field_wrapper_component.rb

@@ -7,9 +7,5 @@ class Avo::Show::FieldWrapperComponent < ViewComponent::Base
     @classes = args[:class].present? ? args[:class] : ""
     @args = args
     @full_width = full_width
-
-    if (@index != 0) || @displayed_in_modal
-      @classes += " border-t"
-    end
   end
 end