fix: (Pictique) refactor layout structure and fix mobile comments#656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sosweetham merged 4 commits into from
Jan 7, 2026
Merged

fix: (Pictique) refactor layout structure and fix mobile comments #656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0c6f1b2
Refactor layout structure to include MainPanel component across vario…
Bekiboo Jan 6, 2026
f757c6c
fix: update route checks in Header component and adjust layout grid f…
Bekiboo Jan 6, 2026
66fe564
fix: message input in comment drawer on mobile
Bekiboo Jan 6, 2026
4232138
refactor: streamline comment handling and enhance error management in…
Bekiboo Jan 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 19 additions & 9 deletions platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,9 +9,15 @@
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;

Expand DownExpand Up@@ -46,29 +52,33 @@
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>
:global(.pane) {
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>
52 changes: 35 additions & 17 deletions platforms/pictique/src/lib/fragments/Header/Header.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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: ''
Expand DownExpand Up@@ -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>

<!--
Expand Down
30 changes: 30 additions & 0 deletions platforms/pictique/src/lib/fragments/MainPanel/MainPanel.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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>
18 changes: 10 additions & 8 deletions platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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>
2 changes: 1 addition & 1 deletion platforms/pictique/src/lib/ui/Avatar/Avatar.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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
});

Expand Down
138 changes: 7 additions & 131 deletions platforms/pictique/src/routes/(protected)/+layout.svelte
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -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';
Expand All@@ -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');
Expand All@@ -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_1fr] 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.match(/^\/messages\/[^/]+$/)}
<BottomNav class="btm-nav" profileSrc={profile?.avatarUrl ?? ''} />
{/if}
</main>
Expand All@@ -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>,
Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
fix: (Pictique) refactor layout structure and fix mobile comments#656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

sosweetham
merged 4 commits into

from

Jan 7, 2026
 Merged


fix: (Pictique) refactor layout structure and fix mobile comments
#656
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
0c6f1b2

Refactor layout structure to include MainPanel component across vario…


Bekiboo Jan 6, 2026
f757c6c

fix: update route checks in Header component and adjust layout grid f…


Bekiboo Jan 6, 2026
66fe564

fix: message input in comment drawer on mobile


Bekiboo Jan 6, 2026
4232138

refactor: streamline comment handling and enhance error management in…


Bekiboo Jan 7, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


28 changes: 19 additions & 9 deletions
platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,9 +9,15 @@
	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;

Expand DownExpand Up@@ -46,29 +52,33 @@
 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>
	:global(.pane) {
 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>

52 changes: 35 additions & 17 deletions
platforms/pictique/src/lib/fragments/Header/Header.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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: ''
Expand DownExpand Up@@ -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>

<!--
Expand Down

30 changes: 30 additions & 0 deletions
platforms/pictique/src/lib/fragments/MainPanel/MainPanel.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>

18 changes: 10 additions & 8 deletions
platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>

2 changes: 1 addition & 1 deletion
platforms/pictique/src/lib/ui/Avatar/Avatar.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
	});

Expand Down

138 changes: 7 additions & 131 deletions
platforms/pictique/src/routes/(protected)/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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';
Expand All@@ -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');
Expand All@@ -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_1fr] 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.match(/^\/messages\/[^/]+$/)}
 <BottomNav class="btm-nav" profileSrc={profile?.avatarUrl ?? ''} />
	{/if}
</main>
Expand All@@ -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>,
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix: (Pictique) refactor layout structure and fix mobile comments#656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

sosweetham
merged 4 commits into

from

Jan 7, 2026
 Merged


fix: (Pictique) refactor layout structure and fix mobile comments
#656
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
0c6f1b2

Refactor layout structure to include MainPanel component across vario…


Bekiboo Jan 6, 2026
f757c6c

fix: update route checks in Header component and adjust layout grid f…


Bekiboo Jan 6, 2026
66fe564

fix: message input in comment drawer on mobile


Bekiboo Jan 6, 2026
4232138

refactor: streamline comment handling and enhance error management in…


Bekiboo Jan 7, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


28 changes: 19 additions & 9 deletions
platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,9 +9,15 @@
	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;

Expand DownExpand Up@@ -46,29 +52,33 @@
 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>
	:global(.pane) {
 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>

52 changes: 35 additions & 17 deletions
platforms/pictique/src/lib/fragments/Header/Header.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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: ''
Expand DownExpand Up@@ -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>

<!--
Expand Down

30 changes: 30 additions & 0 deletions
platforms/pictique/src/lib/fragments/MainPanel/MainPanel.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>

18 changes: 10 additions & 8 deletions
platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>

2 changes: 1 addition & 1 deletion
platforms/pictique/src/lib/ui/Avatar/Avatar.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
	});

Expand Down

138 changes: 7 additions & 131 deletions
platforms/pictique/src/routes/(protected)/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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';
Expand All@@ -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');
Expand All@@ -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_1fr] 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.match(/^\/messages\/[^/]+$/)}
 <BottomNav class="btm-nav" profileSrc={profile?.avatarUrl ?? ''} />
	{/if}
</main>
Expand All@@ -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>,
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix: (Pictique) refactor layout structure and fix mobile comments#656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

sosweetham
merged 4 commits into

from

Jan 7, 2026
 Merged


fix: (Pictique) refactor layout structure and fix mobile comments
#656
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
0c6f1b2

Refactor layout structure to include MainPanel component across vario…


Bekiboo Jan 6, 2026
f757c6c

fix: update route checks in Header component and adjust layout grid f…


Bekiboo Jan 6, 2026
66fe564

fix: message input in comment drawer on mobile


Bekiboo Jan 6, 2026
4232138

refactor: streamline comment handling and enhance error management in…


Bekiboo Jan 7, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


28 changes: 19 additions & 9 deletions
platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,9 +9,15 @@
	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;

Expand DownExpand Up@@ -46,29 +52,33 @@
 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>
	:global(.pane) {
 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>

52 changes: 35 additions & 17 deletions
platforms/pictique/src/lib/fragments/Header/Header.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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: ''
Expand DownExpand Up@@ -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>

<!--
Expand Down

30 changes: 30 additions & 0 deletions
platforms/pictique/src/lib/fragments/MainPanel/MainPanel.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>

18 changes: 10 additions & 8 deletions
platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>

2 changes: 1 addition & 1 deletion
platforms/pictique/src/lib/ui/Avatar/Avatar.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
	});

Expand Down

138 changes: 7 additions & 131 deletions
platforms/pictique/src/routes/(protected)/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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';
Expand All@@ -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');
Expand All@@ -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_1fr] 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.match(/^\/messages\/[^/]+$/)}
 <BottomNav class="btm-nav" profileSrc={profile?.avatarUrl ?? ''} />
	{/if}
</main>
Expand All@@ -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>,
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
fix: (Pictique) refactor layout structure and fix mobile comments#656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

sosweetham
merged 4 commits into

from

Jan 7, 2026
 Merged


fix: (Pictique) refactor layout structure and fix mobile comments
#656
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
0c6f1b2

Refactor layout structure to include MainPanel component across vario…


Bekiboo Jan 6, 2026
f757c6c

fix: update route checks in Header component and adjust layout grid f…


Bekiboo Jan 6, 2026
66fe564

fix: message input in comment drawer on mobile


Bekiboo Jan 6, 2026
4232138

refactor: streamline comment handling and enhance error management in…


Bekiboo Jan 7, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


28 changes: 19 additions & 9 deletions
platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,9 +9,15 @@
	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;

Expand DownExpand Up@@ -46,29 +52,33 @@
 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>
	:global(.pane) {
 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>

52 changes: 35 additions & 17 deletions
platforms/pictique/src/lib/fragments/Header/Header.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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: ''
Expand DownExpand Up@@ -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>

<!--
Expand Down

30 changes: 30 additions & 0 deletions
platforms/pictique/src/lib/fragments/MainPanel/MainPanel.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>

18 changes: 10 additions & 8 deletions
platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>

2 changes: 1 addition & 1 deletion
platforms/pictique/src/lib/ui/Avatar/Avatar.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
	});

Expand Down

138 changes: 7 additions & 131 deletions
platforms/pictique/src/routes/(protected)/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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';
Expand All@@ -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');
Expand All@@ -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_1fr] 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.match(/^\/messages\/[^/]+$/)}
 <BottomNav class="btm-nav" profileSrc={profile?.avatarUrl ?? ''} />
	{/if}
</main>
Expand All@@ -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>,
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix: (Pictique) refactor layout structure and fix mobile comments#656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

sosweetham
merged 4 commits into

from

Jan 7, 2026
 Merged


fix: (Pictique) refactor layout structure and fix mobile comments
#656
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
0c6f1b2

Refactor layout structure to include MainPanel component across vario…


Bekiboo Jan 6, 2026
f757c6c

fix: update route checks in Header component and adjust layout grid f…


Bekiboo Jan 6, 2026
66fe564

fix: message input in comment drawer on mobile


Bekiboo Jan 6, 2026
4232138

refactor: streamline comment handling and enhance error management in…


Bekiboo Jan 7, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


28 changes: 19 additions & 9 deletions
platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,9 +9,15 @@
	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;

Expand DownExpand Up@@ -46,29 +52,33 @@
 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>
	:global(.pane) {
 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>

52 changes: 35 additions & 17 deletions
platforms/pictique/src/lib/fragments/Header/Header.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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: ''
Expand DownExpand Up@@ -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>

<!--
Expand Down

30 changes: 30 additions & 0 deletions
platforms/pictique/src/lib/fragments/MainPanel/MainPanel.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>

18 changes: 10 additions & 8 deletions
platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>

2 changes: 1 addition & 1 deletion
platforms/pictique/src/lib/ui/Avatar/Avatar.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
	});

Expand Down

138 changes: 7 additions & 131 deletions
platforms/pictique/src/routes/(protected)/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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';
Expand All@@ -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');
Expand All@@ -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_1fr] 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.match(/^\/messages\/[^/]+$/)}
 <BottomNav class="btm-nav" profileSrc={profile?.avatarUrl ?? ''} />
	{/if}
</main>
Expand All@@ -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>,
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix: (Pictique) refactor layout structure and fix mobile comments#656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

sosweetham
merged 4 commits into

from

Jan 7, 2026
 Merged


fix: (Pictique) refactor layout structure and fix mobile comments
#656
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
0c6f1b2

Refactor layout structure to include MainPanel component across vario…


Bekiboo Jan 6, 2026
f757c6c

fix: update route checks in Header component and adjust layout grid f…


Bekiboo Jan 6, 2026
66fe564

fix: message input in comment drawer on mobile


Bekiboo Jan 6, 2026
4232138

refactor: streamline comment handling and enhance error management in…


Bekiboo Jan 7, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


28 changes: 19 additions & 9 deletions
platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,9 +9,15 @@
	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;

Expand DownExpand Up@@ -46,29 +52,33 @@
 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>
	:global(.pane) {
 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>

52 changes: 35 additions & 17 deletions
platforms/pictique/src/lib/fragments/Header/Header.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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: ''
Expand DownExpand Up@@ -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>

<!--
Expand Down

30 changes: 30 additions & 0 deletions
platforms/pictique/src/lib/fragments/MainPanel/MainPanel.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>

18 changes: 10 additions & 8 deletions
platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>

2 changes: 1 addition & 1 deletion
platforms/pictique/src/lib/ui/Avatar/Avatar.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
	});

Expand Down

138 changes: 7 additions & 131 deletions
platforms/pictique/src/routes/(protected)/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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';
Expand All@@ -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');
Expand All@@ -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_1fr] 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.match(/^\/messages\/[^/]+$/)}
 <BottomNav class="btm-nav" profileSrc={profile?.avatarUrl ?? ''} />
	{/if}
</main>
Expand All@@ -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>,
Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
fix: (Pictique) refactor layout structure and fix mobile comments#656

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

sosweetham
merged 4 commits into

from

Jan 7, 2026
 Merged


fix: (Pictique) refactor layout structure and fix mobile comments
#656
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
0c6f1b2

Refactor layout structure to include MainPanel component across vario…


Bekiboo Jan 6, 2026
f757c6c

fix: update route checks in Header component and adjust layout grid f…


Bekiboo Jan 6, 2026
66fe564

fix: message input in comment drawer on mobile


Bekiboo Jan 6, 2026
4232138

refactor: streamline comment handling and enhance error management in…


Bekiboo Jan 7, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


28 changes: 19 additions & 9 deletions
platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -9,9 +9,15 @@
	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;

Expand DownExpand Up@@ -46,29 +52,33 @@
 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>
	:global(.pane) {
 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>

52 changes: 35 additions & 17 deletions
platforms/pictique/src/lib/fragments/Header/Header.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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: ''
Expand DownExpand Up@@ -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>

<!--
Expand Down

30 changes: 30 additions & 0 deletions
platforms/pictique/src/lib/fragments/MainPanel/MainPanel.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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>

18 changes: 10 additions & 8 deletions
platforms/pictique/src/lib/fragments/RightAside/RightAside.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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>

2 changes: 1 addition & 1 deletion
platforms/pictique/src/lib/ui/Avatar/Avatar.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -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
	});

Expand Down

138 changes: 7 additions & 131 deletions
platforms/pictique/src/routes/(protected)/+layout.svelte

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -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';
Expand All@@ -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');
Expand All@@ -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_1fr] 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.match(/^\/messages\/[^/]+$/)}
 <BottomNav class="btm-nav" profileSrc={profile?.avatarUrl ?? ''} />
	{/if}
</main>
Expand All@@ -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>,
Expand Down
Loading