feat: Discover Page

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

@@ -0,0 +1,22 @@
+import type { ComponentProps } from 'svelte';
+import { UserRequest } from '..';
+
+export default {
+	title: 'UI/UserRequest',
+	component: UserRequest,
+	tags: ['autodocs'],
+	render: (args: { Component: UserRequest; props: ComponentProps<typeof UserRequest> }) => ({
+		Component: UserRequest,
+		props: args
+	})
+};
+
+export const Primary = {
+	args: {
+		userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		userName: 'luffythethird',
+		description:
+			'I’ve always wished life came at me fast. Funny how that wish never came through',
+		handleFollow: () => alert('Adsad')
+	}
+};

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

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { Avatar } from '$lib/ui';
+	import Button from '$lib/ui/Button/Button.svelte';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface IUserRequestprops extends HTMLAttributes<HTMLElement> {
+		userImgSrc: string;
+		userName: string;
+		description: string;
+		handleFollow: () => Promise<void>;
+	}
+
+	let { userImgSrc, userName, description, handleFollow, ...restProps }: IUserRequestprops =
+		$props();
+</script>
+
+<article {...restProps} class={cn(['flex justify-between items-center', restProps.class].join(' '))}>
+    <div class="me-4.5 flex items-start">
+        <Avatar size="sm" src={userImgSrc} />
+        <div class="ms-2">
+            <h3 class="font-semibold text-black">{userName}</h3>
+            <p class="text-black-600">{description}</p>
+        </div>
+    </div>
+	<Button class="max-w-[100px]" variant="secondary" size="sm" callback={handleFollow}>Follow</Button>
+</article>
+
+<!--
+@component
+@name UserRequest
+@description A user request card component displaying avatar, name, description, and a follow button.
+@props
+  - userImgSrc: URL string for the user's avatar image.
+  - userName: Display name of the user.
+  - description: A short description or context for the request.
+  - handleFollow: Async function to execute when the "Follow" button is clicked.
+  - (spread) HTMLAttributes<HTMLElement>: Additional HTML attributes passed to the root <article> element.
+@usage
+<script>
+    import UserRequest from '$lib/fragments/UserRequest.svelte';
+
+    async function followUser() {
+      console.log("User followed!");
+    }
+  </script>
+
+  <UserRequest
+    userImgSrc="https://picsum.photos/id/237/200"
+    userName="John Doe"
+    description="Wants to connect with you"
+    handleFollow={followUser}
+  />
+-->

platforms/metagram/src/lib/fragments/index.ts

@@ -14,3 +14,4 @@ export { default as Post } from './Post/Post.svelte';
 export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
 export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';
+export { default as UserRequest } from './UserRequest/UserRequest.svelte';

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

@@ -3,6 +3,7 @@
 	import { page } from '$app/state';
 	import { comments } from '$lib/dummyData';
 	import { BottomNav, Header, Comment, MessageInput, SideBar } from '$lib/fragments';
+	import UserRequest from '$lib/fragments/UserRequest/UserRequest.svelte';
 	import { Settings } from '$lib/icons';
 	import { showComments } from '$lib/store/store.svelte';
 	import type { CommentType } from '$lib/types';
@@ -73,7 +74,7 @@
 </script>
 
 <main
-	class={`block h-[100dvh] ${route !== '/home' ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
+	class={`block h-[100dvh] ${route !== '/home' && route !== '/messages' ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
 >
 	<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
 	<section class="hide-scrollbar h-[100dvh] overflow-y-auto px-4 pb-8 md:px-8 md:pt-8">
@@ -100,32 +101,48 @@
 		</div>
 		{@render children()}
 	</section>
-	{#if route === '/home'}
+	{#if route === '/home' || route === '/messages'}
 		<aside
 			class="hide-scrollbar relative hidden h-[100dvh] overflow-y-scroll border border-e-0 border-t-0 border-b-0 border-s-gray-200 px-8 pt-14 md:block"
 		>
-			{#if showComments.value}
+			{#if route === '/home'}
+				{#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}
+			{:else if route === '/messages'}
 				<ul class="pb-4">
-					<h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3>
-					{#each _comments as comment}
+					<h2 class="text-black-600 mb-6 text-center">Other people you may know</h2>
+					{#each { length: 5 } as _}
 						<li class="mb-4">
-							<Comment
-								{comment}
-								handleReply={() => {
-									activeReplyToId = comment.commentId;
-									commentInput?.focus();
-								}}
+							<UserRequest
+								userImgSrc="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
+								userName="luffythethird"
+								description="I’ve always wished life came at me fast. Funny how that wish never came through"
+								handleFollow={async () => alert('Adsad')}
 							/>
 						</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>

platforms/metagram/src/routes/(protected)/discover/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { UserRequest } from '$lib/fragments';
+	import { Input } from '$lib/ui';
+
+	let searchValue = $state();
+</script>
+
+<section>
+	<Input type="text" bind:value={searchValue} placeholder="Search user, post and more." />
+    {#if searchValue}
+    <ul class="pb-4 mt-6">
+        {#each { length: 5 } as _}
+            <li class="mb-4">
+                <UserRequest
+                    userImgSrc="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
+                    userName="luffythethird"
+                    description="I’ve always wished life came at me fast. Funny how that wish never came through"
+                    handleFollow={async () => alert('Adsad')}
+                />
+            </li>
+        {/each}
+    </ul>
+    {/if}
+</section>