fix: comments on layout page

Author: grv-saini-20

platforms/metagram/src/lib/store/store.svelte.ts

@@ -1,3 +1,7 @@
 export const isNavigatingThroughNav = $state({
 	value: false
 });
+
+export const showComments = $state({
+	value: false
+})

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>

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