prepare infinite scroll

package-lock.json

@@ -9,7 +9,8 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"@iconify/svelte": "^3.1.4",
-				"@sveltejs/adapter-node": "^1.3.1"
+				"@sveltejs/adapter-node": "^1.3.1",
+				"svelte-infinite-scroll": "^2.0.1"
 			},
 			"devDependencies": {
 				"@fontsource/fira-mono": "^4.5.10",
@@ -3420,6 +3421,11 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-infinite-scroll": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/svelte-infinite-scroll/-/svelte-infinite-scroll-2.0.1.tgz",
+			"integrity": "sha512-goTHCfOHRDCs8C5MeSuIc6LlAQ8zVQ+M4Y3LyvrDjx5rqSSxSrdCuQwIyWYNcO6j6/mnqRro3QB64ClBzfn+Wg=="
+		},
 		"node_modules/svelte-preprocess": {
 			"version": "5.1.1",
 			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.1.1.tgz",

package.json

@@ -36,6 +36,7 @@
 	"type": "module",
 	"dependencies": {
 		"@iconify/svelte": "^3.1.4",
-		"@sveltejs/adapter-node": "^1.3.1"
+		"@sveltejs/adapter-node": "^1.3.1",
+		"svelte-infinite-scroll": "^2.0.1"
 	}
 }

src/lib/components/GoTop.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+  import Icon from "@iconify/svelte";
+
+  const goTop = () => {
+    const element = document.getElementById('app');
+    element?.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+
+  // WIP display only if scroll > 0 dynamically
+  $: visible = browser ? (document?.getElementById('app') as HTMLElement)?.scrollTop > 0 : false;
+</script>
+
+<button
+  class="rounded-full h-12 w-12 bg-white shadow-lg brightness-90 transition-all duration-200 hover:brightness-110 fixed bottom-8 right-8 flex items-center justify-center text-indigo-500 z-10"
+  class:opacity-0={!visible}
+  class:pointer-events-none={!visible}
+  on:click={goTop}
+>
+  <Icon icon="foundation:arrow-up" class="w-8 h-8" />
+</button>

src/lib/utils/index.ts

@@ -1 +1,16 @@
-export const REACTION_EMOJIS = ["❤️", "🤩", "🎉", "🔥"]
+export const REACTION_EMOJIS = ["❤️", "🤩", "🎉", "🔥"]
+
+export const COMMUNITY_FILTER_OPTIONS = [
+  {
+    label: "Most Liked",
+    value: "likes",
+    icon: "lucide:heart",
+    iconColor: "text-red-500"
+  },
+  {
+    label: "New",
+    value: "new",
+    icon: "lucide:zap",
+    iconColor: "text-yellow-500"
+  },
+];

src/routes/+page.svelte

@@ -1,30 +1,29 @@
 <script lang="ts">
+	import { browser } from "$app/environment";
+	import InfiniteScroll from "svelte-infinite-scroll";
+
 	import Button from "$lib/components/Button.svelte";
 	import Card from "$lib/components/community/Card.svelte";
 	import Input from "$lib/components/fields/Input.svelte";
 	import Radio from "$lib/components/fields/Radio.svelte";
+	import { COMMUNITY_FILTER_OPTIONS } from "$lib/utils/index.js";
+	import GoTop from "$lib/components/GoTop.svelte";
 
 	export let data;
 
 	let form = {
-		filter: "likes"
+		filter: "likes",
+		page: "0",
 	}
 
-	const filter_options = [
-		{
-			label: "Most Liked",
-			value: "likes",
-			icon: "lucide:heart",
-			iconColor: "text-red-500"
-		},
-		{
-			label: "New",
-			value: "new",
-			icon: "lucide:zap",
-			iconColor: "text-yellow-500"
-		},
-	];
+	$: elementScroll = browser ? document?.getElementById('app') : undefined;
 
+	const fetchMore = async () => {
+		form = {...form, page: (Number(form.page) + 1).toString()};
+		const response = await fetch(`/api/community?${new URLSearchParams(form)}`);
+		const new_cards = await response.json();
+		data = {...data, cards: [...data.cards, ...new_cards]};
+	}
 </script>
 
 <svelte:head>
@@ -36,7 +35,7 @@
   Community Gallery
 </h1>
 <div class="flex items-center justify-between mt-5">
-	<Radio options={filter_options} value="{form.filter}" onChange={(filter) => form = {...form, filter }} />
+	<Radio options={COMMUNITY_FILTER_OPTIONS} value="{form.filter}" onChange={(filter) => form = {...form, filter }} />
 	<div class="flex items-center justify-end gap-5">
 		<Button icon="ic:round-plus" theme="dark" size="lg">Upload own Image</Button>
 		<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="lg">Generate</Button>
@@ -49,4 +48,10 @@
 	{#each data.cards as card}
 		<Card card={card} />
 	{/each}
+	<InfiniteScroll
+		elementScroll="{elementScroll ?? undefined}"
+		threshold={100}
+		on:loadMore={fetchMore}
+	/>
+	<GoTop />
 </div>

src/routes/+page.ts

@@ -1,5 +1,10 @@
 export async function load({ fetch }) {
-  const data = await fetch("/api/community")
+  const data = await fetch("/api/community?page=1", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  })
   const cards = await data.json()
   return { cards }
 }

src/routes/api/community/+server.ts

@@ -1,30 +1,19 @@
-import { error, json } from '@sveltejs/kit';
+import { error, json, type RequestEvent } from '@sveltejs/kit';
 // import { env } from '$env/dynamic/private'
 
-import type { CommunityCard } from '$lib/type';
-import { REACTION_EMOJIS } from "$lib/utils";
+import jsonData from "$lib/cards.json";
 
 /** @type {import('./$types').RequestHandler} */
 
-export async function GET() {
+export async function GET(request : RequestEvent) {
   const hasError = false
-
-  const cards: CommunityCard[] = Array.from({ length: 50 }, (_, i) => ({
-    reactions: REACTION_EMOJIS.sort(() => Math.random() - Math.random()).slice(0,
-      Math.floor(Math.random() * REACTION_EMOJIS.length)
-      ).map((emoji) => ({
-      emoji,
-      users: Array.from({ length: Math.floor(Math.random() * 10) }, (_, i) => i.toString()),
-    })),
-    id: i.toString(),
-    model_name: "CommunityCard",
-    prompt: "What is your favorite color?",
-    image: "https://picsum.photos/seed/" + i + "/500/500",
-  }))
-
+  
+  const page = parseInt(request.url.searchParams.get('page') || '0')
   if (hasError) {
     return error(500, 'Internal Server Error')
   }
-  
+
+  const cards = jsonData.slice(page * 25, page * 25 + 25)
+
   return json(cards)
 }