From 7205033ee588c972ba747647d7b2bda8e3bd428c Mon Sep 17 00:00:00 2001
From: synzr <mikhail@synzr.space>
Date: Mon, 1 Dec 2025 14:21:03 +0500
Subject: [PATCH] fix(components/tiles): make multiple pages work

---
 src/lib/components/tiles/Tile.svelte          | 37 +++++++++++++++----
 .../tiles/pages/TileTextPage.svelte           |  2 +-
 src/routes/(tiles)/+page.svelte               | 19 +++++-----
 3 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/tiles/Tile.svelte b/src/lib/components/tiles/Tile.svelte
index 8506ad2..6e28f91 100644
--- a/src/lib/components/tiles/Tile.svelte
+++ b/src/lib/components/tiles/Tile.svelte
@@ -118,24 +118,43 @@ Metro-like tile. Must be in a group to display correctly.
     const pageHeight = PAGE_HEIGHTS[size];
 
     /**
-     * Scroll side. Positive value is down, negative value is up.
+     * Current page number.
      */
-    let scrollSide = 1;
+    let currentPage = 1;
 
     /**
-     * Get page count based on scroll height.
+     * Scroll orientation.
      */
-    const getPageCount = () => Math.floor(element.scrollHeight / pageHeight);
+    let scrollOrientation: "up" | "down" = "down";
+
+    /**
+     * Page count.
+     */
+    let pageCount: number;
 
     /**
      * Scroll between pages. Used by scroll interval.
      */
     function scrollPages() {
-        if (element.clientHeight === element.scrollHeight - pageHeight) {
-            scrollSide = -scrollSide;
+        // NOTE: Handle the current page and multipler.
+        let scrollMultipler: number;
+        if (scrollOrientation === "down") {
+            scrollMultipler = 1;
+            currentPage++;
+        } else {
+            scrollMultipler = -1;
+            currentPage--;
         }
 
-        element.scrollBy({ top: pageHeight * scrollSide });
+        // NOTE: Scroll the pages.
+        element.scrollBy({ top: pageHeight * scrollMultipler });
+
+        // NOTE: Change the orientation after scroll.
+        if (currentPage === pageCount) {
+            scrollOrientation = "up";
+        } else if (currentPage === 1) {
+            scrollOrientation = "down";
+        }
     }
 
     /**
@@ -144,7 +163,9 @@ Metro-like tile. Must be in a group to display correctly.
     let scrollInterval: NodeJS.Timeout;
 
     onMount(() => {
-        if (size === "small" || getPageCount() === 1) {
+        pageCount = Math.floor(element.scrollHeight / pageHeight);
+
+        if (size === "small" || pageCount === 1) {
             return;
         }
 
diff --git a/src/lib/components/tiles/pages/TileTextPage.svelte b/src/lib/components/tiles/pages/TileTextPage.svelte
index af8ccf0..143dabd 100644
--- a/src/lib/components/tiles/pages/TileTextPage.svelte
+++ b/src/lib/components/tiles/pages/TileTextPage.svelte
@@ -31,7 +31,7 @@ Text page for a tile. Must be in a tile to display correctly.
     {/if}
 
     <div
-        class="w-[20px] mt-auto aspect-square bg-contain bg-center bg-no-repeat self-end"
+        class="w-5 mt-auto aspect-square bg-contain bg-center bg-no-repeat self-end"
         style="background-image: var(--tile-icon);"
     ></div>
 </div>
diff --git a/src/routes/(tiles)/+page.svelte b/src/routes/(tiles)/+page.svelte
index 0202d6d..98190fe 100644
--- a/src/routes/(tiles)/+page.svelte
+++ b/src/routes/(tiles)/+page.svelte
@@ -17,16 +17,17 @@
     </Tile>
 
     <Tile size="medium" row={3} column={5} icon={iconSynzr}>
-        <TileIconPage name="mikhail" />
-    </Tile>
-
-    <Tile size="wide" row={5} column={3} icon={iconSynzr}>
-        <TileImagePage image={imageTestRectangle} />
-        <TileTextPage title="Title" subtitle="Subtitle" text="Text" />
-    </Tile>
-
-    <Tile size="large" row={1} column={1} icon={iconSynzr}>
         <TileImagePage image={imageTestSquare} />
         <TileTextPage title="Title" subtitle="Subtitle" text="Text" />
     </Tile>
+
+    <Tile size="wide" row={5} column={3} icon={iconSynzr}>
+        <TileIconPage name="mikhail" />
+        <TileImagePage image={imageTestRectangle} />
+    </Tile>
+
+    <Tile size="large" row={1} column={1} icon={iconSynzr}>
+        <TileIconPage name="mikhail" />
+        <TileImagePage image={imageTestSquare} />
+    </Tile>
 </TileGroup>