From f0cc8e8e867c2f873c2dd679d9dc8c84a7d11313 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 13 May 2025 13:15:49 +0530
Subject: [PATCH 01/14] feat: BottomNav

---
 platforms/metagram/src/lib/icons/Home.svelte  | 37 ++----------
 .../src/lib/ui/BottomNav/BottomNav.stories.ts | 17 ++++++
 .../src/lib/ui/BottomNav/BottomNav.svelte     | 59 +++++++++++++++++++
 platforms/metagram/src/lib/ui/index.ts        |  1 +
 4 files changed, 82 insertions(+), 32 deletions(-)
 create mode 100644 platforms/metagram/src/lib/ui/BottomNav/BottomNav.stories.ts
 create mode 100644 platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte

diff --git a/platforms/metagram/src/lib/icons/Home.svelte b/platforms/metagram/src/lib/icons/Home.svelte
index 1a2f937d..80999122 100644
--- a/platforms/metagram/src/lib/icons/Home.svelte
+++ b/platforms/metagram/src/lib/icons/Home.svelte
@@ -1,37 +1,10 @@
 <script lang="ts">
 	import type { ISvgProps } from './../types';
 
-	let { size = '20px', ...restProps }: ISvgProps = $props();
+	let { size = '20px', color="#A5A5A5", fill="white", ...restProps }: ISvgProps = $props();
 </script>
 
-<svg
-	width={size}
-	height={size}
-	viewBox="0 0 24 24"
-	fill="none"
-	xmlns="http://www.w3.org/2000/svg"
-	{...restProps}
->
-	<path
-		d="M3.16405 11.3497L4 11.5587L4.45686 16.1005C4.715 18.6668 4.84407 19.9499 5.701 20.7249C6.55793 21.5 7.84753 21.5 10.4267 21.5H13.5733C16.1525 21.5 17.4421 21.5 18.299 20.7249C19.1559 19.9499 19.285 18.6668 19.5431 16.1005L20 11.5587L20.836 11.3497C21.5201 11.1787 22 10.564 22 9.85882C22 9.35735 21.7553 8.88742 21.3445 8.59985L13.1469 2.86154C12.4583 2.37949 11.5417 2.37949 10.8531 2.86154L2.65549 8.59985C2.24467 8.88742 2 9.35735 2 9.85882C2 10.564 2.47993 11.1787 3.16405 11.3497Z"
-		fill="url(#paint0_linear_1643_261)"
-	/>
-	<path
-		d="M12 17C13.3807 17 14.5 15.8807 14.5 14.5C14.5 13.1193 13.3807 12 12 12C10.6193 12 9.5 13.1193 9.5 14.5C9.5 15.8807 10.6193 17 12 17Z"
-		fill="white"
-	/>
-	<defs>
-		<linearGradient
-			id="paint0_linear_1643_261"
-			x1="-5.55319"
-			y1="5.16"
-			x2="33.2477"
-			y2="6.45747"
-			gradientUnits="userSpaceOnUse"
-		>
-			<stop stop-color="#4D44EF" />
-			<stop offset="0.5" stop-color="#F35B5B" />
-			<stop offset="1" stop-color="#F7A428" />
-		</linearGradient>
-	</defs>
-</svg>
+<svg width={size} height={size} viewBox="0 0 25 24" {fill} xmlns="http://www.w3.org/2000/svg" {...restProps}>
+	<path d="M3.66405 11.3497L4.5 11.5587L4.95686 16.1005C5.215 18.6668 5.34407 19.9499 6.201 20.7249C7.05793 21.5 8.34753 21.5 10.9267 21.5H14.0733C16.6525 21.5 17.9421 21.5 18.799 20.7249C19.6559 19.9499 19.785 18.6668 20.0431 16.1005L20.5 11.5587L21.336 11.3497C22.0201 11.1787 22.5 10.564 22.5 9.85882C22.5 9.35735 22.2553 8.88742 21.8445 8.59985L13.6469 2.86154C12.9583 2.37949 12.0417 2.37949 11.3531 2.86154L3.15549 8.59985C2.74467 8.88742 2.5 9.35735 2.5 9.85882C2.5 10.564 2.97993 11.1787 3.66405 11.3497Z" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+	<path d="M12.5 17C13.8807 17 15 15.8807 15 14.5C15 13.1193 13.8807 12 12.5 12C11.1193 12 10 13.1193 10 14.5C10 15.8807 11.1193 17 12.5 17Z" fill="white" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+	</svg>
diff --git a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.stories.ts b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.stories.ts
new file mode 100644
index 00000000..74ecd07d
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.stories.ts
@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'svelte';
+import { BottomNav } from '..';
+
+
+export default {
+	title: 'UI/BottomNav',
+	component: BottomNav,
+	tags: ['autodocs'],
+	render: (args: { Component: BottomNav; props: ComponentProps<typeof BottomNav> }) => ({
+		Component: BottomNav,
+		props: args
+	})
+};
+
+export const Primary = {
+	args: { }
+};
\ No newline at end of file
diff --git a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
new file mode 100644
index 00000000..ca02ed45
--- /dev/null
+++ b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { HugeiconsIcon } from '@hugeicons/svelte'
+    import { SearchIcon, Home01FreeIcons, Home02FreeIcons, Home13Icon } from '@hugeicons/core-free-icons'
+	import type { HTMLAttributes } from "svelte/elements";
+	import {Home} from '$lib/icons';
+
+    interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
+        activeTab: string | number;
+    } 
+    let {activeTab = $bindable()}:IBottomNavProps = $props();
+
+    $effect(() => {
+        alert(activeTab)
+    })
+</script>
+
+<div class="flex items-center justify-between px-7 py-2 w-full border border-grey">
+    <label for="home">
+    <Home size="24px" color={activeTab === "home" ? "var(--color-brand-burnt-orange)" : "var(--color-black-400)"} fill={activeTab === "home" ? "var(--color-brand-burnt-orange)" : "white"}/>
+
+    </label>
+    <input id="home" type="radio" value="home" bind:group={activeTab} name={"navTabs"} class="hidden">
+
+    <label for="search">
+    <HugeiconsIcon
+    icon={Home01FreeIcons}
+    altIcon={Home02FreeIcons}
+    showAlt={activeTab === "search"}
+    />
+    </label>
+    <input id="search" type="radio" value="search" bind:group={activeTab} name={"navTabs"} class="hidden">
+
+    <label for="scan">
+    <HugeiconsIcon
+    icon={Home01FreeIcons}
+    altIcon={Home02FreeIcons}
+    showAlt={activeTab === "scan"}
+    />
+    </label>
+    <input id="scan" type="radio" value="scan" bind:group={activeTab} name={"navTabs"} class="hidden">
+
+    <label for="comments">
+    <HugeiconsIcon
+    icon={Home01FreeIcons}
+    altIcon={Home02FreeIcons}
+    showAlt={activeTab === "comments"}
+    />
+    </label>
+    <input id="comments" type="radio" value="comments" bind:group={activeTab} name={"navTabs"} class="hidden">
+
+    <label for="profile">
+    <HugeiconsIcon
+    icon={Home01FreeIcons}
+    altIcon={Home02FreeIcons}
+    showAlt={activeTab === "profile"}
+    />
+    </label>
+    <input id="profile" type="radio" value="profile" bind:group={activeTab} name={"navTabs"} class="hidden">
+</div>
\ No newline at end of file
diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts
index 5ba2df02..ad7d26d2 100644
--- a/platforms/metagram/src/lib/ui/index.ts
+++ b/platforms/metagram/src/lib/ui/index.ts
@@ -1,2 +1,3 @@
 export { default as Button } from "./Button/Button.svelte";
 export { default as Avatar } from "./Avatar/Avatar.svelte";
+export { default as BottomNav } from "./BottomNav/BottomNav.svelte";
\ No newline at end of file

From 9121a416a471e8aaf2137bb41cbf1307bb6c7fab Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 13 May 2025 13:46:22 +0530
Subject: [PATCH 02/14] fix: icons

---
 .../metagram/src/lib/icons/Camera.svelte      |  26 ++++
 .../metagram/src/lib/icons/CommentsTwo.svelte |   4 +-
 platforms/metagram/src/lib/icons/Home.svelte  |  30 +++-
 .../metagram/src/lib/icons/Search.svelte      |  29 ++++
 platforms/metagram/src/lib/icons/index.ts     |   2 +
 .../src/lib/ui/Avatar/Avatar.stories.ts       |  53 ++++---
 .../metagram/src/lib/ui/Avatar/Avatar.svelte  |  41 +++---
 .../src/lib/ui/BottomNav/BottomNav.stories.ts |   5 +-
 .../src/lib/ui/BottomNav/BottomNav.svelte     | 138 +++++++++++-------
 platforms/metagram/src/lib/ui/index.ts        |   6 +-
 10 files changed, 220 insertions(+), 114 deletions(-)
 create mode 100644 platforms/metagram/src/lib/icons/Camera.svelte
 create mode 100644 platforms/metagram/src/lib/icons/Search.svelte

diff --git a/platforms/metagram/src/lib/icons/Camera.svelte b/platforms/metagram/src/lib/icons/Camera.svelte
new file mode 100644
index 00000000..ced49377
--- /dev/null
+++ b/platforms/metagram/src/lib/icons/Camera.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { ISvgProps } from './../types';
+
+	let { size = '20px', color = '#A5A5A5', fill = 'white', ...restProps }: ISvgProps = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 25 24"
+	{fill}
+	xmlns="http://www.w3.org/2000/svg"
+	{...restProps}
+>
+	<path
+		d="M8.00004 6V6.75C8.2508 6.75 8.48498 6.62468 8.62408 6.41603L8.00004 6ZM17 6L16.376 6.41603C16.5151 6.62467 16.7492 6.75 17 6.75V6ZM3.25004 13.5V11.5H1.75004V13.5H3.25004ZM8.18854 4.36518L7.376 5.58398L8.62408 6.41603L9.43661 5.19723L8.18854 4.36518ZM12.1407 2.25C11.6305 2.25 11.1969 2.24925 10.8369 2.28282C10.4615 2.31783 10.1124 2.39366 9.7728 2.5754L10.4806 3.89791C10.5831 3.843 10.7171 3.8005 10.9762 3.77634C11.2506 3.75075 11.6031 3.75 12.1407 3.75V2.25ZM9.43661 5.19723C9.73486 4.74985 9.93097 4.45705 10.1045 4.24286C10.2683 4.04074 10.378 3.95282 10.4806 3.89791L9.7728 2.5754C9.43322 2.75714 9.17649 3.00553 8.93908 3.29853C8.71144 3.57948 8.47158 3.94062 8.18854 4.36518L9.43661 5.19723ZM3.25004 11.5C3.25004 10.0499 3.25818 9.49107 3.38998 9.05658L1.95457 8.62115C1.7419 9.32224 1.75004 10.159 1.75004 11.5H3.25004ZM8.00004 5.25C6.65904 5.25 5.82228 5.24186 5.12119 5.45454L5.55661 6.88995C5.99111 6.75814 6.54991 6.75 8.00004 6.75V5.25ZM3.38998 9.05658C3.70507 8.01787 4.51791 7.20503 5.55661 6.88995L5.12119 5.45454C3.60308 5.91505 2.41509 7.10304 1.95457 8.62115L3.38998 9.05658ZM10 20.25C8.33793 20.25 7.15728 20.2488 6.25137 20.1417C5.36201 20.0366 4.83567 19.8384 4.43826 19.5123L3.48667 20.6718C4.19562 21.2536 5.04432 21.5095 6.07529 21.6313C7.0897 21.7512 8.37467 21.75 10 21.75V20.25ZM1.75004 13.5C1.75004 15.1254 1.74881 16.4103 1.86872 17.4248C1.99058 18.4557 2.24642 19.3044 2.82824 20.0134L3.98776 19.0618C3.66162 18.6644 3.46347 18.138 3.35835 17.2487C3.25127 16.3428 3.25004 15.1621 3.25004 13.5H1.75004ZM4.43826 19.5123C4.2737 19.3772 4.12281 19.2263 3.98776 19.0618L2.82824 20.0134C3.02562 20.2539 3.24616 20.4744 3.48667 20.6718L4.43826 19.5123ZM23.25 13.5V11.5H21.75V13.5H23.25ZM15.5634 5.19722L16.376 6.41603L17.624 5.58397L16.8115 4.36517L15.5634 5.19722ZM12.8593 3.75C13.3969 3.75 13.7494 3.75075 14.0238 3.77634C14.2829 3.80049 14.4169 3.84299 14.5195 3.89791L15.2272 2.57539C14.8877 2.39366 14.5386 2.31783 14.1631 2.28282C13.8031 2.24925 13.3695 2.25 12.8593 2.25V3.75ZM16.8115 4.36517C16.5285 3.94062 16.2886 3.57948 16.061 3.29853C15.8235 3.00553 15.5668 2.75713 15.2272 2.57539L14.5195 3.89791C14.6221 3.95282 14.7317 4.04074 14.8955 4.24286C15.0691 4.45705 15.2652 4.74985 15.5634 5.19722L16.8115 4.36517ZM23.25 11.5C23.25 10.159 23.2581 9.32224 23.0455 8.62115L21.6101 9.05657C21.7419 9.49107 21.75 10.0499 21.75 11.5H23.25ZM17 6.75C18.4501 6.75 19.0089 6.75814 19.4434 6.88994L19.8789 5.45453C19.1778 5.24186 18.341 5.25 17 5.25V6.75ZM23.0455 8.62115C22.585 7.10304 21.397 5.91505 19.8789 5.45453L19.4434 6.88994C20.4821 7.20503 21.295 8.01787 21.6101 9.05657L23.0455 8.62115ZM15 21.75C16.6254 21.75 17.9103 21.7512 18.9248 21.6313C19.9557 21.5095 20.8044 21.2536 21.5134 20.6718L20.5618 19.5123C20.1644 19.8384 19.638 20.0366 18.7487 20.1417C17.8428 20.2488 16.6621 20.25 15 20.25V21.75ZM21.75 13.5C21.75 15.1621 21.7488 16.3428 21.6417 17.2487C21.5366 18.138 21.3384 18.6644 21.0123 19.0618L22.1718 20.0134C22.7536 19.3044 23.0095 18.4557 23.1313 17.4248C23.2512 16.4103 23.25 15.1254 23.25 13.5H21.75ZM21.5134 20.6718C21.7539 20.4744 21.9744 20.2539 22.1718 20.0134L21.0123 19.0618C20.8772 19.2263 20.7263 19.3772 20.5618 19.5123L21.5134 20.6718ZM12.8593 2.25H12.1407V3.75H12.8593V2.25ZM10 21.75H15V20.25H10V21.75Z"
+		fill={color}
+	/>
+	<path
+		d="M12.5 9V17M16.5 13H8.5"
+		stroke={color}
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/platforms/metagram/src/lib/icons/CommentsTwo.svelte b/platforms/metagram/src/lib/icons/CommentsTwo.svelte
index 3ee0814b..8247b7ab 100644
--- a/platforms/metagram/src/lib/icons/CommentsTwo.svelte
+++ b/platforms/metagram/src/lib/icons/CommentsTwo.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
 	import type { ISvgProps } from './../types';
 
-	let { size = '20px', color = '#A5A5A5', ...restProps }: ISvgProps = $props();
+	let { size = '20px', color = '#A5A5A5', fill = 'white', ...restProps }: ISvgProps = $props();
 </script>
 
 <svg
 	width={size}
 	height={size}
 	viewBox="0 0 24 24"
-	fill="none"
+	{fill}
 	xmlns="http://www.w3.org/2000/svg"
 	{...restProps}
 >
diff --git a/platforms/metagram/src/lib/icons/Home.svelte b/platforms/metagram/src/lib/icons/Home.svelte
index 80999122..255e5bba 100644
--- a/platforms/metagram/src/lib/icons/Home.svelte
+++ b/platforms/metagram/src/lib/icons/Home.svelte
@@ -1,10 +1,30 @@
 <script lang="ts">
 	import type { ISvgProps } from './../types';
 
-	let { size = '20px', color="#A5A5A5", fill="white", ...restProps }: ISvgProps = $props();
+	let { size = '20px', color = '#A5A5A5', fill = 'white', ...restProps }: ISvgProps = $props();
 </script>
 
-<svg width={size} height={size} viewBox="0 0 25 24" {fill} xmlns="http://www.w3.org/2000/svg" {...restProps}>
-	<path d="M3.66405 11.3497L4.5 11.5587L4.95686 16.1005C5.215 18.6668 5.34407 19.9499 6.201 20.7249C7.05793 21.5 8.34753 21.5 10.9267 21.5H14.0733C16.6525 21.5 17.9421 21.5 18.799 20.7249C19.6559 19.9499 19.785 18.6668 20.0431 16.1005L20.5 11.5587L21.336 11.3497C22.0201 11.1787 22.5 10.564 22.5 9.85882C22.5 9.35735 22.2553 8.88742 21.8445 8.59985L13.6469 2.86154C12.9583 2.37949 12.0417 2.37949 11.3531 2.86154L3.15549 8.59985C2.74467 8.88742 2.5 9.35735 2.5 9.85882C2.5 10.564 2.97993 11.1787 3.66405 11.3497Z" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-	<path d="M12.5 17C13.8807 17 15 15.8807 15 14.5C15 13.1193 13.8807 12 12.5 12C11.1193 12 10 13.1193 10 14.5C10 15.8807 11.1193 17 12.5 17Z" fill="white" stroke={color} stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-	</svg>
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 25 24"
+	{fill}
+	xmlns="http://www.w3.org/2000/svg"
+	{...restProps}
+>
+	<path
+		d="M3.66405 11.3497L4.5 11.5587L4.95686 16.1005C5.215 18.6668 5.34407 19.9499 6.201 20.7249C7.05793 21.5 8.34753 21.5 10.9267 21.5H14.0733C16.6525 21.5 17.9421 21.5 18.799 20.7249C19.6559 19.9499 19.785 18.6668 20.0431 16.1005L20.5 11.5587L21.336 11.3497C22.0201 11.1787 22.5 10.564 22.5 9.85882C22.5 9.35735 22.2553 8.88742 21.8445 8.59985L13.6469 2.86154C12.9583 2.37949 12.0417 2.37949 11.3531 2.86154L3.15549 8.59985C2.74467 8.88742 2.5 9.35735 2.5 9.85882C2.5 10.564 2.97993 11.1787 3.66405 11.3497Z"
+		stroke={color}
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M12.5 17C13.8807 17 15 15.8807 15 14.5C15 13.1193 13.8807 12 12.5 12C11.1193 12 10 13.1193 10 14.5C10 15.8807 11.1193 17 12.5 17Z"
+		fill="white"
+		stroke={color}
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/platforms/metagram/src/lib/icons/Search.svelte b/platforms/metagram/src/lib/icons/Search.svelte
new file mode 100644
index 00000000..f5cef932
--- /dev/null
+++ b/platforms/metagram/src/lib/icons/Search.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { ISvgProps } from './../types';
+
+	let { size = '20px', color = '#A5A5A5', fill = 'white', ...restProps }: ISvgProps = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	{fill}
+	xmlns="http://www.w3.org/2000/svg"
+	{...restProps}
+>
+	<path
+		d="M17 17L21 21"
+		stroke={color}
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+	<path
+		d="M19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19C15.4183 19 19 15.4183 19 11Z"
+		stroke={color}
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
diff --git a/platforms/metagram/src/lib/icons/index.ts b/platforms/metagram/src/lib/icons/index.ts
index 764da3c4..c5af67c6 100644
--- a/platforms/metagram/src/lib/icons/index.ts
+++ b/platforms/metagram/src/lib/icons/index.ts
@@ -6,3 +6,5 @@ export { default as VerticalDots } from './VerticalDots.svelte';
 export { default as Home } from './Home.svelte';
 export { default as Flash } from './Flash.svelte';
 export { default as CommentsTwo } from './CommentsTwo.svelte';
+export { default as Search } from './Search.svelte';
+export { default as Camera } from './Camera.svelte';
diff --git a/platforms/metagram/src/lib/ui/Avatar/Avatar.stories.ts b/platforms/metagram/src/lib/ui/Avatar/Avatar.stories.ts
index 01cd0fdc..81214f10 100644
--- a/platforms/metagram/src/lib/ui/Avatar/Avatar.stories.ts
+++ b/platforms/metagram/src/lib/ui/Avatar/Avatar.stories.ts
@@ -1,43 +1,40 @@
-import type { ComponentProps } from "svelte";
-import Avatar from "./Avatar.svelte";
+import type { ComponentProps } from 'svelte';
+import Avatar from './Avatar.svelte';
 
 export default {
-    title: "UI/Avatar",
-    component: Avatar,
-    tags: ["autodocs"],
-    render: (args: {
-        Component: Avatar;
-        props: ComponentProps<typeof Avatar>;
-    }) => ({
-        Component: Avatar,
-        props: args,
-    }),
+	title: 'UI/Avatar',
+	component: Avatar,
+	tags: ['autodocs'],
+	render: (args: { Component: Avatar; props: ComponentProps<typeof Avatar> }) => ({
+		Component: Avatar,
+		props: args
+	})
 };
 
 export const Large = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "lg",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'lg'
+	}
 };
 
 export const Medium = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "md",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'md'
+	}
 };
 
 export const Small = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "sm",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'sm'
+	}
 };
 
 export const ExtraSmall = {
-    args: {
-        src: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
-        size: "xs",
-    },
+	args: {
+		src: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		size: 'xs'
+	}
 };
diff --git a/platforms/metagram/src/lib/ui/Avatar/Avatar.svelte b/platforms/metagram/src/lib/ui/Avatar/Avatar.svelte
index 2d82b1df..768136ee 100644
--- a/platforms/metagram/src/lib/ui/Avatar/Avatar.svelte
+++ b/platforms/metagram/src/lib/ui/Avatar/Avatar.svelte
@@ -1,31 +1,26 @@
 <script lang="ts">
-import { cn } from "$lib/utils";
-import type { HTMLImgAttributes } from "svelte/elements";
+	import { cn } from '$lib/utils';
+	import type { HTMLImgAttributes } from 'svelte/elements';
 
-interface IAvatarProps extends HTMLImgAttributes {
-    src: string;
-    alt?: string;
-    size?: "xs" | "sm" | "md" | "lg";
-}
+	interface IAvatarProps extends HTMLImgAttributes {
+		src: string;
+		alt?: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+	}
 
-const {
-    src,
-    alt = "User Avatar",
-    size = "md",
-    ...restProps
-}: IAvatarProps = $props();
+	const { src, alt = 'User Avatar', size = 'md', ...restProps }: IAvatarProps = $props();
 
-const sizeVariant = {
-    xs: "w-6 h-6",
-    sm: "w-10 h-10",
-    md: "w-12 h-12",
-    lg: "w-30 h-30",
-};
+	const sizeVariant = {
+		xs: 'w-6 h-6',
+		sm: 'w-10 h-10',
+		md: 'w-12 h-12',
+		lg: 'w-30 h-30'
+	};
 
-const classes = $derived({
-    common: cn("rounded-full"),
-    size: sizeVariant[size] || sizeVariant.md,
-});
+	const classes = $derived({
+		common: cn('rounded-full'),
+		size: sizeVariant[size] || sizeVariant.md
+	});
 </script>
 
 <img
diff --git a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.stories.ts b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.stories.ts
index 74ecd07d..b9c8bd75 100644
--- a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.stories.ts
+++ b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.stories.ts
@@ -1,7 +1,6 @@
 import type { ComponentProps } from 'svelte';
 import { BottomNav } from '..';
 
-
 export default {
 	title: 'UI/BottomNav',
 	component: BottomNav,
@@ -13,5 +12,5 @@ export default {
 };
 
 export const Primary = {
-	args: { }
-};
\ No newline at end of file
+	args: {}
+};
diff --git a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
index ca02ed45..bb0d7765 100644
--- a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
+++ b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
@@ -1,59 +1,97 @@
 <script lang="ts">
-	import { HugeiconsIcon } from '@hugeicons/svelte'
-    import { SearchIcon, Home01FreeIcons, Home02FreeIcons, Home13Icon } from '@hugeicons/core-free-icons'
-	import type { HTMLAttributes } from "svelte/elements";
-	import {Home} from '$lib/icons';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Home, CommentsTwo, Search, Camera } from '$lib/icons';
 
-    interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
-        activeTab: string | number;
-    } 
-    let {activeTab = $bindable()}:IBottomNavProps = $props();
+	interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
+		activeTab: string | number;
+	}
+	let { activeTab = $bindable() }: IBottomNavProps = $props();
 
-    $effect(() => {
-        alert(activeTab)
-    })
+	// $effect(() => {
+	//     alert(activeTab)
+	// })
 </script>
 
-<div class="flex items-center justify-between px-7 py-2 w-full border border-grey">
-    <label for="home">
-    <Home size="24px" color={activeTab === "home" ? "var(--color-brand-burnt-orange)" : "var(--color-black-400)"} fill={activeTab === "home" ? "var(--color-brand-burnt-orange)" : "white"}/>
+<div class="border-grey flex w-full items-center justify-between border px-7 py-2">
+	<label for="home">
+		<Home
+			size="24px"
+			color={activeTab === 'home'
+				? 'var(--color-brand-burnt-orange)'
+				: 'var(--color-black-400)'}
+			fill={activeTab === 'home' ? 'var(--color-brand-burnt-orange)' : 'white'}
+		/>
+	</label>
+	<input
+		id="home"
+		type="radio"
+		value="home"
+		bind:group={activeTab}
+		name={'navTabs'}
+		class="hidden"
+	/>
 
-    </label>
-    <input id="home" type="radio" value="home" bind:group={activeTab} name={"navTabs"} class="hidden">
+	<label for="search">
+		<Search
+			size="24px"
+			color={activeTab === 'search'
+				? 'var(--color-brand-burnt-orange)'
+				: 'var(--color-black-400)'}
+			fill={activeTab === 'search' ? 'var(--color-brand-burnt-orange)' : 'white'}
+		/>
+	</label>
+	<input
+		id="search"
+		type="radio"
+		value="search"
+		bind:group={activeTab}
+		name={'navTabs'}
+		class="hidden"
+	/>
 
-    <label for="search">
-    <HugeiconsIcon
-    icon={Home01FreeIcons}
-    altIcon={Home02FreeIcons}
-    showAlt={activeTab === "search"}
-    />
-    </label>
-    <input id="search" type="radio" value="search" bind:group={activeTab} name={"navTabs"} class="hidden">
+	<label for="camera">
+		<Camera
+			size="24px"
+			color={activeTab === 'camera'
+				? 'var(--color-brand-burnt-orange)'
+				: 'var(--color-black-400)'}
+			fill={activeTab === 'camera' ? 'var(--color-brand-burnt-orange)' : 'white'}
+		/>
+	</label>
+	<input
+		id="camera"
+		type="radio"
+		value="camera"
+		bind:group={activeTab}
+		name={'navTabs'}
+		class="hidden"
+	/>
 
-    <label for="scan">
-    <HugeiconsIcon
-    icon={Home01FreeIcons}
-    altIcon={Home02FreeIcons}
-    showAlt={activeTab === "scan"}
-    />
-    </label>
-    <input id="scan" type="radio" value="scan" bind:group={activeTab} name={"navTabs"} class="hidden">
+	<label for="messages">
+		<CommentsTwo
+			size="24px"
+			color={activeTab === 'messages'
+				? 'var(--color-brand-burnt-orange)'
+				: 'var(--color-black-400)'}
+			fill={activeTab === 'messages' ? 'var(--color-brand-burnt-orange)' : 'white'}
+		/>
+	</label>
+	<input
+		id="messages"
+		type="radio"
+		value="messages"
+		bind:group={activeTab}
+		name={'navTabs'}
+		class="hidden"
+	/>
 
-    <label for="comments">
-    <HugeiconsIcon
-    icon={Home01FreeIcons}
-    altIcon={Home02FreeIcons}
-    showAlt={activeTab === "comments"}
-    />
-    </label>
-    <input id="comments" type="radio" value="comments" bind:group={activeTab} name={"navTabs"} class="hidden">
-
-    <label for="profile">
-    <HugeiconsIcon
-    icon={Home01FreeIcons}
-    altIcon={Home02FreeIcons}
-    showAlt={activeTab === "profile"}
-    />
-    </label>
-    <input id="profile" type="radio" value="profile" bind:group={activeTab} name={"navTabs"} class="hidden">
-</div>
\ No newline at end of file
+	<label for="profile"> profile </label>
+	<input
+		id="profile"
+		type="radio"
+		value="profile"
+		bind:group={activeTab}
+		name={'navTabs'}
+		class="hidden"
+	/>
+</div>
diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts
index ad7d26d2..d45047ca 100644
--- a/platforms/metagram/src/lib/ui/index.ts
+++ b/platforms/metagram/src/lib/ui/index.ts
@@ -1,3 +1,3 @@
-export { default as Button } from "./Button/Button.svelte";
-export { default as Avatar } from "./Avatar/Avatar.svelte";
-export { default as BottomNav } from "./BottomNav/BottomNav.svelte";
\ No newline at end of file
+export { default as Button } from './Button/Button.svelte';
+export { default as Avatar } from './Avatar/Avatar.svelte';
+export { default as BottomNav } from './BottomNav/BottomNav.svelte';

From 43badf25ac73cd32f0e6b0e6cd6cde5241561b32 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 13 May 2025 14:25:10 +0530
Subject: [PATCH 03/14] feat: profile icons created

---
 .../src/lib/ui/BottomNav/BottomNav.svelte     | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
index bb0d7765..2c890d8c 100644
--- a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
+++ b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
@@ -3,16 +3,14 @@
 	import { Home, CommentsTwo, Search, Camera } from '$lib/icons';
 
 	interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
-		activeTab: string | number;
+		activeTab: string;
+		profileSrc: string;
 	}
-	let { activeTab = $bindable() }: IBottomNavProps = $props();
-
-	// $effect(() => {
-	//     alert(activeTab)
-	// })
+	let { activeTab = $bindable(), profileSrc = 'https://picsum.photos/200' }: IBottomNavProps =
+		$props();
 </script>
 
-<div class="border-grey flex w-full items-center justify-between border px-7 py-2">
+<div class="flex w-full items-center justify-between px-7 py-2">
 	<label for="home">
 		<Home
 			size="24px"
@@ -85,7 +83,19 @@
 		class="hidden"
 	/>
 
-	<label for="profile"> profile </label>
+	<label for="profile">
+		<span
+			class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`}
+		>
+			<img
+				width="24px"
+				height="24px"
+				class="aspect-square rounded-full"
+				src={profileSrc}
+				alt="profile"
+			/>
+		</span>
+	</label>
 	<input
 		id="profile"
 		type="radio"

From 6dbdac5a6a5367bce4a039264599c3fbe85782ce Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 13 May 2025 14:27:58 +0530
Subject: [PATCH 04/14] feat: handler added

---
 .../metagram/src/lib/ui/BottomNav/BottomNav.svelte   | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
index 2c890d8c..a33757d6 100644
--- a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
+++ b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { Home, CommentsTwo, Search, Camera } from '$lib/icons';
+	import { goto } from '$app/navigation';
 
 	interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
 		activeTab: string;
@@ -8,6 +9,10 @@
 	}
 	let { activeTab = $bindable(), profileSrc = 'https://picsum.photos/200' }: IBottomNavProps =
 		$props();
+
+	const handleClick = () => {
+		goto(`/${activeTab}`);
+	};
 </script>
 
 <div class="flex w-full items-center justify-between px-7 py-2">
@@ -18,6 +23,7 @@
 				? 'var(--color-brand-burnt-orange)'
 				: 'var(--color-black-400)'}
 			fill={activeTab === 'home' ? 'var(--color-brand-burnt-orange)' : 'white'}
+			onclick={handleClick}
 		/>
 	</label>
 	<input
@@ -36,6 +42,7 @@
 				? 'var(--color-brand-burnt-orange)'
 				: 'var(--color-black-400)'}
 			fill={activeTab === 'search' ? 'var(--color-brand-burnt-orange)' : 'white'}
+			onclick={handleClick}
 		/>
 	</label>
 	<input
@@ -54,6 +61,7 @@
 				? 'var(--color-brand-burnt-orange)'
 				: 'var(--color-black-400)'}
 			fill={activeTab === 'camera' ? 'var(--color-brand-burnt-orange)' : 'white'}
+			onclick={handleClick}
 		/>
 	</label>
 	<input
@@ -72,6 +80,7 @@
 				? 'var(--color-brand-burnt-orange)'
 				: 'var(--color-black-400)'}
 			fill={activeTab === 'messages' ? 'var(--color-brand-burnt-orange)' : 'white'}
+			onclick={handleClick}
 		/>
 	</label>
 	<input
@@ -84,7 +93,10 @@
 	/>
 
 	<label for="profile">
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<span
+			onclick={handleClick}
 			class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`}
 		>
 			<img

From a881bfb4517153cdcf9f4c62fa0abf3ff03c3322 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 13 May 2025 14:30:58 +0530
Subject: [PATCH 05/14] feat: handler added

---
 .../src/lib/ui/BottomNav/BottomNav.svelte     | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
index a33757d6..78122383 100644
--- a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
+++ b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
@@ -7,7 +7,7 @@
 		activeTab: string;
 		profileSrc: string;
 	}
-	let { activeTab = $bindable(), profileSrc = 'https://picsum.photos/200' }: IBottomNavProps =
+	let { activeTab = $bindable("home"), profileSrc = 'https://picsum.photos/200' }: IBottomNavProps =
 		$props();
 
 	const handleClick = () => {
@@ -16,14 +16,15 @@
 </script>
 
 <div class="flex w-full items-center justify-between px-7 py-2">
-	<label for="home">
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<label for="home" onclick={handleClick}>
 		<Home
 			size="24px"
 			color={activeTab === 'home'
 				? 'var(--color-brand-burnt-orange)'
 				: 'var(--color-black-400)'}
 			fill={activeTab === 'home' ? 'var(--color-brand-burnt-orange)' : 'white'}
-			onclick={handleClick}
 		/>
 	</label>
 	<input
@@ -35,14 +36,15 @@
 		class="hidden"
 	/>
 
-	<label for="search">
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<label for="search" onclick={handleClick}>
 		<Search
 			size="24px"
 			color={activeTab === 'search'
 				? 'var(--color-brand-burnt-orange)'
 				: 'var(--color-black-400)'}
 			fill={activeTab === 'search' ? 'var(--color-brand-burnt-orange)' : 'white'}
-			onclick={handleClick}
 		/>
 	</label>
 	<input
@@ -54,14 +56,15 @@
 		class="hidden"
 	/>
 
-	<label for="camera">
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<label for="camera" onclick={handleClick}>
 		<Camera
 			size="24px"
 			color={activeTab === 'camera'
 				? 'var(--color-brand-burnt-orange)'
 				: 'var(--color-black-400)'}
 			fill={activeTab === 'camera' ? 'var(--color-brand-burnt-orange)' : 'white'}
-			onclick={handleClick}
 		/>
 	</label>
 	<input
@@ -73,14 +76,15 @@
 		class="hidden"
 	/>
 
-	<label for="messages">
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<label for="messages" onclick={handleClick}>
 		<CommentsTwo
 			size="24px"
 			color={activeTab === 'messages'
 				? 'var(--color-brand-burnt-orange)'
 				: 'var(--color-black-400)'}
 			fill={activeTab === 'messages' ? 'var(--color-brand-burnt-orange)' : 'white'}
-			onclick={handleClick}
 		/>
 	</label>
 	<input
@@ -92,11 +96,10 @@
 		class="hidden"
 	/>
 
-	<label for="profile">
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<label for="profile" onclick={handleClick}>
 		<span
-			onclick={handleClick}
 			class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`}
 		>
 			<img

From 1bd4de503ef586a8111a8948078f629ccd17b3fa Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Tue, 13 May 2025 14:33:46 +0530
Subject: [PATCH 06/14] fix: correct tags

---
 .../src/lib/ui/BottomNav/BottomNav.svelte       | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
index 78122383..3f7ac280 100644
--- a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
+++ b/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
@@ -7,15 +7,22 @@
 		activeTab: string;
 		profileSrc: string;
 	}
-	let { activeTab = $bindable("home"), profileSrc = 'https://picsum.photos/200' }: IBottomNavProps =
-		$props();
+	let {
+		activeTab = $bindable('home'),
+		profileSrc = 'https://picsum.photos/200'
+	}: IBottomNavProps = $props();
 
 	const handleClick = () => {
 		goto(`/${activeTab}`);
 	};
 </script>
 
-<div class="flex w-full items-center justify-between px-7 py-2">
+<!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
+<nav
+	aria-label="Main navigation"
+	class="flex w-full items-center justify-between px-7 py-2"
+	role="tablist"
+>
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<label for="home" onclick={handleClick}>
@@ -96,7 +103,7 @@
 		class="hidden"
 	/>
 
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<label for="profile" onclick={handleClick}>
 		<span
@@ -119,4 +126,4 @@
 		name={'navTabs'}
 		class="hidden"
 	/>
-</div>
+</nav>

From fb3e0baa463ae81a5eedb2c4f36850acb263286f Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Wed, 14 May 2025 10:20:58 +0530
Subject: [PATCH 07/14] fix: as per given suggestion, bottomnav moved to
 fragments and also implemented on page

---
 .../lib/{ui => fragments}/BottomNav/BottomNav.stories.ts  | 0
 .../src/lib/{ui => fragments}/BottomNav/BottomNav.svelte  | 2 +-
 platforms/metagram/src/lib/fragments/index.ts             | 1 +
 platforms/metagram/src/lib/ui/index.ts                    | 1 -
 platforms/metagram/src/routes/+layout.svelte              | 8 +++++++-
 5 files changed, 9 insertions(+), 3 deletions(-)
 rename platforms/metagram/src/lib/{ui => fragments}/BottomNav/BottomNav.stories.ts (100%)
 rename platforms/metagram/src/lib/{ui => fragments}/BottomNav/BottomNav.svelte (97%)
 create mode 100644 platforms/metagram/src/lib/fragments/index.ts

diff --git a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.stories.ts b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.stories.ts
similarity index 100%
rename from platforms/metagram/src/lib/ui/BottomNav/BottomNav.stories.ts
rename to platforms/metagram/src/lib/fragments/BottomNav/BottomNav.stories.ts
diff --git a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
similarity index 97%
rename from platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
rename to platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
index 3f7ac280..c432f718 100644
--- a/platforms/metagram/src/lib/ui/BottomNav/BottomNav.svelte
+++ b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
@@ -20,7 +20,7 @@
 <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
 <nav
 	aria-label="Main navigation"
-	class="flex w-full items-center justify-between px-7 py-2"
+	class="fixed start-0 bottom-0 flex w-full items-center justify-between px-7 py-2 sm:hidden"
 	role="tablist"
 >
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts
new file mode 100644
index 00000000..d423ac6e
--- /dev/null
+++ b/platforms/metagram/src/lib/fragments/index.ts
@@ -0,0 +1 @@
+export { default as BottomNav } from './BottomNav/BottomNav.svelte';
diff --git a/platforms/metagram/src/lib/ui/index.ts b/platforms/metagram/src/lib/ui/index.ts
index d45047ca..09aa75fd 100644
--- a/platforms/metagram/src/lib/ui/index.ts
+++ b/platforms/metagram/src/lib/ui/index.ts
@@ -1,3 +1,2 @@
 export { default as Button } from './Button/Button.svelte';
 export { default as Avatar } from './Avatar/Avatar.svelte';
-export { default as BottomNav } from './BottomNav/BottomNav.svelte';
diff --git a/platforms/metagram/src/routes/+layout.svelte b/platforms/metagram/src/routes/+layout.svelte
index b93e9bae..0f4996dd 100644
--- a/platforms/metagram/src/routes/+layout.svelte
+++ b/platforms/metagram/src/routes/+layout.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
+	import BottomNav from '$lib/fragments/BottomNav/BottomNav.svelte';
 	import '../app.css';
 
 	let { children } = $props();
+
+	let activeTab = $state('home');
 </script>
 
-{@render children()}
+<main>
+	{@render children()}
+	<BottomNav {activeTab} profileSrc="https://picsum.photos/200" />
+</main>

From 01fa246505500ff132c358394a44216c29828d30 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Wed, 14 May 2025 10:24:11 +0530
Subject: [PATCH 08/14] fix: handler

---
 .../src/lib/fragments/BottomNav/BottomNav.svelte   | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
index c432f718..e049358b 100644
--- a/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
+++ b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
@@ -11,10 +11,6 @@
 		activeTab = $bindable('home'),
 		profileSrc = 'https://picsum.photos/200'
 	}: IBottomNavProps = $props();
-
-	const handleClick = () => {
-		goto(`/${activeTab}`);
-	};
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
@@ -25,7 +21,7 @@
 >
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="home" onclick={handleClick}>
+	<label for="home" onclick={() => goto('/home')}>
 		<Home
 			size="24px"
 			color={activeTab === 'home'
@@ -45,7 +41,7 @@
 
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="search" onclick={handleClick}>
+	<label for="search" onclick={() => goto('/search')}>
 		<Search
 			size="24px"
 			color={activeTab === 'search'
@@ -65,7 +61,7 @@
 
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="camera" onclick={handleClick}>
+	<label for="camera" onclick={() => goto('/camera')}>
 		<Camera
 			size="24px"
 			color={activeTab === 'camera'
@@ -85,7 +81,7 @@
 
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="messages" onclick={handleClick}>
+	<label for="messages" onclick={() => goto('/messages')}>
 		<CommentsTwo
 			size="24px"
 			color={activeTab === 'messages'
@@ -105,7 +101,7 @@
 
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="profile" onclick={handleClick}>
+	<label for="profile" onclick={() => goto('/profile')}>
 		<span
 			class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`}
 		>

From 1e970f9399a1fb467e4a175fa634416640ef0c03 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Wed, 14 May 2025 13:17:46 +0530
Subject: [PATCH 09/14] chore: routes added

---
 .../lib/fragments/BottomNav/BottomNav.svelte  | 20 +++++++++----------
 platforms/metagram/src/lib/fragments/index.ts |  1 -
 .../src/routes/(protected)/+layout.svelte     | 11 ++++++++++
 .../routes/(protected)/discover/+page.svelte  |  9 +++++++++
 .../src/routes/(protected)/home/+page.svelte  |  9 +++++++++
 .../routes/(protected)/messages/+page.svelte  |  9 +++++++++
 .../src/routes/(protected)/post/+page.svelte  |  9 +++++++++
 .../routes/(protected)/profile/+page.svelte   |  9 +++++++++
 .../src/routes/(protected)/store.svelte.ts    |  3 +++
 platforms/metagram/src/routes/+layout.svelte  |  4 ----
 platforms/metagram/src/routes/+page.svelte    | 17 +++++++---------
 11 files changed, 76 insertions(+), 25 deletions(-)
 create mode 100644 platforms/metagram/src/routes/(protected)/+layout.svelte
 create mode 100644 platforms/metagram/src/routes/(protected)/discover/+page.svelte
 create mode 100644 platforms/metagram/src/routes/(protected)/home/+page.svelte
 create mode 100644 platforms/metagram/src/routes/(protected)/messages/+page.svelte
 create mode 100644 platforms/metagram/src/routes/(protected)/post/+page.svelte
 create mode 100644 platforms/metagram/src/routes/(protected)/profile/+page.svelte
 create mode 100644 platforms/metagram/src/routes/(protected)/store.svelte.ts

diff --git a/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
index e049358b..2900c344 100644
--- a/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
+++ b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
@@ -41,19 +41,19 @@
 
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="search" onclick={() => goto('/search')}>
+	<label for="discover" onclick={() => goto('/discover')}>
 		<Search
 			size="24px"
-			color={activeTab === 'search'
+			color={activeTab === 'discover'
 				? 'var(--color-brand-burnt-orange)'
 				: 'var(--color-black-400)'}
-			fill={activeTab === 'search' ? 'var(--color-brand-burnt-orange)' : 'white'}
+			fill={activeTab === 'discover' ? 'var(--color-brand-burnt-orange)' : 'white'}
 		/>
 	</label>
 	<input
-		id="search"
+		id="discover"
 		type="radio"
-		value="search"
+		value="discover"
 		bind:group={activeTab}
 		name={'navTabs'}
 		class="hidden"
@@ -61,19 +61,19 @@
 
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="camera" onclick={() => goto('/camera')}>
+	<label for="post" onclick={() => goto('/post')}>
 		<Camera
 			size="24px"
-			color={activeTab === 'camera'
+			color={activeTab === 'post'
 				? 'var(--color-brand-burnt-orange)'
 				: 'var(--color-black-400)'}
-			fill={activeTab === 'camera' ? 'var(--color-brand-burnt-orange)' : 'white'}
+			fill={activeTab === 'post' ? 'var(--color-brand-burnt-orange)' : 'white'}
 		/>
 	</label>
 	<input
-		id="camera"
+		id="post"
 		type="radio"
-		value="camera"
+		value="post"
 		bind:group={activeTab}
 		name={'navTabs'}
 		class="hidden"
diff --git a/platforms/metagram/src/lib/fragments/index.ts b/platforms/metagram/src/lib/fragments/index.ts
index 619198d3..4b92753c 100644
--- a/platforms/metagram/src/lib/fragments/index.ts
+++ b/platforms/metagram/src/lib/fragments/index.ts
@@ -1,3 +1,2 @@
 export { default as BottomNav } from './BottomNav/BottomNav.svelte';
 export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
-
diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
new file mode 100644
index 00000000..0912083f
--- /dev/null
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { BottomNav } from '$lib/fragments';
+	import { activeTab } from './store.svelte';
+
+	let { children } = $props();
+</script>
+
+<main>
+	{@render children()}
+	<BottomNav bind:activeTab={activeTab.value} profileSrc="https://picsum.photos/200" />
+</main>
diff --git a/platforms/metagram/src/routes/(protected)/discover/+page.svelte b/platforms/metagram/src/routes/(protected)/discover/+page.svelte
new file mode 100644
index 00000000..705d834a
--- /dev/null
+++ b/platforms/metagram/src/routes/(protected)/discover/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { activeTab } from '../store.svelte';
+
+	$effect(() => {
+		activeTab.value = 'discover';
+	});
+</script>
+
+<h1>Discover Page</h1>
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
new file mode 100644
index 00000000..2712d880
--- /dev/null
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { activeTab } from '../store.svelte';
+
+	$effect(() => {
+		activeTab.value = 'home';
+	});
+</script>
+
+<h1>Home</h1>
diff --git a/platforms/metagram/src/routes/(protected)/messages/+page.svelte b/platforms/metagram/src/routes/(protected)/messages/+page.svelte
new file mode 100644
index 00000000..d7506a64
--- /dev/null
+++ b/platforms/metagram/src/routes/(protected)/messages/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { activeTab } from '../store.svelte';
+
+	$effect(() => {
+		activeTab.value = 'messages';
+	});
+</script>
+
+<h1>Messages</h1>
diff --git a/platforms/metagram/src/routes/(protected)/post/+page.svelte b/platforms/metagram/src/routes/(protected)/post/+page.svelte
new file mode 100644
index 00000000..ef8ecf45
--- /dev/null
+++ b/platforms/metagram/src/routes/(protected)/post/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { activeTab } from '../store.svelte';
+
+	$effect(() => {
+		activeTab.value = 'post';
+	});
+</script>
+
+<h1>Post</h1>
diff --git a/platforms/metagram/src/routes/(protected)/profile/+page.svelte b/platforms/metagram/src/routes/(protected)/profile/+page.svelte
new file mode 100644
index 00000000..b64494ad
--- /dev/null
+++ b/platforms/metagram/src/routes/(protected)/profile/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { activeTab } from '../store.svelte';
+
+	$effect(() => {
+		activeTab.value = 'profile';
+	});
+</script>
+
+<h1>Profile</h1>
diff --git a/platforms/metagram/src/routes/(protected)/store.svelte.ts b/platforms/metagram/src/routes/(protected)/store.svelte.ts
new file mode 100644
index 00000000..8974a802
--- /dev/null
+++ b/platforms/metagram/src/routes/(protected)/store.svelte.ts
@@ -0,0 +1,3 @@
+export const activeTab = $state({
+	value: ''
+});
diff --git a/platforms/metagram/src/routes/+layout.svelte b/platforms/metagram/src/routes/+layout.svelte
index 0f4996dd..25d330b4 100644
--- a/platforms/metagram/src/routes/+layout.svelte
+++ b/platforms/metagram/src/routes/+layout.svelte
@@ -1,13 +1,9 @@
 <script lang="ts">
-	import BottomNav from '$lib/fragments/BottomNav/BottomNav.svelte';
 	import '../app.css';
 
 	let { children } = $props();
-
-	let activeTab = $state('home');
 </script>
 
 <main>
 	{@render children()}
-	<BottomNav {activeTab} profileSrc="https://picsum.photos/200" />
 </main>
diff --git a/platforms/metagram/src/routes/+page.svelte b/platforms/metagram/src/routes/+page.svelte
index 0f949547..ab9f5e28 100644
--- a/platforms/metagram/src/routes/+page.svelte
+++ b/platforms/metagram/src/routes/+page.svelte
@@ -1,10 +1,7 @@
-<main>
-	<section aria-labelledby="main-title">
-		<h1 id="main-title" tabindex="-1">metagram</h1>
-		<h2 id="subtitle">metagram</h2>
-		<h3 id="section-title">metagram</h3>
-		<p>metagram</p>
-		<p class="small">metagram</p>
-		<p class="subtext">metagram</p>
-	</section>
-</main>
+<script lang="ts">
+	import { goto } from '$app/navigation';
+
+	$effect(() => {
+		goto('/home');
+	});
+</script>

From a6a66430d7d57b76463c008b39d6e0554fce0804 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Wed, 14 May 2025 14:18:26 +0530
Subject: [PATCH 10/14] feat: app transitions added

---
 platforms/metagram/src/app.css                | 87 +++++++++++++++++++
 .../lib/fragments/BottomNav/BottomNav.svelte  |  6 ++
 platforms/metagram/src/routes/+layout.svelte  | 29 +++++++
 3 files changed, 122 insertions(+)

diff --git a/platforms/metagram/src/app.css b/platforms/metagram/src/app.css
index 4dbd4bbe..2f35e7bc 100644
--- a/platforms/metagram/src/app.css
+++ b/platforms/metagram/src/app.css
@@ -61,3 +61,90 @@
 		#f7a428 152.07%
 	);
 }
+
+/* Ensure background remains correct during transitions */
+:root[data-transition]::view-transition-group(root),
+:root[data-transition]::view-transition-old(root),
+:root[data-transition]::view-transition-new(root) {
+	background-color: white !important; /* Default to white */
+}
+
+/* Prevent flickering */
+:root[data-transition]::view-transition-old(root),
+:root[data-transition]::view-transition-new(root) {
+	contain: paint;
+	will-change: transform, opacity;
+}
+
+/* Slide-in from the right without fade */
+@keyframes slide-from-right {
+	from {
+		transform: translateX(100%); /* Start from the right */
+		opacity: 1; /* Ensure fully visible */
+	}
+	to {
+		transform: translateX(0); /* Move to original position */
+		opacity: 1;
+	}
+}
+
+/* Slide-out to the right without fade */
+@keyframes slide-to-right {
+	from {
+		transform: translateX(0); /* Start at original position */
+		opacity: 1;
+	}
+	to {
+		transform: translateX(100%); /* Move to the right */
+		opacity: 1;
+	}
+}
+
+/* Slide-in from the left without fade */
+@keyframes slide-from-left {
+	from {
+		transform: translateX(-100%); /* Start from the left */
+		opacity: 1;
+	}
+	to {
+		transform: translateX(0); /* Move to original position */
+		opacity: 1;
+	}
+}
+
+/* Slide-out to the left without fade */
+@keyframes slide-to-left {
+	from {
+		transform: translateX(0); /* Start at original position */
+		opacity: 1;
+	}
+	to {
+		transform: translateX(-100%); /* Move to the left */
+		opacity: 1;
+	}
+}
+
+@keyframes fade-out {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+:root[data-transition]::view-transition-old(root) {
+	animation: 400ms ease-out both fade-out;
+}
+
+:root[data-transition='right']::view-transition-new(root) {
+	animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+	position: relative;
+	z-index: 1;
+}
+
+:root[data-transition='left']::view-transition-new(root) {
+	animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+	position: relative;
+	z-index: 1;
+}
diff --git a/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
index 2900c344..23f79369 100644
--- a/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
+++ b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
@@ -123,3 +123,9 @@
 		class="hidden"
 	/>
 </nav>
+
+<style>
+	nav {
+		view-transition-name: bottomNav;
+	}
+</style>
diff --git a/platforms/metagram/src/routes/+layout.svelte b/platforms/metagram/src/routes/+layout.svelte
index 25d330b4..b93233ef 100644
--- a/platforms/metagram/src/routes/+layout.svelte
+++ b/platforms/metagram/src/routes/+layout.svelte
@@ -1,7 +1,36 @@
 <script lang="ts">
+	import { onNavigate } from '$app/navigation';
 	import '../app.css';
 
 	let { children } = $props();
+
+	let previousRoute = null;
+
+	onNavigate((navigation) => {
+		if (!document.startViewTransition) return;
+
+		const currentRoute = navigation.from?.url.pathname;
+		const targetRoute = navigation.to?.url.pathname;
+
+		if (currentRoute === targetRoute) {
+			return;
+		}
+		const currentDirection = 'right';
+		document.documentElement.setAttribute('data-transition', currentDirection);
+		// if (!runtime.isNavigatingThroughNav) {
+		// 	const currentDirection = 'right';
+
+		// 	document.documentElement.setAttribute('data-transition', currentDirection);
+		// 	previousRoute = targetRoute;
+		// }
+
+		return new Promise((resolve) => {
+			document.startViewTransition(async () => {
+				resolve();
+				await navigation.complete;
+			});
+		});
+	});
 </script>
 
 <main>

From e5854cf2eb105f9383e51e101126b5808faf777e Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 15 May 2025 09:19:25 +0530
Subject: [PATCH 11/14] fix: direction of transition

---
 platforms/metagram/src/app.css                | 64 +++++++------------
 .../lib/fragments/BottomNav/BottomNav.svelte  | 27 ++++++--
 .../metagram/src/lib/store/store.svelte.ts    |  3 +
 platforms/metagram/src/routes/+layout.svelte  | 16 ++---
 4 files changed, 55 insertions(+), 55 deletions(-)
 create mode 100644 platforms/metagram/src/lib/store/store.svelte.ts

diff --git a/platforms/metagram/src/app.css b/platforms/metagram/src/app.css
index 2f35e7bc..84b85954 100644
--- a/platforms/metagram/src/app.css
+++ b/platforms/metagram/src/app.css
@@ -66,85 +66,65 @@
 :root[data-transition]::view-transition-group(root),
 :root[data-transition]::view-transition-old(root),
 :root[data-transition]::view-transition-new(root) {
-	background-color: white !important; /* Default to white */
+	background-color: white !important;
 }
 
-/* Prevent flickering */
 :root[data-transition]::view-transition-old(root),
 :root[data-transition]::view-transition-new(root) {
 	contain: paint;
 	will-change: transform, opacity;
 }
 
-/* Slide-in from the right without fade */
-@keyframes slide-from-right {
+@keyframes slide-in-from-right {
 	from {
-		transform: translateX(100%); /* Start from the right */
-		opacity: 1; /* Ensure fully visible */
+		transform: translateX(100%);
 	}
 	to {
-		transform: translateX(0); /* Move to original position */
-		opacity: 1;
+		transform: translateX(0);
 	}
 }
 
-/* Slide-out to the right without fade */
-@keyframes slide-to-right {
+@keyframes slide-out-to-left {
 	from {
-		transform: translateX(0); /* Start at original position */
-		opacity: 1;
+		transform: translateX(0);
 	}
 	to {
-		transform: translateX(100%); /* Move to the right */
-		opacity: 1;
+		transform: translateX(-100%);
 	}
 }
 
-/* Slide-in from the left without fade */
-@keyframes slide-from-left {
+@keyframes slide-in-from-left {
 	from {
-		transform: translateX(-100%); /* Start from the left */
-		opacity: 1;
+		transform: translateX(-100%);
 	}
 	to {
-		transform: translateX(0); /* Move to original position */
-		opacity: 1;
+		transform: translateX(0);
 	}
 }
 
-/* Slide-out to the left without fade */
-@keyframes slide-to-left {
+@keyframes slide-out-to-right {
 	from {
-		transform: translateX(0); /* Start at original position */
-		opacity: 1;
+		transform: translateX(0);
 	}
 	to {
-		transform: translateX(-100%); /* Move to the left */
-		opacity: 1;
+		transform: translateX(100%);
 	}
 }
 
-@keyframes fade-out {
-	from {
-		opacity: 1;
-	}
-	to {
-		opacity: 0;
-	}
+/* Right direction */
+:root[data-transition='right']::view-transition-old(root) {
+	animation: 300ms ease-in-out both slide-out-to-left;
 }
 
-:root[data-transition]::view-transition-old(root) {
-	animation: 400ms ease-out both fade-out;
+:root[data-transition='right']::view-transition-new(root) {
+	animation: 300ms ease-in-out both slide-in-from-right;
 }
 
-:root[data-transition='right']::view-transition-new(root) {
-	animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
-	position: relative;
-	z-index: 1;
+/* Left direction */
+:root[data-transition='left']::view-transition-old(root) {
+	animation: 300ms ease-in-out both slide-out-to-right;
 }
 
 :root[data-transition='left']::view-transition-new(root) {
-	animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
-	position: relative;
-	z-index: 1;
+	animation: 300ms ease-in-out both slide-in-from-left;
 }
diff --git a/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
index 23f79369..05e01392 100644
--- a/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
+++ b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
@@ -2,6 +2,7 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { Home, CommentsTwo, Search, Camera } from '$lib/icons';
 	import { goto } from '$app/navigation';
+	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
 
 	interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
 		activeTab: string;
@@ -11,6 +12,22 @@
 		activeTab = $bindable('home'),
 		profileSrc = 'https://picsum.photos/200'
 	}: IBottomNavProps = $props();
+
+	const tabs = ['home', 'discover', 'post', 'messages', 'profile'];
+	let previousTab = $state('home');
+
+	const handleNavClick = (newTab: string) => {
+		isNavigatingThroughNav.value = true;
+
+		const fromIndex = tabs.indexOf(previousTab);
+		const toIndex = tabs.indexOf(newTab);
+
+		const direction = toIndex > fromIndex ? 'right' : 'left';
+		document.documentElement.setAttribute('data-transition', direction);
+
+		previousTab = newTab;
+		goto(`/${newTab}`);
+	};
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
@@ -21,7 +38,7 @@
 >
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="home" onclick={() => goto('/home')}>
+	<label for="home" onclick={() => handleNavClick('home')}>
 		<Home
 			size="24px"
 			color={activeTab === 'home'
@@ -41,7 +58,7 @@
 
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="discover" onclick={() => goto('/discover')}>
+	<label for="discover" onclick={() => handleNavClick('discover')}>
 		<Search
 			size="24px"
 			color={activeTab === 'discover'
@@ -61,7 +78,7 @@
 
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="post" onclick={() => goto('/post')}>
+	<label for="post" onclick={() => handleNavClick('post')}>
 		<Camera
 			size="24px"
 			color={activeTab === 'post'
@@ -81,7 +98,7 @@
 
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="messages" onclick={() => goto('/messages')}>
+	<label for="messages" onclick={() => handleNavClick('messages')}>
 		<CommentsTwo
 			size="24px"
 			color={activeTab === 'messages'
@@ -101,7 +118,7 @@
 
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="profile" onclick={() => goto('/profile')}>
+	<label for="profile" onclick={() => handleNavClick('profile')}>
 		<span
 			class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`}
 		>
diff --git a/platforms/metagram/src/lib/store/store.svelte.ts b/platforms/metagram/src/lib/store/store.svelte.ts
new file mode 100644
index 00000000..db7b38da
--- /dev/null
+++ b/platforms/metagram/src/lib/store/store.svelte.ts
@@ -0,0 +1,3 @@
+export const isNavigatingThroughNav = $state({
+	value: false
+});
diff --git a/platforms/metagram/src/routes/+layout.svelte b/platforms/metagram/src/routes/+layout.svelte
index b93233ef..8a33cead 100644
--- a/platforms/metagram/src/routes/+layout.svelte
+++ b/platforms/metagram/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onNavigate } from '$app/navigation';
+	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
 	import '../app.css';
 
 	let { children } = $props();
@@ -15,14 +16,13 @@
 		if (currentRoute === targetRoute) {
 			return;
 		}
-		const currentDirection = 'right';
-		document.documentElement.setAttribute('data-transition', currentDirection);
-		// if (!runtime.isNavigatingThroughNav) {
-		// 	const currentDirection = 'right';
-
-		// 	document.documentElement.setAttribute('data-transition', currentDirection);
-		// 	previousRoute = targetRoute;
-		// }
+
+		if (!isNavigatingThroughNav.value) {
+			const currentDirection = 'right';
+
+			document.documentElement.setAttribute('data-transition', currentDirection);
+			previousRoute = targetRoute;
+		}
 
 		return new Promise((resolve) => {
 			document.startViewTransition(async () => {

From b3654c5a3c52e417e25de2d34b9079c558f7358c Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 15 May 2025 09:20:15 +0530
Subject: [PATCH 12/14] fix: transition css

---
 platforms/metagram/src/app.css | 64 ++++++++++++++++++++++------------
 1 file changed, 42 insertions(+), 22 deletions(-)

diff --git a/platforms/metagram/src/app.css b/platforms/metagram/src/app.css
index 84b85954..2f35e7bc 100644
--- a/platforms/metagram/src/app.css
+++ b/platforms/metagram/src/app.css
@@ -66,65 +66,85 @@
 :root[data-transition]::view-transition-group(root),
 :root[data-transition]::view-transition-old(root),
 :root[data-transition]::view-transition-new(root) {
-	background-color: white !important;
+	background-color: white !important; /* Default to white */
 }
 
+/* Prevent flickering */
 :root[data-transition]::view-transition-old(root),
 :root[data-transition]::view-transition-new(root) {
 	contain: paint;
 	will-change: transform, opacity;
 }
 
-@keyframes slide-in-from-right {
+/* Slide-in from the right without fade */
+@keyframes slide-from-right {
 	from {
-		transform: translateX(100%);
+		transform: translateX(100%); /* Start from the right */
+		opacity: 1; /* Ensure fully visible */
 	}
 	to {
-		transform: translateX(0);
+		transform: translateX(0); /* Move to original position */
+		opacity: 1;
 	}
 }
 
-@keyframes slide-out-to-left {
+/* Slide-out to the right without fade */
+@keyframes slide-to-right {
 	from {
-		transform: translateX(0);
+		transform: translateX(0); /* Start at original position */
+		opacity: 1;
 	}
 	to {
-		transform: translateX(-100%);
+		transform: translateX(100%); /* Move to the right */
+		opacity: 1;
 	}
 }
 
-@keyframes slide-in-from-left {
+/* Slide-in from the left without fade */
+@keyframes slide-from-left {
 	from {
-		transform: translateX(-100%);
+		transform: translateX(-100%); /* Start from the left */
+		opacity: 1;
 	}
 	to {
-		transform: translateX(0);
+		transform: translateX(0); /* Move to original position */
+		opacity: 1;
 	}
 }
 
-@keyframes slide-out-to-right {
+/* Slide-out to the left without fade */
+@keyframes slide-to-left {
 	from {
-		transform: translateX(0);
+		transform: translateX(0); /* Start at original position */
+		opacity: 1;
 	}
 	to {
-		transform: translateX(100%);
+		transform: translateX(-100%); /* Move to the left */
+		opacity: 1;
 	}
 }
 
-/* Right direction */
-:root[data-transition='right']::view-transition-old(root) {
-	animation: 300ms ease-in-out both slide-out-to-left;
+@keyframes fade-out {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
 }
 
-:root[data-transition='right']::view-transition-new(root) {
-	animation: 300ms ease-in-out both slide-in-from-right;
+:root[data-transition]::view-transition-old(root) {
+	animation: 400ms ease-out both fade-out;
 }
 
-/* Left direction */
-:root[data-transition='left']::view-transition-old(root) {
-	animation: 300ms ease-in-out both slide-out-to-right;
+:root[data-transition='right']::view-transition-new(root) {
+	animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+	position: relative;
+	z-index: 1;
 }
 
 :root[data-transition='left']::view-transition-new(root) {
-	animation: 300ms ease-in-out both slide-in-from-left;
+	animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
+	position: relative;
+	z-index: 1;
 }

From 8827020df97015f86afaec76f45d2cd6ca5e2c31 Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Thu, 15 May 2025 09:26:16 +0530
Subject: [PATCH 13/14] fix: directionable transition

---
 .../metagram/src/routes/(protected)/home/+page.svelte     | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index 2712d880..1706b468 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
+	import { Button } from '$lib/ui';
 	import { activeTab } from '../store.svelte';
 
 	$effect(() => {
@@ -7,3 +10,8 @@
 </script>
 
 <h1>Home</h1>
+<Button
+	callback={async () => {
+		(isNavigatingThroughNav.value = false), goto('/discover');
+	}}>discover</Button
+>

From d3924bfb33e8ab42b6305a06884f568de5e104dd Mon Sep 17 00:00:00 2001
From: gourav <gourav@auvo.io>
Date: Mon, 19 May 2025 12:36:35 +0530
Subject: [PATCH 14/14] fix: used button instead of label, and used page from
 state

---
 .../lib/fragments/BottomNav/BottomNav.svelte  | 104 ++++++++----------
 .../src/routes/(protected)/+layout.svelte     |   4 +-
 .../routes/(protected)/discover/+page.svelte  |   5 -
 .../src/routes/(protected)/home/+page.svelte  |   5 -
 .../routes/(protected)/messages/+page.svelte  |   5 -
 .../src/routes/(protected)/post/+page.svelte  |   5 -
 .../routes/(protected)/profile/+page.svelte   |   5 -
 .../src/routes/(protected)/store.svelte.ts    |   3 -
 8 files changed, 44 insertions(+), 92 deletions(-)
 delete mode 100644 platforms/metagram/src/routes/(protected)/store.svelte.ts

diff --git a/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
index 05e01392..c8cd4ec2 100644
--- a/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
+++ b/platforms/metagram/src/lib/fragments/BottomNav/BottomNav.svelte
@@ -3,9 +3,10 @@
 	import { Home, CommentsTwo, Search, Camera } from '$lib/icons';
 	import { goto } from '$app/navigation';
 	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
+	import { page } from '$app/state';
 
 	interface IBottomNavProps extends HTMLAttributes<HTMLElement> {
-		activeTab: string;
+		activeTab?: string;
 		profileSrc: string;
 	}
 	let {
@@ -15,8 +16,10 @@
 
 	const tabs = ['home', 'discover', 'post', 'messages', 'profile'];
 	let previousTab = $state('home');
+	let _activeTab = $derived(page.url.pathname);
 
 	const handleNavClick = (newTab: string) => {
+		// activeTab = newTab;
 		isNavigatingThroughNav.value = true;
 
 		const fromIndex = tabs.indexOf(previousTab);
@@ -28,6 +31,10 @@
 		previousTab = newTab;
 		goto(`/${newTab}`);
 	};
+
+	$effect(() => {
+		activeTab = _activeTab.split('/').pop() ?? '';
+	});
 </script>
 
 <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
@@ -36,9 +43,12 @@
 	class="fixed start-0 bottom-0 flex w-full items-center justify-between px-7 py-2 sm:hidden"
 	role="tablist"
 >
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="home" onclick={() => handleNavClick('home')}>
+	<button
+		type="button"
+		class="flex flex-col items-center"
+		aria-current={activeTab === 'home' ? 'page' : undefined}
+		onclick={() => handleNavClick('home')}
+	>
 		<Home
 			size="24px"
 			color={activeTab === 'home'
@@ -46,19 +56,14 @@
 				: 'var(--color-black-400)'}
 			fill={activeTab === 'home' ? 'var(--color-brand-burnt-orange)' : 'white'}
 		/>
-	</label>
-	<input
-		id="home"
-		type="radio"
-		value="home"
-		bind:group={activeTab}
-		name={'navTabs'}
-		class="hidden"
-	/>
+	</button>
 
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="discover" onclick={() => handleNavClick('discover')}>
+	<button
+		type="button"
+		class="flex flex-col items-center"
+		aria-current={activeTab === 'discover' ? 'page' : undefined}
+		onclick={() => handleNavClick('discover')}
+	>
 		<Search
 			size="24px"
 			color={activeTab === 'discover'
@@ -66,19 +71,14 @@
 				: 'var(--color-black-400)'}
 			fill={activeTab === 'discover' ? 'var(--color-brand-burnt-orange)' : 'white'}
 		/>
-	</label>
-	<input
-		id="discover"
-		type="radio"
-		value="discover"
-		bind:group={activeTab}
-		name={'navTabs'}
-		class="hidden"
-	/>
+	</button>
 
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="post" onclick={() => handleNavClick('post')}>
+	<button
+		type="button"
+		class="flex flex-col items-center"
+		aria-current={activeTab === 'post' ? 'page' : undefined}
+		onclick={() => handleNavClick('post')}
+	>
 		<Camera
 			size="24px"
 			color={activeTab === 'post'
@@ -86,19 +86,14 @@
 				: 'var(--color-black-400)'}
 			fill={activeTab === 'post' ? 'var(--color-brand-burnt-orange)' : 'white'}
 		/>
-	</label>
-	<input
-		id="post"
-		type="radio"
-		value="post"
-		bind:group={activeTab}
-		name={'navTabs'}
-		class="hidden"
-	/>
+	</button>
 
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="messages" onclick={() => handleNavClick('messages')}>
+	<button
+		type="button"
+		class="flex flex-col items-center"
+		aria-current={activeTab === 'messages' ? 'page' : undefined}
+		onclick={() => handleNavClick('messages')}
+	>
 		<CommentsTwo
 			size="24px"
 			color={activeTab === 'messages'
@@ -106,19 +101,14 @@
 				: 'var(--color-black-400)'}
 			fill={activeTab === 'messages' ? 'var(--color-brand-burnt-orange)' : 'white'}
 		/>
-	</label>
-	<input
-		id="messages"
-		type="radio"
-		value="messages"
-		bind:group={activeTab}
-		name={'navTabs'}
-		class="hidden"
-	/>
+	</button>
 
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<label for="profile" onclick={() => handleNavClick('profile')}>
+	<button
+		type="button"
+		class="flex flex-col items-center"
+		aria-current={activeTab === 'profile' ? 'page' : undefined}
+		onclick={() => handleNavClick('profile')}
+	>
 		<span
 			class={`inline-block w-full rounded-full border p-1 ${activeTab === 'profile' ? 'border-brand-burnt-orange' : 'border-transparent'}`}
 		>
@@ -130,15 +120,7 @@
 				alt="profile"
 			/>
 		</span>
-	</label>
-	<input
-		id="profile"
-		type="radio"
-		value="profile"
-		bind:group={activeTab}
-		name={'navTabs'}
-		class="hidden"
-	/>
+	</button>
 </nav>
 
 <style>
diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte
index 0912083f..1fb8b93d 100644
--- a/platforms/metagram/src/routes/(protected)/+layout.svelte
+++ b/platforms/metagram/src/routes/(protected)/+layout.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
 	import { BottomNav } from '$lib/fragments';
-	import { activeTab } from './store.svelte';
-
 	let { children } = $props();
 </script>
 
 <main>
 	{@render children()}
-	<BottomNav bind:activeTab={activeTab.value} profileSrc="https://picsum.photos/200" />
+	<BottomNav profileSrc="https://picsum.photos/200" />
 </main>
diff --git a/platforms/metagram/src/routes/(protected)/discover/+page.svelte b/platforms/metagram/src/routes/(protected)/discover/+page.svelte
index 705d834a..68085d8d 100644
--- a/platforms/metagram/src/routes/(protected)/discover/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/discover/+page.svelte
@@ -1,9 +1,4 @@
 <script lang="ts">
-	import { activeTab } from '../store.svelte';
-
-	$effect(() => {
-		activeTab.value = 'discover';
-	});
 </script>
 
 <h1>Discover Page</h1>
diff --git a/platforms/metagram/src/routes/(protected)/home/+page.svelte b/platforms/metagram/src/routes/(protected)/home/+page.svelte
index 1706b468..04ae6f62 100644
--- a/platforms/metagram/src/routes/(protected)/home/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/home/+page.svelte
@@ -2,11 +2,6 @@
 	import { goto } from '$app/navigation';
 	import { isNavigatingThroughNav } from '$lib/store/store.svelte';
 	import { Button } from '$lib/ui';
-	import { activeTab } from '../store.svelte';
-
-	$effect(() => {
-		activeTab.value = 'home';
-	});
 </script>
 
 <h1>Home</h1>
diff --git a/platforms/metagram/src/routes/(protected)/messages/+page.svelte b/platforms/metagram/src/routes/(protected)/messages/+page.svelte
index d7506a64..f19257d6 100644
--- a/platforms/metagram/src/routes/(protected)/messages/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/messages/+page.svelte
@@ -1,9 +1,4 @@
 <script lang="ts">
-	import { activeTab } from '../store.svelte';
-
-	$effect(() => {
-		activeTab.value = 'messages';
-	});
 </script>
 
 <h1>Messages</h1>
diff --git a/platforms/metagram/src/routes/(protected)/post/+page.svelte b/platforms/metagram/src/routes/(protected)/post/+page.svelte
index ef8ecf45..e27f433e 100644
--- a/platforms/metagram/src/routes/(protected)/post/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/post/+page.svelte
@@ -1,9 +1,4 @@
 <script lang="ts">
-	import { activeTab } from '../store.svelte';
-
-	$effect(() => {
-		activeTab.value = 'post';
-	});
 </script>
 
 <h1>Post</h1>
diff --git a/platforms/metagram/src/routes/(protected)/profile/+page.svelte b/platforms/metagram/src/routes/(protected)/profile/+page.svelte
index b64494ad..74ff5064 100644
--- a/platforms/metagram/src/routes/(protected)/profile/+page.svelte
+++ b/platforms/metagram/src/routes/(protected)/profile/+page.svelte
@@ -1,9 +1,4 @@
 <script lang="ts">
-	import { activeTab } from '../store.svelte';
-
-	$effect(() => {
-		activeTab.value = 'profile';
-	});
 </script>
 
 <h1>Profile</h1>
diff --git a/platforms/metagram/src/routes/(protected)/store.svelte.ts b/platforms/metagram/src/routes/(protected)/store.svelte.ts
deleted file mode 100644
index 8974a802..00000000
--- a/platforms/metagram/src/routes/(protected)/store.svelte.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const activeTab = $state({
-	value: ''
-});