avo 3.30.4 → 4.0.0.beta.2

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

@@ -1,6 +1,6 @@
 <%= content_tag :div,
   id: "#{self.class.to_s.underscore}_#{@resource.record_param}",
-  class: "relative bg-white rounded shadow-modal flex flex-col group",
+  class: "grid-card",
   data: {
     component_name: self.class.to_s.underscore,
     resource_name: @resource.class.to_s,
@@ -9,19 +9,36 @@
     **(try(:drag_reorder_item_data_attributes) || {}),
   } do %>
   <%= content_tag :div,
-    class: class_names("relative w-full pb-3/4 rounded-t overflow-hidden", html(:cover, :classes)),
+    class: class_names("grid-card__image", html(:cover, :classes)),
     style: html(:cover, :style) do %>
-    <%= render Avo::RowSelectorComponent.new(floating: true, size: :lg, checked: @grid_item_checked) if @resource.record_selector%>
     <%= render_cover %>
-    <%= render_badge %>
+    <%= render Avo::RowSelectorComponent.new(checked: @grid_item_checked) if @resource.record_selector %>
   <% end %>
-  <div class="grid grid-cols-1 place-content-between p-4 h-full">
-    <div class="mb-4 h-full flex flex-col space-between">
-      <%= render_title %>
-      <%= render_body %>
-    </div>
-    <div class="place-self-end w-full">
-      <%= render(Avo::Index::ResourceControlsComponent.new(resource: @resource, reflection: @reflection, parent_record: @parent_record, parent_resource: @parent_resource, view_type: :grid, actions: @actions)) %>
-    </div>
+  <div class="grid-card__actions-row">
+    <%= render_badge %>
+    <%= render Avo::UI::DropdownComponent.new do |component| %>
+      <% component.with_trigger do %>
+        <%= render Avo::ButtonComponent.new(
+          icon: "tabler/outline/dots-vertical",
+          size: :lg,
+          class: "grid-card__action",
+          data: {action: component.action}
+        ) %>
+      <% end %>
+      <% component.with_items do %>
+        <%= render Avo::Index::ResourceControlsDropdownComponent.new(
+          resource: @resource,
+          reflection: @reflection,
+          parent_record: @parent_record,
+          parent_resource: @parent_resource,
+          view_type: :grid,
+          actions: @actions
+        ) %>
+      <% end %>
+    <% end %>
+  </div>
+  <div class="grid-card__content">
+    <%= render_title %>
+    <%= render_body %>
   </div>
 <% end %>

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

@@ -54,7 +54,7 @@ class Avo::Index::GridItemComponent < Avo::BaseComponent
   def render_title
     return if @card[:title].blank?
 
-    content_tag :div, class: "grid font-semibold leading-tight text-lg mb-2 #{html(:title, :classes)}", style: html(:title, :style) do
+    content_tag :div, class: "grid-card__title #{html(:title, :classes)}", style: html(:title, :style) do
       link_to @card[:title], resource_view_path
     end
   end
@@ -62,24 +62,26 @@ class Avo::Index::GridItemComponent < Avo::BaseComponent
   def render_body
     return if @card[:body].blank?
 
-    content_tag :div, class: "text-sm break-words text-gray-500 #{html(:body, :classes)}", style: html(:body, :style) do
+    content_tag :div, class: "grid-card__description #{html(:body, :classes)}", style: html(:body, :style) do
       @card[:body]
     end
   end
 
   def render_badge
-    return if @card[:badge_label].blank?
+    return if @card[:badge].blank? || (@card[:badge][:label].blank? && @card[:badge][:icon].blank?)
 
+    # Wrap BadgeComponent in positioned container to maintain absolute positioning
     content_tag :div,
-      class: class_names("absolute block inset-auto top-0 right-0 mt-2 mr-2 text-sm font-semibold bg-#{badge_color}-50 border border-#{badge_color}-300 text-#{badge_color}-700 rounded shadow-lg px-2 py-px z-10", html(:badge, :classes)),
-      title: @card[:badge_title],
+      class: class_names("grid-card__badge", html(:badge, :classes)),
+      title: @card[:badge][:title],
       style: html(:badge, :style),
       data: {target: :badge, tippy: :tooltip, **(html(:badge, :data).presence || {})} do
-      @card[:badge_label]
+      render Avo::UI::BadgeComponent.new(
+        label: @card[:badge][:label],
+        color: @card[:badge][:color],
+        style: @card[:badge][:style],
+        icon: @card[:badge][:icon]
+      )
     end
   end
-
-  def badge_color
-    @card[:badge_color] || "gray"
-  end
 end

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

@@ -1,4 +1,4 @@
-<%= content_tag :div, class: "#{view_type == "grid" ? "flex-wrap" : "space-x-2"} flex flex-row justify-evenly ml-2 has-record-selector:ml-0" do %>
+<%= content_tag :div, class: class_names("resource-controls flex flex-row justify-evenly items-center ms-2 has-record-selector:ms-0", {"flex-wrap": view_type == "grid", "gap-x-2": view_type != "grid"}) do %>
   <% @resource.render_row_controls(item: singular_resource_name).each do |control| %>
     <%= render_control control %>
   <% end %>

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

@@ -74,7 +74,7 @@ class Avo::Index::ResourceControlsComponent < Avo::ResourceComponent
   def render_edit_button(control)
     return unless can_edit?
 
-    link_to helpers.svg("avo/edit", class: svg_classes),
+    link_to helpers.svg("tabler/outline/edit", class: svg_classes),
       edit_path,
       class: "flex items-center",
       title: control.title,
@@ -90,7 +90,7 @@ class Avo::Index::ResourceControlsComponent < Avo::ResourceComponent
   def render_show_button(control)
     return unless can_view?
 
-    link_to helpers.svg("avo/eye", class: svg_classes),
+    link_to helpers.svg("tabler/outline/eye", class: svg_classes),
       show_path,
       class: "flex items-center",
       title: control.title,
@@ -110,15 +110,10 @@ class Avo::Index::ResourceControlsComponent < Avo::ResourceComponent
     policy_method = is_a_related_resource? ? :can_delete? : :can_see_the_destroy_button?
     return unless send policy_method
 
-    a_button url: helpers.resource_path(record: @resource.record, resource: @resource),
-      style: :icon,
-      color: :gray,
-      icon: "avo/trash",
-      form_class: "flex flex-col sm:flex-row sm:inline-flex",
+    link_to svg("tabler/outline/trash", class: svg_classes), helpers.resource_path(record: @resource.record, resource: @resource, **hidden_params),
+      class: "flex flex-col sm:flex-row sm:inline-flex",
       title: control.title,
       aria: {label: control.title},
-      method: :delete,
-      params: hidden_params,
       data: {
         turbo_frame: params[:turbo_frame],
         turbo_confirm: control.confirmation_message,
@@ -133,16 +128,11 @@ class Avo::Index::ResourceControlsComponent < Avo::ResourceComponent
   def render_detach_button(control)
     return unless can_detach?
 
-    a_button url: helpers.resource_detach_path(params[:resource_name], params[:id], params[:related_name], @resource.record_param),
-      style: :icon,
-      color: :gray,
-      icon: "avo/detach",
-      form_class: "flex items-center",
+    link_to svg("tabler/outline/unlink", class: svg_classes), helpers.resource_detach_path(params[:resource_name], params[:id], params[:related_name], @resource.record_param, **hidden_params),
       title: control.title,
       aria: {label: control.title},
-      method: :delete,
-      params: hidden_params,
       data: {
+        turbo_method: :delete,
         turbo_frame: params[:turbo_frame],
         turbo_confirm: control.confirmation_message,
         target: "control:detach",
@@ -159,7 +149,7 @@ class Avo::Index::ResourceControlsComponent < Avo::ResourceComponent
   end
 
   def svg_classes
-    "text-gray-600 h-6 hover:text-gray-600"
+    "h-6"
   end
 
   def hidden_params

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

@@ -0,0 +1,3 @@
+<% @resource.render_row_controls(item: singular_resource_name).each do |control| %>
+  <%= render_control control %>
+<% end %>

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

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+class Avo::Index::ResourceControlsDropdownComponent < Avo::Index::ResourceControlsComponent
+  private
+
+  def detach_path
+    helpers.resource_detach_path(params[:resource_name], params[:id], params[:related_name], @resource.record_param, **hidden_params)
+  end
+
+  def delete_path
+    helpers.resource_path(record: @resource.record, resource: @resource, **hidden_params)
+  end
+
+  def render_edit_button(control)
+    return unless can_edit?
+
+    link_to edit_path, **control_link_options(control, target: "edit", control_key: :edit) do
+      concat svg("tabler/outline/edit")
+      concat control_title_without_resource(control.title)
+    end
+  end
+
+  def render_show_button(control)
+    return unless can_view?
+
+    link_to show_path, **control_link_options(control, target: "view", control_key: :show, include_resource_id: false) do
+      concat svg("tabler/outline/eye")
+      concat control_title_without_resource(control.title)
+    end
+  end
+
+  def render_delete_button(control)
+    return unless destroy_permitted?
+
+    link_to delete_path, **control_link_options(control, target: "destroy", control_key: :destroy,
+      turbo_frame: params[:turbo_frame],
+      turbo_confirm: control.confirmation_message,
+      turbo_method: :delete) do
+      concat svg("tabler/outline/trash")
+      concat control_title_without_resource(control.title)
+    end
+  end
+
+  def render_detach_button(control)
+    return unless can_detach?
+
+    link_to detach_path, **control_link_options(control, target: "detach", control_key: :detach,
+      turbo_frame: params[:turbo_frame],
+      turbo_confirm: control.confirmation_message,
+      turbo_method: :delete) do
+      concat svg("tabler/outline/unlink")
+      concat control_title_without_resource(control.title)
+    end
+  end
+
+  def control_link_options(control, target:, control_key:, include_resource_id: true, **extra_data)
+    data = {
+      target: "control:#{target}",
+      control: control_key,
+    }
+    data["resource-id"] = @resource.record_param if include_resource_id
+    data.merge!(extra_data)
+
+    {
+      aria: {label: control.title},
+      title: control.title,
+      data: data,
+    }
+  end
+
+  def destroy_permitted?
+    # Related resources use can_delete? (authorize_association_for :destroy); index uses can_see_the_destroy_button?
+    policy_method = is_a_related_resource? ? :can_delete? : :can_see_the_destroy_button?
+    send(policy_method)
+  end
+
+  def control_title_without_resource(title)
+    resource_name = singular_resource_name.humanize
+    title.gsub(/\b#{Regexp.escape(resource_name)}\b/i, "").strip
+  end
+end

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

@@ -1,36 +1,37 @@
-<%# hover:z-[21] removed from tr class to solve flickering actions component on row controls and z-20 changed to z-21%>
+<%# hover:z-[21] removed from tr class to solve flickering actions component on row controls and z-20 changed to z-21 %>
 
 <%= content_tag :tr,
   id: "#{self.class.to_s.underscore}_#{@resource.record_param}",
-  class: class_names("group bg-white hover:bg-gray-50 z-21 border-b", {"cursor-pointer": click_row_to_view_record}),
+  class: class_names("table-row group z-21", {"cursor-pointer": click_row_to_view_record}),
   data: {
     index: @index,
-    component_name: self.class.to_s.underscore,
+    component_name:,
     resource_name: @resource.class.to_s,
     record_id: @resource.record_param,
     **(click_row_to_view_record ? {
       visit_path: helpers.resource_show_path(resource: @resource, parent_resource: @parent_resource, parent_record: @parent_record, parent_or_child_resource:),
-      action: "click->table-row#visitRecord keydown.enter->table-row#visitRecord keydown.space->table-row#visitRecord"
+      action: "click->table-row#visitRecord keydown.enter->table-row#visitRecord keydown.space->table-row#visitRecord mouseenter->table-row#mouseEntered mouseleave->table-row#mouseLeft"
     } : {}),
     **item_selector_data_attributes(@resource, controller: class_names("table-row": click_row_to_view_record)),
     **(try(:drag_reorder_item_data_attributes) || {}),
   } do %>
   <% if @resource.record_selector %>
     <td class="item-selector-cell w-10">
-      <div class="flex justify-center h-full">
+      <div class="flex h-full justify-center">
         <%= render Avo::RowSelectorComponent.new floating: false, index: @index, checked: @row_selector_checked %>
       </div>
     </td>
   <% end %>
+
   <% if @resource.render_row_controls_on_the_left? %>
     <td class="<%= @resource.row_controls_classes %>" data-control="resource-controls">
-      <div class="flex items-center justify-end flex-grow-0 h-full">
-        <%= render resource_controls_component %>
-      </div>
+      <div class="flex h-full grow-0 items-center justify-end"><%= render resource_controls_component %></div>
     </td>
   <% end %>
+
   <% @header_fields.each_with_index do |table_header_lable, index| %>
     <% field = @fields.find { |field| field.table_header_label == table_header_lable } %>
+
     <% if field.present? %>
       <%= render field.component_for_view(:index).new(
         field: field,
@@ -44,11 +45,10 @@
       <td class="px-3">—</td>
     <% end %>
   <% end %>
+
   <% if @resource.render_row_controls_on_the_right? %>
     <td class="<%= @resource.row_controls_classes %>" data-control="resource-controls">
-      <div class="flex items-center justify-end flex-grow-0 h-full">
-        <%= render resource_controls_component %>
-      </div>
+      <div class="flex h-full grow-0 items-center justify-end"><%= render resource_controls_component %></div>
     </td>
   <% end %>
 <% end %>

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

@@ -1,23 +1,13 @@
-<%= render Avo::PanelComponent.new(**args) do |c| %>
-  <% if @is_main_panel %>
-    <% c.with_tools do %>
-      <% controls.each do |control| %>
-        <%= render_control control %>
-      <% end %>
-    <% end %>
-  <% end %>
-   <% c.with_body do %>
-    <% content_tag :div, class: "divide-y overflow-auto" do %>
-      <%= render Avo::Items::VisibleItemsComponent.new resource: @resource, item: @item, view: @view, form: @form, reflection: @reflection %>
-    <% end %>
+<%= render ui.panel(title: @item.title, description: @item.description, index: @index) do |panel| %>
+  <% panel.with_body do %>
+    <%= render Avo::Items::VisibleItemsComponent.new resource: @resource, item: @item, view: @view, form: @form, parent_component: @parent_component, reflection: @reflection %>
   <% end %>
-   <% if sidebars.any? { |sidebar| sidebar.visible_items.any? } %>
-    <% c.with_sidebar do %>
-      <div class="justify-between space-y-4">
+
+  <% if sidebars.any? { |sidebar| sidebar.visible_items.any? } %>
+    <% panel.with_sidebar do %>
+      <div class="justify-between space-y-4 w-full">
         <% sidebars.each_with_index do |sidebar, index| %>
-          <div class="<%= helpers.white_panel_classes if sidebar.panel_wrapper? %>">
-            <%= render Avo::ResourceSidebarComponent.new resource: @resource, sidebar: sidebar, params: params, view: view, form: @form, index: index %>
-          </div>
+          <%= render Avo::ResourceSidebarComponent.new resource: @resource, sidebar: sidebar, params: params, view: view, form: @form, index: index %>
         <% end %>
       </div>
     <% end %>

data/app/components/avo/items/panel_component.rb

@@ -5,7 +5,6 @@ class Avo::Items::PanelComponent < Avo::ResourceComponent
 
   prop :form
   prop :item
-  prop :is_main_panel
   prop :resource
   prop :view
   prop :actions, reader: :public
@@ -21,24 +20,5 @@ class Avo::Items::PanelComponent < Avo::ResourceComponent
     :edit_path,
     :can_see_the_destroy_button?,
     :can_see_the_save_button?,
-    :display_breadcrumbs,
     to: :@parent_component
-
-  def args
-    if @is_main_panel
-      {
-        name: title,
-        description: @resource.description,
-        display_breadcrumbs: display_breadcrumbs,
-        index: 0,
-        data: {panel_id: "main"},
-        cover_photo: @resource.cover_photo,
-        profile_photo: @resource.profile_photo,
-        external_link: @resource.get_external_link,
-        discreet_information: @resource.discreet_information
-      }
-    else
-      {name: @item.name, description: @item.description, index: @index}
-    end
-  end
 end

data/app/components/avo/items/switcher_component.html.erb

@@ -1,5 +1,17 @@
-<% if item.is_panel? || item.is_main_panel? %>
+<% if item.is_panel? %>
   <%= render panel_component %>
+<% elsif item.is_card? %>
+  <%= render Avo::UI::CardComponent.new(
+    title: item.title,
+    description: item.description,
+    index:
+  ) do |card| %>
+    <% card.with_body do %>
+      <%= render ui.description_list do %>
+        <%= render Avo::Items::VisibleItemsComponent.new resource: @resource, item: item, view: @view, form: @form, field_component_extra_args: @field_component_extra_args, reflection: @reflection %>
+      <% end %>
+    <% end %>
+  <% end %>
 <% elsif item.is_tool? %>
   <% if item&.partial.present? %>
     <%= render item.partial, tool: item, form: @form %>
@@ -16,4 +28,51 @@
   <% end %>
 <% elsif item.is_collaboration? %>
   <%= render Avo::Collaborate::TimelineComponent.new(resource: @resource) %>
+<% elsif item.is_header? %>
+  <% if @resource.cover.present? && @resource.cover.visible_in_current_view? %>
+    <%= render Avo::CoverComponent.new cover: @resource.cover %>
+  <% end %>
+
+  <%= render ui.panel_header(title:, description: @resource.description, index:) do |header| %>
+    <% header.with_controls do %>
+      <% controls.each do |control| %>
+        <%= render_control control %>
+      <% end %>
+    <% end %>
+
+    <% if @resource.avatar.present? %>
+      <% header.with_avatar do %>
+        <%= render Avo::UI::AvatarComponent.new src: helpers.main_app.url_for(@resource.avatar.value), shape: :square, type: :avatar %>
+      <% end %>
+    <% end %>
+
+    <% if Rails.env.development? %>
+      <% header.with_title_slot do %>
+        <%= render Avo::DiscreetInformationComponent.new(
+          as: :icon,
+          title: t('avo.open_in_your_editor'),
+          url: helpers.editor_file_path(@resource),
+          icon: "tabler/outline/code"
+        ) %>
+      <% end %>
+    <% end %>
+
+    <% if @resource.get_external_link.present? || @resource.discreet_information.items.any? %>
+      <% header.with_discreet_information do %>
+        <% if @resource.get_external_link.present? %>
+          <%= render Avo::DiscreetInformationComponent.new(
+            as: :icon,
+            url: @resource.get_external_link,
+            target: :_blank,
+            title: helpers.t("avo.visit_record_on_external_path"),
+            icon: "tabler/outline/external-link"
+          ) %>
+        <% end %>
+
+        <% @resource.discreet_information.items.each do |item| %>
+          <%= render Avo::DiscreetInformationComponent.new(**item) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
 <% end %>

data/app/components/avo/items/switcher_component.rb

@@ -1,14 +1,20 @@
 # frozen_string_literal: true
 
-class Avo::Items::SwitcherComponent < Avo::BaseComponent
-  include Turbo::FramesHelper
-
+class Avo::Items::SwitcherComponent < Avo::ResourceComponent
   attr_reader :resource
   attr_reader :reflection
   attr_reader :index
   attr_reader :item
   attr_reader :view
 
+  delegate :controls,
+    :title,
+    :back_path,
+    :edit_path,
+    :can_see_the_destroy_button?,
+    :can_see_the_save_button?,
+    to: :@parent_component
+
   def initialize(
     resource: nil,
     reflection: nil,
@@ -64,7 +70,7 @@ class Avo::Items::SwitcherComponent < Avo::BaseComponent
   end
 
   def field_component
-    final_item = item.dup.hydrate(resource: @resource, record: @resource.record, user: resource.user, view: view)
+    final_item = item.dup.hydrate(resource: @resource, record: @resource.record || item.record, user: resource.user, view: view)
     final_item.component_for_view(@view).new(field: final_item, resource: @resource, index: index, form: form, view: @view, turbo_frame_loading: :lazy, **@field_component_extra_args)
   end
 
@@ -73,7 +79,6 @@ class Avo::Items::SwitcherComponent < Avo::BaseComponent
       actions: @actions,
       form: form,
       index: index,
-      is_main_panel: item.is_main_panel?,
       item: item.hydrate(view: view),
       parent_component: @parent_component,
       parent_record: @parent_record,

data/app/components/avo/items/visible_items_component.html.erb

@@ -7,5 +7,6 @@
     view: @view,
     form: @form,
     field_component_extra_args: @field_component_extra_args,
-  )%>
+    parent_component: @parent_component,
+  ) %>
 <% end %>

data/app/components/avo/items/visible_items_component.rb

@@ -7,4 +7,5 @@ class Avo::Items::VisibleItemsComponent < Avo::BaseComponent
   prop :form
   prop :reflection, default: nil
   prop :field_component_extra_args, default: {}.freeze
+  prop :parent_component
 end

data/app/components/avo/media_library/item_details_component.html.erb

@@ -1,6 +1,6 @@
 <div class="relative flex flex-col w-full max @container/details">
   <%= link_to helpers.svg('heroicons/outline/x-mark', class: "size-6"), helpers.avo.media_library_index_path,
-    class: "absolute z-10 inset-auto right-0 top-0 mt-2 mr-2 block bg-white p-1 rounded-lg text-slate-600 hover:text-slate-900",
+    class: "absolute z-10 inset-auto end-0 top-0 mt-2 me-2 block bg-white p-1 rounded-lg text-slate-600 hover:text-slate-900",
     title: t('avo.close'),
     data: {
       tippy: :tooltip,
@@ -24,7 +24,7 @@
         <%= link_to "Delete", helpers.avo.media_library_path(@blob), class: "text-red-500", data: {turbo_confirm: "Are you sure you want to destroy this attachment?", turbo_method: :delete} %>
       </div>
     </div>
-    <div class="flex flex-col w-1/2 @3xl/details:w-1/3 border-l">
+    <div class="flex flex-col w-1/2 @3xl/details:w-1/3 border-s border-gray-200">
       <%= render partial: "avo/media_library/information", locals: {blob: @blob} %>
       <%= render partial: "avo/media_library/form", locals: {blob: @blob} %>
     </div>

data/app/components/avo/media_library/list_component.html.erb

@@ -1,11 +1,11 @@
-<%= render Avo::PanelComponent.new title: t("avo.media_library.title"),
+<%= render ui.panel(title: t("avo.media_library.title"),
   data: {
     controller: 'media-library',
     media_library_controller_selector_value: params[:controller_selector],
     media_library_controller_name_value: params[:controller_name],
     media_library_item_details_frame_id_value: ::Avo::MEDIA_LIBRARY_ITEM_DETAILS_FRAME_ID,
-  } do |c| %>
-  <%= c.with_tools do %>
+  }) do |panel| %>
+  <%= panel.with_controls do %>
     <% if false && @attaching %>
       <%= a_button data: {
         action: 'click->media-library#selectItems',
@@ -14,7 +14,8 @@
       <% end %>
     <% end %>
   <% end %>
-  <% c.with_body do %>
+
+  <% panel.with_body do %>
     <% if !@attaching %>
       <%= content_tag :div, class: "p-4 pb-0",
         data: {
@@ -27,8 +28,7 @@
             media_library_attach_target: 'dropzone',
             action: 'click->media-library-attach#triggerFileBrowser',
           } do %>
-          <%= helpers.svg 'heroicons/outline/cloud-arrow-up', class: 'size-6 text-gray-400' %>
-          Upload a file
+          <%= helpers.svg 'heroicons/outline/cloud-arrow-up', class: 'size-6 text-gray-400' %> Upload a file
           <small>Click to browse or drag and drop</small>
         <% end %>
 
@@ -38,23 +38,28 @@
         } %>
       <% end %>
     <% end %>
-    <div class="grid grow-0 min-h-24 gap-x-4 @container/index" style="grid-template-areas: 'stack';">
-      <div class="grid grid-cols-1 @sm/index:grid-cols-2 @lg/index:grid-cols-3 @3xl/index:grid-cols-4 @5xl/index:grid-cols-6 gap-4 min-h-0 min-w-0 auto-rows-max p-4" style="grid-area: stack;">
+
+    <div class="@container/index grid min-h-24 grow-0 gap-x-4" style="grid-template-areas: 'stack';">
+      <div
+        class="
+          grid min-h-0 min-w-0 auto-rows-max grid-cols-1 gap-4 p-4 @sm/index:grid-cols-2 @lg/index:grid-cols-3
+          @3xl/index:grid-cols-4 @5xl/index:grid-cols-6
+        "
+        style="grid-area: stack;"
+      >
         <%= render Avo::MediaLibrary::ListItemComponent.with_collection(@blobs, attaching: @attaching, multiple: @attaching) %>
       </div>
-      <%# TODO: fix the extra margin  %>
-      <%= helpers.turbo_frame_tag ::Avo::MEDIA_LIBRARY_ITEM_DETAILS_FRAME_ID, class: 'relative empty:hidden bg-white inset-0 w-full h-full block empty:-ml-4 max-h-full', style: 'grid-area: stack;' %>
+
+      <%# TODO: fix the extra margin %>
+      <%= helpers.turbo_frame_tag ::Avo::MEDIA_LIBRARY_ITEM_DETAILS_FRAME_ID, class: 'relative empty:hidden bg-white inset-0 w-full h-full block empty:-ms-4 max-h-full', style: 'grid-area: stack;' %>
     </div>
-  <% end %>
-  <% c.with_bare_content do %>
-    <div class="flex-1 flex w-full mt-4">
-      <div class="flex-2 w-full sm:flex sm:items-center sm:justify-between space-y-2 sm:space-y-0 text-center sm:text-left pagy-gem-version-<%= helpers.pagy_major_version %> ">
-        <div class="text-sm text-slate-600 mr-4"><%== helpers.pagy_info @pagy %></div>
+
+    <div class="mt-4 flex w-full flex-1">
+      <div class="w-full flex-2 space-y-2 text-center sm:flex sm:items-center sm:justify-between sm:space-y-0 sm:text-start">
+        <div class="me-4 text-sm text-slate-600"><%== @pagy.info_tag %></div>
+
         <% if @pagy.pages > 1 %>
-          <%# xanchor_string is not valid key word argument and it breaks when require "pagy/extras/calendar" %>
-          <%# https://github.com/ddnexus/pagy/blob/d70e443872a5b18da4e482454b3c8b4a1c86cb6b/gem/lib/pagy/extras/calendar.rb#L47 %>
-          <%#== helpers.pagy_nav(@pagy, xanchor_string: "data-turbo-frame=\"#{@turbo_frame}\"") %>
-          <%== helpers.pagy_nav(@pagy) %>
+          <%== @pagy.series_nav %>
         <% end %>
       </div>
     </div>

data/app/components/avo/media_library/list_component.rb

@@ -4,11 +4,11 @@ module Avo
   module MediaLibrary
     class ListComponent < Avo::BaseComponent
       include Avo::ApplicationHelper
-      include Pagy::Backend
+      include Pagy::Method
 
       def initialize(attaching: false, turbo_frame: nil)
         @attaching = attaching
-        @pagy, @blobs = pagy(query, limit:)
+        @pagy, @blobs = pagy(:offset, query, limit:)
         turbo_frame ||= params[:turbo_frame]
         @turbo_frame = turbo_frame.present? ? CGI.escapeHTML(turbo_frame.to_s) : :_top
       end

data/app/components/avo/media_library/list_item_component.html.erb

@@ -1,9 +1,9 @@
 <%= link_to helpers.avo.media_library_path(blob),
   id: dom_id(blob),
-  class: "relative group min-h-full max-w-full flex-1 flex flex-col justify-between gap-2 border border-slate-200 p-1.5 rounded-xl hover:border-blue-500 hover:outline data-[selected=true]:border-blue-500 data-[selected=true]:outline outline-2 outline-blue-500",
+  class: "relative group min-h-full max-w-full flex-1 flex flex-col justify-between gap-2 border border-slate-200 p-1.5 rounded-xl hover:border-blue-500 hover:outline data-[selected=true]:border-blue-500 data-[selected=true]:outline outline-blue-500",
   data: do %>
   <% if false && @attaching %>
-    <div class="absolute bg-blue-500 group-hover:opacity-100 group-data-[selected=true]:opacity-100 opacity-0 inset-auto left-0 top-0 text-white rounded-tl-xl rounded-br-xl -ml-px -mt-px p-2"><div class="border border-white"><%= helpers.svg "heroicons/outline/check", class: 'group-data-[selected=true]:opacity-100 opacity-0 size-4' %></div></div>
+    <div class="absolute bg-blue-500 group-hover:opacity-100 group-data-[selected=true]:opacity-100 opacity-0 inset-auto start-0 top-0 text-white rounded-ss-xl rounded-ee-xl -ms-px -mt-px p-2"><div class="border border-white"><%= helpers.svg "heroicons/outline/check", class: 'group-data-[selected=true]:opacity-100 opacity-0 size-4' %></div></div>
   <% end %>
   <div class="flex flex-col h-full aspect-video overflow-hidden rounded-lg justify-center items-center">
     <% if blob.image? %>
@@ -18,7 +18,7 @@
       </div>
     <% end %>
   </div>
-  <div class="flex space-x-2 mb-1">
+  <div class="flex space-x-2 rtl:space-x-reverse mb-1">
     <% if @display_filename %>
       <span class="text-gray-500 group-hover:text-blue-700 mt-1 text-sm truncate" title="<%= blob.filename %>"><%= blob.filename %></span>
     <% end %>