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;
-        display: inline-flex;
+        padding: 16px 0;
+        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 {
-            font-weight: bold;
-            background-color: var(--card-background-selected);
-            color: var(--card-text-color-main);
+        &:first-child,
+        &:last-child {
+            flex: 0 0 48px;
+            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;
+        }
     }
-}
+}