From 314a64b3ceb24ec1a16918babc5daa3b63a1de83 Mon Sep 17 00:00:00 2001
From: Matt Rubens <mrubens@users.noreply.github.com>
Date: Mon, 30 Jun 2025 15:47:30 -0400
Subject: [PATCH] Scroll to top on page change (#161)

---
 .../src/app/(authenticated)/usage/Tasks.tsx   | 10 +++++--
 .../ui/CursorPaginationControls.tsx           | 30 +++++++++++++++++--
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/app/(authenticated)/usage/Tasks.tsx b/apps/web/src/app/(authenticated)/usage/Tasks.tsx
index 9509a0fd7e..4a923f0003 100644
--- a/apps/web/src/app/(authenticated)/usage/Tasks.tsx
+++ b/apps/web/src/app/(authenticated)/usage/Tasks.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useRef } from 'react';
 import { useAuth } from '@clerk/nextjs';
 import { useQuery } from '@tanstack/react-query';
 
@@ -27,6 +27,7 @@ export const Tasks = ({
 }) => {
   const { orgId } = useAuth();
   const polling = useRealtimePolling({ enabled: true, interval: 5000 });
+  const tasksListRef = useRef<HTMLDivElement>(null);
 
   // Initialize cursor-based pagination
   const pagination = useCursorPagination(100);
@@ -102,7 +103,7 @@ export const Tasks = ({
 
   return (
     <div className="space-y-4">
-      <div className="space-y-3 sm:space-y-4">
+      <div ref={tasksListRef} className="space-y-3 sm:space-y-4">
         {tasks.map((task) => (
           <TaskCard
             key={task.taskId}
@@ -115,7 +116,10 @@ export const Tasks = ({
 
       {/* Cursor Pagination Controls */}
       <div className="flex justify-center mt-6">
-        <CursorPaginationControls pagination={pagination} />
+        <CursorPaginationControls
+          pagination={pagination}
+          scrollTargetRef={tasksListRef}
+        />
       </div>
     </div>
   );
diff --git a/apps/web/src/components/ui/CursorPaginationControls.tsx b/apps/web/src/components/ui/CursorPaginationControls.tsx
index d05f2d663f..3d96e24c2e 100644
--- a/apps/web/src/components/ui/CursorPaginationControls.tsx
+++ b/apps/web/src/components/ui/CursorPaginationControls.tsx
@@ -6,11 +6,12 @@ interface CursorPaginationControlsProps {
   pagination: CursorPaginationHook;
   className?: string;
   showPageInfo?: boolean;
+  scrollTargetRef?: React.RefObject<HTMLElement | null>;
 }
 
 export const CursorPaginationControls: React.FC<
   CursorPaginationControlsProps
-> = ({ pagination, className = '', showPageInfo = true }) => {
+> = ({ pagination, className = '', showPageInfo = true, scrollTargetRef }) => {
   const {
     hasNextPage,
     hasPreviousPage,
@@ -19,6 +20,29 @@ export const CursorPaginationControls: React.FC<
     currentPageIndex,
   } = pagination;
 
+  const scrollToTarget = () => {
+    setTimeout(() => {
+      if (scrollTargetRef?.current) {
+        const rect = scrollTargetRef.current.getBoundingClientRect();
+        const scrollTop = window.pageYOffset + rect.top - 20;
+        window.scrollTo({
+          top: scrollTop,
+          behavior: 'smooth',
+        });
+      }
+    }, 100);
+  };
+
+  const handleNextPage = () => {
+    nextPage();
+    scrollToTarget();
+  };
+
+  const handlePreviousPage = () => {
+    previousPage();
+    scrollToTarget();
+  };
+
   // Don't show pagination if we're on the first page and there's no next page
   if (currentPageIndex === 0 && !hasNextPage) {
     return null;
@@ -29,7 +53,7 @@ export const CursorPaginationControls: React.FC<
       <Button
         variant="outline"
         size="sm"
-        onClick={previousPage}
+        onClick={handlePreviousPage}
         disabled={!hasPreviousPage}
         className="px-3 py-2"
       >
@@ -45,7 +69,7 @@ export const CursorPaginationControls: React.FC<
       <Button
         variant="outline"
         size="sm"
-        onClick={nextPage}
+        onClick={handleNextPage}
         disabled={!hasNextPage}
         className="px-3 py-2"
       >