From 4d70f3e691957dce1778977e8df3364e22ddf997 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 26 May 2025 16:43:24 +0530
Subject: [PATCH 01/12] feat/comments-pane

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

diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
index e58cce3f9..165e20142 100644
--- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
+++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
@@ -7,20 +7,19 @@
 	import type { SwipeCustomEvent } from 'svelte-gestures';
 
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
-		isPaneOpen?: boolean;
+		drawer?: CupertinoPane;
 		children?: Snippet;
 		handleSwipe?: (isOpen: boolean | undefined) => void;
 	}
 
 	let {
-		isPaneOpen = $bindable(),
+		drawer = $bindable(),
 		children = undefined,
 		handleSwipe,
 		...restProps
 	}: IDrawerProps = $props();
 
 	let drawerElement: HTMLElement;
-	let drawer: CupertinoPane;
 
 	function dismiss() {
 		if (drawer) drawer.destroy({ animate: true });
@@ -30,7 +29,6 @@
 		if (event.detail.direction === ('down' as string)) {
 			handleSwipe?.(false);
 			drawer?.destroy({ animate: true });
-			isPaneOpen = false;
 		}
 	};
 
@@ -51,13 +49,6 @@
 				onBackdropTap: () => dismiss()
 			}
 		});
-		if (isPaneOpen) {
-			drawer.present({ animate: true });
-		} else {
-			drawer.destroy({ animate: true });
-		}
-
-		drawer.present();
 	});
 </script>
 
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index 758b12e7e..d8ab3168c 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { Post } from '$lib/fragments';
+	import { Drawer, Post } from '$lib/fragments';
 	import { dummyPosts } from '$lib/dummyData';
 	import { onMount } from 'svelte';
+	import type { CupertinoPane } from 'cupertino-pane';
 
 	type PostData = {
 		id: number;
@@ -28,6 +29,7 @@
 	const batchSize = 10;
 	let currentIndex = $state(0);
 	let loading = $state(false);
+	let drawer: CupertinoPane | undefined = $state();
 
 	const loadMore = () => {
 		if (loading || currentIndex >= dummyPosts.length) return;
@@ -69,7 +71,11 @@
 				text={post.text}
 				time={post.time}
 				count={post.count}
-				callback={post.callback}
+				callback={{
+					like: () => alert('like'),
+					comment: () => drawer?.present({ animate: true }),
+					menu: () => alert('menu')
+				}}
 			/>
 		</li>
 	{/each}
@@ -78,3 +84,5 @@
 {#if loading}
 	<p class="my-4 text-center">Loading more posts…</p>
 {/if}
+
+<Drawer bind:drawer>comments</Drawer>

From 85541e4578d37f9e993d6455bd931e38a15818b0 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 27 May 2025 09:35:23 +0530
Subject: [PATCH 02/12] fix: overflow and drawer swipe

---
 platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte   | 2 --
 platforms/metagram/src/lib/fragments/Post/Post.svelte       | 4 ++--
 platforms/metagram/src/routes/(protected)/home/+page.svelte | 2 +-
 platforms/metagram/src/routes/+layout.svelte                | 2 +-
 4 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
index 165e20142..04b506976 100644
--- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
+++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
@@ -9,7 +9,6 @@
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
 		drawer?: CupertinoPane;
 		children?: Snippet;
-		handleSwipe?: (isOpen: boolean | undefined) => void;
 	}
 
 	let {
@@ -27,7 +26,6 @@
 
 	const handleDrawerSwipe = (event: SwipeCustomEvent) => {
 		if (event.detail.direction === ('down' as string)) {
-			handleSwipe?.(false);
 			drawer?.destroy({ animate: true });
 		}
 	};
diff --git a/platforms/metagram/src/lib/fragments/Post/Post.svelte b/platforms/metagram/src/lib/fragments/Post/Post.svelte
index a7a23e31d..72e9c81a5 100644
--- a/platforms/metagram/src/lib/fragments/Post/Post.svelte
+++ b/platforms/metagram/src/lib/fragments/Post/Post.svelte
@@ -82,7 +82,7 @@
 			</button>
 		</div>
 		<div class="flex items-center justify-between gap-3 text-lg text-black/40">
-			<p>{count.likes} likes</p>
+			<p class="subtext text-black-400">{count.likes} likes</p>
 			<HugeiconsIcon
 				icon={RecordIcon}
 				size={5}
@@ -90,7 +90,7 @@
 				color="var(--color-black-400)"
 				className="rounded-full"
 			/>
-			<p>{count.comments} comments</p>
+			<p class="subtext text-black-400">{count.comments} comments</p>
 		</div>
 	</div>
 </article>
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index d8ab3168c..c9a4bcc30 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -60,7 +60,7 @@
 	});
 </script>
 
-<ul bind:this={listElement} class="hide-scrollbar h-[600px] overflow-auto">
+<ul bind:this={listElement} class="hide-scrollbar h-[100vh] overflow-auto">
 	{#each visiblePosts as post}
 		<li class="mb-6">
 			<Post
diff --git a/platforms/metagram/src/routes/+layout.svelte b/platforms/metagram/src/routes/+layout.svelte
index ba6dd57a5..9fcc19917 100644
--- a/platforms/metagram/src/routes/+layout.svelte
+++ b/platforms/metagram/src/routes/+layout.svelte
@@ -36,6 +36,6 @@
 	});
 </script>
 
-<main class="h-[100dvh] px-4 md:px-0">
+<main class="h-[100dvh] overflow-hidden px-4 md:px-0">
 	{@render children()}
 </main>

From bdabfed958a2a63860a14b82c615d9aa0193fea5 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 27 May 2025 11:48:53 +0530
Subject: [PATCH 03/12] feat: Comment fragment

---
 platforms/metagram/src/lib/dummyData.ts       |  5 --
 .../lib/fragments/Comment/Comment.stories.ts  | 25 ++++++
 .../src/lib/fragments/Comment/Comment.svelte  | 77 +++++++++++++++++++
 .../src/lib/fragments/Drawer/Drawer.svelte    |  7 +-
 .../MessageInput/MessageInput.svelte          |  6 +-
 platforms/metagram/src/lib/fragments/index.ts |  1 +
 platforms/metagram/src/lib/icons/Like.svelte  |  4 +-
 .../metagram/src/lib/ui/Input/Input.svelte    |  5 ++
 .../src/routes/(protected)/home/+page.svelte  | 32 ++++++--
 9 files changed, 141 insertions(+), 21 deletions(-)
 create mode 100644 platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts
 create mode 100644 platforms/metagram/src/lib/fragments/Comment/Comment.svelte

diff --git a/platforms/metagram/src/lib/dummyData.ts b/platforms/metagram/src/lib/dummyData.ts
index d27ff35a5..efff91bbc 100644
--- a/platforms/metagram/src/lib/dummyData.ts
+++ b/platforms/metagram/src/lib/dummyData.ts
@@ -9,10 +9,5 @@ export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
 	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/Comment/Comment.stories.ts b/platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts
new file mode 100644
index 000000000..a27689c63
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts
@@ -0,0 +1,25 @@
+import type { ComponentProps } from 'svelte';
+import { Comment } from '..';
+
+export default {
+	title: 'UI/Comment',
+	component: Comment,
+	tags: ['autodocs'],
+	render: (args: { Component: Comment; props: ComponentProps<typeof Comment> }) => ({
+		Component: Comment,
+		props: args
+	})
+};
+
+export const Main = {
+	args: {
+		name: 'LuffyTHeTHird',
+		comment:
+			'i was thinking of making it to the conference so we could take some more fire pictures like last time',
+		likeCount: 0,
+		handleReply: () => alert('reply'),
+		time: '3 minutes ago',
+		isLiked: false,
+		isDisliked: false
+	}
+};
diff --git a/platforms/metagram/src/lib/fragments/Comment/Comment.svelte b/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
new file mode 100644
index 000000000..41a8b9b15
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { Like } from '$lib/icons';
+	import { Avatar } from '$lib/ui';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface ICommentProps extends HTMLAttributes<HTMLElement> {
+		isLiked: boolean;
+		isDisliked: boolean;
+		imgSrc: string;
+		name: string;
+		comment: string;
+		time: string;
+		likeCount: number;
+		handleReply: () => void;
+	}
+
+	let {
+		isLiked = false,
+		isDisliked = false,
+		imgSrc = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		name,
+		comment,
+		time,
+		likeCount = 0,
+		handleReply,
+		...restProps
+	}: ICommentProps = $props();
+</script>
+
+<article {...restProps} class={cn([restProps.class].join(' '))}>
+	<div class="align-start flex gap-2">
+		<Avatar src={imgSrc} size="sm" />
+		<div>
+			<h3 class="font-semibold text-black">{name}</h3>
+			<p class="text-black-600 mt-0.5">{comment}</p>
+		</div>
+	</div>
+	<div class="ms-12 mt-2 flex items-center gap-2">
+		<button
+			onclick={() => {
+				if (!isLiked) {
+					likeCount++;
+					isLiked = true;
+					isDisliked = false;
+				}
+			}}
+		>
+			<Like
+				size="18px"
+				color={isLiked ? 'var(--color-brand-burnt-orange)' : 'var(--color-black-600)'}
+				fill={isLiked ? 'var(--color-brand-burnt-orange)' : 'var(--color-black-600)'}
+			/>
+		</button>
+		<p class="text-black-600 font-semibold">{likeCount}</p>
+		<button
+			onclick={() => {
+				if (!isDisliked) {
+					likeCount--;
+					isDisliked = true;
+					isLiked = false;
+				}
+			}}
+		>
+			<Like
+				size="18px"
+				color={isDisliked ? 'var(--color-brand-burnt-orange)' : 'var(--color-black-600)'}
+				fill={isDisliked ? 'var(--color-brand-burnt-orange)' : 'var(--color-black-600)'}
+				class="rotate-180"
+			/>
+		</button>
+		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
+		<button onclick={handleReply} class="text-black-600 font-semibold">Reply</button>
+		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
+		<p class="text-black-600">{time}</p>
+	</div>
+</article>
diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
index 04b506976..5b7d20ab5 100644
--- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
+++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
@@ -11,12 +11,7 @@
 		children?: Snippet;
 	}
 
-	let {
-		drawer = $bindable(),
-		children = undefined,
-		handleSwipe,
-		...restProps
-	}: IDrawerProps = $props();
+	let { drawer = $bindable(), children = undefined, ...restProps }: IDrawerProps = $props();
 
 	let drawerElement: HTMLElement;
 
diff --git a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
index 8a9559311..199e22098 100644
--- a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
+++ b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte
@@ -7,6 +7,7 @@
 
 	interface IMessageInputProps extends HTMLAttributes<HTMLElement> {
 		variant: 'comment' | 'dm';
+		input?: HTMLInputElement;
 		src: string;
 		value: string;
 		placeholder?: string;
@@ -18,7 +19,8 @@
 	let {
 		variant = 'comment',
 		src = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
-		value,
+		value = $bindable(),
+		input = $bindable(),
 		placeholder,
 		files = $bindable(),
 		handleAdd,
@@ -46,7 +48,7 @@
 			<HugeiconsIcon size="24px" icon={PlusSignIcon} color="var(--color-black-400)" />
 		</button>
 	{/if}
-	<Input type="text" bind:value {placeholder} />
+	<Input type="text" bind:input bind:value {placeholder} />
 	{#if value || variant === 'dm'}
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts
index 417014c22..7fd40b67a 100644
--- a/platforms/metagram/src/lib/fragments/index.ts
+++ b/platforms/metagram/src/lib/fragments/index.ts
@@ -9,3 +9,4 @@ 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';
+export { default as Comment } from './Comment/Comment.svelte';
diff --git a/platforms/metagram/src/lib/icons/Like.svelte b/platforms/metagram/src/lib/icons/Like.svelte
index 93b6a5220..9ec268161 100644
--- a/platforms/metagram/src/lib/icons/Like.svelte
+++ b/platforms/metagram/src/lib/icons/Like.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
 	import type { ISvgProps } from './../types';
 
-	let { size = '20px', color = '#A5A5A5', ...restProps }: ISvgProps = $props();
+	let { size = '20px', color = '#A5A5A5', fill, ...restProps }: ISvgProps = $props();
 </script>
 
 <svg
 	width={size}
 	height={size}
 	viewBox="0 0 20 20"
-	fill="none"
+	{fill}
 	xmlns="http://www.w3.org/2000/svg"
 	{...restProps}
 >
diff --git a/platforms/metagram/src/lib/ui/Input/Input.svelte b/platforms/metagram/src/lib/ui/Input/Input.svelte
index 37ec24b34..4fec6341e 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.svelte
+++ b/platforms/metagram/src/lib/ui/Input/Input.svelte
@@ -4,10 +4,14 @@
 
 	interface IInputProps extends HTMLInputAttributes {
 		type: HTMLInputTypeAttribute;
+		input?: HTMLInputElement;
+		value: string | number | any;
+		placeholder?: string;
 	}
 
 	let {
 		type = 'text',
+		input = $bindable(),
 		value = $bindable(),
 		placeholder = '',
 		...restProps
@@ -23,6 +27,7 @@
 	{type}
 	{placeholder}
 	bind:value
+	bind:this={input}
 	class={cn([cbase, restProps.class].join(' '))}
 	tabindex="0"
 />
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index c9a4bcc30..9468b4711 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -3,6 +3,7 @@
 	import { dummyPosts } from '$lib/dummyData';
 	import { onMount } from 'svelte';
 	import type { CupertinoPane } from 'cupertino-pane';
+	import { Comment, MessageInput } from '$lib/fragments';
 
 	type PostData = {
 		id: number;
@@ -16,11 +17,6 @@
 			likes: number;
 			comments: number;
 		};
-		callback: {
-			like: () => void;
-			comment: () => void;
-			menu: () => void;
-		};
 	};
 
 	let listElement: HTMLElement;
@@ -30,6 +26,8 @@
 	let currentIndex = $state(0);
 	let loading = $state(false);
 	let drawer: CupertinoPane | undefined = $state();
+	let commentValue: string = $state('');
+	let commentInput: HTMLInputElement | undefined = $state();
 
 	const loadMore = () => {
 		if (loading || currentIndex >= dummyPosts.length) return;
@@ -85,4 +83,26 @@
 	<p class="my-4 text-center">Loading more posts…</p>
 {/if}
 
-<Drawer bind:drawer>comments</Drawer>
+<Drawer bind:drawer>
+	<div>
+		<h3 class="text-black-600 mb-6 text-center">32 Comments</h3>
+		<Comment
+			isLiked={false}
+			isDisliked={false}
+			likeCount={0}
+			name="Luka Garcia"
+			comment="i was thinking of making it to the conference so we could take some more fire pictures like last time"
+			imgSrc="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
+			handleReply={() => commentInput?.focus()}
+			time={'2 minutes ago'}
+		/>
+		<MessageInput
+			class="mt-4"
+			variant="comment"
+			src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
+			bind:value={commentValue}
+			handleSend={async () => alert('sdfs')}
+			bind:input={commentInput}
+		/>
+	</div>
+</Drawer>

From d588665d4d4a12ac1b38f5c7264b8765d2c8afc3 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 27 May 2025 13:56:12 +0530
Subject: [PATCH 04/12] fix: comments added

---
 .../src/routes/(protected)/home/+page.svelte  | 63 ++++++++++++++++---
 1 file changed, 56 insertions(+), 7 deletions(-)

diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index 9468b4711..c0c74638e 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -29,6 +29,33 @@
 	let commentValue: string = $state('');
 	let commentInput: HTMLInputElement | undefined = $state();
 
+	const comments = Array.from({length: 50}, (_, i) => ({
+		userImgSrc: "https://picsum.photos/800",
+		name: "user" + (i + 1),
+		commentId: i + 1,
+		comment: "this is the dummy comment which is commented by user" + (i + 1),
+		replies: [
+			{
+				userImgSrc: "https://picsum.photos/800",
+				name: "user" + (i + 1) + "x",
+				commentId: (i + 1) + "x",
+				comment: "this is the dummy reply which is replied by another" + i + "x",
+			},
+			{
+				userImgSrc: "https://picsum.photos/800",
+				name: "user" + (i + 1) + "y",
+				commentId: i + 1 + "y",
+				comment: "this is the dummy reply which is replied by another" + i + "y",
+			}
+			,{
+				userImgSrc: "https://picsum.photos/800",
+				name: "user" + (i + 1) + "z",
+				commentId: i + 1 + "z",
+				comment: "this is the dummy reply which is replied by another" + i + "z",
+			}
+		]
+	}))
+
 	const loadMore = () => {
 		if (loading || currentIndex >= dummyPosts.length) return;
 		loading = true;
@@ -84,18 +111,40 @@
 {/if}
 
 <Drawer bind:drawer>
-	<div>
+	<ul class="pb-4">
 		<h3 class="text-black-600 mb-6 text-center">32 Comments</h3>
-		<Comment
+		{#each comments as comment}
+		<li class="mb-4">
+			<Comment
 			isLiked={false}
 			isDisliked={false}
 			likeCount={0}
-			name="Luka Garcia"
-			comment="i was thinking of making it to the conference so we could take some more fire pictures like last time"
-			imgSrc="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
+			name={comment.name}
+			comment={comment.comment}
+			imgSrc={comment.userImgSrc}
 			handleReply={() => commentInput?.focus()}
 			time={'2 minutes ago'}
-		/>
+			/>
+			{#if comment.replies}
+			<ul class="ms-12 mt-4">
+					{#each comment.replies as reply}
+					<li class="mb-4">
+						<Comment
+						isLiked={false}
+						isDisliked={false}
+						likeCount={0}
+						name={reply.name}
+						comment={reply.comment}
+						imgSrc={reply.userImgSrc}
+						handleReply={() => commentInput?.focus()}
+						time={'2 minutes ago'}
+						/>
+					</li>
+				{/each}
+				</ul>
+			{/if}
+		</li>
+		{/each}
 		<MessageInput
 			class="mt-4"
 			variant="comment"
@@ -104,5 +153,5 @@
 			handleSend={async () => alert('sdfs')}
 			bind:input={commentInput}
 		/>
-	</div>
+	</ul>
 </Drawer>

From 76405e9b0b0cfc40c12011b8e171e3459be53a41 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 27 May 2025 16:28:53 +0530
Subject: [PATCH 05/12] fix: comment fragment

---
 platforms/metagram/src/lib/dummyData.ts       | 49 ++++++++++++
 .../lib/fragments/Comment/Comment.stories.ts  | 10 +--
 .../src/lib/fragments/Comment/Comment.svelte  | 79 +++++++++++--------
 platforms/metagram/src/lib/types.ts           | 12 +++
 .../src/routes/(protected)/home/+page.svelte  | 64 ++-------------
 5 files changed, 112 insertions(+), 102 deletions(-)

diff --git a/platforms/metagram/src/lib/dummyData.ts b/platforms/metagram/src/lib/dummyData.ts
index efff91bbc..8fe4cd8b5 100644
--- a/platforms/metagram/src/lib/dummyData.ts
+++ b/platforms/metagram/src/lib/dummyData.ts
@@ -1,3 +1,5 @@
+import type { CommentType } from "./types";
+
 export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
 	id: i + 1,
 	avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
@@ -11,3 +13,50 @@ export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
 		comments: Math.floor(Math.random() * 200)
 	}
 }));
+
+export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
+	userImgSrc: 'https://picsum.photos/800',
+	name: `user${i + 1}`,
+	commentId: `${i + 1}`,
+	comment: `this is the dummy comment which is commented by user${i + 1}`,
+	isLiked: false,
+	isDisliked: false,
+	likeCount: 0,
+	time: '2 minutes ago',
+	replies: [
+		{
+			userImgSrc: 'https://picsum.photos/800',
+			name: `user${i + 1}x`,
+			commentId: `${i + 1}x`,
+			comment: `this is the dummy reply which is replied by another${i}x`,
+			isLiked: false,
+			isDisliked: false,
+			likeCount: 0,
+			time: '1 minute ago',
+			replies: [
+				{
+					userImgSrc: 'https://picsum.photos/800',
+					name: `user${i + 1}a`,
+					commentId: `${i + 1}a`,
+					comment: `this is the dummy reply which is replied by another${i}a`,
+					isLiked: false,
+					isDisliked: false,
+					likeCount: 0,
+					time: '1 minute ago',
+					replies: []
+				}
+			]
+		},
+		{
+			userImgSrc: 'https://picsum.photos/800',
+			name: `user${i + 1}y`,
+			commentId: `${i + 1}y`,
+			comment: `this is the dummy reply which is replied by another${i}y`,
+			isLiked: false,
+			isDisliked: false,
+			likeCount: 0,
+			time: '1 minute ago',
+			replies: []
+		}
+	]
+}));
diff --git a/platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts b/platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts
index a27689c63..cca0ea3d6 100644
--- a/platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts
+++ b/platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts
@@ -1,5 +1,6 @@
 import type { ComponentProps } from 'svelte';
 import { Comment } from '..';
+import { comments } from '$lib/dummyData';
 
 export default {
 	title: 'UI/Comment',
@@ -13,13 +14,6 @@ export default {
 
 export const Main = {
 	args: {
-		name: 'LuffyTHeTHird',
-		comment:
-			'i was thinking of making it to the conference so we could take some more fire pictures like last time',
-		likeCount: 0,
-		handleReply: () => alert('reply'),
-		time: '3 minutes ago',
-		isLiked: false,
-		isDisliked: false
+		comment: comments[0]
 	}
 };
diff --git a/platforms/metagram/src/lib/fragments/Comment/Comment.svelte b/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
index 41a8b9b15..fe419d8a3 100644
--- a/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
+++ b/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
@@ -3,75 +3,84 @@
 	import { Avatar } from '$lib/ui';
 	import { cn } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import CommentComponent from './Comment.svelte';
+	import type { CommentType } from '$lib/types';
 
 	interface ICommentProps extends HTMLAttributes<HTMLElement> {
-		isLiked: boolean;
-		isDisliked: boolean;
-		imgSrc: string;
-		name: string;
-		comment: string;
-		time: string;
-		likeCount: number;
+		comment: CommentType;
 		handleReply: () => void;
 	}
 
-	let {
-		isLiked = false,
-		isDisliked = false,
-		imgSrc = 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
-		name,
-		comment,
-		time,
-		likeCount = 0,
-		handleReply,
-		...restProps
-	}: ICommentProps = $props();
+    let visibleReplies = 2;
+
+    const showMoreReplies = () => {
+        visibleReplies = comment.replies.length;
+    };
+
+	let { comment, handleReply, ...restProps }: ICommentProps = $props();
 </script>
 
 <article {...restProps} class={cn([restProps.class].join(' '))}>
 	<div class="align-start flex gap-2">
-		<Avatar src={imgSrc} size="sm" />
+		<Avatar src={comment.userImgSrc} size="sm" />
 		<div>
-			<h3 class="font-semibold text-black">{name}</h3>
-			<p class="text-black-600 mt-0.5">{comment}</p>
+			<h3 class="font-semibold text-black">{comment.name}</h3>
+			<p class="text-black-600 mt-0.5">{comment.comment}</p>
 		</div>
 	</div>
 	<div class="ms-12 mt-2 flex items-center gap-2">
 		<button
 			onclick={() => {
-				if (!isLiked) {
-					likeCount++;
-					isLiked = true;
-					isDisliked = false;
+				if (!comment.isLiked) {
+					comment.likeCount++;
+					comment.isLiked = true;
+					comment.isDisliked = false;
 				}
 			}}
 		>
 			<Like
 				size="18px"
-				color={isLiked ? 'var(--color-brand-burnt-orange)' : 'var(--color-black-600)'}
-				fill={isLiked ? 'var(--color-brand-burnt-orange)' : 'var(--color-black-600)'}
+				color={comment.isLiked
+					? 'var(--color-brand-burnt-orange)'
+					: 'var(--color-black-600)'}
+				fill={comment.isLiked
+					? 'var(--color-brand-burnt-orange)'
+					: 'var(--color-black-600)'}
 			/>
 		</button>
-		<p class="text-black-600 font-semibold">{likeCount}</p>
+		<p class="text-black-600 font-semibold">{comment.likeCount}</p>
 		<button
 			onclick={() => {
-				if (!isDisliked) {
-					likeCount--;
-					isDisliked = true;
-					isLiked = false;
+				if (!comment.isDisliked) {
+					comment.likeCount--;
+					comment.isDisliked = true;
+					comment.isLiked = false;
 				}
 			}}
 		>
 			<Like
 				size="18px"
-				color={isDisliked ? 'var(--color-brand-burnt-orange)' : 'var(--color-black-600)'}
-				fill={isDisliked ? 'var(--color-brand-burnt-orange)' : 'var(--color-black-600)'}
+				color={comment.isDisliked
+					? 'var(--color-brand-burnt-orange)'
+					: 'var(--color-black-600)'}
+				fill={comment.isDisliked
+					? 'var(--color-brand-burnt-orange)'
+					: 'var(--color-black-600)'}
 				class="rotate-180"
 			/>
 		</button>
 		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
 		<button onclick={handleReply} class="text-black-600 font-semibold">Reply</button>
 		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
-		<p class="text-black-600">{time}</p>
+		<p class="text-black-600">{comment.time}</p>
 	</div>
+	{#if comment?.replies?.length}
+		<ul class="ms-12 mt-4 space-y-2">
+			{#each comment.replies as reply}
+				<li>
+					<CommentComponent comment={reply} {handleReply} />
+				</li>
+			{/each}
+		</ul>
+	{/if}
 </article>
diff --git a/platforms/metagram/src/lib/types.ts b/platforms/metagram/src/lib/types.ts
index d9f61563f..34832126a 100644
--- a/platforms/metagram/src/lib/types.ts
+++ b/platforms/metagram/src/lib/types.ts
@@ -4,3 +4,15 @@ export interface ISvgProps extends SVGAttributes<SVGElement> {
 	size?: number | string;
 	color?: string;
 }
+
+export type CommentType = {
+	commentId: string;
+	name: string;
+	userImgSrc: string;
+	comment: string;
+	isLiked: boolean;
+	isDisliked: boolean;
+	likeCount: number;
+	time: string;
+	replies: CommentType[];
+};
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index c0c74638e..9571eb201 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { Drawer, Post } from '$lib/fragments';
-	import { dummyPosts } from '$lib/dummyData';
+	import { comments, dummyPosts } from '$lib/dummyData';
 	import { onMount } from 'svelte';
 	import type { CupertinoPane } from 'cupertino-pane';
 	import { Comment, MessageInput } from '$lib/fragments';
-
+	
 	type PostData = {
 		id: number;
 		avatar: string;
@@ -29,33 +29,6 @@
 	let commentValue: string = $state('');
 	let commentInput: HTMLInputElement | undefined = $state();
 
-	const comments = Array.from({length: 50}, (_, i) => ({
-		userImgSrc: "https://picsum.photos/800",
-		name: "user" + (i + 1),
-		commentId: i + 1,
-		comment: "this is the dummy comment which is commented by user" + (i + 1),
-		replies: [
-			{
-				userImgSrc: "https://picsum.photos/800",
-				name: "user" + (i + 1) + "x",
-				commentId: (i + 1) + "x",
-				comment: "this is the dummy reply which is replied by another" + i + "x",
-			},
-			{
-				userImgSrc: "https://picsum.photos/800",
-				name: "user" + (i + 1) + "y",
-				commentId: i + 1 + "y",
-				comment: "this is the dummy reply which is replied by another" + i + "y",
-			}
-			,{
-				userImgSrc: "https://picsum.photos/800",
-				name: "user" + (i + 1) + "z",
-				commentId: i + 1 + "z",
-				comment: "this is the dummy reply which is replied by another" + i + "z",
-			}
-		]
-	}))
-
 	const loadMore = () => {
 		if (loading || currentIndex >= dummyPosts.length) return;
 		loading = true;
@@ -114,36 +87,9 @@
 	<ul class="pb-4">
 		<h3 class="text-black-600 mb-6 text-center">32 Comments</h3>
 		{#each comments as comment}
-		<li class="mb-4">
-			<Comment
-			isLiked={false}
-			isDisliked={false}
-			likeCount={0}
-			name={comment.name}
-			comment={comment.comment}
-			imgSrc={comment.userImgSrc}
-			handleReply={() => commentInput?.focus()}
-			time={'2 minutes ago'}
-			/>
-			{#if comment.replies}
-			<ul class="ms-12 mt-4">
-					{#each comment.replies as reply}
-					<li class="mb-4">
-						<Comment
-						isLiked={false}
-						isDisliked={false}
-						likeCount={0}
-						name={reply.name}
-						comment={reply.comment}
-						imgSrc={reply.userImgSrc}
-						handleReply={() => commentInput?.focus()}
-						time={'2 minutes ago'}
-						/>
-					</li>
-				{/each}
-				</ul>
-			{/if}
-		</li>
+			<li class="mb-4">
+				<Comment {comment} handleReply={() => commentInput?.focus()} />
+			</li>
 		{/each}
 		<MessageInput
 			class="mt-4"

From e532187ba38e8eb11b42e126ce34414e10abc547 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Wed, 28 May 2025 11:45:35 +0530
Subject: [PATCH 06/12] feat: Comments reply

---
 platforms/metagram/src/lib/dummyData.ts       | 50 ++++++++++++-----
 .../src/lib/fragments/Comment/Comment.svelte  | 50 ++++++++++-------
 .../src/lib/fragments/Drawer/Drawer.svelte    |  4 +-
 platforms/metagram/src/lib/types.ts           |  6 +-
 .../src/routes/(protected)/home/+page.svelte  | 55 +++++++++++++++++--
 5 files changed, 122 insertions(+), 43 deletions(-)

diff --git a/platforms/metagram/src/lib/dummyData.ts b/platforms/metagram/src/lib/dummyData.ts
index 8fe4cd8b5..653f42eaf 100644
--- a/platforms/metagram/src/lib/dummyData.ts
+++ b/platforms/metagram/src/lib/dummyData.ts
@@ -1,4 +1,4 @@
-import type { CommentType } from "./types";
+import type { CommentType } from './types';
 
 export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
 	id: i + 1,
@@ -17,11 +17,11 @@ export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
 export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
 	userImgSrc: 'https://picsum.photos/800',
 	name: `user${i + 1}`,
-	commentId: `${i + 1}`,
+	commentId: `${i + 1}p`,
 	comment: `this is the dummy comment which is commented by user${i + 1}`,
-	isLiked: false,
-	isDisliked: false,
-	likeCount: 0,
+	isUpVoted: false,
+	isDownVoted: false,
+	upVotes: 0,
 	time: '2 minutes ago',
 	replies: [
 		{
@@ -29,9 +29,9 @@ export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
 			name: `user${i + 1}x`,
 			commentId: `${i + 1}x`,
 			comment: `this is the dummy reply which is replied by another${i}x`,
-			isLiked: false,
-			isDisliked: false,
-			likeCount: 0,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
 			time: '1 minute ago',
 			replies: [
 				{
@@ -39,9 +39,9 @@ export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
 					name: `user${i + 1}a`,
 					commentId: `${i + 1}a`,
 					comment: `this is the dummy reply which is replied by another${i}a`,
-					isLiked: false,
-					isDisliked: false,
-					likeCount: 0,
+					isUpVoted: false,
+					isDownVoted: false,
+					upVotes: 0,
 					time: '1 minute ago',
 					replies: []
 				}
@@ -52,9 +52,31 @@ export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
 			name: `user${i + 1}y`,
 			commentId: `${i + 1}y`,
 			comment: `this is the dummy reply which is replied by another${i}y`,
-			isLiked: false,
-			isDisliked: false,
-			likeCount: 0,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
+			time: '1 minute ago',
+			replies: []
+		},
+		{
+			userImgSrc: 'https://picsum.photos/800',
+			name: `user${i + 1}y`,
+			commentId: `${i + 1}y`,
+			comment: `this is the dummy reply which is replied by another${i}y`,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
+			time: '1 minute ago',
+			replies: []
+		},
+		{
+			userImgSrc: 'https://picsum.photos/800',
+			name: `user${i + 1}y`,
+			commentId: `${i + 1}y`,
+			comment: `this is the dummy reply which is replied by another${i}y`,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
 			time: '1 minute ago',
 			replies: []
 		}
diff --git a/platforms/metagram/src/lib/fragments/Comment/Comment.svelte b/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
index fe419d8a3..4b622b004 100644
--- a/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
+++ b/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
@@ -8,14 +8,14 @@
 
 	interface ICommentProps extends HTMLAttributes<HTMLElement> {
 		comment: CommentType;
-		handleReply: () => void;
+		handleReply: (id: string) => void;
 	}
 
-    let visibleReplies = 2;
+	let visibleReplies = $state(2);
 
-    const showMoreReplies = () => {
-        visibleReplies = comment.replies.length;
-    };
+	const showMoreReplies = () => {
+		visibleReplies = comment.replies.length;
+	};
 
 	let { comment, handleReply, ...restProps }: ICommentProps = $props();
 </script>
@@ -31,56 +31,66 @@
 	<div class="ms-12 mt-2 flex items-center gap-2">
 		<button
 			onclick={() => {
-				if (!comment.isLiked) {
-					comment.likeCount++;
-					comment.isLiked = true;
-					comment.isDisliked = false;
+				if (!comment.isUpVoted) {
+					comment.upVotes++;
+					comment.isUpVoted = true;
+					comment.isDownVoted = false;
 				}
 			}}
 		>
 			<Like
 				size="18px"
-				color={comment.isLiked
+				color={comment.isUpVoted
 					? 'var(--color-brand-burnt-orange)'
 					: 'var(--color-black-600)'}
-				fill={comment.isLiked
+				fill={comment.isUpVoted
 					? 'var(--color-brand-burnt-orange)'
 					: 'var(--color-black-600)'}
 			/>
 		</button>
-		<p class="text-black-600 font-semibold">{comment.likeCount}</p>
+		<p class="text-black-600 font-semibold">{comment.upVotes}</p>
 		<button
 			onclick={() => {
-				if (!comment.isDisliked) {
-					comment.likeCount--;
-					comment.isDisliked = true;
-					comment.isLiked = false;
+				if (!comment.isDownVoted) {
+					comment.upVotes--;
+					comment.isDownVoted = true;
+					comment.isUpVoted = false;
 				}
 			}}
 		>
 			<Like
 				size="18px"
-				color={comment.isDisliked
+				color={comment.isDownVoted
 					? 'var(--color-brand-burnt-orange)'
 					: 'var(--color-black-600)'}
-				fill={comment.isDisliked
+				fill={comment.isDownVoted
 					? 'var(--color-brand-burnt-orange)'
 					: 'var(--color-black-600)'}
 				class="rotate-180"
 			/>
 		</button>
 		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
-		<button onclick={handleReply} class="text-black-600 font-semibold">Reply</button>
+		<button onclick={() => handleReply(comment.commentId)} class="text-black-600 font-semibold"
+			>Reply</button
+		>
 		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
 		<p class="text-black-600">{comment.time}</p>
 	</div>
 	{#if comment?.replies?.length}
 		<ul class="ms-12 mt-4 space-y-2">
-			{#each comment.replies as reply}
+			{#each comment.replies.slice(0, visibleReplies) as reply}
 				<li>
 					<CommentComponent comment={reply} {handleReply} />
 				</li>
 			{/each}
+			{#if comment.replies.length > visibleReplies}
+				<button
+					onclick={showMoreReplies}
+					class="text-brand-burnt-orange mt-1 text-sm font-medium"
+				>
+					See {comment.replies.length - visibleReplies} more replies
+				</button>
+			{/if}
 		</ul>
 	{/if}
 </article>
diff --git a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
index 5b7d20ab5..e01b1ad40 100644
--- a/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
+++ b/platforms/metagram/src/lib/fragments/Drawer/Drawer.svelte
@@ -55,7 +55,9 @@
 	onswipe={handleDrawerSwipe}
 	class={cn(restProps.class)}
 >
-	{@render children?.()}
+	<div class="h-[100%] overflow-y-scroll">
+		{@render children?.()}
+	</div>
 </div>
 
 <style>
diff --git a/platforms/metagram/src/lib/types.ts b/platforms/metagram/src/lib/types.ts
index 34832126a..9503f15a1 100644
--- a/platforms/metagram/src/lib/types.ts
+++ b/platforms/metagram/src/lib/types.ts
@@ -10,9 +10,9 @@ export type CommentType = {
 	name: string;
 	userImgSrc: string;
 	comment: string;
-	isLiked: boolean;
-	isDisliked: boolean;
-	likeCount: number;
+	isUpVoted: boolean;
+	isDownVoted: boolean;
+	upVotes: number;
 	time: string;
 	replies: CommentType[];
 };
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index 9571eb201..1c6f6f3fa 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -4,7 +4,8 @@
 	import { onMount } from 'svelte';
 	import type { CupertinoPane } from 'cupertino-pane';
 	import { Comment, MessageInput } from '$lib/fragments';
-	
+	import type { CommentType } from '$lib/types';
+
 	type PostData = {
 		id: number;
 		avatar: string;
@@ -28,6 +29,8 @@
 	let drawer: CupertinoPane | undefined = $state();
 	let commentValue: string = $state('');
 	let commentInput: HTMLInputElement | undefined = $state();
+	let _comments = $state(comments);
+	let activeReplyToId: string | null = $state(null);
 
 	const loadMore = () => {
 		if (loading || currentIndex >= dummyPosts.length) return;
@@ -48,6 +51,41 @@
 			loadMore();
 	};
 
+	const handleSend = async () => {
+		const newComment = {
+			userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+			name: 'You',
+			commentId: Date.now().toString(),
+			comment: commentValue,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
+			time: 'Just now',
+			replies: []
+		};
+
+		if (activeReplyToId) {
+			// Find the parent comment by id and push reply
+			const addReplyToComment = (commentsArray: CommentType[]) => {
+				for (const c of commentsArray) {
+					if (c.commentId === activeReplyToId) {
+						c.replies.push(newComment);
+						return true;
+					} else if (c.replies.length) {
+						if (addReplyToComment(c.replies)) return true;
+					}
+				}
+				return false;
+			};
+			addReplyToComment(_comments);
+		} else {
+			// If no activeReplyToId, add as a new parent comment
+			_comments = [newComment, ..._comments];
+		}
+		commentValue = '';
+		activeReplyToId = null;
+	};
+
 	$effect(() => {
 		listElement.addEventListener('scroll', onScroll);
 		return () => listElement.removeEventListener('scroll', onScroll);
@@ -85,10 +123,17 @@
 
 <Drawer bind:drawer>
 	<ul class="pb-4">
-		<h3 class="text-black-600 mb-6 text-center">32 Comments</h3>
-		{#each comments as comment}
+		<h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3>
+		{#each _comments as comment}
 			<li class="mb-4">
-				<Comment {comment} handleReply={() => commentInput?.focus()} />
+				<Comment
+					{comment}
+					handleReply={(id) => {
+						activeReplyToId = id;
+						alert(id);
+						commentInput?.focus();
+					}}
+				/>
 			</li>
 		{/each}
 		<MessageInput
@@ -96,7 +141,7 @@
 			variant="comment"
 			src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
 			bind:value={commentValue}
-			handleSend={async () => alert('sdfs')}
+			{handleSend}
 			bind:input={commentInput}
 		/>
 	</ul>

From 2336c57abfeea17334c3bd567136c1d8dfbcae15 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Wed, 28 May 2025 11:58:28 +0530
Subject: [PATCH 07/12] fix: message input position

---
 platforms/metagram/src/routes/(protected)/home/+page.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index 1c6f6f3fa..6593cddd9 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -130,14 +130,13 @@
 					{comment}
 					handleReply={(id) => {
 						activeReplyToId = id;
-						alert(id);
 						commentInput?.focus();
 					}}
 				/>
 			</li>
 		{/each}
 		<MessageInput
-			class="mt-4"
+			class="fixed start-0 bottom-4 mt-4 w-full px-5"
 			variant="comment"
 			src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
 			bind:value={commentValue}

From 87664394c4c280c24ac751b4001f1291f37831f7 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Wed, 28 May 2025 15:41:27 +0530
Subject: [PATCH 08/12] fix: post type shifted to types file

---
 platforms/metagram/src/lib/types.ts               | 14 ++++++++++++++
 .../src/routes/(protected)/home/+page.svelte      | 15 +--------------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/platforms/metagram/src/lib/types.ts b/platforms/metagram/src/lib/types.ts
index 9503f15a1..ac7981285 100644
--- a/platforms/metagram/src/lib/types.ts
+++ b/platforms/metagram/src/lib/types.ts
@@ -16,3 +16,17 @@ export type CommentType = {
 	time: string;
 	replies: CommentType[];
 };
+
+export type PostData = {
+	id: number;
+	avatar: string;
+	username: string;
+	imgUri: string;
+	postAlt: string;
+	text: string;
+	time: string;
+	count: {
+		likes: number;
+		comments: number;
+	};
+};
\ No newline at end of file
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index 6593cddd9..5963111f3 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -4,21 +4,8 @@
 	import { onMount } from 'svelte';
 	import type { CupertinoPane } from 'cupertino-pane';
 	import { Comment, MessageInput } from '$lib/fragments';
-	import type { CommentType } from '$lib/types';
+	import type { CommentType, PostData } from '$lib/types';
 
-	type PostData = {
-		id: number;
-		avatar: string;
-		username: string;
-		imgUri: string;
-		postAlt: string;
-		text: string;
-		time: string;
-		count: {
-			likes: number;
-			comments: number;
-		};
-	};
 
 	let listElement: HTMLElement;
 	let visiblePosts: PostData[] = $state([]);

From deb7a144bb9bf86ff23be0a03c1efd4760c83539 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Wed, 28 May 2025 16:23:33 +0530
Subject: [PATCH 09/12] fix: one level deep only

---
 .../src/lib/fragments/Comment/Comment.svelte  | 61 +++++++++++++++++--
 .../src/routes/(protected)/home/+page.svelte  |  4 +-
 2 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/Comment/Comment.svelte b/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
index 4b622b004..8fa8b2bc9 100644
--- a/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
+++ b/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
@@ -3,12 +3,11 @@
 	import { Avatar } from '$lib/ui';
 	import { cn } from '$lib/utils';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import CommentComponent from './Comment.svelte';
 	import type { CommentType } from '$lib/types';
 
 	interface ICommentProps extends HTMLAttributes<HTMLElement> {
 		comment: CommentType;
-		handleReply: (id: string) => void;
+		handleReply: () => void;
 	}
 
 	let visibleReplies = $state(2);
@@ -70,7 +69,7 @@
 			/>
 		</button>
 		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
-		<button onclick={() => handleReply(comment.commentId)} class="text-black-600 font-semibold"
+		<button onclick={handleReply} class="text-black-600 font-semibold"
 			>Reply</button
 		>
 		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
@@ -80,7 +79,61 @@
 		<ul class="ms-12 mt-4 space-y-2">
 			{#each comment.replies.slice(0, visibleReplies) as reply}
 				<li>
-					<CommentComponent comment={reply} {handleReply} />
+					<div class="align-start flex gap-2">
+						<Avatar src={reply.userImgSrc} size="sm" />
+						<div>
+							<h3 class="font-semibold text-black">{reply.name}</h3>
+							<p class="text-black-600 mt-0.5">{reply.comment}</p>
+						</div>
+					</div>
+					<div class="ms-12 mt-2 flex items-center gap-2">
+						<button
+							onclick={() => {
+								if (!reply.isUpVoted) {
+									reply.upVotes++;
+									reply.isUpVoted = true;
+									reply.isDownVoted = false;
+								}
+							}}
+						>
+							<Like
+								size="18px"
+								color={reply.isUpVoted
+									? 'var(--color-brand-burnt-orange)'
+									: 'var(--color-black-600)'}
+								fill={reply.isUpVoted
+									? 'var(--color-brand-burnt-orange)'
+									: 'var(--color-black-600)'}
+							/>
+						</button>
+						<p class="text-black-600 font-semibold">{reply.upVotes}</p>
+						<button
+							onclick={() => {
+								if (!reply.isDownVoted) {
+									reply.upVotes--;
+									reply.isDownVoted = true;
+									reply.isUpVoted = false;
+								}
+							}}
+						>
+							<Like
+								size="18px"
+								color={reply.isDownVoted
+									? 'var(--color-brand-burnt-orange)'
+									: 'var(--color-black-600)'}
+								fill={reply.isDownVoted
+									? 'var(--color-brand-burnt-orange)'
+									: 'var(--color-black-600)'}
+								class="rotate-180"
+							/>
+						</button>
+						<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
+						<button onclick={handleReply} class="text-black-600 font-semibold"
+							>Reply</button
+						>
+						<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
+						<p class="text-black-600">{reply.time}</p>
+					</div>
 				</li>
 			{/each}
 			{#if comment.replies.length > visibleReplies}
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index 5963111f3..fab8c758e 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -115,8 +115,8 @@
 			<li class="mb-4">
 				<Comment
 					{comment}
-					handleReply={(id) => {
-						activeReplyToId = id;
+					handleReply={() => {
+						activeReplyToId = comment.commentId;
 						commentInput?.focus();
 					}}
 				/>

From 5adce1869302b3228b0dfe23de301cb7bc7dd656 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 29 May 2025 09:04:31 +0530
Subject: [PATCH 10/12] fix: drawer should only be render on mobile

---
 .../metagram/src/lib/fragments/Comment/Comment.svelte    | 4 +---
 platforms/metagram/src/lib/types.ts                      | 2 +-
 .../metagram/src/routes/(protected)/home/+page.svelte    | 9 +++++++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/Comment/Comment.svelte b/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
index 8fa8b2bc9..86a5a0689 100644
--- a/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
+++ b/platforms/metagram/src/lib/fragments/Comment/Comment.svelte
@@ -69,9 +69,7 @@
 			/>
 		</button>
 		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
-		<button onclick={handleReply} class="text-black-600 font-semibold"
-			>Reply</button
-		>
+		<button onclick={handleReply} class="text-black-600 font-semibold">Reply</button>
 		<span class="bg-black-600 inline-block h-1 w-1 rounded-full"></span>
 		<p class="text-black-600">{comment.time}</p>
 	</div>
diff --git a/platforms/metagram/src/lib/types.ts b/platforms/metagram/src/lib/types.ts
index ac7981285..1cd879502 100644
--- a/platforms/metagram/src/lib/types.ts
+++ b/platforms/metagram/src/lib/types.ts
@@ -29,4 +29,4 @@ export type PostData = {
 		likes: number;
 		comments: number;
 	};
-};
\ No newline at end of file
+};
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index fab8c758e..18524dff6 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -6,7 +6,6 @@
 	import { Comment, MessageInput } from '$lib/fragments';
 	import type { CommentType, PostData } from '$lib/types';
 
-
 	let listElement: HTMLElement;
 	let visiblePosts: PostData[] = $state([]);
 	let maxVisiblePosts = $state(20);
@@ -96,7 +95,13 @@
 				count={post.count}
 				callback={{
 					like: () => alert('like'),
-					comment: () => drawer?.present({ animate: true }),
+					comment: () => {
+						if (window.matchMedia('(max-width: 768px)').matches) {
+							drawer?.present({ animate: true });
+						} else {
+							// comments to be shown in right aside
+						}
+					},
 					menu: () => alert('menu')
 				}}
 			/>

From 68d7345274a7dbcf8b652046c037541e47109ea1 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 30 May 2025 11:55:26 +0530
Subject: [PATCH 11/12] fix: comments on layout page

---
 .../metagram/src/lib/store/store.svelte.ts    |  4 +
 .../src/routes/(protected)/+layout.svelte     | 76 ++++++++++++++++++-
 .../src/routes/(protected)/home/+page.svelte  | 16 ++--
 3 files changed, 86 insertions(+), 10 deletions(-)

diff --git a/platforms/metagram/src/lib/store/store.svelte.ts b/platforms/metagram/src/lib/store/store.svelte.ts
index db7b38da3..ce945c57c 100644
--- a/platforms/metagram/src/lib/store/store.svelte.ts
+++ b/platforms/metagram/src/lib/store/store.svelte.ts
@@ -1,3 +1,7 @@
 export const isNavigatingThroughNav = $state({
 	value: false
 });
+
+export const showComments = $state({
+	value: false
+})
\ No newline at end of file
diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
index 880f4459d..e9eb8caf7 100644
--- a/platforms/metagram/src/routes/(protected)/+layout.svelte
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -1,13 +1,55 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
-	import { BottomNav, Header } from '$lib/fragments';
+	import { comments } from '$lib/dummyData';
+	import { BottomNav, Header, Comment, MessageInput } from '$lib/fragments';
 	import SideBar from '$lib/fragments/SideBar/SideBar.svelte';
 	import { Settings } from '$lib/icons';
+	import { showComments } from '$lib/store/store.svelte';
+	import type { CommentType } from '$lib/types';
 	let { children } = $props();
 
 	let route = $derived(page.url.pathname);
 	let heading = $state('');
+	let commentValue: string = $state('');
+	let commentInput: HTMLInputElement | undefined = $state();
+	let _comments = $state(comments);
+	let activeReplyToId: string | null = $state(null);
+
+	const handleSend = async () => {
+		const newComment = {
+			userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+			name: 'You',
+			commentId: Date.now().toString(),
+			comment: commentValue,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
+			time: 'Just now',
+			replies: []
+		};
+
+		if (activeReplyToId) {
+			// Find the parent comment by id and push reply
+			const addReplyToComment = (commentsArray: CommentType[]) => {
+				for (const c of commentsArray) {
+					if (c.commentId === activeReplyToId) {
+						c.replies.push(newComment);
+						return true;
+					} else if (c.replies.length) {
+						if (addReplyToComment(c.replies)) return true;
+					}
+				}
+				return false;
+			};
+			addReplyToComment(_comments);
+		} else {
+			// If no activeReplyToId, add as a new parent comment
+			_comments = [newComment, ..._comments];
+		}
+		commentValue = '';
+		activeReplyToId = null;
+	};
 
 	$effect(() => {
 		if (route.includes('home')) {
@@ -28,9 +70,9 @@
 	});
 </script>
 
-<main class="block h-[100dvh] grid-cols-[20vw_auto_30vw] md:grid">
+<main class={`block h-[100dvh] ${route !== "/home"? "grid-cols-[20vw_auto]" : "grid-cols-[20vw_auto_30vw]"} md:grid`}>
 	<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
-	<section class="mx-4 md:mx-8 md:pt-8">
+	<section class="px-4 md:px-8 md:pt-8">
 		<div class="flex items-center justify-between">
 			<Header variant="primary" {heading} />
 			{#if route === '/profile'}
@@ -47,5 +89,33 @@
 		</div>
 		{@render children()}
 	</section>
+	{#if route === "/home"}
+	<aside class="relative hidden md:block h-[100dvh] overflow-y-scroll hide-scrollbar px-8 pt-14 border border-s-gray-200 border-e-0 border-t-0 border-b-0">
+		{#if showComments.value}
+		<ul class="pb-4">
+			<h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3>
+			{#each _comments as comment}
+				<li class="mb-4">
+					<Comment
+						{comment}
+						handleReply={() => {
+							activeReplyToId = comment.commentId;
+							commentInput?.focus();
+						}}
+					/>
+				</li>
+			{/each}
+			<MessageInput
+				class="sticky start-0 bottom-4 mt-4 w-full px-2"
+				variant="comment"
+				src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
+				bind:value={commentValue}
+				{handleSend}
+				bind:input={commentInput}
+			/>
+		</ul>
+		{/if}
+	</aside>
+	{/if}
 	<BottomNav profileSrc="https://picsum.photos/200" />
 </main>
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index e437e4398..632256f9c 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -5,6 +5,7 @@
 	import type { CupertinoPane } from 'cupertino-pane';
 	import { Comment, MessageInput } from '$lib/fragments';
 	import type { CommentType, PostData } from '$lib/types';
+	import { showComments } from '$lib/store/store.svelte';
 
 	let listElement: HTMLElement;
 	let visiblePosts: PostData[] = $state([]);
@@ -82,8 +83,9 @@
 	});
 </script>
 
-<ul bind:this={listElement} class="hide-scrollbar h-[100dvh] overflow-auto">
-	{#each visiblePosts as post}
+
+	<ul bind:this={listElement} class="hide-scrollbar h-[100vh] overflow-auto">
+		{#each visiblePosts as post}
 		<li class="mb-6">
 			<Post
 				avatar={post.avatar}
@@ -99,19 +101,19 @@
 						if (window.matchMedia('(max-width: 768px)').matches) {
 							drawer?.present({ animate: true });
 						} else {
-							// comments to be shown in right aside
+							showComments.value = true
 						}
 					},
 					menu: () => alert('menu')
 				}}
 			/>
 		</li>
-	{/each}
-</ul>
+		{/each}
+	</ul>
 
-{#if loading}
+	{#if loading}
 	<p class="my-4 text-center">Loading more posts…</p>
-{/if}
+	{/if}
 
 <Drawer bind:drawer>
 	<ul class="pb-4">

From 0db7b36f3e80f303bdfe1fc170009f5af971055f Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 30 May 2025 12:04:15 +0530
Subject: [PATCH 12/12] fix: format

---
 .../metagram/src/lib/store/store.svelte.ts    |  2 +-
 .../src/lib/ui/Helper/Helper.stories.ts       |  2 -
 .../src/lib/ui/Input/Input.stories.ts         |  2 +-
 .../src/routes/(protected)/+layout.svelte     | 58 ++++++++++---------
 .../src/routes/(protected)/home/+page.svelte  | 15 +++--
 5 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/platforms/metagram/src/lib/store/store.svelte.ts b/platforms/metagram/src/lib/store/store.svelte.ts
index ce945c57c..30a8779a7 100644
--- a/platforms/metagram/src/lib/store/store.svelte.ts
+++ b/platforms/metagram/src/lib/store/store.svelte.ts
@@ -4,4 +4,4 @@ export const isNavigatingThroughNav = $state({
 
 export const showComments = $state({
 	value: false
-})
\ No newline at end of file
+});
diff --git a/platforms/metagram/src/lib/ui/Helper/Helper.stories.ts b/platforms/metagram/src/lib/ui/Helper/Helper.stories.ts
index 54f6286ab..bb4c91fee 100644
--- a/platforms/metagram/src/lib/ui/Helper/Helper.stories.ts
+++ b/platforms/metagram/src/lib/ui/Helper/Helper.stories.ts
@@ -15,5 +15,3 @@ export default {
 export const Primary = {
 	args: { children: HelperText }
 };
-
-
diff --git a/platforms/metagram/src/lib/ui/Input/Input.stories.ts b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
index 9d1d53c67..650064caa 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.stories.ts
+++ b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
@@ -4,7 +4,7 @@ export default {
 	title: 'UI/Input',
 	component: Input,
 	tags: ['autodocs'],
-	render: (args: { type: string; placeholder: string; }) => ({
+	render: (args: { type: string; placeholder: string }) => ({
 		Component: Input,
 		props: args
 	})
diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
index e9eb8caf7..276c95202 100644
--- a/platforms/metagram/src/routes/(protected)/+layout.svelte
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -70,7 +70,9 @@
 	});
 </script>
 
-<main class={`block h-[100dvh] ${route !== "/home"? "grid-cols-[20vw_auto]" : "grid-cols-[20vw_auto_30vw]"} md:grid`}>
+<main
+	class={`block h-[100dvh] ${route !== '/home' ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
+>
 	<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
 	<section class="px-4 md:px-8 md:pt-8">
 		<div class="flex items-center justify-between">
@@ -89,33 +91,35 @@
 		</div>
 		{@render children()}
 	</section>
-	{#if route === "/home"}
-	<aside class="relative hidden md:block h-[100dvh] overflow-y-scroll hide-scrollbar px-8 pt-14 border border-s-gray-200 border-e-0 border-t-0 border-b-0">
-		{#if showComments.value}
-		<ul class="pb-4">
-			<h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3>
-			{#each _comments as comment}
-				<li class="mb-4">
-					<Comment
-						{comment}
-						handleReply={() => {
-							activeReplyToId = comment.commentId;
-							commentInput?.focus();
-						}}
+	{#if route === '/home'}
+		<aside
+			class="hide-scrollbar relative hidden h-[100dvh] overflow-y-scroll border border-e-0 border-t-0 border-b-0 border-s-gray-200 px-8 pt-14 md:block"
+		>
+			{#if showComments.value}
+				<ul class="pb-4">
+					<h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3>
+					{#each _comments as comment}
+						<li class="mb-4">
+							<Comment
+								{comment}
+								handleReply={() => {
+									activeReplyToId = comment.commentId;
+									commentInput?.focus();
+								}}
+							/>
+						</li>
+					{/each}
+					<MessageInput
+						class="sticky start-0 bottom-4 mt-4 w-full px-2"
+						variant="comment"
+						src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
+						bind:value={commentValue}
+						{handleSend}
+						bind:input={commentInput}
 					/>
-				</li>
-			{/each}
-			<MessageInput
-				class="sticky start-0 bottom-4 mt-4 w-full px-2"
-				variant="comment"
-				src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
-				bind:value={commentValue}
-				{handleSend}
-				bind:input={commentInput}
-			/>
-		</ul>
-		{/if}
-	</aside>
+				</ul>
+			{/if}
+		</aside>
 	{/if}
 	<BottomNav profileSrc="https://picsum.photos/200" />
 </main>
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index 632256f9c..227e2035d 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -83,9 +83,8 @@
 	});
 </script>
 
-
-	<ul bind:this={listElement} class="hide-scrollbar h-[100vh] overflow-auto">
-		{#each visiblePosts as post}
+<ul bind:this={listElement} class="hide-scrollbar h-[100vh] overflow-auto">
+	{#each visiblePosts as post}
 		<li class="mb-6">
 			<Post
 				avatar={post.avatar}
@@ -101,19 +100,19 @@
 						if (window.matchMedia('(max-width: 768px)').matches) {
 							drawer?.present({ animate: true });
 						} else {
-							showComments.value = true
+							showComments.value = true;
 						}
 					},
 					menu: () => alert('menu')
 				}}
 			/>
 		</li>
-		{/each}
-	</ul>
+	{/each}
+</ul>
 
-	{#if loading}
+{#if loading}
 	<p class="my-4 text-center">Loading more posts…</p>
-	{/if}
+{/if}
 
 <Drawer bind:drawer>
 	<ul class="pb-4">