feat/infinite-scroll (#170)

* feat/infinite-scroll

* fix: aspect ratio of post

* fix: bottom nav background

Author: grv-saini-20

platforms/metagram/src/lib/dummyData.ts

@@ -0,0 +1,18 @@
+export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
+	id: i + 1,
+	avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+	username: `user${i + 1}`,
+	imgUri: 'https://picsum.photos/800',
+	postAlt: 'Sample',
+	text: `This is post number ${i + 1}. Loving how these shots came out! 📸`,
+	time: `${i + 1} hours ago`,
+	count: {
+		likes: Math.floor(Math.random() * 500),
+		comments: Math.floor(Math.random() * 200)
+	},
+	callback: {
+		like: () => alert(`Like clicked on post ${i + 1}`),
+		comment: () => alert(`Comment clicked on post ${i + 1}`),
+		menu: () => alert(`Menu clicked on post ${i + 1}`)
+	}
+}));

platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte

@@ -40,7 +40,7 @@
 <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
 <nav
 	aria-label="Main navigation"
-	class="fixed start-0 bottom-0 flex w-full items-center justify-between px-7 py-2 md:hidden"
+	class="fixed start-0 bottom-0 flex w-full items-center justify-between bg-white px-7 py-2 md:hidden"
 	role="tablist"
 >
 	<button

platforms/metagram/src/lib/fragments/Header/Header.svelte

@@ -44,7 +44,7 @@
 	};
 
 	const classes = $derived({
-		common: cn('flex items-center justify-between p-4'),
+		common: cn('flex items-center justify-between py-4 px-0'),
 		text: variantClasses[variant].text,
 		background: variantClasses[variant].background
 	});

platforms/metagram/src/lib/fragments/Post/Post.svelte

@@ -52,7 +52,13 @@
 			<HugeiconsIcon icon={MoreVerticalIcon} size={24} color="var(--color-black-500)" />
 		</button>
 	</div>
-	<img src={imgUri} alt={postAlt ?? text} class="rounded-4xl" />
+	<div class="overflow-hidden rounded-4xl">
+		<img
+			src={imgUri}
+			alt={postAlt ?? text}
+			class="aspect-[4/5] h-full w-full object-cover md:aspect-[16/9]"
+		/>
+	</div>
 	<p class="text-black/80">{text}</p>
 	<p class="text-black/60">{time}</p>
 	<div class="flex w-full items-center justify-between">

platforms/metagram/src/lib/fragments/index.ts

@@ -8,3 +8,4 @@ export { default as Message } from './Message/Message.svelte';
 export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte';
 export { default as Modal } from './Modal/Modal.svelte';
 export { default as SideBar } from './SideBar/SideBar.svelte';
+export { default as Post } from './Post/Post.svelte';

platforms/metagram/src/routes/(protected)/+layout.svelte

@@ -23,7 +23,7 @@
 
 <main class="block h-[100dvh] grid-cols-[22vw_auto_31vw] md:grid">
 	<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
-	<section class="md:pt-10">
+	<section class="mx-4 md:mx-8 md:pt-10">
 		<Header variant="primary" {heading} />
 		{@render children()}
 	</section>

platforms/metagram/src/routes/(protected)/discover/+page.svelte

@@ -1,2 +0,0 @@
-<script lang="ts">
-</script>

platforms/metagram/src/routes/(protected)/home/+page.svelte

@@ -1,2 +1,80 @@
 <script lang="ts">
+	import { Post } from '$lib/fragments';
+	import { dummyPosts } from '$lib/dummyData';
+	import { onMount } from 'svelte';
+
+	type PostData = {
+		id: number;
+		avatar: string;
+		username: string;
+		imgUri: string;
+		postAlt: string;
+		text: string;
+		time: string;
+		count: {
+			likes: number;
+			comments: number;
+		};
+		callback: {
+			like: () => void;
+			comment: () => void;
+			menu: () => void;
+		};
+	};
+
+	let listElement: HTMLElement;
+	let visiblePosts: PostData[] = $state([]);
+	let maxVisiblePosts = $state(20);
+	const batchSize = 10;
+	let currentIndex = $state(0);
+	let loading = $state(false);
+
+	const loadMore = () => {
+		if (loading || currentIndex >= dummyPosts.length) return;
+		loading = true;
+		setTimeout(() => {
+			const nextBatch = dummyPosts.slice(currentIndex, currentIndex + batchSize);
+			visiblePosts = [...visiblePosts, ...nextBatch];
+			if (visiblePosts.length > maxVisiblePosts) {
+				visiblePosts = visiblePosts.slice(visiblePosts.length - maxVisiblePosts);
+			}
+			currentIndex += batchSize;
+			loading = false;
+		}, 500);
+	};
+
+	const onScroll = () => {
+		if (listElement.scrollTop + listElement.clientHeight >= listElement.scrollHeight)
+			loadMore();
+	};
+
+	$effect(() => {
+		listElement.addEventListener('scroll', onScroll);
+		return () => listElement.removeEventListener('scroll', onScroll);
+	});
+
+	onMount(() => {
+		loadMore();
+	});
 </script>
+
+<ul bind:this={listElement} class="hide-scrollbar h-[600px] overflow-auto">
+	{#each visiblePosts as post}
+		<li class="mb-6">
+			<Post
+				avatar={post.avatar}
+				username={post.username}
+				imgUri={post.imgUri}
+				postAlt={post.postAlt}
+				text={post.text}
+				time={post.time}
+				count={post.count}
+				callback={post.callback}
+			/>
+		</li>
+	{/each}
+</ul>
+
+{#if loading}
+	<p class="my-4 text-center">Loading more posts…</p>
+{/if}