From ebbebf8e570f44faf2e8e3715481f0364dae83e1 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Sat, 20 Jan 2024 06:03:20 +0300
Subject: [PATCH] Add previous/next page arrows to newer/older pagination

---
 app/helpers/svg_helper.rb             | 19 +++++++++++++++++++
 app/views/shared/_pagination.html.erb | 25 +++++++++++++++++--------
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/app/helpers/svg_helper.rb b/app/helpers/svg_helper.rb
index a40fa7086..9c02fc1d9 100644
--- a/app/helpers/svg_helper.rb
+++ b/app/helpers/svg_helper.rb
@@ -1,4 +1,12 @@
 module SvgHelper
+  def previous_page_svg_tag(**options)
+    adjacent_page_svg_tag(dir == "rtl" ? 1 : -1, **options)
+  end
+
+  def next_page_svg_tag(**options)
+    adjacent_page_svg_tag(dir == "rtl" ? -1 : 1, **options)
+  end
+
   def key_svg_tag(**options)
     border_width = options["border"] ? (options["border-width"] || 1) : 0
     rect_attrs = {
@@ -31,6 +39,17 @@ module SvgHelper
 
   private
 
+  # returns "<" shape if side == -1; ">" if side == 1
+  def adjacent_page_svg_tag(side, **options)
+    height = 15
+    pad = 2
+    segment = (0.5 * height) - pad
+    width = segment + (2 * pad)
+    path_data = "M#{side * (pad - (0.5 * width))},#{pad} l#{side * segment},#{segment} l#{-side * segment},#{segment}"
+    path_tag = tag.path :d => path_data, :fill => "none", :stroke => "currentColor", :"stroke-width" => 1.5
+    tag.svg path_tag, :width => width, :height => height, :viewBox => "-#{0.5 * width} 0 #{width} #{height}", :class => options[:class]
+  end
+
   def stroke_attrs(attrs, prefix)
     attrs.select { |key| key.start_with?(prefix) }.transform_keys { |key| key.delete_prefix(prefix).prepend("stroke") }
   end
diff --git a/app/views/shared/_pagination.html.erb b/app/views/shared/_pagination.html.erb
index fbb9dcf43..3a6000362 100644
--- a/app/views/shared/_pagination.html.erb
+++ b/app/views/shared/_pagination.html.erb
@@ -1,22 +1,31 @@
 <nav>
+  <% link_class = "page-link d-flex align-items-center gap-2 text-center" %>
   <ul class="pagination">
+    <% newer_link_content = capture do %>
+      <%= previous_page_svg_tag :class => "flex-shrink-0 d-none d-sm-block" %>
+      <%= t(newer_key) %>
+    <% end %>
     <% if newer_id -%>
-      <li class="page-item">
-        <%= link_to t(newer_key), @params.merge(:before => nil, :after => newer_id), :class => "page-link" %>
+      <li class="page-item d-flex">
+        <%= link_to newer_link_content, @params.merge(:before => nil, :after => newer_id), :class => link_class %>
       </li>
     <% else -%>
-      <li class="page-item disabled">
-        <span class="page-link"><%= t(newer_key) %></span>
+      <li class="page-item d-flex disabled">
+        <%= tag.span newer_link_content, :class => link_class %>
       </li>
     <% end -%>
 
+    <% older_link_content = capture do %>
+      <%= t(older_key) %>
+      <%= next_page_svg_tag :class => "flex-shrink-0 d-none d-sm-block" %>
+    <% end %>
     <% if older_id -%>
-      <li class="page-item">
-        <%= link_to t(older_key), @params.merge(:before => older_id, :after => nil), :class => "page-link" %>
+      <li class="page-item d-flex">
+        <%= link_to older_link_content, @params.merge(:before => older_id, :after => nil), :class => link_class %>
       </li>
     <% else -%>
-      <li class="page-item disabled">
-        <span class="page-link"><%= t(older_key) %></span>
+      <li class="page-item d-flex disabled">
+        <%= tag.span older_link_content, :class => link_class %>
       </li>
     <% end -%>
   </ul>
-- 
2.39.5