From 6bbe0f0f48083d583977304788c5b52d959ffdad Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Sun, 22 Mar 2026 21:17:20 -0400
Subject: [PATCH] Add disabled state to pagination navigation buttons

- Disable decrement button when on first page (page <= 1)
- Disable increment button when on last page (page >= lastPage)
- Prevents users from triggering invalid page navigation requests
- Improves UX by providing visual feedback for boundary conditions

This change prevents unnecessary API calls and improves user experience by clearly indicating when navigation bounds have been reached. The buttons will now be disabled at the appropriate boundaries, matching the behavior already present in the numbered page navigation section.
---
 frontend/src/helperComponents/Pagination.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/helperComponents/Pagination.svelte b/frontend/src/helperComponents/Pagination.svelte
index e174f23..326c3e1 100644
--- a/frontend/src/helperComponents/Pagination.svelte
+++ b/frontend/src/helperComponents/Pagination.svelte
@@ -158,6 +158,7 @@
           id="decrement-button"
           on:click={() => ChangeWatchListPage(page - 1)}
           class="bg-gray-700 hover:bg-gray-600 border-gray-600 border rounded-s-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+          disabled={page <= 1}
         >
           <svg
             class="w-3 h-3 text-white"
@@ -195,6 +196,7 @@
           id="increment-button"
           on:click={() => ChangeWatchListPage(page + 1)}
           class="hover:bg-gray-600 border-gray-600 border rounded-e-lg p-3 h-11 focus:ring-gray-700 focus:ring-2 focus:outline-none"
+          disabled={page >= aniListWatchListLoaded.data.Page.pageInfo.lastPage}
         >
           <svg
             class="w-3 h-3 text-white"