From c9d5192885bf90b472e6e4151e56c44f27400c07 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Wed, 4 Jun 2025 11:58:38 +0530
Subject: [PATCH 1/8] feat/upload-post

---
 .../lib/fragments/InputFile/InputFile.svelte  | 33 +++++---
 .../src/lib/fragments/Modal/Modal.svelte      | 31 +++----
 .../fragments/UserRequest/UserRequest.svelte  | 23 +++--
 .../src/lib/ui/Textarea/Textarea.stories.ts   | 17 ++++
 .../src/lib/ui/Textarea/Textarea.svelte       | 32 +++++++
 platforms/metagram/src/lib/ui/index.ts        |  1 +
 .../src/routes/(protected)/+layout.svelte     | 84 ++++++++++++++++++-
 .../routes/(protected)/discover/+page.svelte  | 28 +++----
 platforms/metagram/src/routes/+layout.svelte  | 20 ++---
 9 files changed, 209 insertions(+), 60 deletions(-)
 create mode 100644 platforms/metagram/src/lib/ui/Textarea/Textarea.stories.ts
 create mode 100644 platforms/metagram/src/lib/ui/Textarea/Textarea.svelte

diff --git a/platforms/metagram/src/lib/fragments/InputFile/InputFile.svelte b/platforms/metagram/src/lib/fragments/InputFile/InputFile.svelte
index 9b8c5dce..9d390ec5 100644
--- a/platforms/metagram/src/lib/fragments/InputFile/InputFile.svelte
+++ b/platforms/metagram/src/lib/fragments/InputFile/InputFile.svelte
@@ -1,33 +1,46 @@
 <script lang="ts">
+	import { cn } from '$lib/utils';
 	import { Album01Icon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import type { HTMLLabelAttributes } from 'svelte/elements';
 
-	interface IInputFileProps {
+	interface IInputFileProps extends HTMLLabelAttributes {
 		files: FileList | undefined;
 		accept: string;
-		label: string;
-		cancelLabel: string;
-		oncancel: () => void;
+		label?: string;
+		multiple?: boolean;
+		cancelLabel?: string;
+		oncancel?: () => void;
 	}
 
 	let {
 		files = $bindable(),
 		accept = 'image/*',
 		label = 'Click to upload a photo',
+		multiple = false,
 		cancelLabel = 'Delete upload',
-		oncancel
+		oncancel,
+		...restProps
 	}: IInputFileProps = $props();
 
 	const uniqueId = Math.random().toString().split('.')[1];
 	let inputFile: HTMLInputElement | undefined = $state();
+
+	let cBase =
+		'bg-grey text-black-400 font-geist flex min-h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal';
 </script>
 
-<input id={uniqueId} type="file" bind:files class="hidden" {accept} bind:this={inputFile} />
+<input
+	id={uniqueId}
+	type="file"
+	bind:files
+	class="hidden"
+	{multiple}
+	{accept}
+	bind:this={inputFile}
+/>
 
-<label
-	for={uniqueId}
-	class="bg-grey text-black-400 font-geist flex h-[158px] w-full items-center justify-center rounded-4xl text-base font-normal"
->
+<label {...restProps} for={uniqueId} class={cn([cBase, restProps.class].join(' '))}>
 	{#if files}
 		<div class="flex flex-col items-center gap-2">
 			<HugeiconsIcon size="24px" icon={Album01Icon} color="var(--color-black-600)" />
diff --git a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte
index ff99a6f9..fa8f2405 100644
--- a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte
+++ b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte
@@ -7,6 +7,8 @@
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
 		modalEl?: HTMLDivElement;
 		paneModal?: CupertinoPane;
+		initialBreak?: 'bottom' | 'top' | 'middle';
+		handleDismiss?: () => void;
 		children?: Snippet;
 	}
 
@@ -14,14 +16,13 @@
 		modalEl = $bindable(),
 		paneModal = $bindable(),
 		children = undefined,
+		initialBreak,
+		handleDismiss,
 		...restProps
 	}: IDrawerProps = $props();
 
-	function present() {
-		if (paneModal) paneModal.present({ animate: true });
-	}
-
 	function dismiss() {
+		handleDismiss && handleDismiss();
 		if (paneModal) paneModal.destroy({ animate: true });
 	}
 
@@ -30,25 +31,25 @@
 			paneModal = new CupertinoPane(modalEl, {
 				modal: true,
 				backdrop: true,
+				backdropBlur: true,
 				backdropOpacity: 0.4,
+				animationType: 'ease',
+				animationDuration: 300,
 				fitHeight: true,
+				bottomClose: true,
 				showDraggable: true,
 				buttonDestroy: false,
+				initialBreak: initialBreak,
 				breaks: {
-					bottom: { enabled: true, height: 250 }
+					top: { enabled: true, height: 600 },
+					middle: { enabled: true, height: 400 },
+					bottom: { enabled: true, height: 200 }
 				},
-				initialBreak: 'bottom',
 				cssClass: 'modal',
 				events: {
 					onBackdropTap: () => dismiss()
 				}
 			});
-
-		present();
-
-		return () => {
-			if (paneModal) paneModal.destroy({ animate: false });
-		};
 	});
 </script>
 
@@ -60,13 +61,13 @@
 
 <style>
 	:global(.modal .pane) {
-		width: 95% !important;
-		max-height: 300px !important;
+		width: 100% !important;
+		max-height: 600px !important;
 		min-height: 100px !important;
 		height: auto !important;
 		position: fixed !important;
 		bottom: 30px !important;
-		left: 50% !important;
+		left: 40% !important;
 		transform: translateX(-50%) !important;
 		border-radius: 32px !important;
 		padding: 20px !important;
diff --git a/platforms/metagram/src/lib/fragments/UserRequest/UserRequest.svelte b/platforms/metagram/src/lib/fragments/UserRequest/UserRequest.svelte
index c1dc30b4..7e67fd6b 100644
--- a/platforms/metagram/src/lib/fragments/UserRequest/UserRequest.svelte
+++ b/platforms/metagram/src/lib/fragments/UserRequest/UserRequest.svelte
@@ -15,15 +15,20 @@
 		$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
+	{...restProps}
+	class={cn(['flex items-center justify-between', 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>
 
 <!--
diff --git a/platforms/metagram/src/lib/ui/Textarea/Textarea.stories.ts b/platforms/metagram/src/lib/ui/Textarea/Textarea.stories.ts
new file mode 100644
index 00000000..4f5f6341
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/Textarea/Textarea.stories.ts
@@ -0,0 +1,17 @@
+import { Textarea } from '..';
+
+export default {
+	title: 'UI/Textarea',
+	component: Textarea,
+	tags: ['autodocs'],
+	render: (args: { type: string; placeholder: string }) => ({
+		Component: Textarea,
+		props: args
+	})
+};
+
+export const Main = {
+	args: {
+		placeholder: 'Joe Biden'
+	}
+};
diff --git a/platforms/metagram/src/lib/ui/Textarea/Textarea.svelte b/platforms/metagram/src/lib/ui/Textarea/Textarea.svelte
new file mode 100644
index 00000000..2df79cbf
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/Textarea/Textarea.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { cn } from '$lib/utils';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	interface IInputProps extends HTMLTextareaAttributes {
+		textarea?: HTMLTextAreaElement;
+		value: string | number | any;
+		placeholder?: string;
+	}
+
+	let {
+		textarea = $bindable(),
+		value = $bindable(),
+		placeholder = '',
+		...restProps
+	}: IInputProps = $props();
+
+	const cbase = $derived(
+		'w-full bg-grey resize-none py-3.5 px-6 text-[15px] text-black-800 font-geist font-normal placeholder:text-black-600 rounded-4xl outline-0 border border-transparent invalid:border-red invalid:text-red focus:invalid:text-black-800 focus:invalid:border-transparent'
+	);
+</script>
+
+<!-- svelte-ignore element_invalid_self_closing_tag -->
+<textarea
+	{...restProps}
+	rows={6}
+	{placeholder}
+	bind:value
+	bind:this={textarea}
+	class={cn([cbase, restProps.class].join(' '))}
+	tabindex="0"
+/>
diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts
index d28618f9..2e86b1bd 100644
--- a/platforms/metagram/src/lib/ui/index.ts
+++ b/platforms/metagram/src/lib/ui/index.ts
@@ -5,3 +5,4 @@ export { default as Select } from './Select/Select.svelte';
 export { default as Label } from './Label/Label.svelte';
 export { default as Toggle } from './Toggle/Toggle.svelte';
 export { default as Helper } from './Helper/Helper.svelte';
+export { default as Textarea } from './Textarea/Textarea.svelte';
diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
index d5e9044b..9a7f00a3 100644
--- a/platforms/metagram/src/routes/(protected)/+layout.svelte
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -2,11 +2,16 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { comments } from '$lib/dummyData';
-	import { BottomNav, Header, Comment, MessageInput, SideBar } from '$lib/fragments';
+	import { BottomNav, Header, Comment, MessageInput, SideBar, Modal } from '$lib/fragments';
+	import InputFile from '$lib/fragments/InputFile/InputFile.svelte';
 	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';
+	import Button from '$lib/ui/Button/Button.svelte';
+	import Label from '$lib/ui/Label/Label.svelte';
+	import Textarea from '$lib/ui/Textarea/Textarea.svelte';
+	import type { CupertinoPane } from 'cupertino-pane';
 	let { children } = $props();
 
 	let route = $derived(page.url.pathname);
@@ -16,6 +21,11 @@
 	let _comments = $state(comments);
 	let activeReplyToId: string | null = $state(null);
 	let chatFriendId = $state();
+	let paneModal: CupertinoPane | undefined = $state();
+	let files: FileList | undefined = $state();
+	let imagePreviews: string[] = $state([]);
+	let isAddCaption: boolean = $state(false);
+	let caption: string = $state('');
 
 	const handleSend = async () => {
 		const newComment = {
@@ -71,12 +81,35 @@
 			heading = 'Profile';
 		}
 	});
+
+	$effect(() => {
+		if (files) {
+			const readers = Array.from(files).map((file) => {
+				return new Promise<string>((resolve) => {
+					const reader = new FileReader();
+					reader.onload = (e) => resolve(e.target?.result as string);
+					reader.readAsDataURL(file);
+				});
+			});
+
+			Promise.all(readers).then((previews) => {
+				imagePreviews = previews;
+			});
+		} else {
+			imagePreviews = [];
+		}
+	});
 </script>
 
 <main
 	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')} />
+	<SideBar
+		profileSrc="https://picsum.photos/200"
+		handlePost={async () => {
+			if (paneModal) paneModal.present({ animate: true });
+		}}
+	/>
 	<section class="hide-scrollbar h-[100dvh] overflow-y-auto px-4 pb-8 md:px-8 md:pt-8">
 		<div class="flex items-center justify-between">
 			<Header
@@ -152,3 +185,50 @@
 		<BottomNav class="btm-nav" profileSrc="https://picsum.photos/200" />
 	{/if}
 </main>
+
+<Modal bind:paneModal initialBreak="middle" handleDismiss={() => (files = undefined)}>
+	<h1 class="mb-6 font-semibold text-black">Upload a Photo</h1>
+	{#if !isAddCaption}
+		{#if !files}
+			<InputFile class="mb-4 h-[40vh]" bind:files accept="images/*" multiple={true} />
+		{:else}
+			<div class="mb-4 grid grid-cols-3 gap-2">
+				{#each imagePreviews as src}
+					<div class="aspect-[4/5] overflow-hidden rounded-lg border">
+						<!-- svelte-ignore a11y_img_redundant_alt -->
+						<img {src} alt="Selected image" class="h-full w-full object-cover" />
+					</div>
+				{/each}
+			</div>
+		{/if}
+	{:else}
+		<Label>Add a Caption</Label>
+		<Textarea class="mb-4" bind:value={caption} placeholder="enter caption" />
+		<div class="mb-4 grid grid-cols-3 gap-2">
+			{#each imagePreviews as src}
+				<div class="h-[100px] w-[80px] overflow-hidden rounded-lg border">
+					<!-- svelte-ignore a11y_img_redundant_alt -->
+					<img {src} alt="Selected image" class="h-[100px] w-[80px] object-cover" />
+				</div>
+			{/each}
+		</div>
+	{/if}
+	{#if files}
+		<div class="grid grid-cols-2 gap-2">
+			<Button
+				variant="secondary"
+				size="sm"
+				callback={async () => {
+					files = undefined;
+				}}>Cancel</Button
+			>
+			<Button
+				variant="secondary"
+				size="sm"
+				callback={async () => {
+					isAddCaption = true;
+				}}>Next</Button
+			>
+		</div>
+	{/if}
+</Modal>
diff --git a/platforms/metagram/src/routes/(protected)/discover/+page.svelte b/platforms/metagram/src/routes/(protected)/discover/+page.svelte
index 46ac728b..86c385a0 100644
--- a/platforms/metagram/src/routes/(protected)/discover/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/discover/+page.svelte
@@ -7,18 +7,18 @@
 
 <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}
+	{#if searchValue}
+		<ul class="mt-6 pb-4">
+			{#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>
diff --git a/platforms/metagram/src/routes/+layout.svelte b/platforms/metagram/src/routes/+layout.svelte
index 9adad7b8..3d9bc72c 100644
--- a/platforms/metagram/src/routes/+layout.svelte
+++ b/platforms/metagram/src/routes/+layout.svelte
@@ -34,20 +34,20 @@
 			});
 		});
 	});
-	
+
 	onMount(() => {
 		setTimeout(() => {
 			showSplashScreen = false;
-		}, 2500)
-	})
+		}, 2500);
+	});
 </script>
 
 {#if showSplashScreen}
-<main class="h-[100dvh] w-full grid items-center justify-center">
-	<img src="/images/Logo.svg" alt="logo">
-</main>
+	<main class="grid h-[100dvh] w-full items-center justify-center">
+		<img src="/images/Logo.svg" alt="logo" />
+	</main>
 {:else}
-<main class="h-[100dvh] overflow-hidden px-4 md:px-0">
-	{@render children()}
-</main>
-{/if}
\ No newline at end of file
+	<main class="h-[100dvh] overflow-hidden px-4 md:px-0">
+		{@render children()}
+	</main>
+{/if}

From ca12273cfbfd1344fcc2ce164420cac1c842d2aa Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Wed, 4 Jun 2025 16:56:41 +0530
Subject: [PATCH 2/8] fix: destroy pane on cancel

---
 platforms/metagram/src/routes/(protected)/+layout.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
index a97f503d..4cdf9f94 100644
--- a/platforms/metagram/src/routes/(protected)/+layout.svelte
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -211,6 +211,7 @@
 				</div>
 			{/each}
 		</div>
+		<h3 class="text-black-800 mt-25">Who can see the post?</h3>
 	{/if}
 	{#if files}
 		<div class="grid grid-cols-2 gap-2">
@@ -219,6 +220,7 @@
 				size="sm"
 				callback={async () => {
 					files = undefined;
+					paneModal?.destroy({animate: true})
 				}}>Cancel</Button
 			>
 			<Button

From b83ef6de4aaed2d7f16386df90c23c900c280e46 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Wed, 4 Jun 2025 17:16:27 +0530
Subject: [PATCH 3/8] fix: cursor grab

---
 platforms/metagram/src/lib/fragments/Modal/Modal.svelte | 1 +
 platforms/metagram/src/routes/+layout.svelte            | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte
index 42651b75..2d2cefb6 100644
--- a/platforms/metagram/src/lib/fragments/Modal/Modal.svelte
+++ b/platforms/metagram/src/lib/fragments/Modal/Modal.svelte
@@ -72,6 +72,7 @@
 		border-radius: 32px !important;
 		padding: 20px !important;
 		background-color: var(--color-white) !important;
+		cursor: default !important;
 		overflow: scroll !important;
 		scrollbar-width: none !important;
 		-ms-overflow-style: none !important;
diff --git a/platforms/metagram/src/routes/+layout.svelte b/platforms/metagram/src/routes/+layout.svelte
index 3183ef68..96c08fd4 100644
--- a/platforms/metagram/src/routes/+layout.svelte
+++ b/platforms/metagram/src/routes/+layout.svelte
@@ -3,7 +3,6 @@
 	import { isNavigatingThroughNav, ownerId } from '$lib/store/store.svelte';
 	import { onMount } from 'svelte';
 	import '../app.css';
-	import { page } from '$app/state';
 
 	let { children } = $props();
 

From fb44a46dad8b1392f743f51a3670d09479ee1fc8 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 5 Jun 2025 09:16:42 +0530
Subject: [PATCH 4/8] fix: modal view

---
 .../SettingsTile/SettingsTile.stories.ts      | 31 ++++----
 platforms/metagram/src/lib/fragments/index.ts | 40 +++++-----
 .../src/lib/ui/Input/Input.stories.ts         | 76 +++++++++----------
 .../lib/ui/InputRadio/InputRadio.stories.ts   | 26 +++----
 .../src/lib/ui/InputRadio/InputRadio.svelte   |  2 +-
 platforms/metagram/src/lib/ui/index.ts        | 18 ++---
 .../src/routes/(protected)/+layout.svelte     | 30 +++++---
 7 files changed, 116 insertions(+), 107 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.stories.ts b/platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.stories.ts
index d8c61a54..181d12e7 100644
--- a/platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.stories.ts
+++ b/platforms/metagram/src/lib/fragments/SettingsTile/SettingsTile.stories.ts
@@ -1,23 +1,20 @@
-import type { ComponentProps } from "svelte";
-import SettingsTile from "./SettingsTile.svelte";
+import type { ComponentProps } from 'svelte';
+import SettingsTile from './SettingsTile.svelte';
 
 export default {
-    title: "UI/SettingsTile",
-    component: SettingsTile,
-    tags: ["autodocs"],
-    render: (args: {
-        Component: SettingsTile;
-        props: ComponentProps<typeof SettingsTile>;
-    }) => ({
-        Component: SettingsTile,
-        props: args,
-    }),
+	title: 'UI/SettingsTile',
+	component: SettingsTile,
+	tags: ['autodocs'],
+	render: (args: { Component: SettingsTile; props: ComponentProps<typeof SettingsTile> }) => ({
+		Component: SettingsTile,
+		props: args
+	})
 };
 
 export const Primary = {
-    args: {
-        title: "Who can see your posts?",
-        currentStatus: "Only followers",
-        onclick: () => alert("clicked"),
-    },
+	args: {
+		title: 'Who can see your posts?',
+		currentStatus: 'Only followers',
+		onclick: () => alert('clicked')
+	}
 };
diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts
index 4eaeb5d4..8739cdcd 100644
--- a/platforms/metagram/src/lib/fragments/index.ts
+++ b/platforms/metagram/src/lib/fragments/index.ts
@@ -1,20 +1,20 @@
-export { default as Profile } from "./Profile/Profile.svelte";
-export { default as Header } from "./Header/Header.svelte";
-export { default as BottomNav } from "./BottomNav/BottomNav.svelte";
-export { default as SettingsNavigationButton } from "./SettingsNavigationButton/SettingsNavigationButton.svelte";
-export { default as MessageInput } from "./MessageInput/MessageInput.svelte";
-export { default as InputFile } from "./InputFile/InputFile.svelte";
-export { default as Drawer } from "./Drawer/Drawer.svelte";
-export { default as Message } from "./Message/Message.svelte";
-export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte";
-export { default as Modal } from "./Modal/Modal.svelte";
-export { default as SideBar } from "./SideBar/SideBar.svelte";
-export { default as RightAside } from "./RightAside/RightAside.svelte";
-export { default as SettingsToggleButton } from "./SettingsToggleButton/SettingsToggleButton.svelte";
-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 SettingsTile } from "./SettingsTile/SettingsTile.svelte";
-export { default as UserRequest } from "./UserRequest/UserRequest.svelte";
-export { default as UploadedPostView } from "./UploadedPostView/UploadedPostView.svelte";
+export { default as Profile } from './Profile/Profile.svelte';
+export { default as Header } from './Header/Header.svelte';
+export { default as BottomNav } from './BottomNav/BottomNav.svelte';
+export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
+export { default as MessageInput } from './MessageInput/MessageInput.svelte';
+export { default as InputFile } from './InputFile/InputFile.svelte';
+export { default as Drawer } from './Drawer/Drawer.svelte';
+export { default as Message } from './Message/Message.svelte';
+export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte';
+export { default as Modal } from './Modal/Modal.svelte';
+export { default as SideBar } from './SideBar/SideBar.svelte';
+export { default as RightAside } from './RightAside/RightAside.svelte';
+export { default as SettingsToggleButton } from './SettingsToggleButton/SettingsToggleButton.svelte';
+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 SettingsTile } from './SettingsTile/SettingsTile.svelte';
+export { default as UserRequest } from './UserRequest/UserRequest.svelte';
+export { default as UploadedPostView } from './UploadedPostView/UploadedPostView.svelte';
diff --git a/platforms/metagram/src/lib/ui/Input/Input.stories.ts b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
index 5b273f1b..79fff79b 100644
--- a/platforms/metagram/src/lib/ui/Input/Input.stories.ts
+++ b/platforms/metagram/src/lib/ui/Input/Input.stories.ts
@@ -1,62 +1,62 @@
-import { Input } from "..";
+import { Input } from '..';
 
 export default {
-    title: "UI/Input",
-    component: Input,
-    tags: ["autodocs"],
-    render: (args: { type: string; placeholder: string }) => ({
-        Component: Input,
-        props: args,
-    }),
+	title: 'UI/Input',
+	component: Input,
+	tags: ['autodocs'],
+	render: (args: { type: string; placeholder: string }) => ({
+		Component: Input,
+		props: args
+	})
 };
 
 export const Text = {
-    args: {
-        type: "text",
-        placeholder: "Joe Biden",
-    },
+	args: {
+		type: 'text',
+		placeholder: 'Joe Biden'
+	}
 };
 
 export const Tel = {
-    args: {
-        type: "tel",
-        placeholder: "987654321",
-    },
+	args: {
+		type: 'tel',
+		placeholder: '987654321'
+	}
 };
 
 export const NumberInput = {
-    args: {
-        type: "number",
-        placeholder: "Enter something",
-    },
+	args: {
+		type: 'number',
+		placeholder: 'Enter something'
+	}
 };
 
 export const Email = {
-    args: {
-        type: "email",
-        placeholder: "example@email.com",
-    },
+	args: {
+		type: 'email',
+		placeholder: 'example@email.com'
+	}
 };
 
 export const Invalid = {
-    args: {
-        type: "email",
-        placeholder: "Invalid email",
-        value: "not-an-email",
-    },
+	args: {
+		type: 'email',
+		placeholder: 'Invalid email',
+		value: 'not-an-email'
+	}
 };
 
 export const Password = {
-    args: {
-        type: "password",
-        placeholder: "Please enter password",
-    },
+	args: {
+		type: 'password',
+		placeholder: 'Please enter password'
+	}
 };
 
 export const Radio = {
-    args: {
-        type: "radio",
-        value: "option1",
-        name: "option-1",
-    },
+	args: {
+		type: 'radio',
+		value: 'option1',
+		name: 'option-1'
+	}
 };
diff --git a/platforms/metagram/src/lib/ui/InputRadio/InputRadio.stories.ts b/platforms/metagram/src/lib/ui/InputRadio/InputRadio.stories.ts
index 4dbe6af3..1580087a 100644
--- a/platforms/metagram/src/lib/ui/InputRadio/InputRadio.stories.ts
+++ b/platforms/metagram/src/lib/ui/InputRadio/InputRadio.stories.ts
@@ -1,19 +1,19 @@
-import { InputRadio } from "..";
+import { InputRadio } from '..';
 
 export default {
-    title: "UI/InputRadio",
-    component: InputRadio,
-    tags: ["autodocs"],
-    render: (args: { type: string; placeholder: string }) => ({
-        Component: InputRadio,
-        props: args,
-    }),
+	title: 'UI/InputRadio',
+	component: InputRadio,
+	tags: ['autodocs'],
+	render: (args: { type: string; placeholder: string }) => ({
+		Component: InputRadio,
+		props: args
+	})
 };
 
 export const Radio = {
-    args: {
-        type: "radio",
-        value: "option1",
-        name: "option-1",
-    },
+	args: {
+		type: 'radio',
+		value: 'option1',
+		name: 'option-1'
+	}
 };
diff --git a/platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte b/platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte
index 98719c71..1ada692f 100644
--- a/platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte
+++ b/platforms/metagram/src/lib/ui/InputRadio/InputRadio.svelte
@@ -50,7 +50,7 @@
 	}}
 >
 	{#if selected === value}
-		<span class="bg-brand-burnt-orange bottom-0.75 left-0.25 absolute h-2.5 w-2.5 rounded-full"
+		<span class="bg-brand-burnt-orange absolute bottom-0.75 left-0.25 h-2.5 w-2.5 rounded-full"
 		></span>
 	{/if}
 </span>
diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts
index 16edabe4..dcb16805 100644
--- a/platforms/metagram/src/lib/ui/index.ts
+++ b/platforms/metagram/src/lib/ui/index.ts
@@ -1,9 +1,9 @@
-export { default as Button } from "./Button/Button.svelte";
-export { default as Avatar } from "./Avatar/Avatar.svelte";
-export { default as Input } from "./Input/Input.svelte";
-export { default as Select } from "./Select/Select.svelte";
-export { default as Label } from "./Label/Label.svelte";
-export { default as Toggle } from "./Toggle/Toggle.svelte";
-export { default as Helper } from "./Helper/Helper.svelte";
-export { default as InputRadio } from "./InputRadio/InputRadio.svelte";
-export { default as Textarea } from "./Textarea/Textarea.svelte";
\ No newline at end of file
+export { default as Button } from './Button/Button.svelte';
+export { default as Avatar } from './Avatar/Avatar.svelte';
+export { default as Input } from './Input/Input.svelte';
+export { default as Select } from './Select/Select.svelte';
+export { default as Label } from './Label/Label.svelte';
+export { default as Toggle } from './Toggle/Toggle.svelte';
+export { default as Helper } from './Helper/Helper.svelte';
+export { default as InputRadio } from './InputRadio/InputRadio.svelte';
+export { default as Textarea } from './Textarea/Textarea.svelte';
diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
index f87641e5..0950b3f2 100644
--- a/platforms/metagram/src/routes/(protected)/+layout.svelte
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -27,7 +27,7 @@
 	let idFromParams = $state();
 	let postVisibility = $state('');
 
-	let postVisibilityOptions = ["only followers", "close-friends", "anyone"]
+	let postVisibilityOptions = ['only followers', 'close-friends', 'anyone'];
 
 	const handleSend = async () => {
 		const newComment = {
@@ -189,7 +189,13 @@
 	{/if}
 </main>
 
-<Modal bind:paneModal initialBreak="middle" handleDismiss={() => (files = undefined)}>
+<Modal
+	bind:paneModal
+	initialBreak="middle"
+	handleDismiss={() => {
+		(files = undefined), (isAddCaption = false);
+	}}
+>
 	<h1 class="mb-6 font-semibold text-black">Upload a Photo</h1>
 	{#if !isAddCaption}
 		{#if !files}
@@ -204,7 +210,7 @@
 				{/each}
 			</div>
 		{/if}
-	{:else}
+	{:else if isAddCaption}
 		<Label>Add a Caption</Label>
 		<Textarea class="mb-4" bind:value={caption} placeholder="enter caption" />
 		<div class="mb-4 flex items-center gap-2">
@@ -216,11 +222,16 @@
 			{/each}
 		</div>
 		<h3 class="text-black-800 mt-20 mb-2">Who can see the post?</h3>
-		{#each postVisibilityOptions as option,i}
-		<div class="flex items-center justify-between w-[50%] mb-2">
-			<Label for={option + i}>{option}</Label>
-			<InputRadio name="post-visibility" id={option + i} value={option} bind:selected={postVisibility}/>
-		</div>
+		{#each postVisibilityOptions as option, i}
+			<div class="mb-2 flex w-[50%] items-center justify-between">
+				<Label for={option + i}>{option}</Label>
+				<InputRadio
+					name="post-visibility"
+					id={option + i}
+					value={option}
+					bind:selected={postVisibility}
+				/>
+			</div>
 		{/each}
 	{/if}
 	{#if files}
@@ -230,7 +241,8 @@
 				size="sm"
 				callback={async () => {
 					files = undefined;
-					paneModal?.destroy({animate: true})
+					isAddCaption = false;
+					paneModal?.destroy({ animate: true });
 				}}>Cancel</Button
 			>
 			<Button

From 586356525db4c834c80bc5c25fbc563b70a534f7 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 5 Jun 2025 12:34:17 +0530
Subject: [PATCH 5/8] fix: modal view

---
 platforms/metagram/src/routes/(protected)/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
index 0950b3f2..872a32e3 100644
--- a/platforms/metagram/src/routes/(protected)/+layout.svelte
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -27,7 +27,7 @@
 	let idFromParams = $state();
 	let postVisibility = $state('');
 
-	let postVisibilityOptions = ['only followers', 'close-friends', 'anyone'];
+	let postVisibilityOptions = ['Only followers', 'Close friends', 'Anyone'];
 
 	const handleSend = async () => {
 		const newComment = {

From facdbd48fc5913945c5104a12a5b4064cbe4fb0f Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 6 Jun 2025 10:06:23 +0530
Subject: [PATCH 6/8] fix: layout enhancement

---
 .../AddPostModal/AddPostModal.svelte          | 106 ++++++++++++++++++
 platforms/metagram/src/lib/fragments/index.ts |   1 +
 .../src/routes/(protected)/+layout.svelte     |  95 +---------------
 3 files changed, 110 insertions(+), 92 deletions(-)
 create mode 100644 platforms/metagram/src/lib/fragments/AddPostModal/AddPostModal.svelte

diff --git a/platforms/metagram/src/lib/fragments/AddPostModal/AddPostModal.svelte b/platforms/metagram/src/lib/fragments/AddPostModal/AddPostModal.svelte
new file mode 100644
index 00000000..dfa0fade
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/AddPostModal/AddPostModal.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+	import { Button, InputRadio, Label, Textarea } from '$lib/ui';
+	import type { CupertinoPane } from 'cupertino-pane';
+	import { InputFile, Modal } from '..';
+
+	let {
+		files = $bindable(),
+		caption = $bindable(),
+		postVisibility = $bindable(),
+		paneModal = $bindable()
+	}: {
+		files: FileList | undefined;
+		caption: string;
+		postVisibility: string;
+		paneModal: CupertinoPane | undefined;
+	} = $props();
+
+	let isAddCaption = $state(false);
+	let imagePreviews: string[] = $state([]);
+	let postVisibilityOptions = ['Only followers', 'Close friends', 'Anyone'];
+
+	$effect(() => {
+		if (files) {
+			const readers = Array.from(files).map((file) => {
+				return new Promise<string>((resolve) => {
+					const reader = new FileReader();
+					reader.onload = (e) => resolve(e.target?.result as string);
+					reader.readAsDataURL(file);
+				});
+			});
+
+			Promise.all(readers).then((previews) => {
+				imagePreviews = previews;
+			});
+		} else {
+			imagePreviews = [];
+		}
+	});
+</script>
+
+<Modal
+	bind:paneModal
+	initialBreak="middle"
+	handleDismiss={() => {
+		(files = undefined), (isAddCaption = false);
+	}}
+>
+	<h1 class="mb-6 font-semibold text-black">Upload a Photo</h1>
+	{#if !isAddCaption}
+		{#if !files}
+			<InputFile class="mb-4 h-[40vh]" bind:files accept="images/*" multiple={true} />
+		{:else}
+			<div class="mb-4 grid grid-cols-3 gap-2">
+				{#each imagePreviews as src}
+					<div class="aspect-[4/5] overflow-hidden rounded-lg border">
+						<!-- svelte-ignore a11y_img_redundant_alt -->
+						<img {src} alt="Selected image" class="h-full w-full object-cover" />
+					</div>
+				{/each}
+			</div>
+		{/if}
+	{:else if isAddCaption}
+		<Label>Add a Caption</Label>
+		<Textarea class="mb-4" bind:value={caption} placeholder="enter caption" />
+		<div class="mb-4 flex items-center gap-2">
+			{#each imagePreviews as src}
+				<div class="h-[100px] w-[80px] overflow-hidden rounded-lg border">
+					<!-- svelte-ignore a11y_img_redundant_alt -->
+					<img {src} alt="Selected image" class="h-[100px] w-[80px] object-cover" />
+				</div>
+			{/each}
+		</div>
+		<h3 class="text-black-800 mt-20 mb-2">Who can see the post?</h3>
+		{#each postVisibilityOptions as option, i}
+			<div class="mb-2 flex w-[50%] items-center justify-between">
+				<Label for={option + i}>{option}</Label>
+				<InputRadio
+					name="post-visibility"
+					id={option + i}
+					value={option}
+					bind:selected={postVisibility}
+				/>
+			</div>
+		{/each}
+	{/if}
+	{#if files}
+		<div class="grid grid-cols-2 gap-2">
+			<Button
+				variant="secondary"
+				size="sm"
+				callback={async () => {
+					files = undefined;
+					isAddCaption = false;
+					paneModal?.destroy({ animate: true });
+				}}>Cancel</Button
+			>
+			<Button
+				variant="secondary"
+				size="sm"
+				callback={async () => {
+					isAddCaption = true;
+				}}>Next</Button
+			>
+		</div>
+	{/if}
+</Modal>
diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts
index 8739cdcd..b121abd3 100644
--- a/platforms/metagram/src/lib/fragments/index.ts
+++ b/platforms/metagram/src/lib/fragments/index.ts
@@ -18,3 +18,4 @@ export { default as SettingsDeleteButton } from './SettingsDeleteButton/Settings
 export { default as SettingsTile } from './SettingsTile/SettingsTile.svelte';
 export { default as UserRequest } from './UserRequest/UserRequest.svelte';
 export { default as UploadedPostView } from './UploadedPostView/UploadedPostView.svelte';
+export { default as AddPostModal } from './AddPostModal/AddPostModal.svelte';
diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
index 872a32e3..d5eedff4 100644
--- a/platforms/metagram/src/routes/(protected)/+layout.svelte
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -1,13 +1,11 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { comments } from '$lib/dummyData';
-	import { BottomNav, Header, Comment, MessageInput, SideBar, Modal } from '$lib/fragments';
-	import InputFile from '$lib/fragments/InputFile/InputFile.svelte';
+	import { BottomNav, Header, Comment, MessageInput, SideBar } from '$lib/fragments';
+	import AddPostModal from '$lib/fragments/AddPostModal/AddPostModal.svelte';
 	import UserRequest from '$lib/fragments/UserRequest/UserRequest.svelte';
 	import { showComments } from '$lib/store/store.svelte';
 	import type { CommentType } from '$lib/types';
-	import { Button, Label, Textarea } from '$lib/ui';
-	import InputRadio from '$lib/ui/InputRadio/InputRadio.svelte';
 	import { ArrowLeft02Icon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
 	import type { CupertinoPane } from 'cupertino-pane';
@@ -21,14 +19,10 @@
 	let activeReplyToId: string | null = $state(null);
 	let paneModal: CupertinoPane | undefined = $state();
 	let files: FileList | undefined = $state();
-	let imagePreviews: string[] = $state([]);
-	let isAddCaption: boolean = $state(false);
 	let caption: string = $state('');
 	let idFromParams = $state();
 	let postVisibility = $state('');
 
-	let postVisibilityOptions = ['Only followers', 'Close friends', 'Anyone'];
-
 	const handleSend = async () => {
 		const newComment = {
 			userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
@@ -82,24 +76,6 @@
 			heading = 'Profile';
 		}
 	});
-
-	$effect(() => {
-		if (files) {
-			const readers = Array.from(files).map((file) => {
-				return new Promise<string>((resolve) => {
-					const reader = new FileReader();
-					reader.onload = (e) => resolve(e.target?.result as string);
-					reader.readAsDataURL(file);
-				});
-			});
-
-			Promise.all(readers).then((previews) => {
-				imagePreviews = previews;
-			});
-		} else {
-			imagePreviews = [];
-		}
-	});
 </script>
 
 <main
@@ -189,69 +165,4 @@
 	{/if}
 </main>
 
-<Modal
-	bind:paneModal
-	initialBreak="middle"
-	handleDismiss={() => {
-		(files = undefined), (isAddCaption = false);
-	}}
->
-	<h1 class="mb-6 font-semibold text-black">Upload a Photo</h1>
-	{#if !isAddCaption}
-		{#if !files}
-			<InputFile class="mb-4 h-[40vh]" bind:files accept="images/*" multiple={true} />
-		{:else}
-			<div class="mb-4 grid grid-cols-3 gap-2">
-				{#each imagePreviews as src}
-					<div class="aspect-[4/5] overflow-hidden rounded-lg border">
-						<!-- svelte-ignore a11y_img_redundant_alt -->
-						<img {src} alt="Selected image" class="h-full w-full object-cover" />
-					</div>
-				{/each}
-			</div>
-		{/if}
-	{:else if isAddCaption}
-		<Label>Add a Caption</Label>
-		<Textarea class="mb-4" bind:value={caption} placeholder="enter caption" />
-		<div class="mb-4 flex items-center gap-2">
-			{#each imagePreviews as src}
-				<div class="h-[100px] w-[80px] overflow-hidden rounded-lg border">
-					<!-- svelte-ignore a11y_img_redundant_alt -->
-					<img {src} alt="Selected image" class="h-[100px] w-[80px] object-cover" />
-				</div>
-			{/each}
-		</div>
-		<h3 class="text-black-800 mt-20 mb-2">Who can see the post?</h3>
-		{#each postVisibilityOptions as option, i}
-			<div class="mb-2 flex w-[50%] items-center justify-between">
-				<Label for={option + i}>{option}</Label>
-				<InputRadio
-					name="post-visibility"
-					id={option + i}
-					value={option}
-					bind:selected={postVisibility}
-				/>
-			</div>
-		{/each}
-	{/if}
-	{#if files}
-		<div class="grid grid-cols-2 gap-2">
-			<Button
-				variant="secondary"
-				size="sm"
-				callback={async () => {
-					files = undefined;
-					isAddCaption = false;
-					paneModal?.destroy({ animate: true });
-				}}>Cancel</Button
-			>
-			<Button
-				variant="secondary"
-				size="sm"
-				callback={async () => {
-					isAddCaption = true;
-				}}>Next</Button
-			>
-		</div>
-	{/if}
-</Modal>
+<AddPostModal bind:files bind:postVisibility bind:caption bind:paneModal />

From 6cab184fdbed783709c49d6a8689afbc4eb7431d Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 6 Jun 2025 11:46:52 +0530
Subject: [PATCH 7/8] fix: layout scroll

---
 platforms/metagram/src/routes/(protected)/+layout.svelte    | 6 ++++--
 .../src/routes/(protected)/messages/[id]/+page.svelte       | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
index d5eedff4..8cd1d417 100644
--- a/platforms/metagram/src/routes/(protected)/+layout.svelte
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -87,7 +87,7 @@
 			if (paneModal) paneModal.present({ animate: true });
 		}}
 	/>
-	<section class="hide-scrollbar h-[100dvh] overflow-y-auto px-4 pb-16 md:px-8 md:pt-8">
+	<section class="h-[100dvh] md:px-8 md:pt-8">
 		{#if route === '/profile/post'}
 			<button
 				class="my-4 cursor-pointer rounded-full bg-white/60 p-2 hover:bg-gray-100"
@@ -111,7 +111,9 @@
 				]}
 			/>
 		{/if}
-		{@render children()}
+		<section class="hide-scrollbar h-[100%] overflow-y-auto pb-35">
+			{@render children()}
+		</section>
 	</section>
 	{#if route === '/home' || route === '/messages'}
 		<aside
diff --git a/platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte b/platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte
index 8e6ed045..535d4077 100644
--- a/platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte
@@ -4,7 +4,7 @@
 	let messageValue = $state('');
 </script>
 
-<section class="chat relative px-0">
+<section class="relative px-0">
 	{#each { length: 12 } as _}
 		<ChatMessage
 			isOwn={true}
@@ -54,7 +54,7 @@
 	{/each}
 
 	<MessageInput
-		class="sticky start-0 bottom-[-15px] w-full"
+		class="sticky start-0 bottom-[-30px] w-full"
 		variant="dm"
 		src="https://picsum.photos/id/237/200/300"
 		bind:value={messageValue}

From fca0cf57dd60bcb0caf3efe9d68b1caefced5b8f Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Fri, 6 Jun 2025 12:56:40 +0530
Subject: [PATCH 8/8] fix: layout scroll

---
 platforms/metagram/src/routes/(protected)/+layout.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
index 8cd1d417..7af1d7ec 100644
--- a/platforms/metagram/src/routes/(protected)/+layout.svelte
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -79,7 +79,7 @@
 </script>
 
 <main
-	class={`block h-[100dvh] ${route !== '/home' && route !== '/messages' && route !== '/profile' && route !== '/settings' && !route.includes('/profile') ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
+	class={`block h-[100dvh] ${route !== '/home' && route !== '/messages' && route !== '/profile' && route !== '/settings' && !route.includes('/profile') && !route.includes('/settings') ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
 >
 	<SideBar
 		profileSrc="https://picsum.photos/200"