avo 2.5.2.pre.6 → 2.5.2.pre.7

data/app/assets/stylesheets/avo.css

@@ -4,6 +4,7 @@
 @import './../../../node_modules/trix/dist/trix.css';
 @import './../../../node_modules/flatpickr/dist/flatpickr.css';
 @import './../../../node_modules/@algolia/autocomplete-theme-classic/dist/theme.css';
+@import './../../../node_modules/@yaireo/tagify/dist/tagify.css';
 
 @import 'tailwindcss/base';
 
@@ -11,12 +12,14 @@
 @import './css/buttons.css';
 @import './css/typography.css';
 @import './css/tooltips.css';
+@import './css/alerts.css';
 @import './css/loader.css';
 @import './css/pagination.css';
 @import './css/breadcrumbs.css';
 @import './css/search.css';
 @import './css/active-storage.css';
 @import './css/spinner.css';
+@import './css/tags.css';
 
 @import './css/components/status.css';
 @import './css/components/code.css';
@@ -88,36 +91,3 @@ trix-editor {
   max-height: 320px !important;
   overflow-y: auto;
 }
-
-.scroll-shadows {
-  background:
-    /* Shadow Cover TOP */
-    linear-gradient(
-      #F6F6F7 30%,
-      #F6F6F7
-    ) center top,
-
-    /* Shadow Cover BOTTOM */
-    linear-gradient(
-      #F6F6F7,
-      #F6F6F7 70%
-    ) center bottom,
-
-    /* Shadow TOP */
-    radial-gradient(
-      farthest-side at 50% 0,
-      rgba(0, 0, 0, 0.2),
-      rgba(0, 0, 0, 0)
-    ) center top,
-
-    /* Shadow BOTTOM */
-    radial-gradient(
-      farthest-side at 50% 100%,
-      rgba(0, 0, 0, 0.2),
-      rgba(0, 0, 0, 0)
-    ) center bottom;
-
-  background-repeat: no-repeat;
-  background-size: 100% 34px, 100% 34px, 100% 14px, 100% 14px;
-  background-attachment: local, local, scroll, scroll;
-}

data/app/assets/stylesheets/css/alerts.css

@@ -0,0 +1,35 @@
+#toast-container > div {
+  box-shadow: none;
+  background-size: 1.5rem;
+  background-position: 0.8rem 0.8rem;
+  width: 500px;
+
+  @apply shadow-md opacity-100 border border-gray-200 rounded-md pt-3 pr-3 pb-3 bg-white;
+
+  &:hover {
+    @apply shadow-xl;
+  }
+
+  .toast-title {
+    @apply text-gray-800;
+  }
+  .toast-message {
+    @apply text-gray-800;
+  }
+
+  &.toast-success {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzM4YTE2OSI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNi4yNjcgMy40NTVhMy4wNjYgMy4wNjYgMCAwMDEuNzQ1LS43MjMgMy4wNjYgMy4wNjYgMCAwMTMuOTc2IDAgMy4wNjYgMy4wNjYgMCAwMDEuNzQ1LjcyMyAzLjA2NiAzLjA2NiAwIDAxMi44MTIgMi44MTJjLjA1MS42NDMuMzA0IDEuMjU0LjcyMyAxLjc0NWEzLjA2NiAzLjA2NiAwIDAxMCAzLjk3NiAzLjA2NiAzLjA2NiAwIDAwLS43MjMgMS43NDUgMy4wNjYgMy4wNjYgMCAwMS0yLjgxMiAyLjgxMiAzLjA2NiAzLjA2NiAwIDAwLTEuNzQ1LjcyMyAzLjA2NiAzLjA2NiAwIDAxLTMuOTc2IDAgMy4wNjYgMy4wNjYgMCAwMC0xLjc0NS0uNzIzIDMuMDY2IDMuMDY2IDAgMDEtMi44MTItMi44MTIgMy4wNjYgMy4wNjYgMCAwMC0uNzIzLTEuNzQ1IDMuMDY2IDMuMDY2IDAgMDEwLTMuOTc2IDMuMDY2IDMuMDY2IDAgMDAuNzIzLTEuNzQ1IDMuMDY2IDMuMDY2IDAgMDEyLjgxMi0yLjgxMnptNy40NCA1LjI1MmExIDEgMCAwMC0xLjQxNC0xLjQxNEw5IDEwLjU4NiA3LjcwNyA5LjI5M2ExIDEgMCAwMC0xLjQxNCAxLjQxNGwyIDJhMSAxIDAgMDAxLjQxNCAwbDQtNHoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgLz4KPC9zdmc+Cg==) !important;
+  }
+
+  &.toast-warning {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0icmdiYSgyMTcsIDExOSwgNiwgMSkiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTguMjU3IDMuMDk5Yy43NjUtMS4zNiAyLjcyMi0xLjM2IDMuNDg2IDBsNS41OCA5LjkyYy43NSAxLjMzNC0uMjEzIDIuOTgtMS43NDIgMi45OEg0LjQyYy0xLjUzIDAtMi40OTMtMS42NDYtMS43NDMtMi45OGw1LjU4LTkuOTJ6TTExIDEzYTEgMSAwIDExLTIgMCAxIDEgMCAwMTIgMHptLTEtOGExIDEgMCAwMC0xIDF2M2ExIDEgMCAwMDIgMFY2YTEgMSAwIDAwLTEtMXoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgLz4KPC9zdmc+Cg==) !important;
+  }
+
+  &.toast-info {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0icmdiYSgzNywgOTksIDIzNSwgMSkiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTE4IDEwYTggOCAwIDExLTE2IDAgOCA4IDAgMDExNiAwem0tNy00YTEgMSAwIDExLTIgMCAxIDEgMCAwMTIgMHpNOSA5YTEgMSAwIDAwMCAydjNhMSAxIDAgMDAxIDFoMWExIDEgMCAxMDAtMnYtM2ExIDEgMCAwMC0xLTFIOXoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgLz4KPC9zdmc+Cg==) !important;
+  }
+
+  &.toast-error {
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0icmdiYSgyMjAsIDM4LCAzOCwgMSkiPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTE4IDEwYTggOCAwIDExLTE2IDAgOCA4IDAgMDExNiAwem0tNyA0YTEgMSAwIDExLTIgMCAxIDEgMCAwMTIgMHptLTEtOWExIDEgMCAwMC0xIDF2NGExIDEgMCAxMDIgMFY2YTEgMSAwIDAwLTEtMXoiIGNsaXAtcnVsZT0iZXZlbm9kZCIgLz4KPC9zdmc+Cg==) !important;
+  }
+}

data/app/assets/stylesheets/css/search.css

@@ -32,7 +32,7 @@
 
 .aa-DetachedFormContainer,
 .aa-DetachedContainer .aa-Panel {
-  @apply bg-gray-50 border-b-0;
+  @apply bg-gray-100 border-b-0;
 }
 
 .aa-Form {

data/app/assets/stylesheets/css/tags.css

@@ -0,0 +1,16 @@
+tags.tagify {
+  --tag-inset-shadow-size: 3em;
+}
+
+tags.tagify {
+  @apply !p-0;
+
+  span.tagify__input {
+    @apply my-1;
+  }
+}
+
+tag.tagify__tag {
+  @apply text-sm my-1 mb-0;
+}
+

data/app/assets/svgs/heroicons/solid/user-remove.svg

@@ -1,3 +1,3 @@
-or<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
   <path d="M11 6a3 3 0 11-6 0 3 3 0 016 0zM14 17a6 6 0 00-12 0h12zM13 8a1 1 0 100 2h4a1 1 0 100-2h-4z"/>
 </svg>

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

@@ -3,8 +3,7 @@
   data-actions-picker-enabled-class="text-black hover:bg-blue-500 hover:text-white"
   data-actions-picker-disabled-class="cursor-wait text-gray-500"
 >
-  <%= a_button style: :outline,
-    color: :primary,
+  <%= a_button style: :primary,
     class: "focus:outline-none",
     icon: 'arrow-circle-right',
     icon_class: 'transform rotate-90',

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

@@ -13,7 +13,7 @@
           <%== message %>
         </p>
       </div>
-      <div class="ml-4 flex-shrink-0 flex items-center">
+      <div class="ml-4 flex-shrink-0 flex">
         <button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
           <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>

data/app/components/avo/alert_component.rb

@@ -12,10 +12,7 @@ class Avo::AlertComponent < ViewComponent::Base
   end
 
   def icon
-    return "heroicons/solid/x-circle" if is_error?
-    return "heroicons/solid/exclamation" if is_warning?
-    return "heroicons/solid/exclamation-circle" if is_info?
-    return "heroicons/solid/check-circle" if is_success?
+    return "x-circle" if is_error?
 
     "check-circle"
   end
@@ -24,31 +21,15 @@ class Avo::AlertComponent < ViewComponent::Base
     result = "max-w-lg w-full shadow-lg rounded px-4 py-3 rounded relative border text-white pointer-events-auto"
 
     result += if is_error?
-      " bg-red-400 border-red-600"
-    elsif is_success?
-      " bg-green-500 border-green-600"
-    elsif is_warning?
-      " bg-orange-400 border-orange-600"
-    elsif is_info?
-      " bg-blue-400 border-blue-600"
+      " bg-red-400 border-red-700"
+    else
+      " bg-green-400 border-green-700"
     end
 
     result
   end
 
   def is_error?
-    type.to_sym == :error || type.to_sym == :alert
-  end
-
-  def is_success?
-    type.to_sym == :success
-  end
-
-  def is_info?
-    type.to_sym == :notice || type.to_sym == :info
-  end
-
-  def is_warning?
-    type.to_sym == :warning
+    type.to_sym == :error
   end
 end

data/app/components/avo/button_component.rb

@@ -38,15 +38,14 @@ class Avo::ButtonComponent < ViewComponent::Base
   end
 
   def button_classes
-    classes = "button-component inline-flex flex-grow-0 items-center font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 transform transition duration-100 cursor-pointer disabled:cursor-not-allowed disabled:opacity-70 border justify-center active:outline active:outline-1 #{@class}"
+    classes = "button-component inline-flex flex-grow-0 items-center text-sm font-semibold leading-6 fill-current whitespace-nowrap transition duration-100 transform transition duration-100 cursor-pointer disabled:cursor-not-allowed disabled:opacity-70 border justify-center active:outline active:outline-1 #{@class}"
 
     classes += " rounded" if @rounded.present?
 
     classes += style_classes
 
-    classes += padding_classes
+    classes += @compact ? " px-1" : " px-4" # Same horizontal padding on all sizes
     classes += spacing_classes
-    classes += text_size_classes
 
     classes
   end
@@ -58,14 +57,10 @@ class Avo::ButtonComponent < ViewComponent::Base
   def full_content
     result = ""
     icon_classes = @icon_class
-    # space out the icon from the text if text is present
-    icon_classes += " mr-1" if content.present?
-    # add the icon height
-    icon_classes += icon_size_classes
+    icon_classes += full_content_icon_classes
 
-    # Add the icon
     result += helpers.svg(@icon, class: icon_classes) if @icon.present?
-
+    result += "<span class='w-0 m-0'>&nbsp;</span>"
     if content.present?
       result += "<span>#{content}</span>"
     end
@@ -108,58 +103,26 @@ class Avo::ButtonComponent < ViewComponent::Base
     when :sm
       " py-1"
     when :md
-      " py-1.5"
-    when :lg
       " py-2"
-    when :xl
+    when :lg
       " py-3"
     else
       ""
     end
   end
 
-  def padding_classes
-    return " px-1" if @compact
-
-    case @size.to_sym
-    when :xs
-      " px-2"
-    when :sm
-      " px-3"
-    when :md
-      " px-3"
-    when :lg
-      " px-5"
-    when :xl
-      " px-6"
-    else
-      "px-4"
-    end
-  end
-
-  def text_size_classes
-    case @size.to_sym
-    when :xs
-      " text-xs"
-    else
-      " text-sm"
-    end
-  end
-
   def style_classes
     case @style
     when :primary
       " bg-primary-500 text-white border-primary-500 hover:bg-primary-600 hover:border-primary-600 active:border-primary-700 active:outline-primary-700 active:bg-primary-600"
     when :outline
       " bg-white text-#{@color}-500 border-#{@color}-500 hover:bg-#{@color}-100 active:bg-#{@color}-100 active:border-#{@color}-500 active:outline-#{@color}-500"
-    when :text
-      " text-#{@color}-500 active:outline-#{@color}-500 hover:bg-gray-100 border-transparent"
     else
       ""
     end
   end
 
-  def icon_size_classes
+  def full_content_icon_classes
     icon_classes = ""
 
     case @size
@@ -172,12 +135,10 @@ class Avo::ButtonComponent < ViewComponent::Base
       # When icon is solo we need to add an offset
       icon_classes += " my-1" if content.blank?
     when :md
-      icon_classes += " h-4 my-1.5"
+      icon_classes += " h-5"
       # When icon is solo we need to add an offset
       icon_classes += " my-0.5" if content.blank?
     when :lg
-      icon_classes += " h-5 my-2"
-    when :xl
       icon_classes += " h-6"
     end
 

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

@@ -0,0 +1,27 @@
+<%= edit_field_wrapper field: @field, index: @index, form: @form, resource: @resource, displayed_in_modal: @displayed_in_modal do %>
+  <div data-controller="tags-field">
+    <%# dummy field %>
+    <%= text_field_tag "#{@field.id}-dummy", '',
+      class: helpers.input_classes('w-full', has_error: @field.model_errors.include?(@field.id)),
+      placeholder: @field.placeholder,
+      disabled: @field.readonly,
+      value: '',
+      data: {
+        'tags-field-target': 'fakeInput',
+      } %>
+    <%# real field %>
+    <%= @form.text_field @field.id,
+      class: helpers.input_classes('hidden w-full', has_error: @field.model_errors.include?(@field.id)),
+      placeholder: @field.placeholder,
+      disabled: @field.readonly,
+      value: @field.field_value.to_json,
+      data: {
+        'tags-field-target': 'input',
+        'whitelist-items': @field.suggestions.to_json,
+        'blacklist-items': @field.blacklist.to_json,
+        'enforce-suggestions': @field.enforce_suggestions ? 1 : 0,
+        'delimiters': @field.delimiters,
+        'close-on-select': @field.close_on_select ? 1 : 0,
+      } %>
+  </div>
+<% end %>

data/app/components/avo/fields/tags_field/edit_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Avo::Fields::TagsField::EditComponent < Avo::Fields::EditComponent
+end

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

@@ -0,0 +1,14 @@
+<%= index_field_wrapper field: @field do %>
+  <div class="flex gap-1 items-center flex-nowrap">
+    <% value.take(3).each do |item| %>
+      <% if @field.acts_as_taggable_on.present? %>
+        <%= render Avo::Fields::TagsField::TagComponent.new(label: item['value']) %>
+      <% else %>
+        <%= render Avo::Fields::TagsField::TagComponent.new(label: item) %>
+      <% end %>
+    <% end %>
+    <% if value.count > 3 %>
+      <%= render Avo::Fields::TagsField::TagComponent.new(label: '...', title: I18n.t('avo.x_items_more', count: value.count - 3)) %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/avo/fields/tags_field/index_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Avo::Fields::TagsField::IndexComponent < Avo::Fields::IndexComponent
+  def value
+    @field.field_value
+  end
+end

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

@@ -0,0 +1,7 @@
+<%= show_field_wrapper field: @field, index: @index do %>
+  <div class="flex gap-1 items-center flex-wrap">
+    <% @field.field_value.each do |item| %>
+      <%= render Avo::Fields::TagsField::TagComponent.new(label: label_from_item(item)) %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/avo/fields/tags_field/show_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Avo::Fields::TagsField::ShowComponent < Avo::Fields::ShowComponent
+  def label_from_item(item)
+    if @field.acts_as_taggable_on.present?
+      item['value']
+    else
+      item
+    end
+  end
+end

data/app/components/avo/fields/tags_field/tag_component.html.erb

@@ -0,0 +1,9 @@
+<div class="flex px-2 py-1 rounded bg-gray-200 text-sm text-gray-800 font-normal flex-shrink-0"
+  <% if title.present? %>
+    data-tippy="tooltip"
+    title="<%= title %>"
+  <% end %>
+  data-target="tag-component"
+>
+  <%= label %>
+</div>

data/app/components/avo/fields/tags_field/tag_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class Avo::Fields::TagsField::TagComponent < ViewComponent::Base
+  attr_reader :label
+  attr_reader :title
+
+  def initialize(label: nil, title: nil)
+    @label = label
+    @title = title
+  end
+end

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

@@ -14,7 +14,7 @@
       <% 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 divide-y divide-gray-300 <%= 'hidden' unless params[:keep_filters_panel_open] == '1' %>"
+      class="absolute block inset-auto sm:right-0 top-full bg-white min-w-[300px] mt-2 z-20 shadow-modal rounded divide-y divide-gray-300 <%= 'hidden' unless params[:keep_filters_panel_open] %>"
       data-toggle-panel-target="panel"
     >
       <% @filters.each do |filter| %>

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

@@ -1,4 +1,4 @@
-<td class="min-h-[3rem] px-3 leading-tight whitespace-nowrap h-full text-slate-800 text-base <%= classes %>" data-field-id="<%= @field.id %>" data-field-type="<%= @field.type %>">
+<td class="min-h-[3rem] px-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 %>

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

@@ -1,3 +1,3 @@
-<div class="absolute bg-gray-50 w-full h-full">
+<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>

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

@@ -1,5 +1,5 @@
 <div class="w-full ">
-  <table class="w-full px-4 bg-white rounded" data-resource-name='<%= @resource.model_key %>' data-controller='item-select-all'>
+  <table class="w-full px-4 bg-white" 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| %>

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

@@ -1,5 +1,5 @@
 <tr
-  class="bg-white hover:bg-gray-50 hover:shadow-row hover:z-[21] 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 %>
 >
   <% if @resource.record_selector %>

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

@@ -1,7 +1,7 @@
 <div <%== data_attributes %>>
   <% if render_header? %>
-    <div class="flex-1 flex flex-col xl:flex-row justify-between mb-4">
-      <div class="overflow-hidden flex flex-col">
+    <div class="<%= white_panel_classes %> p-4 flex-1 flex flex-col xl:flex-row justify-between mb-6">
+      <div class="overflow-hidden mr-4 flex flex-col">
         <% 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 %>
@@ -13,7 +13,7 @@
         </div>
 
         <% if description.present? %>
-        <div class="text-sm tracking-normal font-medium text-gray-600" data-target="description">
+        <div class="text-base tracking-normal font-medium text-gray-600" data-target="description">
           <%== description %>
         </div>
         <% end %>

data/app/components/avo/panel_component.rb

@@ -21,7 +21,7 @@ class Avo::PanelComponent < ViewComponent::Base
   private
 
   def white_panel_classes
-    "bg-white rounded shadow"
+    'bg-white rounded shadow'
   end
 
   def data_attributes

data/app/components/avo/resource_component.rb

@@ -11,26 +11,6 @@ class Avo::ResourceComponent < Avo::BaseComponent
     @resource.authorization.authorize_action(:destroy, raise_exception: false)
   end
 
-  def can_detach?
-    authorize_association_for("detach")
-  end
-
-  def can_see_the_edit_button?
-    @resource.authorization.authorize_action(:edit, raise_exception: false)
-  end
-
-  def can_see_the_destroy_button?
-    @resource.authorization.authorize_action(:destroy, raise_exception: false)
-  end
-
-  def detach_path
-    helpers.resource_detach_path(params[:resource_name], params[:id], @reflection.name.to_s, @resource.model.id)
-  end
-
-  def destroy_path
-    helpers.resource_path(model: @resource.model, resource: @resource)
-  end
-
   def authorize_association_for(policy_method)
     association_policy = true
 
@@ -50,34 +30,4 @@ class Avo::ResourceComponent < Avo::BaseComponent
 
     association_policy
   end
-
-  def split_panel_fields
-    initialize_panels
-    @resource.get_fields.each do |field|
-      case field.class.to_s
-      when "Avo::Fields::HasOneField"
-        @has_one_panels << field
-      when "Avo::Fields::HasManyField"
-        @has_many_panels << field
-      when "Avo::Fields::HasAndBelongsToManyField"
-        @has_as_belongs_to_many_panels << field
-      else
-        @fields_by_panel[field.panel_name] ||= []
-        @fields_by_panel[field.panel_name] << field
-      end
-    end
-  end
-
-  private
-
-  def initialize_panels
-    @fields_by_panel = {}
-    @has_one_panels = []
-    @has_many_panels = []
-    @has_as_belongs_to_many_panels = []
-  end
-
-  def via_resource?
-    params[:via_resource_class].present? && params[:via_resource_id].present?
-  end
 end

data/app/components/avo/sidebar/group_component.html.erb

@@ -7,9 +7,7 @@
   <% end %>
 >
   <% if item.name.present? %>
-    <div
-      class="flex justify-between px-10 pr-2 pt-2 pb-0 text-gray-400"
-    >
+    <div class="flex justify-between px-10 pt-2 pb-0 text-gray-600 ">
       <div class="flex items-center text-xs uppercase font-semibold leading-none">
         <%= item.name %>
       </div>
@@ -19,7 +17,7 @@
           data-menu-target="svg"
           data-menu-key-param="<%= key %>"
           >
-          <%= helpers.svg 'heroicons/outline/chevron-down', class: "h-4 mr-0.5"%>
+          <%= helpers.svg 'heroicons/outline/chevron-down', class: "h-4"%>
         </div>
       <% end %>
     </div>

data/app/components/avo/sidebar/heading_component.html.erb

@@ -1,4 +1,4 @@
-<div class="flex justify-between px-4 pr-2 py-1 text-gray-500">
+<div class="flex justify-between p-4 py-2 text-gray-500">
   <div class="flex items-center text-sm uppercase font-semibold leading-none space-x-1">
     <span class="min-w-[20px]"><%= icon %></span> <span><%= label %></span>
   </div>

data/app/components/avo/sidebar/link_component.html.erb

@@ -2,7 +2,7 @@
   <%= send link_method, path, class: classes, active: active, target: target do %>
     <%= label %>
     <% if target == :_blank %>
-      <%= helpers.svg('heroicons/outline/external-link', class: 'self-center ml-auto h-3 mr-2') %>
+      <%= helpers.svg('heroicons/outline/external-link', class: 'self-center ml-auto h-3') %>
     <% end %>
   <% end %>
 <% else %>

data/app/components/avo/sidebar/link_component.rb

@@ -23,6 +23,6 @@ class Avo::Sidebar::LinkComponent < ViewComponent::Base
   end
 
   def classes
-    "px-4 pr-0 flex-1 flex mx-6 leading-none py-2 text-black rounded font-medium hover:bg-gray-100"
+    "px-4 flex-1 flex mx-6 leading-none py-2 text-black rounded font-medium hover:bg-gray-150"
   end
 end

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

@@ -1,16 +1,24 @@
 <div
-  class="fixed z-[60] t-0 application-sidebar hidden lg:flex flex-1 border-r lg:border-none bg-none min-w-[16rem] h-[calc(100vh-4rem)] bg-gray-25 lg:bg-transparent <%= 'print:hidden' if Avo.configuration.hide_layout_when_printing %>"
+  class="fixed z-[60] application-sidebar hidden lg:flex h-full bg-white text-white w-64 border-r <%= 'print:hidden' if Avo.configuration.hide_layout_when_printing %>"
   data-mobile-target="sidebar"
 >
   <div class="flex flex-col w-full h-full">
-    <div class="flex-1 flex flex-col justify-between overflow-auto h-full pt-3 scroll-shadows">
+    <div class="flex justify-between">
+      <%= render partial: "avo/partials/logo" %>
+      <div class="flex items-center mr-4">
+        <%= helpers.a_button class: "lg:hidden", icon: 'menu-back', data: { action: 'click->mobile#toggleSidebar' } %>
+      </div>
+    </div>
+    <div class="flex-1 flex flex-col justify-between overflow-auto mt-3">
       <div class="space-y-6 mb-4">
         <%= render Avo::Sidebar::LinkComponent.new label: 'Get started', path: helpers.avo.root_path, active: :exclusive if Rails.env.development? && Avo.configuration.home_path.nil? %>
 
         <% if Avo::App.has_main_menu? %>
-          <% Avo::App.main_menu.items.each do |item| %>
-            <%= render Avo::Sidebar::ItemSwitcherComponent.new item: item %>
-          <% end %>
+          <div class="text-black">
+            <% Avo::App.main_menu.items.each do |item| %>
+              <%= render Avo::Sidebar::ItemSwitcherComponent.new item: item %>
+            <% end %>
+          </div>
         <% else %>
 
           <% if dashboards.present? %>

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

@@ -1,4 +1,4 @@
-<div class="text-black Xborder-t border-gray-200 p-4 flex">
+<div class="text-black border-t border-gray-200 p-4 flex">
   <div class="flex-1 flex space-x-4">
     <% if avatar.present? %>
       <div class="relative aspect-square w-10 h-10 overflow-hidden rounded">