feat: enhance pagination controls with filter key handling and stability improvements

Author: ErwanDecoster

src/components/PaginatedNavigation.tsx

@@ -14,20 +14,27 @@ type PaginationControlsProps = {
   currentPage: number;
   totalPages: number;
   onPageChange: (page: number) => void;
+  // Optional key whose change can shrink/grow pages immediately (e.g. active filter)
+  filterKey?: string;
 };
 
 export const PaginatedNavigation = ({
   currentPage,
   totalPages,
   onPageChange,
+  filterKey,
 }: PaginationControlsProps) => {
   const { chainId } = useUserStore();
 
   const lastValidTotalPagesRef = useRef(1);
   const lastChainIdRef = useRef<number | null>(null);
   const chainChangeFrameRef = useRef(0);
 
+  const lastFilterKeyRef = useRef<string | undefined>(undefined);
+  const filterChangeFrameRef = useRef(0);
+
   const chainHasChanged = chainId !== lastChainIdRef.current;
+  const filterHasChanged = filterKey !== lastFilterKeyRef.current;
 
   if (chainHasChanged) {
     lastChainIdRef.current = chainId ?? null;
@@ -36,66 +43,72 @@ export const PaginatedNavigation = ({
     chainChangeFrameRef.current++;
   }
 
+  if (filterHasChanged) {
+    lastFilterKeyRef.current = filterKey;
+    filterChangeFrameRef.current = 0;
+  } else {
+    filterChangeFrameRef.current++;
+  }
+
   let stableTotalPages = lastValidTotalPagesRef.current;
 
   const isRecentChainChange = chainChangeFrameRef.current <= 5;
-
-  if (chainHasChanged || isRecentChainChange) {
+  const isRecentFilterChange = filterChangeFrameRef.current <= 5;
+
+  if (
+    chainHasChanged ||
+    filterHasChanged ||
+    isRecentChainChange ||
+    isRecentFilterChange
+  ) {
     stableTotalPages = Math.max(totalPages, 1);
   } else if (totalPages > 0 && totalPages >= lastValidTotalPagesRef.current) {
     stableTotalPages = totalPages;
   }
+  // Reset page if it no longer exists after filter change
+  if (filterHasChanged && currentPage > stableTotalPages) {
+    onPageChange(1);
+  }
 
   lastValidTotalPagesRef.current = stableTotalPages;
 
-  // Don't render pagination if no pages or invalid state
   if (!stableTotalPages || stableTotalPages <= 0 || currentPage <= 0) {
     return null;
   }
 
   const generatePages = () => {
     const pages: (number | 'ellipsis')[] = [];
 
-    // Mobile-first approach: show fewer pages on small screens
     const isMobile = typeof window !== 'undefined' && window.innerWidth < 640;
     const maxVisiblePages = isMobile ? 3 : 7;
 
     if (stableTotalPages <= maxVisiblePages) {
-      // Show all pages if within limit
       for (let i = 1; i <= stableTotalPages; i++) {
         pages.push(i);
       }
     } else if (isMobile) {
-      // Mobile: simplified pagination - only show current and neighbors
       if (currentPage === 1) {
-        // At start: 1 2 ... last
         pages.push(1, 2, 'ellipsis', stableTotalPages);
       } else if (currentPage === stableTotalPages) {
-        // At end: 1 ... (last-1) last
         pages.push(1, 'ellipsis', stableTotalPages - 1, stableTotalPages);
       } else {
-        // Middle: 1 ... current ... last
         pages.push(1, 'ellipsis', currentPage, 'ellipsis', stableTotalPages);
       }
     } else {
-      // Desktop: full pagination logic
       pages.push(1);
 
       if (currentPage <= 3) {
-        // Near beginning: 1 2 3 4 ... last
         for (let i = 2; i <= 4; i++) {
           pages.push(i);
         }
         pages.push('ellipsis');
         pages.push(stableTotalPages);
       } else if (currentPage >= stableTotalPages - 2) {
-        // Near end: 1 ... (last-3) (last-2) (last-1) last
         pages.push('ellipsis');
         for (let i = stableTotalPages - 3; i <= stableTotalPages; i++) {
           pages.push(i);
         }
       } else {
-        // In middle: 1 ... (current-1) current (current+1) ... last
         pages.push('ellipsis');
         for (let i = currentPage - 1; i <= currentPage + 1; i++) {
           pages.push(i);