fix(components/tiles): make multiple pages work

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) {
+        // NOTE: Handle the current page and multipler.
-            scrollSide = -scrollSide;
+        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;
         }
 

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>

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>