From 0c6f1b24ce02e0b10c4d08e937ca8d0c6d7500cf Mon Sep 17 00:00:00 2001
From: Bekiboo <julien.connault@gmail.com>
Date: Tue, 6 Jan 2026 14:50:08 +0300
Subject: [PATCH 1/9] Refactor layout structure to include MainPanel component
 across various protected routes; enhance user experience with consistent UI
 elements and improved comment handling in home and messages sections.

---
 .../src/lib/fragments/Header/Header.svelte    |  52 +-
 .../lib/fragments/MainPanel/MainPanel.svelte  |  30 +
 .../fragments/RightAside/RightAside.svelte    |  18 +-
 .../src/routes/(protected)/+layout.svelte     | 138 +---
 .../routes/(protected)/discover/+page.svelte  |  61 +-
 .../src/routes/(protected)/home/+page.svelte  | 180 +++--
 .../(protected)/messages/+layout.svelte       |  12 +
 .../routes/(protected)/messages/+page.svelte  | 629 +++++++++---------
 .../routes/(protected)/post/+layout.svelte    |  14 +
 .../routes/(protected)/profile/+layout.svelte |   9 +
 .../(protected)/settings/+layout.svelte       |  13 +-
 platforms/pictique/src/routes/+layout.svelte  |   4 +-
 12 files changed, 597 insertions(+), 563 deletions(-)
 create mode 100644 platforms/pictique/src/lib/fragments/MainPanel/MainPanel.svelte
 create mode 100644 platforms/pictique/src/routes/(protected)/messages/+layout.svelte
 create mode 100644 platforms/pictique/src/routes/(protected)/post/+layout.svelte
 create mode 100644 platforms/pictique/src/routes/(protected)/profile/+layout.svelte

diff --git a/platforms/pictique/src/lib/fragments/Header/Header.svelte b/platforms/pictique/src/lib/fragments/Header/Header.svelte
index a7b89e241..d187e4b63 100644
--- a/platforms/pictique/src/lib/fragments/Header/Header.svelte
+++ b/platforms/pictique/src/lib/fragments/Header/Header.svelte
@@ -1,20 +1,46 @@
 <script lang="ts">
+	import { page } from '$app/state';
 	import { cn } from '$lib/utils';
 	import { ArrowLeft01Icon, ArrowLeft02Icon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
-	interface IHeaderProps extends HTMLAttributes<HTMLElement> {
-		variant: 'primary' | 'secondary' | 'tertiary';
-		heading?: string;
-		isCallBackNeeded?: boolean;
-		callback?: () => void;
-		options?: { name: string; handler: () => void }[];
-	}
+	const { ...restProps }: HTMLAttributes<HTMLElement> = $props();
 
-	const { variant, isCallBackNeeded, callback, heading, ...restProps }: IHeaderProps = $props();
+	let route = $derived(page.url.pathname);
+	let heading = $state('');
 
-	const variantClasses = {
+	$effect(() => {
+		if (route.includes('home')) {
+			heading = 'Feed';
+		} else if (route.includes('discover')) {
+			heading = 'Search';
+		} else if (route.includes('/post/audience')) {
+			heading = 'Audience';
+		} else if (route.includes('post')) {
+			heading = 'Upload photo';
+		} else if (route === '/messages') {
+			heading = 'Messages';
+		} else if (route.includes('settings')) {
+			heading = 'Settings';
+		} else if (route.includes('profile')) {
+			heading = 'Profile';
+		}
+	});
+
+	type Variant = 'primary' | 'secondary' | 'tertiary';
+
+	let variant = $derived.by((): Variant => {
+		if (route === `/messages/${page.params.id}` || route.includes('/post')) {
+			return 'secondary';
+		}
+		if (route.includes('profile')) {
+			return 'tertiary';
+		}
+		return 'primary';
+	});
+
+	const variantClasses: Record<Variant, { text: string; background: string }> = {
 		primary: {
 			text: 'text-transparent bg-clip-text bg-[image:var(--color-brand-gradient)] py-2',
 			background: ''
@@ -76,14 +102,6 @@
 			</h1>
 		{/if}
 	</span>
-	{#if isCallBackNeeded}
-		<button
-			class={cn(['cursor-pointer rounded-full p-2 hover:bg-gray-100', classes.background])}
-			onclick={callback}
-			aria-label="Callback"
-		>
-		</button>
-	{/if}
 </header>
 
 <!--
diff --git a/platforms/pictique/src/lib/fragments/MainPanel/MainPanel.svelte b/platforms/pictique/src/lib/fragments/MainPanel/MainPanel.svelte
new file mode 100644
index 000000000..fc13bd621
--- /dev/null
+++ b/platforms/pictique/src/lib/fragments/MainPanel/MainPanel.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Header from '../Header/Header.svelte';
+	import type { Snippet } from 'svelte';
+
+	interface IMainPanelProps extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+		RightPanel?: Snippet;
+	}
+
+	let { children, RightPanel }: IMainPanelProps = $props();
+</script>
+
+<div class="flex flex-col md:h-dvh md:flex-row">
+	<section
+		class="hide-scrollbar min-w-0 flex-1 overflow-y-auto px-4 pb-8 md:h-dvh md:px-8 md:pt-8"
+	>
+		<div class="flex flex-col">
+			<Header />
+			{@render children()}
+		</div>
+	</section>
+	{#if RightPanel}
+		<aside
+			class="hide-scrollbar relative hidden h-dvh w-[30vw] overflow-y-scroll border border-y-0 border-e-0 border-s-gray-200 px-8 pt-12 md:flex md:flex-col"
+		>
+			{@render RightPanel?.()}
+		</aside>
+	{/if}
+</div>
diff --git a/platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte b/platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte
index b37df21a6..0b696f8ee 100644
--- a/platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte
+++ b/platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte
@@ -3,19 +3,21 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	interface IRightAsideProps extends HTMLAttributes<HTMLElement> {
-		header: Snippet;
-		asideContent: Snippet;
+		header?: Snippet;
 	}
-	let { header, asideContent, ...restProps }: IRightAsideProps = $props();
+	let { header, children, ...restProps }: IRightAsideProps = $props();
 </script>
 
-<aside {...restProps} class="hidden border border-y-0 border-s-gray-200 md:block md:pt-13">
-	<div class="mx-5">
+<aside
+	{...restProps}
+	class="hide-scrollbar relative hidden h-dvh w-[30vw] overflow-y-scroll border border-y-0 border-e-0 border-s-gray-200 pl-8 md:flex md:flex-col"
+>
+	{#if header}
 		<h2 class="mb-10 text-lg font-semibold">
 			{@render header?.()}
 		</h2>
-		<div>
-			{@render asideContent?.()}
-		</div>
+	{/if}
+	<div>
+		{@render children?.()}
 	</div>
 </aside>
diff --git a/platforms/pictique/src/routes/(protected)/+layout.svelte b/platforms/pictique/src/routes/(protected)/+layout.svelte
index 63dd40ce0..b592de161 100644
--- a/platforms/pictique/src/routes/(protected)/+layout.svelte
+++ b/platforms/pictique/src/routes/(protected)/+layout.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
-	import { BottomNav, Comment, Header, MessageInput, SideBar } from '$lib/fragments';
+	import { BottomNav, SideBar } from '$lib/fragments';
 	import CreatePostModal from '$lib/fragments/CreatePostModal/CreatePostModal.svelte';
-	import { showComments } from '$lib/store/store.svelte';
-	import { activePostId, comments, createComment, fetchComments } from '$lib/stores/comments';
 	import { closeDisclaimerModal, isDisclaimerModalOpen } from '$lib/stores/disclaimer';
 	import { isCreatePostModalOpen, openCreatePostModal } from '$lib/stores/posts';
 	import type { userProfile } from '$lib/types';
@@ -13,71 +11,16 @@
 	import { removeAuthId, removeAuthToken } from '$lib/utils';
 	import type { AxiosError } from 'axios';
 	import { onMount } from 'svelte';
-	import { heading } from '../store';
 
 	let { children } = $props();
 	let ownerId: string | null = $state(null);
 	let route = $derived(page.url.pathname);
 
-	let commentValue: string = $state('');
-	let commentInput: HTMLInputElement | undefined = $state();
-	let idFromParams = $state();
-	let isCommentsLoading = $state(false);
-	let commentsError = $state<string | null>(null);
 	let profile = $state<userProfile | null>(null);
 	let confirmedDisclaimer = $state(false);
 
-	const handleSend = async () => {
-		console.log($activePostId, commentValue);
-		if (!$activePostId || !commentValue.trim()) return;
-
-		try {
-			await createComment($activePostId, commentValue);
-			commentValue = '';
-		} catch (err) {
-			console.error('Failed to create comment:', err);
-		}
-	};
-
-	$effect(() => {
-		idFromParams = page.params.id;
-
-		console.log(route);
-
-		if (route.includes('home')) {
-			heading.set('Feed');
-		} else if (route.includes('discover')) {
-			heading.set('Search');
-		} else if (route.includes('/post/audience')) {
-			heading.set('Audience');
-		} else if (route.includes('post')) {
-			heading.set('Upload photo');
-		} else if (route === '/messages') {
-			heading.set('Messages');
-		} else if (route.includes('settings')) {
-			heading.set('Settings');
-		} else if (route.includes('profile')) {
-			heading.set('Profile');
-		}
-	});
-
-	// Watch for changes in showComments to fetch comments when opened
-	$effect(() => {
-		ownerId = getAuthId();
-		if (showComments.value && activePostId) {
-			isCommentsLoading = true;
-			commentsError = null;
-			fetchComments($activePostId as string)
-				.catch((err) => {
-					commentsError = err.message;
-				})
-				.finally(() => {
-					isCommentsLoading = false;
-				});
-		}
-	});
-
 	async function fetchProfile() {
+		ownerId = getAuthId();
 		try {
 			if (!getAuthToken()) {
 				goto('/auth');
@@ -97,83 +40,16 @@
 	onMount(fetchProfile);
 </script>
 
-<main
-	class={`block h-[100dvh] ${route !== '/home' && route !== '/messages' && route !== '/profile' && !route.includes('settings') && !route.includes('/profile') ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
->
+<main class="block h-dvh grid-cols-[20vw_auto] md:grid">
 	<SideBar
 		profileSrc={profile?.avatarUrl || '/images/user.png'}
 		handlePost={async () => {
 			openCreatePostModal();
 		}}
 	/>
-	<section class="hide-scrollbar h-[100dvh] overflow-y-auto px-4 pb-8 md:px-8 md:pt-8">
-		<div class="flex flex-col">
-			<Header
-				variant={route === `/messages/${idFromParams}` || route.includes('/post')
-					? 'secondary'
-					: route.includes('profile')
-						? 'tertiary'
-						: 'primary'}
-				heading={$heading}
-				isCallBackNeeded={route.includes('profile')}
-				callback={() => alert('Ads')}
-				options={[
-					{ name: 'Report', handler: () => alert('report') },
-					{ name: 'Clear chat', handler: () => alert('clear') }
-				]}
-			/>
-			{@render children()}
-		</div>
-	</section>
-	{#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 route === '/home'}
-				{#if showComments.value}
-					<ul class="pb-4">
-						<h3 class="text-black-600 mb-6 text-center">{$comments.length} Comments</h3>
-						{#if isCommentsLoading}
-							<li class="text-center text-gray-500">Loading comments...</li>
-						{:else if commentsError}
-							<li class="text-center text-red-500">{commentsError}</li>
-						{:else}
-							{#each $comments as comment (comment.id)}
-								<li class="mb-4">
-									<Comment
-										comment={{
-											userImgSrc: comment.author.avatarUrl,
-											name: comment.author.name || comment.author.handle,
-											commentId: comment.id,
-											comment: comment.text,
-											isUpVoted: false,
-											isDownVoted: false,
-											upVotes: 0,
-											time: new Date(comment.createdAt).toLocaleDateString(),
-											replies: []
-										}}
-										handleReply={() => {
-											commentInput?.focus();
-										}}
-									/>
-								</li>
-							{/each}
-						{/if}
-						<MessageInput
-							class="sticky start-0 bottom-4 mt-4 w-full px-2"
-							variant="comment"
-							src={profile?.avatarUrl ?? '/images/user.png'}
-							bind:value={commentValue}
-							{handleSend}
-							bind:input={commentInput}
-						/>
-					</ul>
-				{/if}
-			{/if}
-		</aside>
-	{/if}
+	{@render children()}
 
-	{#if route !== `/messages/${idFromParams}`}
+	{#if route !== `/messages/${page.params.id}`}
 		<BottomNav class="btm-nav" profileSrc={profile?.avatarUrl ?? ''} />
 	{/if}
 </main>
@@ -197,8 +73,8 @@
 			core concepts of the W3DS ecosystem.
 		</p>
 		<p>
-			<b>It is not a production-grade platform</b> and may lack full reliability, performance,
-			and security guarantees.
+			<b>It is not a production-grade platform</b> and may lack full reliability, performance, and
+			security guarantees.
 		</p>
 		<p>
 			We <b>strongly recommend</b> that you avoid sharing <b>sensitive or private content</b>,
diff --git a/platforms/pictique/src/routes/(protected)/discover/+page.svelte b/platforms/pictique/src/routes/(protected)/discover/+page.svelte
index df6e20dce..6ee1d03d0 100644
--- a/platforms/pictique/src/routes/(protected)/discover/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/discover/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { UserRequest } from '$lib/fragments';
+	import MainPanel from '$lib/fragments/MainPanel/MainPanel.svelte';
 	import {
 		followUser,
 		isSearching,
@@ -46,33 +47,35 @@
 	});
 </script>
 
-<section class="w-full max-w-[500px]">
-	<Input
-		type="text"
-		bind:value={searchValue}
-		placeholder="Search users..."
-		oninput={(e: Event) => handleSearch((e.target as HTMLInputElement).value)}
-	/>
+<MainPanel>
+	<section class="w-full max-w-[500px]">
+		<Input
+			type="text"
+			bind:value={searchValue}
+			placeholder="Search users..."
+			oninput={(e: Event) => handleSearch((e.target as HTMLInputElement).value)}
+		/>
 
-	{#if $isSearching}
-		<div class="mt-6 text-center text-gray-500">Searching...</div>
-	{:else if $searchError}
-		<div class="mt-6 text-center text-red-500">{$searchError}</div>
-	{:else if searchValue && $searchResults.length === 0}
-		<div class="mt-6 text-center text-gray-500">No users found</div>
-	{:else if searchValue}
-		<ul class="mt-6 space-y-4 pb-4">
-			{#each $searchResults as user (user.id)}
-				<li>
-					<UserRequest
-						userImgSrc={user.avatarUrl}
-						userName={user.name || user.handle}
-						description={user.description || ''}
-						handleFollow={() => handleFollow(user.id)}
-						onclick={() => handleProfileClick(user.id)}
-					/>
-				</li>
-			{/each}
-		</ul>
-	{/if}
-</section>
+		{#if $isSearching}
+			<div class="mt-6 text-center text-gray-500">Searching...</div>
+		{:else if $searchError}
+			<div class="mt-6 text-center text-red-500">{$searchError}</div>
+		{:else if searchValue && $searchResults.length === 0}
+			<div class="mt-6 text-center text-gray-500">No users found</div>
+		{:else if searchValue}
+			<ul class="mt-6 space-y-4 pb-4">
+				{#each $searchResults as user (user.id)}
+					<li>
+						<UserRequest
+							userImgSrc={user.avatarUrl}
+							userName={user.name || user.handle}
+							description={user.description || ''}
+							handleFollow={() => handleFollow(user.id)}
+							onclick={() => handleProfileClick(user.id)}
+						/>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</section>
+</MainPanel>
diff --git a/platforms/pictique/src/routes/(protected)/home/+page.svelte b/platforms/pictique/src/routes/(protected)/home/+page.svelte
index 81aec2056..f8241274f 100644
--- a/platforms/pictique/src/routes/(protected)/home/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/home/+page.svelte
@@ -2,8 +2,9 @@
 	import { goto } from '$app/navigation';
 	import { Drawer, Post } from '$lib/fragments';
 	import { Comment, MessageInput } from '$lib/fragments';
+	import MainPanel from '$lib/fragments/MainPanel/MainPanel.svelte';
 	import { showComments } from '$lib/store/store.svelte';
-	import { activePostId } from '$lib/stores/comments';
+	import { activePostId, comments, createComment, fetchComments } from '$lib/stores/comments';
 	import {
 		error,
 		fetchFeed,
@@ -15,7 +16,7 @@
 		resetFeed,
 		toggleLike
 	} from '$lib/stores/posts';
-	import type { CommentType, userProfile } from '$lib/types';
+	import type { userProfile } from '$lib/types';
 	import { apiClient, getAuthToken } from '$lib/utils';
 	import type { AxiosError } from 'axios';
 	import type { CupertinoPane } from 'cupertino-pane';
@@ -25,8 +26,8 @@
 	let drawer: CupertinoPane | undefined = $state();
 	let commentValue: string = $state('');
 	let commentInput: HTMLInputElement | undefined = $state();
-	let _comments = $state<CommentType[]>([]);
-	let activeReplyToId: string | null = $state(null);
+	let isCommentsLoading = $state(false);
+	let commentsError = $state<string | null>(null);
 
 	const sentinel = (node: HTMLElement) => {
 		const observer = new IntersectionObserver(
@@ -57,37 +58,14 @@
 
 	let profile = $state<userProfile | null>(null);
 	const handleSend = async () => {
-		const newComment = {
-			userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
-			name: 'You',
-			commentId: Date.now().toString(),
-			comment: commentValue,
-			isUpVoted: false,
-			isDownVoted: false,
-			upVotes: 0,
-			time: 'Just now',
-			replies: []
-		};
+		if (!$activePostId || !commentValue.trim()) return;
 
-		if (activeReplyToId) {
-			// Find the parent comment by id and push reply
-			const addReplyToComment = (commentsArray: CommentType[]) => {
-				for (const c of commentsArray) {
-					if (c.commentId === activeReplyToId) {
-						c.replies.push(newComment);
-						return true;
-					}
-					if (c.replies.length && addReplyToComment(c.replies)) return true;
-				}
-				return false;
-			};
-			addReplyToComment(_comments);
-		} else {
-			// If no activeReplyToId, add as a new parent comment
-			_comments = [newComment, ..._comments];
+		try {
+			await createComment($activePostId, commentValue);
+			commentValue = '';
+		} catch (err) {
+			console.error('Failed to create comment:', err);
 		}
-		commentValue = '';
-		activeReplyToId = null;
 	};
 
 	async function fetchProfile() {
@@ -108,6 +86,21 @@
 		}
 	}
 
+	// Watch for changes in showComments to fetch comments when opened
+	$effect(() => {
+		if (showComments.value && $activePostId) {
+			isCommentsLoading = true;
+			commentsError = null;
+			fetchComments($activePostId)
+				.catch((err) => {
+					commentsError = err.message;
+				})
+				.finally(() => {
+					isCommentsLoading = false;
+				});
+		}
+	});
+
 	onMount(() => {
 		resetFeed();
 		fetchFeed(1, 10, false);
@@ -115,8 +108,8 @@
 	});
 </script>
 
-<div class="flex flex-col">
-	<ul class="hide-scrollbar h-[100vh] overflow-auto">
+<MainPanel>
+	<ul class="hide-scrollbar h-screen overflow-auto md:h-dvh">
 		{#if $isLoading && $posts.length === 0}
 			<li class="my-4 text-center">Loading posts...</li>
 		{:else if $error}
@@ -207,11 +200,12 @@
 								}
 							},
 							comment: () => {
+								activePostId.set(post.id);
 								if (window.matchMedia('(max-width: 768px)').matches) {
+									showComments.value = true;
 									drawer?.present({ animate: true });
 								} else {
 									showComments.value = true;
-									activePostId.set(post.id);
 								}
 							},
 							menu: () => alert('menu')
@@ -236,29 +230,93 @@
 			{/if}
 		{/if}
 	</ul>
-</div>
-
-<Drawer bind:drawer>
-	<ul class="pb-4">
-		<h3 class="text-black-600 mb-6 text-center">{_comments.length} Comments</h3>
-		{#each _comments as comment (comment.commentId)}
-			<li class="mb-4">
-				<Comment
-					{comment}
-					handleReply={() => {
-						activeReplyToId = comment.commentId;
-						commentInput?.focus();
-					}}
+	<!-- Desktop Comments Sidebar -->
+	{#snippet RightPanel()}
+		{#if !showComments.value}
+			<div class="flex h-full items-center justify-center text-gray-400">
+				<p class="text-center">Select a post to view comments</p>
+			</div>
+		{:else}
+			<ul class="pb-4">
+				<h3 class="text-black-600 mb-6 text-center">
+					{$comments.length} Comments
+				</h3>
+				{#if isCommentsLoading}
+					<li class="text-center text-gray-500">Loading comments...</li>
+				{:else if commentsError}
+					<li class="text-center text-red-500">{commentsError}</li>
+				{:else}
+					{#each $comments as comment (comment.id)}
+						<li class="mb-4">
+							<Comment
+								comment={{
+									userImgSrc: comment.author.avatarUrl,
+									name: comment.author.name || comment.author.handle,
+									commentId: comment.id,
+									comment: comment.text,
+									isUpVoted: false,
+									isDownVoted: false,
+									upVotes: 0,
+									time: new Date(comment.createdAt).toLocaleDateString(),
+									replies: []
+								}}
+								handleReply={() => {
+									commentInput?.focus();
+								}}
+							/>
+						</li>
+					{/each}
+				{/if}
+				<MessageInput
+					class="sticky start-0 bottom-4 mt-4 w-full px-2"
+					variant="comment"
+					src={profile?.avatarUrl ?? '/images/user.png'}
+					bind:value={commentValue}
+					{handleSend}
+					bind:input={commentInput}
 				/>
-			</li>
-		{/each}
-		<MessageInput
-			class="fixed start-0 bottom-4 mt-4 w-full px-5"
-			variant="comment"
-			src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
-			bind:value={commentValue}
-			{handleSend}
-			bind:input={commentInput}
-		/>
-	</ul>
-</Drawer>
+			</ul>
+		{/if}
+	{/snippet}
+
+	<!-- Mobile Comments Drawer -->
+	<Drawer bind:drawer>
+		<ul class="pb-4">
+			<h3 class="text-black-600 mb-6 text-center">{$comments.length} Comments</h3>
+			{#if isCommentsLoading}
+				<li class="text-center text-gray-500">Loading comments...</li>
+			{:else if commentsError}
+				<li class="text-center text-red-500">{commentsError}</li>
+			{:else}
+				{#each $comments as comment (comment.id)}
+					<li class="mb-4">
+						<Comment
+							comment={{
+								userImgSrc: comment.author.avatarUrl,
+								name: comment.author.name || comment.author.handle,
+								commentId: comment.id,
+								comment: comment.text,
+								isUpVoted: false,
+								isDownVoted: false,
+								upVotes: 0,
+								time: new Date(comment.createdAt).toLocaleDateString(),
+								replies: []
+							}}
+							handleReply={() => {
+								commentInput?.focus();
+							}}
+						/>
+					</li>
+				{/each}
+			{/if}
+			<MessageInput
+				class="fixed start-0 bottom-4 mt-4 w-full px-5"
+				variant="comment"
+				src={profile?.avatarUrl ?? '/images/user.png'}
+				bind:value={commentValue}
+				{handleSend}
+				bind:input={commentInput}
+			/>
+		</ul>
+	</Drawer>
+</MainPanel>
diff --git a/platforms/pictique/src/routes/(protected)/messages/+layout.svelte b/platforms/pictique/src/routes/(protected)/messages/+layout.svelte
new file mode 100644
index 000000000..1373d74f3
--- /dev/null
+++ b/platforms/pictique/src/routes/(protected)/messages/+layout.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import MainPanel from '$lib/fragments/MainPanel/MainPanel.svelte';
+
+	let { children } = $props();
+</script>
+
+<MainPanel>
+	{@render children()}
+	{#snippet RightPanel()}
+		<div></div>
+	{/snippet}
+</MainPanel>
diff --git a/platforms/pictique/src/routes/(protected)/messages/+page.svelte b/platforms/pictique/src/routes/(protected)/messages/+page.svelte
index 774a88fa6..870f996b4 100644
--- a/platforms/pictique/src/routes/(protected)/messages/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/messages/+page.svelte
@@ -4,7 +4,6 @@
 	import { isSearching, searchError, searchResults, searchUsers } from '$lib/stores/users';
 	import type { Chat, MessageType } from '$lib/types';
 	import { Avatar, Button, Input } from '$lib/ui';
-	import { clickOutside } from '$lib/utils';
 	import { apiClient } from '$lib/utils/axios';
 	import { onMount } from 'svelte';
 	import { heading } from '../../store';
@@ -252,347 +251,353 @@
 	}
 </script>
 
-<section class="px-4 py-4">
-	<div class="mb-4 flex justify-end">
-		<Button
-			variant="secondary"
-			size="sm"
-			callback={() => {
-				openNewGroupModal = true;
-			}}
-		>
-			New Group
-		</Button>
-	</div>
-
-	{#if isLoading && messages.length === 0}
-		<div class="flex items-center justify-center py-8">
-			<div
-				class="h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"
-			></div>
-			<span class="ml-3 text-gray-500">Loading chats...</span>
-		</div>
-	{:else if messages.length > 0}
-		{#each messages as message}
-			<Message
-				class="mb-2"
-				avatar={message.avatar}
-				username={message.name ?? message.username}
-				text={message.text}
-				unread={!message.unread}
+<div class="flex">
+	<section class="flex-1 px-4 py-4">
+		<div class="mb-4 flex justify-end">
+			<Button
+				variant="secondary"
+				size="sm"
 				callback={() => {
-					heading.set(message.username);
-					goto(`/messages/${message.id}`);
+					openNewGroupModal = true;
 				}}
-			/>
-		{/each}
-
-		<!-- Load More Button -->
-		{#if hasMorePages}
-			<div class="mt-4 flex justify-center">
-				<Button
-					variant="secondary"
-					size="sm"
-					callback={loadMoreMessages}
-					disabled={isLoadingMore}
-					isLoading={isLoadingMore}
-				>
-					Load More Chats
-				</Button>
-			</div>
+			>
+				New Group
+			</Button>
+		</div>
 
-			<div class="mt-2 text-center text-sm text-gray-500">
-				Showing {messages.length} of {totalChats} chats
+		{#if isLoading && messages.length === 0}
+			<div class="flex items-center justify-center py-8">
+				<div
+					class="h-8 w-8 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600"
+				></div>
+				<span class="ml-3 text-gray-500">Loading chats...</span>
 			</div>
 		{:else if messages.length > 0}
-			<div class="mt-2 text-center text-sm text-gray-500">
-				All {totalChats} chats loaded
-			</div>
-		{/if}
-	{:else if !isLoading}
-		<div class="w-full px-5 py-5 text-center text-sm text-gray-500">
-			You don't have any messages yet. Start a Direct Message by searching a name.
-		</div>
-	{/if}
-
-	{#if openNewChatModal}
-		<div class="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
-			<div
-				class="w-[90vw] max-w-md rounded-3xl border border-gray-200 bg-white p-6 shadow-xl"
-			>
-				<div class="mb-6 flex items-center justify-between">
-					<h2 class="text-xl font-semibold text-gray-900">Start a New Chat</h2>
-					<button
-						onclick={() => (openNewChatModal = false)}
-						class="rounded-full p-2 hover:bg-gray-100"
-						aria-label="Close modal"
+			{#each messages as message}
+				<Message
+					class="mb-2"
+					avatar={message.avatar}
+					username={message.name ?? message.username}
+					text={message.text}
+					unread={!message.unread}
+					callback={() => {
+						heading.set(message.username);
+						goto(`/messages/${message.id}`);
+					}}
+				/>
+			{/each}
+
+			<!-- Load More Button -->
+			{#if hasMorePages}
+				<div class="mt-4 flex justify-center">
+					<Button
+						variant="secondary"
+						size="sm"
+						callback={loadMoreMessages}
+						disabled={isLoadingMore}
+						isLoading={isLoadingMore}
 					>
-						<svg
-							class="h-5 w-5 text-gray-500"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M6 18L18 6M6 6l12 12"
-							></path>
-						</svg>
-					</button>
+						Load More Chats
+					</Button>
 				</div>
 
-				<div class="space-y-4">
-					<Input
-						type="text"
-						bind:value={searchValue}
-						placeholder="Search users..."
-						oninput={(e: Event) => handleSearch((e.target as HTMLInputElement).value)}
-					/>
-
-					{#if $isSearching}
-						<div class="text-center text-gray-500">Searching...</div>
-					{:else if $searchError}
-						<div class="text-center text-red-500">{$searchError}</div>
-					{:else if $searchResults.length === 0 && searchValue.trim()}
-						<div class="text-center text-gray-500">No users found</div>
-					{/if}
-
-					{#if $searchResults.length > 0}
-						<div class="max-h-[250px] space-y-3 overflow-y-auto">
-							{#each $searchResults.filter((m) => m.id !== currentUserId) as member}
-								<label
-									class="flex cursor-pointer items-center space-x-3 rounded-lg p-3 hover:bg-gray-50"
-								>
-									<input
-										type="checkbox"
-										checked={selectedMembers.includes(member.id)}
-										onchange={(e: Event) => {
-											toggleMemberSelection(member.id);
-											return;
-										}}
-										class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-									/>
-									<Avatar src={member.avatarUrl} size="sm" />
-									<div class="flex flex-col">
-										<span class="text-sm font-medium text-gray-900"
-											>{member.name ?? member.handle}</span
-										>
-										{#if member.description}
-											<span class="text-xs text-gray-500"
-												>{member.description}</span
-											>
-										{/if}
-									</div>
-								</label>
-							{/each}
-						</div>
-					{/if}
-
-					{#if selectedMembers.length > 0}
-						<div class="rounded-lg bg-blue-50 p-3">
-							<p class="text-sm text-blue-800">
-								{selectedMembers.length === 1
-									? 'Direct message will be created'
-									: `Group chat with ${selectedMembers.length} members will be created`}
-							</p>
-						</div>
-					{/if}
-
-					<div class="flex justify-end gap-3 pt-4">
-						<Button
-							size="sm"
-							variant="secondary"
-							callback={() => {
-								openNewChatModal = false;
-							}}
-						>
-							Cancel
-						</Button>
-						<Button
-							size="sm"
-							variant="primary"
-							callback={() => createChat()}
-							disabled={selectedMembers.length === 0}
-						>
-							{selectedMembers.length === 1 ? 'Start Chat' : 'Create Group'}
-						</Button>
-					</div>
+				<div class="mt-2 text-center text-sm text-gray-500">
+					Showing {messages.length} of {totalChats} chats
+				</div>
+			{:else if messages.length > 0}
+				<div class="mt-2 text-center text-sm text-gray-500">
+					All {totalChats} chats loaded
 				</div>
+			{/if}
+		{:else if !isLoading}
+			<div class="w-full px-5 py-5 text-center text-sm text-gray-500">
+				You don't have any messages yet. Start a Direct Message by searching a name.
 			</div>
-		</div>
-	{/if}
+		{/if}
 
-	<!-- New Group Modal -->
-	{#if openNewGroupModal}
-		<div class="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
-			<div
-				class="w-[90vw] max-w-md rounded-3xl border border-gray-200 bg-white p-6 shadow-xl"
-			>
-				<div class="mb-6 flex items-center justify-between">
-					<h2 class="text-xl font-semibold text-gray-900">Create New Group</h2>
-					<button
-						onclick={() => (openNewGroupModal = false)}
-						class="rounded-full p-2 hover:bg-gray-100"
-						aria-label="Close modal"
-					>
-						<svg
-							class="h-5 w-5 text-gray-500"
-							fill="none"
-							stroke="currentColor"
-							viewBox="0 0 24 24"
+		{#if openNewChatModal}
+			<div class="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
+				<div
+					class="w-[90vw] max-w-md rounded-3xl border border-gray-200 bg-white p-6 shadow-xl"
+				>
+					<div class="mb-6 flex items-center justify-between">
+						<h2 class="text-xl font-semibold text-gray-900">Start a New Chat</h2>
+						<button
+							onclick={() => (openNewChatModal = false)}
+							class="rounded-full p-2 hover:bg-gray-100"
+							aria-label="Close modal"
 						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								stroke-width="2"
-								d="M6 18L18 6M6 6l12 12"
-							></path>
-						</svg>
-					</button>
-				</div>
-
-				<div class="space-y-4">
-					<!-- Group Name -->
-					<div>
-						<label for="groupName" class="mb-2 block text-sm font-medium text-gray-700">
-							Group Name *
-						</label>
-						<Input
-							id="groupName"
-							type="text"
-							bind:value={groupName}
-							placeholder="Enter group name..."
-							class="w-full"
-						/>
+							<svg
+								class="h-5 w-5 text-gray-500"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M6 18L18 6M6 6l12 12"
+								></path>
+							</svg>
+						</button>
 					</div>
 
-					<!-- Member Search -->
-					<div>
-						<label
-							for="memberSearch"
-							class="mb-2 block text-sm font-medium text-gray-700"
-						>
-							Search Users by Name
-						</label>
+					<div class="space-y-4">
 						<Input
-							id="memberSearch"
 							type="text"
 							bind:value={searchValue}
-							placeholder="Type a name to search..."
+							placeholder="Search users..."
 							oninput={(e: Event) =>
 								handleSearch((e.target as HTMLInputElement).value)}
-							class="w-full"
 						/>
+
+						{#if $isSearching}
+							<div class="text-center text-gray-500">Searching...</div>
+						{:else if $searchError}
+							<div class="text-center text-red-500">{$searchError}</div>
+						{:else if $searchResults.length === 0 && searchValue.trim()}
+							<div class="text-center text-gray-500">No users found</div>
+						{/if}
+
+						{#if $searchResults.length > 0}
+							<div class="max-h-[250px] space-y-3 overflow-y-auto">
+								{#each $searchResults.filter((m) => m.id !== currentUserId) as member}
+									<label
+										class="flex cursor-pointer items-center space-x-3 rounded-lg p-3 hover:bg-gray-50"
+									>
+										<input
+											type="checkbox"
+											checked={selectedMembers.includes(member.id)}
+											onchange={(e: Event) => {
+												toggleMemberSelection(member.id);
+												return;
+											}}
+											class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+										/>
+										<Avatar src={member.avatarUrl} size="sm" />
+										<div class="flex flex-col">
+											<span class="text-sm font-medium text-gray-900"
+												>{member.name ?? member.handle}</span
+											>
+											{#if member.description}
+												<span class="text-xs text-gray-500"
+													>{member.description}</span
+												>
+											{/if}
+										</div>
+									</label>
+								{/each}
+							</div>
+						{/if}
+
+						{#if selectedMembers.length > 0}
+							<div class="rounded-lg bg-blue-50 p-3">
+								<p class="text-sm text-blue-800">
+									{selectedMembers.length === 1
+										? 'Direct message will be created'
+										: `Group chat with ${selectedMembers.length} members will be created`}
+								</p>
+							</div>
+						{/if}
+
+						<div class="flex justify-end gap-3 pt-4">
+							<Button
+								size="sm"
+								variant="secondary"
+								callback={() => {
+									openNewChatModal = false;
+								}}
+							>
+								Cancel
+							</Button>
+							<Button
+								size="sm"
+								variant="primary"
+								callback={() => createChat()}
+								disabled={selectedMembers.length === 0}
+							>
+								{selectedMembers.length === 1 ? 'Start Chat' : 'Create Group'}
+							</Button>
+						</div>
 					</div>
+				</div>
+			</div>
+		{/if}
 
-					<!-- Search Results -->
-					{#if $isSearching}
-						<div class="py-2 text-center text-gray-500">Searching...</div>
-					{:else if $searchError}
-						<div class="py-2 text-center text-red-500">{$searchError}</div>
-					{:else if $searchResults.length > 0}
-						<div class="mb-2 flex items-center justify-between">
-							<h4 class="text-sm font-medium text-gray-700">Available Users</h4>
-							<span class="text-xs text-gray-500"
-								>{selectedMembers.length} member{selectedMembers.length !== 1
-									? 's'
-									: ''} selected</span
+		<!-- New Group Modal -->
+		{#if openNewGroupModal}
+			<div class="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
+				<div
+					class="w-[90vw] max-w-md rounded-3xl border border-gray-200 bg-white p-6 shadow-xl"
+				>
+					<div class="mb-6 flex items-center justify-between">
+						<h2 class="text-xl font-semibold text-gray-900">Create New Group</h2>
+						<button
+							onclick={() => (openNewGroupModal = false)}
+							class="rounded-full p-2 hover:bg-gray-100"
+							aria-label="Close modal"
+						>
+							<svg
+								class="h-5 w-5 text-gray-500"
+								fill="none"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M6 18L18 6M6 6l12 12"
+								></path>
+							</svg>
+						</button>
+					</div>
+
+					<div class="space-y-4">
+						<!-- Group Name -->
+						<div>
+							<label
+								for="groupName"
+								class="mb-2 block text-sm font-medium text-gray-700"
 							>
+								Group Name *
+							</label>
+							<Input
+								id="groupName"
+								type="text"
+								bind:value={groupName}
+								placeholder="Enter group name..."
+								class="w-full"
+							/>
 						</div>
-						<div class="max-h-48 space-y-2 overflow-y-auto rounded-lg border p-3">
-							{#each $searchResults.filter((m) => m.id !== currentUserId) as member}
-								<label
-									class="flex cursor-pointer items-center space-x-3 rounded-lg p-2 hover:bg-gray-50"
-								>
-									<input
-										type="checkbox"
-										checked={selectedMembers.includes(member.id)}
-										onchange={(e: Event) => {
-											toggleMemberSelection(member.id);
-											return;
-										}}
-										class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-									/>
-									<Avatar src={member.avatarUrl} size="sm" />
-									<div class="flex flex-col">
-										<span class="text-sm font-medium text-gray-900"
-											>{member.name ?? member.handle}</span
-										>
-										{#if member.description}
-											<span class="text-xs text-gray-500"
-												>{member.description}</span
-											>
-										{/if}
-									</div>
-								</label>
-							{/each}
+
+						<!-- Member Search -->
+						<div>
+							<label
+								for="memberSearch"
+								class="mb-2 block text-sm font-medium text-gray-700"
+							>
+								Search Users by Name
+							</label>
+							<Input
+								id="memberSearch"
+								type="text"
+								bind:value={searchValue}
+								placeholder="Type a name to search..."
+								oninput={(e: Event) =>
+									handleSearch((e.target as HTMLInputElement).value)}
+								class="w-full"
+							/>
 						</div>
-					{/if}
-
-					<!-- Selected Members Display -->
-					{#if selectedMembersData.length > 0}
-						<div class="rounded-lg border p-3">
-							<h4 class="mb-2 text-sm font-medium text-gray-700">
-								Selected Members:
-							</h4>
-							<div class="flex flex-wrap gap-2">
-								{#each selectedMembersData as member}
-									<div
-										class="flex items-center space-x-2 rounded-full bg-blue-50 px-3 py-1"
+
+						<!-- Search Results -->
+						{#if $isSearching}
+							<div class="py-2 text-center text-gray-500">Searching...</div>
+						{:else if $searchError}
+							<div class="py-2 text-center text-red-500">{$searchError}</div>
+						{:else if $searchResults.length > 0}
+							<div class="mb-2 flex items-center justify-between">
+								<h4 class="text-sm font-medium text-gray-700">Available Users</h4>
+								<span class="text-xs text-gray-500"
+									>{selectedMembers.length} member{selectedMembers.length !== 1
+										? 's'
+										: ''} selected</span
+								>
+							</div>
+							<div class="max-h-48 space-y-2 overflow-y-auto rounded-lg border p-3">
+								{#each $searchResults.filter((m) => m.id !== currentUserId) as member}
+									<label
+										class="flex cursor-pointer items-center space-x-3 rounded-lg p-2 hover:bg-gray-50"
 									>
-										<Avatar src={member.avatarUrl} size="xs" />
-										<span class="text-sm text-blue-800"
-											>{member.name ?? member.handle}</span
-										>
-										<button
-											onclick={() => toggleMemberSelection(member.id)}
-											class="text-blue-600 hover:text-blue-800"
-											aria-label="Remove member"
-										>
-											<svg
-												class="h-4 w-4"
-												fill="none"
-												stroke="currentColor"
-												viewBox="0 0 24 24"
+										<input
+											type="checkbox"
+											checked={selectedMembers.includes(member.id)}
+											onchange={(e: Event) => {
+												toggleMemberSelection(member.id);
+												return;
+											}}
+											class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+										/>
+										<Avatar src={member.avatarUrl} size="sm" />
+										<div class="flex flex-col">
+											<span class="text-sm font-medium text-gray-900"
+												>{member.name ?? member.handle}</span
 											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													stroke-width="2"
-													d="M6 18L18 6M6 6l12 12"
-												></path>
-											</svg>
-										</button>
-									</div>
+											{#if member.description}
+												<span class="text-xs text-gray-500"
+													>{member.description}</span
+												>
+											{/if}
+										</div>
+									</label>
 								{/each}
 							</div>
+						{/if}
+
+						<!-- Selected Members Display -->
+						{#if selectedMembersData.length > 0}
+							<div class="rounded-lg border p-3">
+								<h4 class="mb-2 text-sm font-medium text-gray-700">
+									Selected Members:
+								</h4>
+								<div class="flex flex-wrap gap-2">
+									{#each selectedMembersData as member}
+										<div
+											class="flex items-center space-x-2 rounded-full bg-blue-50 px-3 py-1"
+										>
+											<Avatar src={member.avatarUrl} size="xs" />
+											<span class="text-sm text-blue-800"
+												>{member.name ?? member.handle}</span
+											>
+											<button
+												onclick={() => toggleMemberSelection(member.id)}
+												class="text-blue-600 hover:text-blue-800"
+												aria-label="Remove member"
+											>
+												<svg
+													class="h-4 w-4"
+													fill="none"
+													stroke="currentColor"
+													viewBox="0 0 24 24"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														stroke-width="2"
+														d="M6 18L18 6M6 6l12 12"
+													></path>
+												</svg>
+											</button>
+										</div>
+									{/each}
+								</div>
+							</div>
+						{/if}
+
+						<!-- Action Buttons -->
+						<div class="flex justify-end gap-3 pt-4">
+							<Button
+								size="sm"
+								variant="secondary"
+								callback={() => {
+									openNewGroupModal = false;
+								}}
+							>
+								Cancel
+							</Button>
+							<Button
+								size="sm"
+								variant="primary"
+								callback={() => createGroup()}
+								disabled={selectedMembers.length === 0 || !groupName.trim()}
+							>
+								Create Group
+							</Button>
 						</div>
-					{/if}
-
-					<!-- Action Buttons -->
-					<div class="flex justify-end gap-3 pt-4">
-						<Button
-							size="sm"
-							variant="secondary"
-							callback={() => {
-								openNewGroupModal = false;
-							}}
-						>
-							Cancel
-						</Button>
-						<Button
-							size="sm"
-							variant="primary"
-							callback={() => createGroup()}
-							disabled={selectedMembers.length === 0 || !groupName.trim()}
-						>
-							Create Group
-						</Button>
 					</div>
 				</div>
 			</div>
-		</div>
-	{/if}
-</section>
+		{/if}
+	</section>
+</div>
diff --git a/platforms/pictique/src/routes/(protected)/post/+layout.svelte b/platforms/pictique/src/routes/(protected)/post/+layout.svelte
new file mode 100644
index 000000000..de6a0a831
--- /dev/null
+++ b/platforms/pictique/src/routes/(protected)/post/+layout.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import MainPanel from '$lib/fragments/MainPanel/MainPanel.svelte';
+
+	let { children } = $props();
+</script>
+
+<MainPanel
+	><div class="flex flex-col gap-5">
+		{@render children()}
+	</div>
+	{#snippet RightPanel()}
+		<div></div>
+	{/snippet}
+</MainPanel>
diff --git a/platforms/pictique/src/routes/(protected)/profile/+layout.svelte b/platforms/pictique/src/routes/(protected)/profile/+layout.svelte
new file mode 100644
index 000000000..787de3b9a
--- /dev/null
+++ b/platforms/pictique/src/routes/(protected)/profile/+layout.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import MainPanel from '$lib/fragments/MainPanel/MainPanel.svelte';
+
+	let { children } = $props();
+</script>
+
+<MainPanel>
+	{@render children()}
+</MainPanel>
diff --git a/platforms/pictique/src/routes/(protected)/settings/+layout.svelte b/platforms/pictique/src/routes/(protected)/settings/+layout.svelte
index 2f3999fbd..de6a0a831 100644
--- a/platforms/pictique/src/routes/(protected)/settings/+layout.svelte
+++ b/platforms/pictique/src/routes/(protected)/settings/+layout.svelte
@@ -1,7 +1,14 @@
 <script lang="ts">
+	import MainPanel from '$lib/fragments/MainPanel/MainPanel.svelte';
+
 	let { children } = $props();
 </script>
 
-<div class="flex flex-col gap-5">
-	{@render children()}
-</div>
+<MainPanel
+	><div class="flex flex-col gap-5">
+		{@render children()}
+	</div>
+	{#snippet RightPanel()}
+		<div></div>
+	{/snippet}
+</MainPanel>
diff --git a/platforms/pictique/src/routes/+layout.svelte b/platforms/pictique/src/routes/+layout.svelte
index 9928cf8b4..9b3abec93 100644
--- a/platforms/pictique/src/routes/+layout.svelte
+++ b/platforms/pictique/src/routes/+layout.svelte
@@ -43,11 +43,11 @@
 </script>
 
 {#if showSplashScreen}
-	<main class="grid h-[100dvh] w-full items-center justify-center">
+	<main class="grid h-dvh w-full items-center justify-center">
 		<img src="/images/Logo.svg" alt="logo" />
 	</main>
 {:else}
-	<div class="flex h-[100dvh] flex-col overflow-hidden">
+	<div class="flex h-dvh flex-col overflow-hidden">
 		<MaintenanceBanner />
 		<main
 			class="flex-1 overflow-hidden {page.url.pathname.includes('/profile')

From f757c6c50d330edc9ba789fbac8ef99c8708b7a8 Mon Sep 17 00:00:00 2001
From: Bekiboo <julien.connault@gmail.com>
Date: Tue, 6 Jan 2026 17:14:19 +0300
Subject: [PATCH 2/9] fix: update route checks in Header component and adjust
 layout grid for consistency

---
 platforms/pictique/src/lib/fragments/Header/Header.svelte | 8 ++++----
 platforms/pictique/src/routes/(protected)/+layout.svelte  | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/platforms/pictique/src/lib/fragments/Header/Header.svelte b/platforms/pictique/src/lib/fragments/Header/Header.svelte
index d187e4b63..5b3ba8df3 100644
--- a/platforms/pictique/src/lib/fragments/Header/Header.svelte
+++ b/platforms/pictique/src/lib/fragments/Header/Header.svelte
@@ -13,17 +13,17 @@
 	$effect(() => {
 		if (route.includes('home')) {
 			heading = 'Feed';
-		} else if (route.includes('discover')) {
+		} else if (route.includes('/discover')) {
 			heading = 'Search';
 		} else if (route.includes('/post/audience')) {
 			heading = 'Audience';
-		} else if (route.includes('post')) {
+		} else if (route.includes('/post')) {
 			heading = 'Upload photo';
 		} else if (route === '/messages') {
 			heading = 'Messages';
-		} else if (route.includes('settings')) {
+		} else if (route.includes('/settings')) {
 			heading = 'Settings';
-		} else if (route.includes('profile')) {
+		} else if (route.includes('/profile')) {
 			heading = 'Profile';
 		}
 	});
diff --git a/platforms/pictique/src/routes/(protected)/+layout.svelte b/platforms/pictique/src/routes/(protected)/+layout.svelte
index b592de161..3af792f35 100644
--- a/platforms/pictique/src/routes/(protected)/+layout.svelte
+++ b/platforms/pictique/src/routes/(protected)/+layout.svelte
@@ -40,7 +40,7 @@
 	onMount(fetchProfile);
 </script>
 
-<main class="block h-dvh grid-cols-[20vw_auto] md:grid">
+<main class="block h-dvh grid-cols-[20vw_1fr] md:grid">
 	<SideBar
 		profileSrc={profile?.avatarUrl || '/images/user.png'}
 		handlePost={async () => {

From 66fe5646a9d41db07da0769036a60999246a21ba Mon Sep 17 00:00:00 2001
From: Bekiboo <julien.connault@gmail.com>
Date: Tue, 6 Jan 2026 22:53:29 +0300
Subject: [PATCH 3/9] fix: message input in comment drawer on mobile

---
 .../src/lib/fragments/Drawer/Drawer.svelte    | 30 +++++--
 .../src/routes/(protected)/+layout.svelte     |  2 +-
 .../src/routes/(protected)/home/+page.svelte  | 84 +++++++++++--------
 3 files changed, 69 insertions(+), 47 deletions(-)

diff --git a/platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte b/platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte
index 7a9ffe5b9..d5be5846c 100644
--- a/platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte
+++ b/platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte
@@ -9,18 +9,26 @@
 	interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
 		drawer?: CupertinoPane;
 		children?: Snippet;
+		onClose?: () => void;
 	}
 
-	let { drawer = $bindable(), children = undefined, ...restProps }: IDrawerProps = $props();
+	let {
+		drawer = $bindable(),
+		children = undefined,
+		onClose,
+		...restProps
+	}: IDrawerProps = $props();
 
 	let drawerElement: HTMLElement;
 
 	function dismiss() {
 		if (drawer) drawer.destroy({ animate: true });
+		onClose?.();
 	}
 
 	function downSwipeHandler() {
 		drawer?.destroy({ animate: true });
+		onClose?.();
 	}
 
 	const swipeActions = useSwipe(
@@ -46,18 +54,21 @@
 			bottomClose: true,
 			buttonDestroy: false,
 			cssClass: '',
-			initialBreak: 'middle',
+			initialBreak: 'top',
+			breaks: {
+				top: { enabled: true, height: window.innerHeight * 0.9 },
+				middle: { enabled: true, height: window.innerHeight * 0.5 }
+			},
 			events: {
-				onBackdropTap: () => dismiss()
+				onBackdropTap: () => dismiss(),
+				onWillDismiss: () => onClose?.()
 			}
 		});
 	});
 </script>
 
 <div bind:this={drawerElement} {...restProps} {...swipeActions} class={cn(restProps.class)}>
-	<div class="h-[100%] overflow-y-scroll">
-		{@render children?.()}
-	</div>
+	{@render children?.()}
 </div>
 
 <style>
@@ -65,10 +76,11 @@
 		border-top-left-radius: 32px !important;
 		border-top-right-radius: 32px !important;
 		padding: 20px !important;
+		overflow-y: scroll !important;
 		scrollbar-width: none !important;
 		-ms-overflow-style: none !important;
-		::-webkit-scrollbar {
-			display: none !important;
-		}
+	}
+	:global(.pane)::-webkit-scrollbar {
+		display: none !important;
 	}
 </style>
diff --git a/platforms/pictique/src/routes/(protected)/+layout.svelte b/platforms/pictique/src/routes/(protected)/+layout.svelte
index 3af792f35..73a5043ff 100644
--- a/platforms/pictique/src/routes/(protected)/+layout.svelte
+++ b/platforms/pictique/src/routes/(protected)/+layout.svelte
@@ -49,7 +49,7 @@
 	/>
 	{@render children()}
 
-	{#if route !== `/messages/${page.params.id}`}
+	{#if !route.match(/^\/messages\/[^/]+$/)}
 		<BottomNav class="btm-nav" profileSrc={profile?.avatarUrl ?? ''} />
 	{/if}
 </main>
diff --git a/platforms/pictique/src/routes/(protected)/home/+page.svelte b/platforms/pictique/src/routes/(protected)/home/+page.svelte
index f8241274f..fd10ae737 100644
--- a/platforms/pictique/src/routes/(protected)/home/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/home/+page.svelte
@@ -28,6 +28,7 @@
 	let commentInput: HTMLInputElement | undefined = $state();
 	let isCommentsLoading = $state(false);
 	let commentsError = $state<string | null>(null);
+	let isDrawerOpen = $state(false);
 
 	const sentinel = (node: HTMLElement) => {
 		const observer = new IntersectionObserver(
@@ -203,6 +204,7 @@
 								activePostId.set(post.id);
 								if (window.matchMedia('(max-width: 768px)').matches) {
 									showComments.value = true;
+									isDrawerOpen = true;
 									drawer?.present({ animate: true });
 								} else {
 									showComments.value = true;
@@ -215,12 +217,7 @@
 				</li>
 			{/each}
 			{#if $isLoadingMore}
-				<li class="my-4 flex flex-col items-center justify-center gap-2">
-					<span class="text-center">Loading more posts...</span>
-					<div
-						class="h-6 w-6 animate-spin rounded-full border-2 border-gray-400 border-t-transparent"
-					></div>
-				</li>
+				<li class="my-4 text-center">Loading more posts...</li>
 			{/if}
 			{#if !$hasMore && $posts.length > 0 && !$isLoadingMore}
 				<li class="my-4 text-center text-gray-500">No more posts to load</li>
@@ -237,15 +234,15 @@
 				<p class="text-center">Select a post to view comments</p>
 			</div>
 		{:else}
-			<ul class="pb-4">
-				<h3 class="text-black-600 mb-6 text-center">
-					{$comments.length} Comments
-				</h3>
-				{#if isCommentsLoading}
-					<li class="text-center text-gray-500">Loading comments...</li>
-				{:else if commentsError}
-					<li class="text-center text-red-500">{commentsError}</li>
-				{:else}
+			<h3 class="text-black-600 mb-6 text-center">
+				{$comments.length} Comments
+			</h3>
+			{#if isCommentsLoading}
+				<p class="text-center text-gray-500">Loading comments...</p>
+			{:else if commentsError}
+				<p class="text-center text-red-500">{commentsError}</p>
+			{:else}
+				<ul>
 					{#each $comments as comment (comment.id)}
 						<li class="mb-4">
 							<Comment
@@ -266,28 +263,34 @@
 							/>
 						</li>
 					{/each}
-				{/if}
-				<MessageInput
-					class="sticky start-0 bottom-4 mt-4 w-full px-2"
-					variant="comment"
-					src={profile?.avatarUrl ?? '/images/user.png'}
-					bind:value={commentValue}
-					{handleSend}
-					bind:input={commentInput}
-				/>
-			</ul>
+				</ul>
+			{/if}
+			<MessageInput
+				class="sticky start-0 bottom-4 mt-4 w-full px-2"
+				variant="comment"
+				src={profile?.avatarUrl ?? '/images/user.png'}
+				bind:value={commentValue}
+				{handleSend}
+				bind:input={commentInput}
+			/>
 		{/if}
 	{/snippet}
 
 	<!-- Mobile Comments Drawer -->
-	<Drawer bind:drawer>
-		<ul class="pb-4">
-			<h3 class="text-black-600 mb-6 text-center">{$comments.length} Comments</h3>
-			{#if isCommentsLoading}
-				<li class="text-center text-gray-500">Loading comments...</li>
-			{:else if commentsError}
-				<li class="text-center text-red-500">{commentsError}</li>
-			{:else}
+	<Drawer
+		bind:drawer
+		onClose={() => {
+			isDrawerOpen = false;
+			showComments.value = false;
+		}}
+	>
+		<h3 class="text-black-600 mb-6 text-center">{$comments.length} Comments</h3>
+		{#if isCommentsLoading}
+			<p class="text-center text-gray-500">Loading comments...</p>
+		{:else if commentsError}
+			<p class="text-center text-red-500">{commentsError}</p>
+		{:else}
+			<ul class="pb-32">
 				{#each $comments as comment (comment.id)}
 					<li class="mb-4">
 						<Comment
@@ -308,15 +311,22 @@
 						/>
 					</li>
 				{/each}
-			{/if}
+			</ul>
+		{/if}
+	</Drawer>
+
+	{#if showComments.value && isDrawerOpen}
+		<div
+			class="fixed right-0 bottom-0 left-0 z-50 border-t border-gray-200 bg-white px-5 py-4 md:hidden"
+		>
 			<MessageInput
-				class="fixed start-0 bottom-4 mt-4 w-full px-5"
+				class="w-full"
 				variant="comment"
 				src={profile?.avatarUrl ?? '/images/user.png'}
 				bind:value={commentValue}
 				{handleSend}
 				bind:input={commentInput}
 			/>
-		</ul>
-	</Drawer>
+		</div>
+	{/if}
 </MainPanel>

From 42321387ca6001c15bb2d0b2c9ad62ef3162fdb6 Mon Sep 17 00:00:00 2001
From: Bekiboo <julien.connault@gmail.com>
Date: Wed, 7 Jan 2026 09:24:01 +0300
Subject: [PATCH 4/9] refactor: streamline comment handling and enhance error
 management in home page

---
 .../src/lib/fragments/Drawer/Drawer.svelte    |  2 -
 .../pictique/src/lib/ui/Avatar/Avatar.svelte  |  2 +-
 .../src/routes/(protected)/home/+page.svelte  | 71 ++++++++++---------
 3 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte b/platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte
index d5be5846c..6b5c17eed 100644
--- a/platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte
+++ b/platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte
@@ -23,12 +23,10 @@
 
 	function dismiss() {
 		if (drawer) drawer.destroy({ animate: true });
-		onClose?.();
 	}
 
 	function downSwipeHandler() {
 		drawer?.destroy({ animate: true });
-		onClose?.();
 	}
 
 	const swipeActions = useSwipe(
diff --git a/platforms/pictique/src/lib/ui/Avatar/Avatar.svelte b/platforms/pictique/src/lib/ui/Avatar/Avatar.svelte
index 60abebdff..ebe92acde 100644
--- a/platforms/pictique/src/lib/ui/Avatar/Avatar.svelte
+++ b/platforms/pictique/src/lib/ui/Avatar/Avatar.svelte
@@ -21,7 +21,7 @@
 	};
 
 	const classes = $derived({
-		common: cn('rounded-full'),
+		common: cn('rounded-full shrink-0 aspect-square object-cover'),
 		size: sizeVariant[size] || sizeVariant.md
 	});
 
diff --git a/platforms/pictique/src/routes/(protected)/home/+page.svelte b/platforms/pictique/src/routes/(protected)/home/+page.svelte
index fd10ae737..5da60b173 100644
--- a/platforms/pictique/src/routes/(protected)/home/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/home/+page.svelte
@@ -90,14 +90,19 @@
 	// Watch for changes in showComments to fetch comments when opened
 	$effect(() => {
 		if (showComments.value && $activePostId) {
+			const targetPostId = $activePostId;
 			isCommentsLoading = true;
 			commentsError = null;
 			fetchComments($activePostId)
 				.catch((err) => {
-					commentsError = err.message;
+					if ($activePostId === targetPostId) {
+						commentsError = err.message;
+					}
 				})
 				.finally(() => {
-					isCommentsLoading = false;
+					if ($activePostId === targetPostId) {
+						isCommentsLoading = false;
+					}
 				});
 		}
 	});
@@ -245,22 +250,7 @@
 				<ul>
 					{#each $comments as comment (comment.id)}
 						<li class="mb-4">
-							<Comment
-								comment={{
-									userImgSrc: comment.author.avatarUrl,
-									name: comment.author.name || comment.author.handle,
-									commentId: comment.id,
-									comment: comment.text,
-									isUpVoted: false,
-									isDownVoted: false,
-									upVotes: 0,
-									time: new Date(comment.createdAt).toLocaleDateString(),
-									replies: []
-								}}
-								handleReply={() => {
-									commentInput?.focus();
-								}}
-							/>
+							{@render SingleComment({ comment })}
 						</li>
 					{/each}
 				</ul>
@@ -293,22 +283,7 @@
 			<ul class="pb-32">
 				{#each $comments as comment (comment.id)}
 					<li class="mb-4">
-						<Comment
-							comment={{
-								userImgSrc: comment.author.avatarUrl,
-								name: comment.author.name || comment.author.handle,
-								commentId: comment.id,
-								comment: comment.text,
-								isUpVoted: false,
-								isDownVoted: false,
-								upVotes: 0,
-								time: new Date(comment.createdAt).toLocaleDateString(),
-								replies: []
-							}}
-							handleReply={() => {
-								commentInput?.focus();
-							}}
-						/>
+						{@render SingleComment({ comment })}
 					</li>
 				{/each}
 			</ul>
@@ -330,3 +305,31 @@
 		</div>
 	{/if}
 </MainPanel>
+
+{#snippet SingleComment({
+	comment
+}: {
+	comment: {
+		id: string;
+		text: string;
+		createdAt: string;
+		author: { avatarUrl?: string; name?: string; handle: string };
+	};
+})}
+	<Comment
+		comment={{
+			userImgSrc: comment.author?.avatarUrl ?? '/images/user.png',
+			name: comment.author?.name || comment.author?.handle || 'Unknown User',
+			commentId: comment.id,
+			comment: comment.text,
+			isUpVoted: false,
+			isDownVoted: false,
+			upVotes: 0,
+			time: new Date(comment.createdAt).toLocaleDateString(),
+			replies: []
+		}}
+		handleReply={() => {
+			commentInput?.focus();
+		}}
+	/>
+{/snippet}

From 951efe9c9f080137b771516d62c152bb032ff10e Mon Sep 17 00:00:00 2001
From: Bekiboo <julien.connault@gmail.com>
Date: Wed, 7 Jan 2026 10:33:01 +0300
Subject: [PATCH 5/9] fix: improve infinite scrolling behavior on mobile by
 adjusting scroll container and loading indicators

---
 .../pictique/src/lib/ui/Avatar/Avatar.svelte  |  2 --
 .../src/routes/(protected)/home/+page.svelte  | 24 ++++++++++++++++---
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/platforms/pictique/src/lib/ui/Avatar/Avatar.svelte b/platforms/pictique/src/lib/ui/Avatar/Avatar.svelte
index ebe92acde..9b2702ade 100644
--- a/platforms/pictique/src/lib/ui/Avatar/Avatar.svelte
+++ b/platforms/pictique/src/lib/ui/Avatar/Avatar.svelte
@@ -29,8 +29,6 @@
 		hasError = true;
 		img = '/images/user.png';
 	}
-
-	$inspect(img);
 </script>
 
 {#if hasError || !img}
diff --git a/platforms/pictique/src/routes/(protected)/home/+page.svelte b/platforms/pictique/src/routes/(protected)/home/+page.svelte
index 5da60b173..d4b976ed6 100644
--- a/platforms/pictique/src/routes/(protected)/home/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/home/+page.svelte
@@ -31,6 +31,9 @@
 	let isDrawerOpen = $state(false);
 
 	const sentinel = (node: HTMLElement) => {
+		// The sentinel is a direct child of the scrollable ul
+		const scrollContainer = node.parentElement;
+
 		const observer = new IntersectionObserver(
 			(entries) => {
 				for (const entry of entries) {
@@ -39,13 +42,23 @@
 						const loading = get(isLoading);
 						const loadingMore = get(isLoadingMore);
 
+						console.log('Sentinel intersecting:', {
+							hasMorePosts,
+							loading,
+							loadingMore
+						});
+
 						if (hasMorePosts && !loading && !loadingMore) {
+							console.log('Triggering loadMoreFeed');
 							loadMoreFeed();
 						}
 					}
 				}
 			},
-			{ rootMargin: '200px' }
+			{
+				root: scrollContainer as HTMLElement,
+				rootMargin: '200px'
+			}
 		);
 
 		observer.observe(node);
@@ -115,7 +128,7 @@
 </script>
 
 <MainPanel>
-	<ul class="hide-scrollbar h-screen overflow-auto md:h-dvh">
+	<ul class="hide-scrollbar h-screen overflow-auto pb-24 md:h-dvh md:pb-0">
 		{#if $isLoading && $posts.length === 0}
 			<li class="my-4 text-center">Loading posts...</li>
 		{:else if $error}
@@ -222,7 +235,12 @@
 				</li>
 			{/each}
 			{#if $isLoadingMore}
-				<li class="my-4 text-center">Loading more posts...</li>
+				<li class="my-8 flex flex-col items-center justify-center py-8">
+					<div
+						class="mb-3 h-8 w-8 animate-spin rounded-full border-2 border-t-transparent"
+					></div>
+					<p class="text-base font-medium text-gray-700">Loading more posts...</p>
+				</li>
 			{/if}
 			{#if !$hasMore && $posts.length > 0 && !$isLoadingMore}
 				<li class="my-4 text-center text-gray-500">No more posts to load</li>

From 68cb2616c39b11365dfbe2f3544760eca8367069 Mon Sep 17 00:00:00 2001
From: Bekiboo <julien.connault@gmail.com>
Date: Wed, 7 Jan 2026 10:45:12 +0300
Subject: [PATCH 6/9] coderabbitai: fix tailwind class

---
 .../src/routes/(protected)/messages/+page.svelte         | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/platforms/pictique/src/routes/(protected)/messages/+page.svelte b/platforms/pictique/src/routes/(protected)/messages/+page.svelte
index 870f996b4..81440eaa7 100644
--- a/platforms/pictique/src/routes/(protected)/messages/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/messages/+page.svelte
@@ -69,7 +69,10 @@
 
 				// Trim system message prefix from preview text
 				let previewText = c.latestMessage?.text ?? 'No message yet';
-				if (typeof previewText === 'string' && previewText.startsWith('$$system-message$$')) {
+				if (
+					typeof previewText === 'string' &&
+					previewText.startsWith('$$system-message$$')
+				) {
 					previewText = previewText.replace('$$system-message$$', '').trim();
 				}
 
@@ -316,7 +319,7 @@
 		{/if}
 
 		{#if openNewChatModal}
-			<div class="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
+			<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
 				<div
 					class="w-[90vw] max-w-md rounded-3xl border border-gray-200 bg-white p-6 shadow-xl"
 				>
@@ -427,7 +430,7 @@
 
 		<!-- New Group Modal -->
 		{#if openNewGroupModal}
-			<div class="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
+			<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
 				<div
 					class="w-[90vw] max-w-md rounded-3xl border border-gray-200 bg-white p-6 shadow-xl"
 				>

From 2d154338992e36bb13ba06c57b6ecd0b79f91fae Mon Sep 17 00:00:00 2001
From: Bekiboo <julien.connault@gmail.com>
Date: Wed, 7 Jan 2026 11:49:47 +0300
Subject: [PATCH 7/9] fix: remove unnecessary console logs from sentinel
 intersection handling

---
 platforms/pictique/src/routes/(protected)/home/+page.svelte | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/platforms/pictique/src/routes/(protected)/home/+page.svelte b/platforms/pictique/src/routes/(protected)/home/+page.svelte
index d4b976ed6..bec151087 100644
--- a/platforms/pictique/src/routes/(protected)/home/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/home/+page.svelte
@@ -42,12 +42,6 @@
 						const loading = get(isLoading);
 						const loadingMore = get(isLoadingMore);
 
-						console.log('Sentinel intersecting:', {
-							hasMorePosts,
-							loading,
-							loadingMore
-						});
-
 						if (hasMorePosts && !loading && !loadingMore) {
 							console.log('Triggering loadMoreFeed');
 							loadMoreFeed();

From d89c6094275be91bc29d90e9f1a27f2fce641ac5 Mon Sep 17 00:00:00 2001
From: Bekiboo <julien.connault@gmail.com>
Date: Wed, 7 Jan 2026 11:54:06 +0300
Subject: [PATCH 8/9] test: signed commit


From 0c4eec82dba7f31c00b5288f19577474a67f1e72 Mon Sep 17 00:00:00 2001
From: Bekiboo <julien.connault@gmail.com>
Date: Wed, 7 Jan 2026 11:55:20 +0300
Subject: [PATCH 9/9] test: signed commit 2