feat: pagination improvements to maximize space utilization (#1165)

* Minor improvements to pagination functions

* Update pagination styles with enhanced UI/UX design

- Implemented full-width layout with flexible page numbers
- Added fixed-width arrow buttons for consistent navigation
- Enhanced hover and active states for better user interaction
- Improved responsive design with proper flex layout
- Added comprehensive styling for disabled and ellipsis states

* Simplify pagination logic and use SVG files to avoid repeated definition

* Remove change to jsconfig.json

* Remove comments and classes

---------

Co-authored-by: delize <4028612+delize@users.noreply.github.com>
Co-authored-by: Jimmy <jimmy@cai.im>

assets/icons/chevron-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>

assets/icons/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>

assets/icons/dots.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-dots"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /></svg>

assets/scss/partials/pagination.scss

@@ -4,18 +4,47 @@
     box-shadow: var(--shadow-l1);
     border-radius: var(--card-border-radius);
     overflow: hidden;
-    flex-wrap: wrap;
 
     .page-link {
-        padding: 16px 32px;
+        padding: 16px 0;
-        display: inline-flex;
+        margin: 0;
+        border-radius: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1 1 auto;
+        min-width: 48px;
+        color: var(--card-text-color-secondary);
+        text-decoration: none;
 
-        &.current {
+        &:first-child,
-            font-weight: bold;
+        &:last-child {
-            background-color: var(--card-background-selected);
+            flex: 0 0 48px;
-            color: var(--card-text-color-main);
+            padding: 16px;
         }
 
-        color: var(--card-text-color-secondary);
+        &:hover:not(.current):not(.disabled) {
+            background-color: var(--card-background-selected);
+            opacity: 0.8;
+        }
+
+        &.current {
+            background-color: var(--card-background-selected);
+            color: var(--card-text-color-main);
+            font-weight: bold;
+            cursor: default;
+        }
+
+        &.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+            color: var(--card-text-color-secondary);
+        }
+
+        svg {
+            width: 20px;
+            height: 20px;
+        }
     }
-}
+}

layouts/partials/pagination.html

@@ -1,26 +1,70 @@
-{{ if gt .Paginator.TotalPages 1 }}
+{{- $pag := $.Paginator -}}
-    <nav class='pagination'>
+{{- if gt $pag.TotalPages 1 -}}
-        {{ $.Scratch.Set "hasPrevDots" false }}
+<nav class="pagination" role="navigation" aria-label="pagination">
-        {{ $.Scratch.Set "hasNextDots" false }}
+    {{- /* Previous page button */ -}}
+    <a class="page-link {{ if not $pag.Prev }}disabled{{ end }}"
+        {{- if $pag.Prev -}}href="{{ $pag.Prev.URL }}" {{- end -}}
+        aria-label="Previous page" 
+        {{- if not $pag.Prev -}}aria-disabled="true"{{- end -}}>
+        {{ partial "helper/icon" "chevron-left" }}
+    </a>
 
-        {{ range .Paginator.Pagers }}
+    {{- /* Page numbers logic */ -}}
-            {{ if eq . $.Paginator }}
+    {{- $window := 4 -}}
-                <span class='page-link current'>
+    {{- $showFirst := true -}}
-                    {{- .PageNumber -}}
+    {{- $showLast := true -}}
-                </span>
+
-                {{ else if or (or (eq . $.Paginator.First) (eq . $.Paginator.Prev)) (or  (eq . $.Paginator.Next) (eq . $.Paginator.Last )) }}
+    {{- /* First page */ -}}
-                    <a class='page-link' href='{{ .URL }}'>
+    <a class="page-link {{ if eq $pag.PageNumber 1 }}current{{ end }}" aria-label="Page 1"
-                        {{- .PageNumber -}}
+        {{- if eq $pag.PageNumber 1 -}}aria-current="page" {{- end -}}
-                    </a>
+        {{- if ne $pag.PageNumber 1 -}}href="{{ $pag.First.URL }}"{{- end -}}>
-                {{ else }}
+        1
-                    {{ if and (not ($.Scratch.Get "hasPrevDots")) (lt .PageNumber $.Paginator.PageNumber)  }}
+    </a>
-                        {{ $.Scratch.Set "hasPrevDots" true }}
+
-                        <span class='page-link dots'>&hellip;</span>
+    {{- /* Left ellipsis - show if current page is > 3 */ -}}
-                    {{ else if and (not ($.Scratch.Get "hasNextDots")) (gt .PageNumber $.Paginator.PageNumber) }}
+    {{- if gt $pag.PageNumber 3 -}}
-                        {{ $.Scratch.Set "hasNextDots" true }}
+    <span class="page-link pagination-link">
-                        <span class='page-link dots'>&hellip;</span>
+        {{ partial "helper/icon" "dots" }}
-                    {{ end }}
+    </span>
-                {{ end }}
+    {{- end -}}
-            {{ end }}
+
-    </nav>
+    {{- /* Middle pages - show current and neighbors */ -}}
-{{ end }}
+    {{- range $pag.Pagers -}}
+        {{- if and (gt .PageNumber 1) (lt .PageNumber $pag.TotalPages) -}}
+            {{- if and (ge .PageNumber (sub $pag.PageNumber $window)) (le .PageNumber (add $pag.PageNumber $window)) -}}
+            <a class="page-link {{ if eq .PageNumber $pag.PageNumber }}current{{ end }}"
+                {{- if eq .PageNumber $pag.PageNumber -}}aria-current="page" {{- end -}} href="{{ .URL }}"
+                aria-label="Page {{ .PageNumber }}">
+                {{ .PageNumber }}
+            </a>
+            {{- end -}}
+        {{- end -}}
+    {{- end -}}
+
+    {{- /* Right ellipsis - show if current page is < last-2 */ -}}
+    {{- if lt $pag.PageNumber (sub $pag.TotalPages 2) -}}
+    <span class="page-link pagination-link">
+        {{ partial "helper/icon" "dots" }}
+    </span>
+    {{- end -}}
+
+    {{- /* Last page (if more than 1 page total) */ -}}
+
+    {{- if gt $pag.TotalPages 1 -}}
+    <a class="page-link {{ if eq $pag.PageNumber $pag.TotalPages }}current{{ end }}"
+        {{- if ne $pag.PageNumber $pag.TotalPages -}}href="{{ $pag.Last.URL }}" {{- end -}}
+        aria-label="Page {{ $pag.TotalPages }}" 
+        {{- if eq $pag.PageNumber $pag.TotalPages -}}aria-current="page"{{- end -}}>
+        {{ $pag.TotalPages }}
+    </a>
+    {{- end -}}
+
+    {{- /* Next page button */ -}}
+    <a class="page-link {{ if not $pag.Next }}disabled{{ end }}"
+        {{- if $pag.Next -}}href="{{ $pag.Next.URL }}" {{- end -}} 
+        aria-label="Next page"
+        {{- if not $pag.Next -}}aria-disabled="true"{{- end -}}>
+        {{ partial "helper/icon" "chevron-right" }}
+    </a>
+</nav>
+{{- end -}}