Avo 4 - human-readable pagination pages (#4353)

Author: Mihai-Munteanu

app/assets/stylesheets/css/pagination.css

@@ -4,14 +4,14 @@
         .pagination__controls, .pagination__info, .pagination__nav (elements) */
 
 .pagination {
-  @apply flex w-full flex-col items-stretch justify-between gap-2 sm:flex-row sm:items-end sm:gap-0;
+  @apply flex w-full flex-col items-stretch justify-between gap-2 sm:flex-row sm:flex-wrap sm:items-end sm:gap-0;
 }
 
 /* === Per-page selector (left) === */
 
 .pagination__per-page {
   --pagination-per-page-width: 10rem; /* w-48 equivalent; use 165px for exact Figma match */
-  @apply flex items-center;
+  @apply flex shrink-0 items-center;
 }
 
 .pagination__per-page-input {
@@ -49,13 +49,19 @@
 
 /* === Controls pill (right) === */
 
+.pagination__controls-wrap {
+  @apply flex w-full min-w-0 sm:flex-[1_1_28rem] sm:min-w-[22rem] sm:justify-end;
+}
+
 .pagination__controls {
-  @apply flex w-fit shrink-0 items-center gap-3 rounded-lg border border-tertiary bg-primary overflow-hidden ps-3 pe-2 overflow-visible;
+  @apply flex w-full min-w-0 max-w-full items-center gap-3 rounded-lg border border-tertiary bg-primary ps-3 pe-2 overflow-x-auto overflow-y-hidden overscroll-x-contain touch-pan-x sm:w-fit;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-gutter: stable;
 }
 
 /* Info text with right-border divider */
 .pagination__info {
-  @apply flex items-center py-1 pe-3 border-e border-tertiary whitespace-nowrap overflow-hidden text-ellipsis text-sm text-content leading-5 font-normal;
+  @apply shrink-0 flex items-center py-1 pe-3 border-e border-tertiary whitespace-nowrap text-sm text-content leading-5 font-normal;
 
   &:last-child {
     @apply border-e-0 pe-1;
@@ -68,12 +74,12 @@
 
 /* Nav buttons wrapper */
 .pagination__nav {
-  @apply flex items-center;
+  @apply shrink-0 flex items-center;
 }
 
 /* === Pagy nav === */
 .pagy.series-nav {
-  @apply flex items-center gap-0.5;
+  @apply flex min-w-max items-center gap-0.5 whitespace-nowrap;
 
   a[role="separator"] {
     @apply px-2 text-sm text-content-secondary;

app/components/avo/paginator_component.html.erb

@@ -29,23 +29,29 @@
   </div>
 
   <%# Right: info + navigation grouped pill %>
-  <div class="pagination__controls">
-    <% if @resource.pagination_type.default? %>
-      <div class="pagination__info">
-        <span class="pagination__info-number">
-          <%= "#{@pagy.from}-#{@pagy.to}" %>
-        </span>
-        &nbsp; of &nbsp;
-        <span>
-          <%= "#{@pagy.count}" %>
-        </span>
-      </div>
-    <% end %>
+  <div class="pagination__controls-wrap">
+    <div class="pagination__controls">
+      <% if @resource.pagination_type.default? %>
+        <div class="pagination__info">
+          <span class="pagination__info-number">
+            <%= "#{formatted_number(@pagy.from)}-#{formatted_number(@pagy.to)}" %>
+          </span>
+          &nbsp; of &nbsp;
+          <% if @pagy.count >= 10_000 %>
+            <span title="<%= formatted_count %>" data-tippy="tooltip">
+              <%= number_to_social(@pagy.count, start_at: 10_000) %>
+            </span>
+          <% else %>
+            <span><%= formatted_count %></span>
+          <% end %>
+        </div>
+      <% end %>
 
-    <% if @pagy.pages > 1 %>
-      <div class="pagination__nav">
-        <%== @pagy.series_nav(anchor_string: "data-turbo-frame=\"#{@turbo_frame}\"") %>
-      </div>
-    <% end %>
+      <% if @pagy.pages > 1 %>
+        <div class="pagination__nav">
+          <%== formatted_series_nav %>
+        </div>
+      <% end %>
+    </div>
   </div>
 </div>

app/components/avo/paginator_component.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class Avo::PaginatorComponent < Avo::BaseComponent
+  NUMBER_DELIMITER = "."
+
   prop :resource
   prop :parent_record
   prop :parent_resource
@@ -52,4 +54,20 @@ def per_page_option_label(option)
     num = helpers.content_tag(:span, option, class: "pagination__per-page-option-num")
     "#{num} #{t("avo.per_page").downcase}".html_safe
   end
+
+  def formatted_count
+    formatted_number(@pagy.count)
+  end
+
+  def formatted_series_nav
+    @pagy.series_nav(anchor_string: %(data-turbo-frame="#{@turbo_frame}"))
+      .gsub(/>(\d{4,})</) { |match| match.sub($1, formatted_number($1)) }
+      .html_safe
+  end
+
+  private
+
+  def formatted_number(number)
+    helpers.number_with_delimiter(number, delimiter: NUMBER_DELIMITER)
+  end
 end