avo 1.25.0 → 2.1.1

data/app/components/avo/fields/common/single_file_viewer_component.rb

@@ -3,13 +3,41 @@
 class Avo::Fields::Common::SingleFileViewerComponent < ViewComponent::Base
   include Avo::ApplicationHelper
 
-  def initialize(id:, file:, is_image:, is_audio:, direct_upload: false, resource:, button_size: :md)
-    @id = id
+  def initialize(file: nil, field:, resource:)
     @file = file
-    @is_image = is_image
-    @is_audio = is_audio
-    @direct_upload = direct_upload
-    @button_size = button_size
+    @field = field
     @resource = resource
   end
+
+  def destroy_path
+    "#{@resource.record_path}/active_storage_attachments/#{id}/#{file.id}"
+  end
+
+  def id
+    @field.id
+  end
+
+  def file
+    @file || @field.value.attachment
+  rescue
+    nil
+  end
+
+  def is_image?
+    file.image? || @field.is_image
+  rescue
+    false
+  end
+
+  def is_audio?
+    file.audio? || @field.is_audio
+  rescue
+    false
+  end
+
+  def is_video?
+    file.video? || @field.is_video
+  rescue
+    false
+  end
 end

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

@@ -1,9 +1,8 @@
-<%= index_field_wrapper field: @field do %>
+<%= index_field_wrapper field: @field, flush: true do %>
   <% if @field.value.present? %>
     <%= 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/index_component.html.erb

@@ -1,9 +1,9 @@
-<%= index_field_wrapper field: @field do %>
+<%= index_field_wrapper field: @field, flush: flush? do %>
   <% if @field.value.present? %>
     <% if @field.value.attached? && @field.value.representable? && @field.is_image %>
-      <%= link_to_if @field.link_to_resource, image_tag(helpers.main_app.url_for(@field.value), class: 'max-h-full'), resource_path, class: 'block' %>
+      <%= link_to_if @field.link_to_resource, image_tag(helpers.main_app.url_for(@field.value), class: 'h-10'), resource_path, class: 'block' %>
     <% elsif @field.value.attached? && @field.is_audio %>
-      <%= link_to_if @field.link_to_resource, audio_tag(helpers.main_app.url_for(@field.value), controls: true, preload: false, class: 'max-h-full'), resource_path, class: 'block h-8' %>
+      <%= link_to_if @field.link_to_resource, audio_tag(helpers.main_app.url_for(@field.value), controls: true, preload: false, class: 'max-h-full h-10'), resource_path, class: 'block h-8' %>
     <% else %>
       <%= @field.value.filename %>
     <% end %>

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

@@ -1,4 +1,15 @@
 # frozen_string_literal: true
 
 class Avo::Fields::FileField::IndexComponent < Avo::Fields::IndexComponent
+  def flush?
+    has_image_tag? || has_audio_tag?
+  end
+
+  def has_image_tag?
+    @field.value.attached? && @field.value.representable? && @field.is_image
+  end
+
+  def has_audio_tag?
+    @field.value.attached? && @field.is_audio
+  end
 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/gravatar_field/index_component.html.erb

@@ -1,4 +1,4 @@
-<%= index_field_wrapper field: @field do %>
+<%= index_field_wrapper field: @field, flush: true do %>
   <%= render Avo::Fields::Common::GravatarViewerComponent.new(
     md5: @field.md5,
     default: @field.default,

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/progress_bar_field/index_component.html.erb

@@ -1,4 +1,4 @@
-<%= index_field_wrapper field: @field do %>
+<%= index_field_wrapper field: @field, flush: true do %>
   <% if @field.display_value %>
     <div class="text-center text-sm font-semibold w-full leading-none mb-1">
       <%= @field.value %><%= @field.value_suffix if @field.value_suffix.present? %>

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-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,10 +1,22 @@
 # 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, flush: false, **args)
     @field = field
     @dash_if_blank = dash_if_blank
+    @center_content = center_content
     @classes = args[:class].present? ? args[:class] : ""
     @args = args
+    @flush = flush
+  end
+
+  def classes
+    result = @classes
+
+    unless @flush
+      result += " py-3"
+    end
+
+    result
   end
 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: {
@@ -27,10 +28,13 @@
   <% end %>
 
   <% if can_detach? %>
-    <%= form_with url: helpers.resource_detach_path(params[:resource_name], params[:id], params[:related_name], @resource.model.id), method: :delete, html: {
+    <%= form_with url: helpers.resource_detach_path(params[:resource_name], params[:id], params[:related_name], @resource.model.id),
+      method: :delete,
+      local: true,
+      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: {
@@ -50,10 +54,11 @@
     <%= form_with url: helpers.resource_path(model: @resource.model, resource: @resource),
       method: :delete,
       class: 'flex items-center',
+      local: true,
       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), expires_in: 1.day 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