Feat/comments pane

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

@@ -7,30 +7,26 @@
 	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 });
 	}
 
 	const handleDrawerSwipe = (event: SwipeCustomEvent) => {
 		if (event.detail.direction === ('down' as string)) {
-			handleSwipe?.(false);
 			drawer?.destroy({ animate: true });
-			isPaneOpen = false;
 		}
 	};
 
@@ -51,13 +47,6 @@
 				onBackdropTap: () => dismiss()
 			}
 		});
-		if (isPaneOpen) {
-			drawer.present({ animate: true });
-		} else {
-			drawer.destroy({ animate: true });
-		}
-
-		drawer.present();
 	});
 </script>
 

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

@@ -82,15 +82,15 @@
 			</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}
 				strokeWidth={30}
 				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>

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;
@@ -58,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
@@ -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>

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>