refactor: user navigation and account settings

apps/web/src/routes/(dashboard)/settings/account/account-form.svelte

@@ -1,29 +1,13 @@
 <script lang="ts" context="module">
 	import { z } from 'zod';
 
-	// const languages = {
-	// 	en: 'English',
-	// 	fr: 'French',
-	// 	de: 'German',
-	// 	es: 'Spanish',
-	// 	pt: 'Portuguese',
-	// 	ru: 'Russian',
-	// 	ja: 'Japanese',
-	// 	ko: 'Korean',
-	// 	zh: 'Chinese'
-	// } as const;
-
-	// type Language = keyof typeof languages;
-
 	export const accountFormSchema = z.object({
 		name: z
 			.string({
 				required_error: 'Required.'
 			})
 			.min(2, 'Name must be at least 2 characters.')
-			.max(30, 'Name must not be longer than 30 characters'),
-		// Hack: https://github.com/colinhacks/zod/issues/2280
-		// language: z.enum(Object.keys(languages) as [Language, ...Language[]])
+			.max(30, 'Name must not be longer than 30 characters')
 	});
 
 	export type AccountFormSchema = typeof accountFormSchema;
@@ -32,10 +16,11 @@
 <script lang="ts">
 	import * as Form from '$lib/components/ui/form';
 	import type { SuperValidated } from 'sveltekit-superforms';
-	// import { cn } from '$lib/utils';
 	import { dev } from '$app/environment';
+	import type { LayoutData } from '../$types';
 
 	export let data: SuperValidated<AccountFormSchema>;
+	export let user: LayoutData['user'];
 </script>
 
 <Form.Root
@@ -49,33 +34,12 @@
 	<Form.Item>
 		<Form.Field name="name" {config}>
 			<Form.Label>Name</Form.Label>
-			<Form.Input placeholder="Your name" />
+			<Form.Input placeholder={user?.name} />
 			<Form.Description>
 				This is the name that will be displayed on your profile and in emails.
 			</Form.Description>
 			<Form.Validation />
 		</Form.Field>
 	</Form.Item>
-	<!-- <Form.Item>
-		<Form.Field {config} name="language" let:attrs>
-			{@const { value } = attrs.input}
-			<Form.Label>Language</Form.Label>
-			<Form.Select selected={{ value, label: languages[value] }}>
-				<Form.SelectTrigger
-					placeholder="Select language"
-					class={cn('w-[200px] justify-between', !attrs.input.value && 'text-muted-foreground')}
-				/>
-				<Form.SelectContent class="h-52 overflow-y-auto">
-					{#each Object.entries(languages) as [value, lang]}
-						<Form.SelectItem {value}>
-							{lang}
-						</Form.SelectItem>
-					{/each}
-				</Form.SelectContent>
-			</Form.Select>
-			<Form.Description>This is the language that will be used in the dashboard.</Form.Description>
-			<Form.Validation />
-		</Form.Field>
-	</Form.Item> -->
 	<Form.Button>Update account</Form.Button>
 </Form.Root>