refactor: user navigation and account settings

apps/web/src/lib/components/site/nav/user-nav.svelte

@@ -40,18 +40,10 @@
 				Settings
 			</DropdownMenu.Label>
 			<DropdownMenu.Group>
-				<DropdownMenu.Item href="/settings">
+				<DropdownMenu.Item href="/settings">Profile</DropdownMenu.Item>
-					Profile
+				<DropdownMenu.Item href="/settings/account">Account</DropdownMenu.Item>
-				</DropdownMenu.Item>
+				<DropdownMenu.Item href="/settings/appearance">Appearance</DropdownMenu.Item>
-				<DropdownMenu.Item href="/settings/account">
+				<DropdownMenu.Item href="/settings/notifications">Notifications</DropdownMenu.Item>
-					Account
-				</DropdownMenu.Item>
-				<DropdownMenu.Item href="/settings/appearance">
-					Appearance
-				</DropdownMenu.Item>
-				<DropdownMenu.Item href="/settings/notifications">
-					Notifications
-				</DropdownMenu.Item>
 			</DropdownMenu.Group>
 			<DropdownMenu.Separator />
 			<DropdownMenu.Item href="/logout">

apps/web/src/routes/(dashboard)/settings/account/+page.svelte

@@ -4,6 +4,7 @@
 	import type { PageData } from './$types';
 
 	export let data: PageData;
+	export let { form, user } = data;
 </script>
 
 <div class="space-y-6">
@@ -14,5 +15,5 @@
 		</p>
 	</div>
 	<Separator />
-	<AccountForm data={data.form} />
+	<AccountForm data={form} {user} />
 </div>

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'),
+			.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[]])
 	});
 
 	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>

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

@@ -5,7 +5,7 @@
 	export const appearanceFormSchema = z.object({
 		theme: z.enum(['light', 'dark', 'system'], {
 			required_error: 'Please select a theme.'
-		}),
+		})
 	});
 
 	export type AppearanceFormSchema = typeof appearanceFormSchema;

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

@@ -35,8 +35,7 @@
 			<Form.Label>Username</Form.Label>
 			<Form.Input placeholder="@shadcn" />
 			<Form.Description>
-				This is your public display name. It can be your real name or a pseudonym. You can only
+				This is your public display name. It can be your real name or a pseudonym.
-				change this once every 30 days.
 			</Form.Description>
 			<Form.Validation />
 		</Form.Field>