From 06681131e3e1034203f70ace1bae1d588d184b47 Mon Sep 17 00:00:00 2001
From: Sahil Garg <me.sahil.gg@gmail.com>
Date: Tue, 23 Jun 2026 10:37:44 +0530
Subject: [PATCH 1/3] feat: added settiings button in the mobile view.

---
 .../lib/fragments/BottomNav/BottomNav.svelte  |  3 +--
 .../src/lib/fragments/Header/Header.svelte    | 19 +++++++++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/platforms/pictique/client/src/lib/fragments/BottomNav/BottomNav.svelte b/platforms/pictique/client/src/lib/fragments/BottomNav/BottomNav.svelte
index 47cd0fc94..f05c75b22 100644
--- a/platforms/pictique/client/src/lib/fragments/BottomNav/BottomNav.svelte
+++ b/platforms/pictique/client/src/lib/fragments/BottomNav/BottomNav.svelte
@@ -20,7 +20,6 @@
 	let ownerId: string | null = $derived(getAuthId());
 	let previousTab = $state('home');
 	let _activeTab = $derived(page.url.pathname);
-	let fullPath = $derived(page.url.pathname);
 
 	let imageInput: HTMLInputElement;
 	let images: FileList | null = $state(null);
@@ -147,7 +146,7 @@
 		onclick={() => handleNavClick('profile')}
 	>
 		<span
-			class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' || fullPath.includes('settings') ? 'border-brand-burnt-orange' : 'border-transparent'}`}
+			class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`}
 		>
 			<img
 				width="24px"
diff --git a/platforms/pictique/client/src/lib/fragments/Header/Header.svelte b/platforms/pictique/client/src/lib/fragments/Header/Header.svelte
index e0aef4fbc..fd2ea6e21 100644
--- a/platforms/pictique/client/src/lib/fragments/Header/Header.svelte
+++ b/platforms/pictique/client/src/lib/fragments/Header/Header.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
+	import { Settings } from '$lib/icons';
 	import { cn } from '$lib/utils';
 	import { ArrowLeft01Icon, ArrowLeft02Icon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
+	import { onDestroy } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { heading as headingStore } from '../../../routes/store';
-	import { onDestroy } from 'svelte';
 
 	const { ...restProps }: HTMLAttributes<HTMLElement> = $props();
 
@@ -100,7 +102,7 @@
 				<HugeiconsIcon
 					icon={backButton[variant]}
 					size={24}
-					color="var(--color-black-500)"
+					color="var(--color-black-800)"
 				/>
 			</button>
 		{/if}
@@ -110,6 +112,19 @@
 			</h1>
 		{/if}
 	</span>
+	{#if !route.includes('/settings')}
+		<button
+			type="button"
+			class={cn([
+				'cursor-pointer rounded-full p-2 hover:bg-gray-100 md:hidden',
+				classes.background
+			])}
+			onclick={() => goto('/settings')}
+			aria-label="Settings"
+		>
+			<Settings size="24px" color="var(--color-black-800)" />
+		</button>
+	{/if}
 </header>
 
 <!--

From 7cd38898b36fa6ba090a1a8cb64881a628ff1e6f Mon Sep 17 00:00:00 2001
From: Sahil Garg <me.sahil.gg@gmail.com>
Date: Tue, 23 Jun 2026 11:38:52 +0530
Subject: [PATCH 2/3] fix: removed settings icon from other pages except
 profile.

---
 .../pictique/client/src/lib/fragments/Header/Header.svelte      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platforms/pictique/client/src/lib/fragments/Header/Header.svelte b/platforms/pictique/client/src/lib/fragments/Header/Header.svelte
index fd2ea6e21..8957113a8 100644
--- a/platforms/pictique/client/src/lib/fragments/Header/Header.svelte
+++ b/platforms/pictique/client/src/lib/fragments/Header/Header.svelte
@@ -112,7 +112,7 @@
 			</h1>
 		{/if}
 	</span>
-	{#if !route.includes('/settings')}
+	{#if route.includes('/profile') && !route.includes('/settings')}
 		<button
 			type="button"
 			class={cn([

From 56f0853170dac85cc5823bfd14af8eea62008620 Mon Sep 17 00:00:00 2001
From: Sahil Garg <me.sahil.gg@gmail.com>
Date: Tue, 23 Jun 2026 11:42:18 +0530
Subject: [PATCH 3/3] fix: added resolve in the settings.

---
 .../pictique/client/src/lib/fragments/Header/Header.svelte     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/platforms/pictique/client/src/lib/fragments/Header/Header.svelte b/platforms/pictique/client/src/lib/fragments/Header/Header.svelte
index 8957113a8..29d51a886 100644
--- a/platforms/pictique/client/src/lib/fragments/Header/Header.svelte
+++ b/platforms/pictique/client/src/lib/fragments/Header/Header.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { Settings } from '$lib/icons';
 	import { cn } from '$lib/utils';
@@ -119,7 +120,7 @@
 				'cursor-pointer rounded-full p-2 hover:bg-gray-100 md:hidden',
 				classes.background
 			])}
-			onclick={() => goto('/settings')}
+			onclick={() => goto(resolve('/settings'))}
 			aria-label="Settings"
 		>
 			<Settings size="24px" color="var(--color-black-800)" />