From d841fee1e74fe683b19346acf4136510edfcfbfd Mon Sep 17 00:00:00 2001
From: John O'Keefe <jrokeefe@protonmail.com>
Date: Sun, 22 Mar 2026 21:09:13 -0400
Subject: [PATCH] Fix TypeScript type safety in Pagination event handlers

- Add proper type annotations to changePage function parameter using KeyboardEvent with HTMLInputElement currentTarget
- Add proper type annotations to changeCountPerPage function parameter using Event with HTMLSelectElement currentTarget
- Replace all e.target references with e.currentTarget to access properly typed DOM elements
- Add hover state styling to active page button for better UI feedback

This change resolves TypeScript errors where EventTarget type didn't have access to element-specific properties like 'value'. Using currentTarget instead of target provides the correct type since currentTarget refers to the element that has the event listener attached, ensuring type-safe access to input and select element properties.
---
 .../src/helperComponents/Pagination.svelte     | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/frontend/src/helperComponents/Pagination.svelte b/frontend/src/helperComponents/Pagination.svelte
index cb3450a..e174f23 100644
--- a/frontend/src/helperComponents/Pagination.svelte
+++ b/frontend/src/helperComponents/Pagination.svelte
@@ -32,21 +32,25 @@
     });
   }
 
-  function changePage(e): void {
+  function changePage(
+    e: KeyboardEvent & { currentTarget: HTMLInputElement },
+  ): void {
     if (
       (e.key === "Enter" || e.key === "Tab") &&
-      Number(e.target.value) !== page
+      Number(e.currentTarget.value) !== page
     )
-      ChangeWatchListPage(Number(e.target.value));
+      ChangeWatchListPage(Number(e.currentTarget.value));
   }
 
-  function changeCountPerPage(e): void {
+  function changeCountPerPage(
+    e: Event & { currentTarget: HTMLSelectElement },
+  ): void {
     GetAniListUserWatchingList(
       1,
-      Number(e.target.value),
+      Number(e.currentTarget.value),
       MediaListSort.UpdatedTimeDesc,
     ).then((result) => {
-      animePerPage.set(Number(e.target.value));
+      animePerPage.set(Number(e.currentTarget.value));
       watchListPage.set(1);
       aniListWatchlist.set(result);
       aniListLoggedIn.set(true);
@@ -82,7 +86,7 @@
             <li>
               <button
                 on:click={() => ChangeWatchListPage(i + 1)}
-                class="flex items-center justify-center px-4 h-10 leading-tight border bg-gray-100 border-gray-700 bg-gray-700 text-white"
+                class="flex items-center justify-center px-4 h-10 leading-tight border hover:bg-gray-100 border-gray-700 bg-gray-700 text-white"
                 >{i + 1}</button
               >
             </li>