Feat/comments pane

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',
@@ -9,10 +11,74 @@ 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}`)
 	}
 }));
+
+export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
+	userImgSrc: 'https://picsum.photos/800',
+	name: `user${i + 1}`,
+	commentId: `${i + 1}p`,
+	comment: `this is the dummy comment which is commented by user${i + 1}`,
+	isUpVoted: false,
+	isDownVoted: false,
+	upVotes: 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`,
+ isUpVoted: false,
+ isDownVoted: false,
+ upVotes: 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`,
+ 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: []
+ },
+ {
+ 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: []
+ }
+	]
+}));

platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import { Comment } from '..';
+import { comments } from '$lib/dummyData';
+
+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: {
+ comment: comments[0]
+	}
+};

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

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { Like } from '$lib/icons';
+	import { Avatar } from '$lib/ui';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { CommentType } from '$lib/types';
+
+	interface ICommentProps extends HTMLAttributes<HTMLElement> {
+ comment: CommentType;
+ handleReply: () => void;
+	}
+
+	let visibleReplies = $state(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={comment.userImgSrc} size="sm" />
+ <div>
+ <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 (!comment.isUpVoted) {
+ comment.upVotes++;
+ comment.isUpVoted = true;
+ comment.isDownVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ fill={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ />
+ </button>
+ <p class="text-black-600 font-semibold">{comment.upVotes}</p>
+ <button
+ onclick={() => {
+ if (!comment.isDownVoted) {
+ comment.upVotes--;
+ comment.isDownVoted = true;
+ comment.isUpVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isDownVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ 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>
+ <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.slice(0, visibleReplies) as reply}
+ <li>
+ <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}
+ <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>

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

@@ -7,30 +7,21 @@
 	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(),
- children = undefined,
- handleSwipe,
- ...restProps
-	}: IDrawerProps = $props();
+	let { drawer = $bindable(), children = undefined, ...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 +42,6 @@
  onBackdropTap: () => dismiss()
  }
  });
- if (isPaneOpen) {
- drawer.present({ animate: true });
- } else {
- drawer.destroy({ animate: true });
- }
-
- drawer.present();
 	});
 </script>
 
@@ -71,7 +55,9 @@
 	onswipe={handleDrawerSwipe}
 	class={cn(restProps.class)}
 >
-	{@render children?.()}
+	<div class="h-[100%] overflow-y-scroll">
+ {@render children?.()}
+	</div>
 </div>
 
 <style>

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

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/lib/fragments/index.ts

@@ -11,4 +11,5 @@ 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';
+export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';

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

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/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',
@@ -9,10 +11,74 @@ 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}`)
 	}
 }));
+
+export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
+	userImgSrc: 'https://picsum.photos/800',
+	name: `user${i + 1}`,
+	commentId: `${i + 1}p`,
+	comment: `this is the dummy comment which is commented by user${i + 1}`,
+	isUpVoted: false,
+	isDownVoted: false,
+	upVotes: 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`,
+ isUpVoted: false,
+ isDownVoted: false,
+ upVotes: 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`,
+ 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: []
+ },
+ {
+ 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: []
+ }
+	]
+}));

platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import { Comment } from '..';
+import { comments } from '$lib/dummyData';
+
+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: {
+ comment: comments[0]
+	}
+};

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

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { Like } from '$lib/icons';
+	import { Avatar } from '$lib/ui';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { CommentType } from '$lib/types';
+
+	interface ICommentProps extends HTMLAttributes<HTMLElement> {
+ comment: CommentType;
+ handleReply: () => void;
+	}
+
+	let visibleReplies = $state(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={comment.userImgSrc} size="sm" />
+ <div>
+ <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 (!comment.isUpVoted) {
+ comment.upVotes++;
+ comment.isUpVoted = true;
+ comment.isDownVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ fill={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ />
+ </button>
+ <p class="text-black-600 font-semibold">{comment.upVotes}</p>
+ <button
+ onclick={() => {
+ if (!comment.isDownVoted) {
+ comment.upVotes--;
+ comment.isDownVoted = true;
+ comment.isUpVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isDownVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ 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>
+ <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.slice(0, visibleReplies) as reply}
+ <li>
+ <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}
+ <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>

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

@@ -7,30 +7,21 @@
 	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(),
- children = undefined,
- handleSwipe,
- ...restProps
-	}: IDrawerProps = $props();
+	let { drawer = $bindable(), children = undefined, ...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 +42,6 @@
  onBackdropTap: () => dismiss()
  }
  });
- if (isPaneOpen) {
- drawer.present({ animate: true });
- } else {
- drawer.destroy({ animate: true });
- }
-
- drawer.present();
 	});
 </script>
 
@@ -71,7 +55,9 @@
 	onswipe={handleDrawerSwipe}
 	class={cn(restProps.class)}
 >
-	{@render children?.()}
+	<div class="h-[100%] overflow-y-scroll">
+ {@render children?.()}
+	</div>
 </div>
 
 <style>

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

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/lib/fragments/index.ts

@@ -11,4 +11,5 @@ 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';
+export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';

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

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/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',
@@ -9,10 +11,74 @@ 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}`)
 	}
 }));
+
+export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
+	userImgSrc: 'https://picsum.photos/800',
+	name: `user${i + 1}`,
+	commentId: `${i + 1}p`,
+	comment: `this is the dummy comment which is commented by user${i + 1}`,
+	isUpVoted: false,
+	isDownVoted: false,
+	upVotes: 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`,
+ isUpVoted: false,
+ isDownVoted: false,
+ upVotes: 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`,
+ 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: []
+ },
+ {
+ 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: []
+ }
+	]
+}));

platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import { Comment } from '..';
+import { comments } from '$lib/dummyData';
+
+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: {
+ comment: comments[0]
+	}
+};

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

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { Like } from '$lib/icons';
+	import { Avatar } from '$lib/ui';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { CommentType } from '$lib/types';
+
+	interface ICommentProps extends HTMLAttributes<HTMLElement> {
+ comment: CommentType;
+ handleReply: () => void;
+	}
+
+	let visibleReplies = $state(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={comment.userImgSrc} size="sm" />
+ <div>
+ <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 (!comment.isUpVoted) {
+ comment.upVotes++;
+ comment.isUpVoted = true;
+ comment.isDownVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ fill={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ />
+ </button>
+ <p class="text-black-600 font-semibold">{comment.upVotes}</p>
+ <button
+ onclick={() => {
+ if (!comment.isDownVoted) {
+ comment.upVotes--;
+ comment.isDownVoted = true;
+ comment.isUpVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isDownVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ 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>
+ <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.slice(0, visibleReplies) as reply}
+ <li>
+ <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}
+ <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>

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

@@ -7,30 +7,21 @@
 	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(),
- children = undefined,
- handleSwipe,
- ...restProps
-	}: IDrawerProps = $props();
+	let { drawer = $bindable(), children = undefined, ...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 +42,6 @@
  onBackdropTap: () => dismiss()
  }
  });
- if (isPaneOpen) {
- drawer.present({ animate: true });
- } else {
- drawer.destroy({ animate: true });
- }
-
- drawer.present();
 	});
 </script>
 
@@ -71,7 +55,9 @@
 	onswipe={handleDrawerSwipe}
 	class={cn(restProps.class)}
 >
-	{@render children?.()}
+	<div class="h-[100%] overflow-y-scroll">
+ {@render children?.()}
+	</div>
 </div>
 
 <style>

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

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/lib/fragments/index.ts

@@ -11,4 +11,5 @@ 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';
+export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';

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

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/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',
@@ -9,10 +11,74 @@ 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}`)
 	}
 }));
+
+export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
+	userImgSrc: 'https://picsum.photos/800',
+	name: `user${i + 1}`,
+	commentId: `${i + 1}p`,
+	comment: `this is the dummy comment which is commented by user${i + 1}`,
+	isUpVoted: false,
+	isDownVoted: false,
+	upVotes: 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`,
+ isUpVoted: false,
+ isDownVoted: false,
+ upVotes: 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`,
+ 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: []
+ },
+ {
+ 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: []
+ }
+	]
+}));

platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import { Comment } from '..';
+import { comments } from '$lib/dummyData';
+
+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: {
+ comment: comments[0]
+	}
+};

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

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { Like } from '$lib/icons';
+	import { Avatar } from '$lib/ui';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { CommentType } from '$lib/types';
+
+	interface ICommentProps extends HTMLAttributes<HTMLElement> {
+ comment: CommentType;
+ handleReply: () => void;
+	}
+
+	let visibleReplies = $state(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={comment.userImgSrc} size="sm" />
+ <div>
+ <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 (!comment.isUpVoted) {
+ comment.upVotes++;
+ comment.isUpVoted = true;
+ comment.isDownVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ fill={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ />
+ </button>
+ <p class="text-black-600 font-semibold">{comment.upVotes}</p>
+ <button
+ onclick={() => {
+ if (!comment.isDownVoted) {
+ comment.upVotes--;
+ comment.isDownVoted = true;
+ comment.isUpVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isDownVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ 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>
+ <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.slice(0, visibleReplies) as reply}
+ <li>
+ <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}
+ <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>

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

@@ -7,30 +7,21 @@
 	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(),
- children = undefined,
- handleSwipe,
- ...restProps
-	}: IDrawerProps = $props();
+	let { drawer = $bindable(), children = undefined, ...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 +42,6 @@
  onBackdropTap: () => dismiss()
  }
  });
- if (isPaneOpen) {
- drawer.present({ animate: true });
- } else {
- drawer.destroy({ animate: true });
- }
-
- drawer.present();
 	});
 </script>
 
@@ -71,7 +55,9 @@
 	onswipe={handleDrawerSwipe}
 	class={cn(restProps.class)}
 >
-	{@render children?.()}
+	<div class="h-[100%] overflow-y-scroll">
+ {@render children?.()}
+	</div>
 </div>
 
 <style>

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

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/lib/fragments/index.ts

@@ -11,4 +11,5 @@ 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';
+export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';

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

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/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',
@@ -9,10 +11,74 @@ 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}`)
 	}
 }));
+
+export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
+	userImgSrc: 'https://picsum.photos/800',
+	name: `user${i + 1}`,
+	commentId: `${i + 1}p`,
+	comment: `this is the dummy comment which is commented by user${i + 1}`,
+	isUpVoted: false,
+	isDownVoted: false,
+	upVotes: 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`,
+ isUpVoted: false,
+ isDownVoted: false,
+ upVotes: 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`,
+ 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: []
+ },
+ {
+ 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: []
+ }
+	]
+}));

platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import { Comment } from '..';
+import { comments } from '$lib/dummyData';
+
+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: {
+ comment: comments[0]
+	}
+};

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

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { Like } from '$lib/icons';
+	import { Avatar } from '$lib/ui';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { CommentType } from '$lib/types';
+
+	interface ICommentProps extends HTMLAttributes<HTMLElement> {
+ comment: CommentType;
+ handleReply: () => void;
+	}
+
+	let visibleReplies = $state(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={comment.userImgSrc} size="sm" />
+ <div>
+ <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 (!comment.isUpVoted) {
+ comment.upVotes++;
+ comment.isUpVoted = true;
+ comment.isDownVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ fill={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ />
+ </button>
+ <p class="text-black-600 font-semibold">{comment.upVotes}</p>
+ <button
+ onclick={() => {
+ if (!comment.isDownVoted) {
+ comment.upVotes--;
+ comment.isDownVoted = true;
+ comment.isUpVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isDownVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ 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>
+ <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.slice(0, visibleReplies) as reply}
+ <li>
+ <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}
+ <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>

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

@@ -7,30 +7,21 @@
 	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(),
- children = undefined,
- handleSwipe,
- ...restProps
-	}: IDrawerProps = $props();
+	let { drawer = $bindable(), children = undefined, ...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 +42,6 @@
  onBackdropTap: () => dismiss()
  }
  });
- if (isPaneOpen) {
- drawer.present({ animate: true });
- } else {
- drawer.destroy({ animate: true });
- }
-
- drawer.present();
 	});
 </script>
 
@@ -71,7 +55,9 @@
 	onswipe={handleDrawerSwipe}
 	class={cn(restProps.class)}
 >
-	{@render children?.()}
+	<div class="h-[100%] overflow-y-scroll">
+ {@render children?.()}
+	</div>
 </div>
 
 <style>

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

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/lib/fragments/index.ts

@@ -11,4 +11,5 @@ 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';
+export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';

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

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/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',
@@ -9,10 +11,74 @@ 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}`)
 	}
 }));
+
+export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
+	userImgSrc: 'https://picsum.photos/800',
+	name: `user${i + 1}`,
+	commentId: `${i + 1}p`,
+	comment: `this is the dummy comment which is commented by user${i + 1}`,
+	isUpVoted: false,
+	isDownVoted: false,
+	upVotes: 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`,
+ isUpVoted: false,
+ isDownVoted: false,
+ upVotes: 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`,
+ 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: []
+ },
+ {
+ 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: []
+ }
+	]
+}));

platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import { Comment } from '..';
+import { comments } from '$lib/dummyData';
+
+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: {
+ comment: comments[0]
+	}
+};

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

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { Like } from '$lib/icons';
+	import { Avatar } from '$lib/ui';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { CommentType } from '$lib/types';
+
+	interface ICommentProps extends HTMLAttributes<HTMLElement> {
+ comment: CommentType;
+ handleReply: () => void;
+	}
+
+	let visibleReplies = $state(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={comment.userImgSrc} size="sm" />
+ <div>
+ <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 (!comment.isUpVoted) {
+ comment.upVotes++;
+ comment.isUpVoted = true;
+ comment.isDownVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ fill={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ />
+ </button>
+ <p class="text-black-600 font-semibold">{comment.upVotes}</p>
+ <button
+ onclick={() => {
+ if (!comment.isDownVoted) {
+ comment.upVotes--;
+ comment.isDownVoted = true;
+ comment.isUpVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isDownVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ 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>
+ <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.slice(0, visibleReplies) as reply}
+ <li>
+ <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}
+ <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>

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

@@ -7,30 +7,21 @@
 	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(),
- children = undefined,
- handleSwipe,
- ...restProps
-	}: IDrawerProps = $props();
+	let { drawer = $bindable(), children = undefined, ...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 +42,6 @@
  onBackdropTap: () => dismiss()
  }
  });
- if (isPaneOpen) {
- drawer.present({ animate: true });
- } else {
- drawer.destroy({ animate: true });
- }
-
- drawer.present();
 	});
 </script>
 
@@ -71,7 +55,9 @@
 	onswipe={handleDrawerSwipe}
 	class={cn(restProps.class)}
 >
-	{@render children?.()}
+	<div class="h-[100%] overflow-y-scroll">
+ {@render children?.()}
+	</div>
 </div>
 
 <style>

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

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/lib/fragments/index.ts

@@ -11,4 +11,5 @@ 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';
+export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';

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

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/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',
@@ -9,10 +11,74 @@ 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}`)
 	}
 }));
+
+export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
+	userImgSrc: 'https://picsum.photos/800',
+	name: `user${i + 1}`,
+	commentId: `${i + 1}p`,
+	comment: `this is the dummy comment which is commented by user${i + 1}`,
+	isUpVoted: false,
+	isDownVoted: false,
+	upVotes: 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`,
+ isUpVoted: false,
+ isDownVoted: false,
+ upVotes: 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`,
+ 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: []
+ },
+ {
+ 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: []
+ }
+	]
+}));

platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import { Comment } from '..';
+import { comments } from '$lib/dummyData';
+
+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: {
+ comment: comments[0]
+	}
+};

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

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { Like } from '$lib/icons';
+	import { Avatar } from '$lib/ui';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { CommentType } from '$lib/types';
+
+	interface ICommentProps extends HTMLAttributes<HTMLElement> {
+ comment: CommentType;
+ handleReply: () => void;
+	}
+
+	let visibleReplies = $state(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={comment.userImgSrc} size="sm" />
+ <div>
+ <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 (!comment.isUpVoted) {
+ comment.upVotes++;
+ comment.isUpVoted = true;
+ comment.isDownVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ fill={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ />
+ </button>
+ <p class="text-black-600 font-semibold">{comment.upVotes}</p>
+ <button
+ onclick={() => {
+ if (!comment.isDownVoted) {
+ comment.upVotes--;
+ comment.isDownVoted = true;
+ comment.isUpVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isDownVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ 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>
+ <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.slice(0, visibleReplies) as reply}
+ <li>
+ <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}
+ <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>

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

@@ -7,30 +7,21 @@
 	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(),
- children = undefined,
- handleSwipe,
- ...restProps
-	}: IDrawerProps = $props();
+	let { drawer = $bindable(), children = undefined, ...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 +42,6 @@
  onBackdropTap: () => dismiss()
  }
  });
- if (isPaneOpen) {
- drawer.present({ animate: true });
- } else {
- drawer.destroy({ animate: true });
- }
-
- drawer.present();
 	});
 </script>
 
@@ -71,7 +55,9 @@
 	onswipe={handleDrawerSwipe}
 	class={cn(restProps.class)}
 >
-	{@render children?.()}
+	<div class="h-[100%] overflow-y-scroll">
+ {@render children?.()}
+	</div>
 </div>
 
 <style>

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

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/lib/fragments/index.ts

@@ -11,4 +11,5 @@ 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';
+export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';

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

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/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',
@@ -9,10 +11,74 @@ 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}`)
 	}
 }));
+
+export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
+	userImgSrc: 'https://picsum.photos/800',
+	name: `user${i + 1}`,
+	commentId: `${i + 1}p`,
+	comment: `this is the dummy comment which is commented by user${i + 1}`,
+	isUpVoted: false,
+	isDownVoted: false,
+	upVotes: 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`,
+ isUpVoted: false,
+ isDownVoted: false,
+ upVotes: 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`,
+ 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: []
+ },
+ {
+ 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: []
+ }
+	]
+}));

platforms/metagram/src/lib/fragments/Comment/Comment.stories.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import { Comment } from '..';
+import { comments } from '$lib/dummyData';
+
+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: {
+ comment: comments[0]
+	}
+};

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

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import { Like } from '$lib/icons';
+	import { Avatar } from '$lib/ui';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { CommentType } from '$lib/types';
+
+	interface ICommentProps extends HTMLAttributes<HTMLElement> {
+ comment: CommentType;
+ handleReply: () => void;
+	}
+
+	let visibleReplies = $state(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={comment.userImgSrc} size="sm" />
+ <div>
+ <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 (!comment.isUpVoted) {
+ comment.upVotes++;
+ comment.isUpVoted = true;
+ comment.isDownVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ fill={comment.isUpVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ />
+ </button>
+ <p class="text-black-600 font-semibold">{comment.upVotes}</p>
+ <button
+ onclick={() => {
+ if (!comment.isDownVoted) {
+ comment.upVotes--;
+ comment.isDownVoted = true;
+ comment.isUpVoted = false;
+ }
+ }}
+ >
+ <Like
+ size="18px"
+ color={comment.isDownVoted
+ ? 'var(--color-brand-burnt-orange)'
+ : 'var(--color-black-600)'}
+ 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>
+ <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.slice(0, visibleReplies) as reply}
+ <li>
+ <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}
+ <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>

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

@@ -7,30 +7,21 @@
 	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(),
- children = undefined,
- handleSwipe,
- ...restProps
-	}: IDrawerProps = $props();
+	let { drawer = $bindable(), children = undefined, ...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 +42,6 @@
  onBackdropTap: () => dismiss()
  }
  });
- if (isPaneOpen) {
- drawer.present({ animate: true });
- } else {
- drawer.destroy({ animate: true });
- }
-
- drawer.present();
 	});
 </script>
 
@@ -71,7 +55,9 @@
 	onswipe={handleDrawerSwipe}
 	class={cn(restProps.class)}
 >
-	{@render children?.()}
+	<div class="h-[100%] overflow-y-scroll">
+ {@render children?.()}
+	</div>
 </div>
 
 <style>

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

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/lib/fragments/index.ts

@@ -11,4 +11,5 @@ 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';
+export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';

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

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

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