From d61abfc223a92da934321f14130308e20dbba310 Mon Sep 17 00:00:00 2001 From: Sahil Garg Date: Tue, 7 Jul 2026 11:23:10 +0530 Subject: [PATCH 1/2] fix: fixed the inconsistent header issue in pictique. --- .../src/lib/fragments/Header/Header.svelte | 28 +++++++++++++++++-- .../(protected)/settings/account/+page.svelte | 2 +- 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/platforms/pictique/client/src/lib/fragments/Header/Header.svelte b/platforms/pictique/client/src/lib/fragments/Header/Header.svelte index 29d51a886..32afaeebe 100644 --- a/platforms/pictique/client/src/lib/fragments/Header/Header.svelte +++ b/platforms/pictique/client/src/lib/fragments/Header/Header.svelte @@ -41,12 +41,36 @@ type Variant = 'primary' | 'secondary' | 'tertiary'; + // Settings is a top-level sidebar destination on desktop, same as Feed or + // Search, but on mobile it's only reachable by drilling in from the + // Profile page header — so its root page needs the same 'primary' variant + // Feed uses on desktop, and 'secondary' (back button) on mobile. This is + // tracked as real state so the root `/settings` page renders through the + // exact same variant path as every other top-level page, rather than + // showing back-button markup that's merely hidden with CSS on desktop. + let isDesktop = $state(true); + + $effect(() => { + const query = window.matchMedia('(min-width: 768px)'); + isDesktop = query.matches; + const handleChange = (event: MediaQueryListEvent) => { + isDesktop = event.matches; + }; + query.addEventListener('change', handleChange); + return () => query.removeEventListener('change', handleChange); + }); + let variant = $derived.by((): Variant => { if (route === `/messages/${page.params.id}` || route.includes('/post')) { return 'secondary'; } - if (route.includes('profile')) { - return 'tertiary'; + if (route === '/settings') { + return isDesktop ? 'primary' : 'secondary'; + } + // Every page nested under Settings (notifications, account, etc.) is + // always a drill-down, on both mobile and desktop. + if (route.startsWith('/settings/')) { + return 'secondary'; } return 'primary'; }); diff --git a/platforms/pictique/client/src/routes/(protected)/settings/account/+page.svelte b/platforms/pictique/client/src/routes/(protected)/settings/account/+page.svelte index 40e621773..0c5c7c8bd 100644 --- a/platforms/pictique/client/src/routes/(protected)/settings/account/+page.svelte +++ b/platforms/pictique/client/src/routes/(protected)/settings/account/+page.svelte @@ -3,6 +3,6 @@ import { onMount } from 'svelte'; onMount(() => { - goto('/settings/account/username'); + goto('/settings/account/username', { replaceState: true }); }); From 58480518e56f220effae64d5040c33f1dfe99d12 Mon Sep 17 00:00:00 2001 From: Sahil Garg Date: Tue, 7 Jul 2026 12:56:35 +0530 Subject: [PATCH 2/2] fix: coderabbit suggestions. --- .../pictique/client/src/lib/fragments/Header/Header.svelte | 4 +++- .../src/routes/(protected)/settings/account/+page.svelte | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/platforms/pictique/client/src/lib/fragments/Header/Header.svelte b/platforms/pictique/client/src/lib/fragments/Header/Header.svelte index 32afaeebe..e33c16c81 100644 --- a/platforms/pictique/client/src/lib/fragments/Header/Header.svelte +++ b/platforms/pictique/client/src/lib/fragments/Header/Header.svelte @@ -48,7 +48,9 @@ // tracked as real state so the root `/settings` page renders through the // exact same variant path as every other top-level page, rather than // showing back-button markup that's merely hidden with CSS on desktop. - let isDesktop = $state(true); + let isDesktop = $state( + typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)').matches : true + ); $effect(() => { const query = window.matchMedia('(min-width: 768px)'); diff --git a/platforms/pictique/client/src/routes/(protected)/settings/account/+page.svelte b/platforms/pictique/client/src/routes/(protected)/settings/account/+page.svelte index 0c5c7c8bd..a2301b78b 100644 --- a/platforms/pictique/client/src/routes/(protected)/settings/account/+page.svelte +++ b/platforms/pictique/client/src/routes/(protected)/settings/account/+page.svelte @@ -1,8 +1,9 @@