From ea9317ff223e49ad6df571a8843280aa6210e87d Mon Sep 17 00:00:00 2001
From: Rodrigo Verdiani <rocverdiani@gmail.com>
Date: Wed, 31 Dec 2025 21:24:52 -0300
Subject: [PATCH] feat: implement dynamic page sizing on the Home page based on
 window dimensions.

---
 src/hooks/useDynamicPageSize.ts  | 20 ++++++++++++++++++++
 src/hooks/useWindowDimensions.ts | 26 ++++++++++++++++++++++++++
 src/pages/Home.tsx               | 11 +++++++----
 3 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 src/hooks/useDynamicPageSize.ts
 create mode 100644 src/hooks/useWindowDimensions.ts

diff --git a/src/hooks/useDynamicPageSize.ts b/src/hooks/useDynamicPageSize.ts
new file mode 100644
index 0000000..a698faf
--- /dev/null
+++ b/src/hooks/useDynamicPageSize.ts
@@ -0,0 +1,20 @@
+import useWindowDimensions from "@/hooks/useWindowDimensions.ts";
+
+export const useDynamicPageSize = (rows = 4) => {
+    const { width } = useWindowDimensions();
+
+    if (width >= 1280) {
+        // xl: 5 columns
+        return 5 * rows;
+    }
+    if (width >= 1024) {
+        // lg: 4 columns
+        return 4 * rows;
+    }
+    if (width >= 768) {
+        // md: 3 columns
+        return 3 * rows;
+    }
+    // default: 2 columns
+    return 2 * rows;
+};
diff --git a/src/hooks/useWindowDimensions.ts b/src/hooks/useWindowDimensions.ts
new file mode 100644
index 0000000..e80b418
--- /dev/null
+++ b/src/hooks/useWindowDimensions.ts
@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+function getWindowDimensions() {
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height,
+    };
+}
+
+export default function useWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = useState(
+        getWindowDimensions(),
+    );
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+    return windowDimensions;
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 1ee4735..5e86f38 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -13,10 +13,13 @@ import {
 	SortDropdown,
 } from "@/features/home/components/SortDropdown.tsx";
 import { useUIState } from "@/contexts/UIStateContext.tsx";
+import { useDynamicPageSize } from "@/hooks/useDynamicPageSize.ts";
+
+const ROWS_PER_PAGE = 4;
 
-const ITEMS_PER_PAGE = 12;
 
 const Home = () => {
+	const itemsPerPage = useDynamicPageSize(ROWS_PER_PAGE);
 	const {
 		currentPage,
 		setCurrentPage,
@@ -40,7 +43,7 @@ const Home = () => {
 
 	const { data: mangasData, queryKey: mangasQueryKey } = useGetMangas({
 		page: currentPage - 1,
-		size: ITEMS_PER_PAGE,
+		size: itemsPerPage,
 		sort: ["id"],
 		searchQuery: debouncedSearchText,
 		statuses: selectedStatus,
@@ -122,9 +125,9 @@ const Home = () => {
 							{mangasData.data?.totalElements && (
 								<div className="mb-6 flex items-center justify-between">
 									<p className="text-sm text-muted-foreground">
-										Showing {(currentPage - 1) * ITEMS_PER_PAGE + 1} to{" "}
+										Showing {(currentPage - 1) * itemsPerPage + 1} to{" "}
 										{Math.min(
-											currentPage * ITEMS_PER_PAGE,
+											currentPage * itemsPerPage,
 											mangasData.data.totalElements,
 										)}{" "}
 										of {mangasData.data.totalElements}