From a499aae31ffce97f0cf1ac992c50dd34407e9d26 Mon Sep 17 00:00:00 2001
From: Hachi-R <drive8hachi@gmail.com>
Date: Mon, 23 Dec 2024 18:49:18 -0300
Subject: [PATCH] feat: smooth scrolling on pagination

---
 src/renderer/src/pages/catalogue/catalogue.scss |  2 ++
 src/renderer/src/pages/catalogue/catalogue.tsx  | 10 ++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/pages/catalogue/catalogue.scss b/src/renderer/src/pages/catalogue/catalogue.scss
index 18cc18be..701652df 100644
--- a/src/renderer/src/pages/catalogue/catalogue.scss
+++ b/src/renderer/src/pages/catalogue/catalogue.scss
@@ -1,11 +1,13 @@
 @use "../../scss/globals.scss";
 
 .catalogue {
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: calc(globals.$spacing-unit * 2);
   width: 100%;
   padding: 16px;
+  scroll-behavior: smooth;
 
   &__filters-container {
     width: 270px;
diff --git a/src/renderer/src/pages/catalogue/catalogue.tsx b/src/renderer/src/pages/catalogue/catalogue.tsx
index eb51f856..cdc212ac 100644
--- a/src/renderer/src/pages/catalogue/catalogue.tsx
+++ b/src/renderer/src/pages/catalogue/catalogue.tsx
@@ -33,6 +33,7 @@ const PAGE_SIZE = 20;
 
 export default function Catalogue() {
   const abortControllerRef = useRef<AbortController | null>(null);
+  const cataloguePageRef = useRef<HTMLDivElement>(null);
 
   const { steamGenres, steamUserTags, steamDevelopers, steamPublishers } =
     useCatalogue();
@@ -214,7 +215,7 @@ export default function Catalogue() {
   ]);
 
   return (
-    <div className="catalogue">
+    <div className="catalogue" ref={cataloguePageRef}>
       <div
         style={{
           display: "flex",
@@ -303,7 +304,12 @@ export default function Catalogue() {
             <Pagination
               page={page}
               totalPages={Math.ceil(itemsCount / PAGE_SIZE)}
-              onPageChange={(page) => dispatch(setPage(page))}
+              onPageChange={(page) => {
+                dispatch(setPage(page));
+                if (cataloguePageRef.current) {
+                  cataloguePageRef.current.scrollTop = 0;
+                }
+              }}
             />
           </div>
         </div>