avo 2.5.2.pre.4 → 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

@@ -117,8 +117,6 @@ class Avo::ButtonComponent < ViewComponent::Base
       " 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 border-none hover:bg-gray-100"
     else
       ""
     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-sm <%= 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/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/heading_component.html.erb

@@ -1,4 +1,4 @@
-<div class="flex justify-between px-6 py-2 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.rb

@@ -23,6 +23,6 @@ class Avo::Sidebar::LinkComponent < ViewComponent::Base
   end
 
   def classes
-    "px-4 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-50 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">

data/app/components/avo/views/resource_edit_component.html.erb

@@ -1,6 +1,4 @@
-<div data-model-id="<%= @resource.model.id %>"
-  class="space-y-8"
->
+<div data-model-id="<%= @resource.model.id %>">
   <% @resource.panels.each do |resource_panel| %>
     <%= form_with model: @resource.model,
         scope: @resource.form_scope,
@@ -11,17 +9,11 @@
       <%= render Avo::ReferrerParamsComponent.new back_path: back_path %>
       <%= render Avo::PanelComponent.new(title: resource_panel[:name], description: @resource.resource_description, display_breadcrumbs: true) do |c| %>
         <% c.tools do %>
-          <%= a_link back_path,
-            style: :text,
-            icon: 'arrow-left' do %>
+          <%= a_link back_path, icon: 'arrow-left' do %>
             <%= t('avo.cancel').capitalize %>
           <% end %>
           <% if can_see_the_save_button? %>
-            <%= a_button color: :primary,
-              style: :primary,
-              loading: true,
-              type: :submit,
-              icon: 'save' do %>
+            <%= a_button color: :green, loading: true, type: :submit, icon: 'save' do %>
               <%= t('avo.save').capitalize %>
             <% end %>
           <% end %>
@@ -48,21 +40,4 @@
       <% end %>
     <% end %>
   <% end %>
-  <% if @reflection.blank? %>
-    <% if has_one_panels.present? %>
-      <% has_one_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-    <% if has_many_panels.present? %>
-      <% has_many_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-    <% if has_as_belongs_to_many_panels.present? %>
-      <% has_as_belongs_to_many_panels.each_with_index do |field, index| %>
-        <%= render field.component_for_view(:show).new(field: field, resource: @resource, index: index) %>
-      <% end %>
-    <% end %>
-  <% end %>
 </div>

data/app/components/avo/views/resource_edit_component.rb

@@ -4,12 +4,8 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
   include Avo::ResourcesHelper
   include Avo::ApplicationHelper
 
-  attr_reader :fields_by_panel, :has_one_panels, :has_many_panels, :has_as_belongs_to_many_panels
-
   def initialize(resource: nil)
     @resource = resource
-
-    split_panel_fields
   end
 
   def back_path
@@ -25,4 +21,10 @@ class Avo::Views::ResourceEditComponent < Avo::ResourceComponent
   def can_see_the_save_button?
     @resource.authorization.authorize_action :edit, raise_exception: false
   end
+
+  private
+
+  def via_resource?
+    params[:via_resource_class].present? && params[:via_resource_id].present?
+  end
 end

data/app/components/avo/views/resource_index_component.html.erb

@@ -1,28 +1,19 @@
 <div>
   <%= render Avo::PanelComponent.new(title: title, description: description, data: { component: 'resources-index' }, display_breadcrumbs: @reflection.blank?) do |c| %>
     <% c.tools do %>
-      <% if can_attach? %>
-        <%= a_link attach_path,
-          icon: 'heroicons/outline/link',
-          color: :primary,
-          style: :text,
-          'data-turbo-frame': 'attach_modal',
-          'data-target': 'attach' do %>
-          <%= t('avo.attach_item', item: singular_resource_name).capitalize %>
-        <% end %>
-      <% end %>
       <% if can_see_the_actions_button? %>
         <%= render Avo::ActionsComponent.new actions: @actions, resource: @resource %>
       <% end %>
       <% if can_see_the_create_button? %>
-        <%= a_link create_path,
-          icon: 'heroicons/outline/plus',
-          'data-target': 'create',
-          style: :primary,
-          color: :primary do %>
+        <%= a_link create_path, icon: 'heroicons/outline/plus', 'data-target': 'create', color: :primary do %>
           <%= t('avo.create_new_item', item: singular_resource_name.downcase ) %>
         <% end %>
       <% end %>
+      <% if can_attach? %>
+        <%= a_link attach_path, icon: 'heroicons/outline/link', color: :primary, 'data-turbo-frame': 'attach_modal', 'data-target': 'attach' do %>
+          <%= t('avo.attach_item', item: singular_resource_name).capitalize %>
+        <% end %>
+      <% end %>
     <% end %>
     <% c.body do %>
       <div class="flex flex-col xs:flex-row xs:justify-between space-y-2 xs:space-y-0 py-4 <%= 'hidden' if @resource.search_query.nil? && @filters.empty? && available_view_types.count <= 1 %>"
@@ -64,6 +55,7 @@
           </div>
         <% end %>
       <% end %>
+
       <% if view_type.to_sym == :grid %>
         <%= render Avo::Index::ResourceGridComponent.new(resources: @resources, resource: @resource, reflection: @reflection, parent_model: @parent_model) %>
         <div class="mt-14">

data/app/components/avo/views/resource_new_component.html.erb

@@ -14,17 +14,11 @@
       <%= render Avo::PanelComponent.new(title: resource_panel[:name], description: @resource.resource_description, display_breadcrumbs: true) do |c| %>
         <% c.tools do %>
           <div class="flex justify-end space-x-2">
-            <%= a_link back_path,
-              style: :text,
-              icon: 'arrow-left' do %>
+            <%= a_link back_path, icon: 'arrow-left' do %>
               <%= t('avo.cancel').capitalize %>
             <% end %>
             <% if can_see_the_save_button? %>
-              <%= a_button color: :primary,
-                style: :primary,
-                loading: true,
-                type: :submit,
-                icon: 'save' do %>
+              <%= a_button color: 'green', loading: true, type: :submit, icon: 'save' do %>
                 <%= t('avo.save').capitalize %>
               <% end %>
             <% end %>