requested changes done

Author: ananyayaya129

platforms/metagram/src/routes/(protected)/settings/+page.svelte

@@ -1,5 +1,80 @@
 <script lang="ts">
-	import SettingsPage from '$lib/fragments/SettingsPage/SettingsPage.svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import SettingsNavigationButton from '$lib/fragments/SettingsNavigationButton/SettingsNavigationButton.svelte';
+	import {
+		DatabaseIcon,
+		Logout01Icon,
+		Notification02FreeIcons
+	} from '@hugeicons/core-free-icons';
+	import { HugeiconsIcon } from '@hugeicons/svelte';
+
+	let route = $derived(page.url.pathname);
+
+	let username: string = $state('_.ananyayaya._');
+	let userEmail: string = $state('ananya@auvo.io');
 </script>
 
-<SettingsPage username="_.ananyayaya._" userEmail="ananya@auvo.io" />
+<div class="bg-grey rounded-xl p-3 md:p-5">
+	<SettingsNavigationButton
+		onclick={() => goto(`/settings/account`)}
+		profileSrc="https://picsum.photos/200/300"
+	>
+		{#snippet children()}
+			<div class="flex flex-col items-start">
+				<h2 class="text-lg">{username}</h2>
+				<p class="text-sm">{userEmail}</p>
+			</div>
+		{/snippet}
+	</SettingsNavigationButton>
+</div>
+<hr class="text-grey" />
+<div class="flex flex-col gap-3">
+	<h3 class="text-brand-burnt-orange text-base font-semibold">Personalisation</h3>
+	<div class="{route === `/settings/notifications` ? 'bg-grey' : ''} rounded-xl p-2">
+		<SettingsNavigationButton onclick={() => goto(`/settings/notifications`)}>
+			{#snippet leadingIcon()}
+				<HugeiconsIcon
+					size="24px"
+					icon={Notification02FreeIcons}
+					color="var(--color-brand-burnt-orange)"
+				/>
+			{/snippet}
+			{#snippet children()}
+				Notifications
+			{/snippet}
+		</SettingsNavigationButton>
+	</div>
+</div>
+<hr class="text-grey" />
+<div class="flex flex-col gap-3">
+	<h3 class="text-brand-burnt-orange text-base font-semibold">System</h3>
+	<div class="{route === `/settings/data-and-storage` ? 'bg-grey' : ''} rounded-xl p-2">
+		<SettingsNavigationButton onclick={() => goto(`/settings/data-and-storage`)}>
+			{#snippet leadingIcon()}
+				<HugeiconsIcon
+					size="24px"
+					icon={DatabaseIcon}
+					color="var(--color-brand-burnt-orange)"
+				/>
+			{/snippet}
+			{#snippet children()}
+				Data & Storage
+			{/snippet}
+		</SettingsNavigationButton>
+	</div>
+	<div class="{route === `/settings/logout` ? 'bg-grey' : ''} rounded-xl p-2">
+		<SettingsNavigationButton onclick={() => goto(`/settings/logout`)}>
+			{#snippet leadingIcon()}
+				<HugeiconsIcon
+					size="24px"
+					icon={Logout01Icon}
+					color="var(--color-brand-burnt-orange)"
+				/>
+			{/snippet}
+			{#snippet children()}
+				Logout
+			{/snippet}
+		</SettingsNavigationButton>
+	</div>
+</div>

platforms/metagram/src/routes/(protected)/settings/account/deactivate/+page.svelte

@@ -1,5 +1,4 @@
 <script>
-	import { goto } from '$app/navigation';
 	import { SettingsNavigationButton } from '$lib/fragments';
 	import { Button } from '$lib/ui';
 </script>

platforms/metagram/src/routes/(protected)/settings/account/username/+page.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import { Button, Helper, Input, Label } from '$lib/ui';
+
+	let username: string;
 </script>
 
 <div>
 	<Label>Change your username</Label>
-	<Input type="text" placeholder="Edit Username" />
+	<Input type="text" placeholder="Edit Username" bind:value={username} />
 	<Helper>You can only do this 3 more times</Helper>
 </div>
 <hr class="text-grey" />

platforms/metagram/src/routes/(protected)/settings/data-and-storage/+page.svelte

@@ -1,24 +1,11 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import { SettingsNavigationButton } from '$lib/fragments';
 </script>
 
 <div class="flex flex-col gap-3">
-	<SettingsNavigationButton onclick={() => goto('/settings/data-and-storage/clear-cache')}>
+	<SettingsNavigationButton>
 		{#snippet children()}
-			Clear cache
-		{/snippet}
-	</SettingsNavigationButton>
-	<hr class="text-grey" />
-	<SettingsNavigationButton onclick={() => goto('/settings/data-and-storage/download-data')}>
-		{#snippet children()}
-			Download my data
-		{/snippet}
-	</SettingsNavigationButton>
-	<hr class="text-grey" />
-	<SettingsNavigationButton onclick={() => goto('/settings/data-and-storage/active-devices')}>
-		{#snippet children()}
-			Logged in devices
+			Merul will add things here (as per out discussion)
 		{/snippet}
 	</SettingsNavigationButton>
 	<hr class="text-grey" />