From debfa794097ff095fcd3286c60a4484a080e2851 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 26 May 2025 11:28:57 +0530
Subject: [PATCH 1/3] feat/infinite-scroll

---
 platforms/metagram/src/lib/dummyData.ts       | 18 +++++
 .../src/lib/fragments/SideBar/SideBar.svelte  |  2 +-
 platforms/metagram/src/lib/fragments/index.ts |  1 +
 .../metagram/src/lib/icons/Settings.svelte    | 23 +++++-
 platforms/metagram/src/lib/icons/index.ts     |  2 +-
 .../src/routes/(protected)/+layout.svelte     | 36 ++++-----
 .../routes/(protected)/discover/+page.svelte  |  2 -
 .../src/routes/(protected)/home/+page.svelte  | 74 +++++++++++++++++++
 8 files changed, 132 insertions(+), 26 deletions(-)
 create mode 100644 platforms/metagram/src/lib/dummyData.ts

diff --git a/platforms/metagram/src/lib/dummyData.ts b/platforms/metagram/src/lib/dummyData.ts
new file mode 100644
index 00000000..d27ff35a
--- /dev/null
+++ b/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}`)
+	}
+}));
diff --git a/platforms/metagram/src/lib/fragments/SideBar/SideBar.svelte b/platforms/metagram/src/lib/fragments/SideBar/SideBar.svelte
index a1625998..2ade3163 100644
--- a/platforms/metagram/src/lib/fragments/SideBar/SideBar.svelte
+++ b/platforms/metagram/src/lib/fragments/SideBar/SideBar.svelte
@@ -124,7 +124,7 @@
 			</h3>
 		</button>
 
-        <button
+		<button
 			type="button"
 			class="flex items-center gap-2"
 			aria-current={activeTab === 'settings' ? 'page' : undefined}
diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts
index 006ed9b8..417014c2 100644
--- a/platforms/metagram/src/lib/fragments/index.ts
+++ b/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';
diff --git a/platforms/metagram/src/lib/icons/Settings.svelte b/platforms/metagram/src/lib/icons/Settings.svelte
index 5b7308e8..7d8f6cb8 100644
--- a/platforms/metagram/src/lib/icons/Settings.svelte
+++ b/platforms/metagram/src/lib/icons/Settings.svelte
@@ -4,8 +4,23 @@
 	let { size = '20px', color = '#A5A5A5', ...restProps }: ISvgProps = $props();
 </script>
 
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={size} height={size} color={color} fill="none">
-    <path d="M15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.067 10.067 8.5 12 8.5C13.933 8.5 15.5 10.067 15.5 12Z" stroke={color} stroke-width="1.5"></path>
-    <path d="M21.011 14.0965C21.5329 13.9558 21.7939 13.8854 21.8969 13.7508C22 13.6163 22 13.3998 22 12.9669V11.0332C22 10.6003 22 10.3838 21.8969 10.2493C21.7938 10.1147 21.5329 10.0443 21.011 9.90358C19.0606 9.37759 17.8399 7.33851 18.3433 5.40087C18.4817 4.86799 18.5509 4.60156 18.4848 4.44529C18.4187 4.28902 18.2291 4.18134 17.8497 3.96596L16.125 2.98673C15.7528 2.77539 15.5667 2.66972 15.3997 2.69222C15.2326 2.71472 15.0442 2.90273 14.6672 3.27873C13.208 4.73448 10.7936 4.73442 9.33434 3.27864C8.95743 2.90263 8.76898 2.71463 8.60193 2.69212C8.43489 2.66962 8.24877 2.77529 7.87653 2.98663L6.15184 3.96587C5.77253 4.18123 5.58287 4.28891 5.51678 4.44515C5.45068 4.6014 5.51987 4.86787 5.65825 5.4008C6.16137 7.3385 4.93972 9.37763 2.98902 9.9036C2.46712 10.0443 2.20617 10.1147 2.10308 10.2492C2 10.3838 2 10.6003 2 11.0332V12.9669C2 13.3998 2 13.6163 2.10308 13.7508C2.20615 13.8854 2.46711 13.9558 2.98902 14.0965C4.9394 14.6225 6.16008 16.6616 5.65672 18.5992C5.51829 19.1321 5.44907 19.3985 5.51516 19.5548C5.58126 19.7111 5.77092 19.8188 6.15025 20.0341L7.87495 21.0134C8.24721 21.2247 8.43334 21.3304 8.6004 21.3079C8.76746 21.2854 8.95588 21.0973 9.33271 20.7213C10.7927 19.2644 13.2088 19.2643 14.6689 20.7212C15.0457 21.0973 15.2341 21.2853 15.4012 21.3078C15.5682 21.3303 15.7544 21.2246 16.1266 21.0133L17.8513 20.034C18.2307 19.8187 18.4204 19.711 18.4864 19.5547C18.5525 19.3984 18.4833 19.132 18.3448 18.5991C17.8412 16.6616 19.0609 14.6226 21.011 14.0965Z" stroke={color} stroke-width="1.5" stroke-linecap="round"></path>
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	width={size}
+	height={size}
+	{color}
+	fill="none"
+>
+	<path
+		d="M15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.067 10.067 8.5 12 8.5C13.933 8.5 15.5 10.067 15.5 12Z"
+		stroke={color}
+		stroke-width="1.5"
+	></path>
+	<path
+		d="M21.011 14.0965C21.5329 13.9558 21.7939 13.8854 21.8969 13.7508C22 13.6163 22 13.3998 22 12.9669V11.0332C22 10.6003 22 10.3838 21.8969 10.2493C21.7938 10.1147 21.5329 10.0443 21.011 9.90358C19.0606 9.37759 17.8399 7.33851 18.3433 5.40087C18.4817 4.86799 18.5509 4.60156 18.4848 4.44529C18.4187 4.28902 18.2291 4.18134 17.8497 3.96596L16.125 2.98673C15.7528 2.77539 15.5667 2.66972 15.3997 2.69222C15.2326 2.71472 15.0442 2.90273 14.6672 3.27873C13.208 4.73448 10.7936 4.73442 9.33434 3.27864C8.95743 2.90263 8.76898 2.71463 8.60193 2.69212C8.43489 2.66962 8.24877 2.77529 7.87653 2.98663L6.15184 3.96587C5.77253 4.18123 5.58287 4.28891 5.51678 4.44515C5.45068 4.6014 5.51987 4.86787 5.65825 5.4008C6.16137 7.3385 4.93972 9.37763 2.98902 9.9036C2.46712 10.0443 2.20617 10.1147 2.10308 10.2492C2 10.3838 2 10.6003 2 11.0332V12.9669C2 13.3998 2 13.6163 2.10308 13.7508C2.20615 13.8854 2.46711 13.9558 2.98902 14.0965C4.9394 14.6225 6.16008 16.6616 5.65672 18.5992C5.51829 19.1321 5.44907 19.3985 5.51516 19.5548C5.58126 19.7111 5.77092 19.8188 6.15025 20.0341L7.87495 21.0134C8.24721 21.2247 8.43334 21.3304 8.6004 21.3079C8.76746 21.2854 8.95588 21.0973 9.33271 20.7213C10.7927 19.2644 13.2088 19.2643 14.6689 20.7212C15.0457 21.0973 15.2341 21.2853 15.4012 21.3078C15.5682 21.3303 15.7544 21.2246 16.1266 21.0133L17.8513 20.034C18.2307 19.8187 18.4204 19.711 18.4864 19.5547C18.5525 19.3984 18.4833 19.132 18.3448 18.5991C17.8412 16.6616 19.0609 14.6226 21.011 14.0965Z"
+		stroke={color}
+		stroke-width="1.5"
+		stroke-linecap="round"
+	></path>
 </svg>
-    
\ No newline at end of file
diff --git a/platforms/metagram/src/lib/icons/index.ts b/platforms/metagram/src/lib/icons/index.ts
index 2771bcd3..e68aa3b3 100644
--- a/platforms/metagram/src/lib/icons/index.ts
+++ b/platforms/metagram/src/lib/icons/index.ts
@@ -8,4 +8,4 @@ export { default as Flash } from './Flash.svelte';
 export { default as CommentsTwo } from './CommentsTwo.svelte';
 export { default as Search } from './Search.svelte';
 export { default as Camera } from './Camera.svelte';
-export { default as Settings } from "./Settings.svelte";
\ No newline at end of file
+export { default as Settings } from './Settings.svelte';
diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
index add5ccd7..80315445 100644
--- a/platforms/metagram/src/routes/(protected)/+layout.svelte
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -5,36 +5,36 @@
 	let { children } = $props();
 
 	let route = $derived(page.url.pathname);
-	let heading = $state("");
+	let heading = $state('');
 
 	$effect(() => {
 		switch (route) {
-			case "/home":
-				heading = "Feed";
+			case '/home':
+				heading = 'Feed';
 				break;
-			case "/discover":
-				heading = "Search";
+			case '/discover':
+				heading = 'Search';
 				break;
-			case "/post":
-				heading = "Post";
-				break;	
-			case "/messages":
-				heading = "Messages";
+			case '/post':
+				heading = 'Post';
 				break;
-			case "/settings":
-				heading = "Settings";
-				break;		
-			case "/profile":
-				heading = "Profile";
+			case '/messages':
+				heading = 'Messages';
+				break;
+			case '/settings':
+				heading = 'Settings';
+				break;
+			case '/profile':
+				heading = 'Profile';
 				break;
 		}
-	})
+	});
 </script>
 
 <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">
-		<Header variant="primary" {heading}/>
+	<section class="mx-4 md:mx-8 md:pt-10">
+		<Header variant="primary" {heading} />
 		{@render children()}
 	</section>
 	{#if !route.endsWith('/messages')}
diff --git a/platforms/metagram/src/routes/(protected)/discover/+page.svelte b/platforms/metagram/src/routes/(protected)/discover/+page.svelte
index 0fbba997..e69de29b 100644
--- a/platforms/metagram/src/routes/(protected)/discover/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/discover/+page.svelte
@@ -1,2 +0,0 @@
-<script lang="ts">
-</script>
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index 0fbba997..4dc4cf28 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -1,2 +1,76 @@
 <script lang="ts">
+	import { Post } from '$lib/fragments';
+	import { dummyPosts } from '$lib/dummyData';
+
+	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;
+		}, 3000);
+	};
+
+	const onScroll = () => {
+		if (listElement.scrollTop + listElement.clientHeight >= listElement.scrollHeight)
+			loadMore();
+	};
+
+	$effect(() => {
+		loadMore();
+		listElement.addEventListener('scroll', onScroll);
+		return () => listElement.removeEventListener('scroll', onScroll);
+	});
 </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}

From 43e23fe8a5543653b786210a33f9ce8f4f2a9dc9 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 26 May 2025 11:53:19 +0530
Subject: [PATCH 2/3] fix: aspect ratio of post

---
 platforms/metagram/src/lib/fragments/Header/Header.svelte | 2 +-
 platforms/metagram/src/lib/fragments/Post/Post.svelte     | 8 +++++++-
 .../metagram/src/routes/(protected)/home/+page.svelte     | 6 +++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/Header/Header.svelte b/platforms/metagram/src/lib/fragments/Header/Header.svelte
index 3b117c81..ff9ea12a 100644
--- a/platforms/metagram/src/lib/fragments/Header/Header.svelte
+++ b/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
 	});
diff --git a/platforms/metagram/src/lib/fragments/Post/Post.svelte b/platforms/metagram/src/lib/fragments/Post/Post.svelte
index 6a98362d..a7a23e31 100644
--- a/platforms/metagram/src/lib/fragments/Post/Post.svelte
+++ b/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">
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index 4dc4cf28..328ca848 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Post } from '$lib/fragments';
 	import { dummyPosts } from '$lib/dummyData';
+	import { onMount } from 'svelte';
 
 	type PostData = {
 		id: number;
@@ -48,10 +49,13 @@
 	};
 
 	$effect(() => {
-		loadMore();
 		listElement.addEventListener('scroll', onScroll);
 		return () => listElement.removeEventListener('scroll', onScroll);
 	});
+
+	onMount(() => {
+		loadMore();
+	});
 </script>
 
 <ul bind:this={listElement} class="hide-scrollbar h-[600px] overflow-auto">

From 3bbbe64782491a91a0b8de23940cc31e6c06482f Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 26 May 2025 14:11:29 +0530
Subject: [PATCH 3/3] fix: bottom nav background

---
 platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte | 2 +-
 platforms/metagram/src/routes/(protected)/home/+page.svelte     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
index f5b99e0e..42f62179 100644
--- a/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
+++ b/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
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index 328ca848..758b12e7 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -40,7 +40,7 @@
 			}
 			currentIndex += batchSize;
 			loading = false;
-		}, 3000);
+		}, 500);
 	};
 
 	const onScroll = () => {