settings page buttons

Author: ananyayaya129

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/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

@@ -10,3 +10,4 @@ export { default as Modal } from './Modal/Modal.svelte';
 export { default as SideBar } from './SideBar/SideBar.svelte';
 export { default as RightAside } from './RightAside/RightAside.svelte';
 export { default as SettingsToggleButton } from './SettingsToggleButton/SettingsToggleButton.svelte';
+export { default as Post } from './Post/Post.svelte';

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

@@ -9,28 +9,23 @@
 	let route = $derived(page.url.pathname);
 	let heading = $state('');
 
+	const routeToHeading: Record<string, string> = {
+		'/home': 'Feed',
+		'/discover': 'Search',
+		'/post': 'Post',
+		'/messages': 'Messages',
+		'/settings': 'Settings',
+		'/profile': 'Profile'
+	};
+
 	$effect(() => {
-		if (route.includes('home')) {
-			heading = 'Feed';
-		} else if (route.includes('discover')) {
-			heading = 'Search';
-		} else if (route.includes('post')) {
-			heading = 'Post';
-		} else if (route.includes('messages')) {
-			heading = 'Messages';
-		} else if (route.includes('settings')) {
-			heading = 'Settings';
-		} else if (route.includes('profile')) {
-			heading = 'Profile';
-		} else {
-			heading = '';
-		}
+		heading = routeToHeading[route] ?? heading;
 	});
 </script>
 
 <main class="block h-[100dvh] grid-cols-[20vw_auto_30vw] md:grid">
 	<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
-	<section class="md:pt-8">
+	<section class="mx-4 md:mx-8 md:pt-10">
 		<div class="flex justify-between">
 			<Header variant="primary" {heading} />
 			{#if route === '/profile'}

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}