simple pagination

frontend/src/lib/ArrowLeft.svelte

@@ -0,0 +1,13 @@
+<svg
+	class="mr-1.5"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+	><path d="M10 16L20 6l1.4 1.4l-8.6 8.6l8.6 8.6L20 26z" fill="currentColor" /></svg
+>

frontend/src/lib/ArrowRight.svelte

@@ -0,0 +1,13 @@
+<svg
+	class="ml-1.5 transform rotate-180"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	focusable="false"
+	role="img"
+	width="1em"
+	height="1em"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 32 32"
+	><path d="M10 16L20 6l1.4 1.4l-8.6 8.6l8.6 8.6L20 26z" fill="currentColor" /></svg
+>

frontend/src/routes/+page.svelte

@@ -5,13 +5,15 @@
 	import { isLoading, loadingState } from '$lib/store';
 	import { PUBLIC_WS_ENDPOINT, PUBLIC_DEV_MODE } from '$env/static/public';
 	import Pallette from '$lib/Palette.svelte';
+	import ArrowRight from '$lib/ArrowRight.svelte';
+	import ArrowLeft from '$lib/ArrowLeft.svelte';
 
 	const apiUrl =
 		PUBLIC_DEV_MODE === 'DEV'
 			? 'http://localhost:7860'
 			: '/embed/huggingface-projects/color-palette-generator-sd';
 
-	let promptsData: ColorsPrompt[];
+	let promptsData: ColorsPrompt[] = [];
 	let prompt: string;
 	let promptInputEl: HTMLElement;
 
@@ -26,14 +28,33 @@
 	async function fetchData() {
 		const palettes = await fetch(apiUrl + '/data').then((d) => d.json());
 		if (!promptsData || palettes?.length > promptsData?.length) {
-			promptsData = sortData(palettes).filter((d) => d.images.length > 0);
+			promptsData = sortData(palettes);
 		}
 	}
 
 	$: promptsTotal = promptsData?.length || null;
 
+	let page: number = 0;
+	const maxPerPage: number = 10;
+	$: totalPages = Math.ceil(promptsData?.length / maxPerPage) || 0;
+	$: promptsDataPage = [...promptsData].slice(page * maxPerPage, (page + 1) * maxPerPage);
+	let pagesLinks: number[] = [];
+	$: if (totalPages) {
+		const pagesNums = Array(totalPages)
+			.fill([])
+			.map((_, i) => ({ value: i, label: i + 1 }));
+		pagesLinks = pagesNums
+			.slice(0, 3)
+			.concat([{ value: -1, label: '...' }])
+			.concat(pagesNums.length > 3 ? pagesNums.slice(-1) : []);
+		console.log(pagesLinks);
+	}
+
 	function sortData(_promptData: ColorsPrompt[]) {
-		return _promptData.sort((a, b) => b.id - a.id).map((p) => p.data);
+		return _promptData
+			.sort((a, b) => b.id - a.id)
+			.map((p) => p.data)
+			.filter((d) => d.images.length > 0);
 	}
 	async function savePaletteDB(colorPrompt: ColorsPrompt) {
 		try {
@@ -221,13 +242,54 @@
 		<div class="grow border-b border-gray-200" />
 	</div>
 
-	{#if promptsData}
+	{#if promptsDataPage}
 		<div>
-			{#each promptsData as promptData}
+			{#each promptsDataPage as promptData}
 				<Pallette {promptData} on:remix={remix} />
 				<div class="border-b border-gray-200 py-2" />
 			{/each}
 		</div>
+		<nav role="navigation">
+			<ul
+				class="items-center sm:justify-center space-x-2  select-none w-full flex justify-center mt-6 mb-4"
+			>
+				<li />
+				<li>
+					<a
+						on:click|preventDefault={() => {
+							page = page - 1 < 0 ? 0 : page - 1;
+							// window.scrollTo(0, 0);
+							// if ('parentIFrame' in window) {
+							// 	window.parentIFrame.scrollTo(0, promptInputEl.offsetTop);
+							// }
+						}}
+						class="px-2.5 py-1 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center rounded-lg"
+						href="#"
+						><ArrowLeft /> Previous
+					</a>
+				</li>
+				<li class="text-sm">
+					<span class="inline-block min-w-[3ch] text-right">{page + 1} </span>/<span
+						class="inline-block min-w-[3ch]"
+						>{totalPages}
+					</span>
+				</li>
+				<li>
+					<a
+						on:click|preventDefault={() => {
+							page = page + 1 >= totalPages - 1 ? totalPages - 1 : page + 1;
+							// window.scrollTo(0, 0);
+							// if ('parentIFrame' in window) {
+							// 	window.parentIFrame.scrollTo(0, promptInputEl.offsetTop);
+							// }
+						}}
+						class="px-2.5 py-1 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center rounded-lg"
+						href="#"
+						>Next <ArrowRight />
+					</a>
+				</li>
+			</ul>
+		</nav>
 	{/if}
 </div>