feat: change settings pages

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

@@ -33,12 +33,25 @@
 				</div>
 			</DropdownMenu.Label>
 			<DropdownMenu.Separator />
+			<DropdownMenu.Item>Dashboards</DropdownMenu.Item>
+			<DropdownMenu.Item>Connectors</DropdownMenu.Item>
+			<DropdownMenu.Separator />
+			<DropdownMenu.Label class="text-xs leading-none text-muted-foreground">
+				Settings
+			</DropdownMenu.Label>
 			<DropdownMenu.Group>
 				<DropdownMenu.Item href="/settings">
 					Profile
-					<DropdownMenu.Shortcut>⇧⌘P</DropdownMenu.Shortcut>
 				</DropdownMenu.Item>
-				<DropdownMenu.Item>New Dashboard</DropdownMenu.Item>
+				<DropdownMenu.Item href="/settings/account">
+					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/lib/components/site/site-header.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	import * as PageHeader from './page-header';
-	export let title: string, subTitle: string;
-</script>
-
-<PageHeader.Root class="pb-8">
-	<PageHeader.Heading>{title}</PageHeader.Heading>
-	<PageHeader.Description>
-		{subTitle}
-	</PageHeader.Description>
-	<slot />
-</PageHeader.Root>

apps/web/src/lib/components/site/site-navbar.svelte

@@ -18,11 +18,9 @@
 		</a>
 		<MainNav {authenticated} />
 		<div class="flex flex-1 items-center justify-end space-x-2 sm:space-x-4">
-			<nav class="flex">
+			<ModeToggle />
-				<ModeToggle />
-			</nav>
-			<MobileNav {authenticated} />
 			<UserNav {authenticated} {user} />
+			<MobileNav {authenticated} />
 		</div>
 	</div>
 </header>

apps/web/src/routes/(auth)/+layout.svelte

@@ -0,0 +1,3 @@
+<div class="space-y-6 p-10 pb-16 md:block">
+  <slot />
+</div>

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

@@ -1,19 +1,19 @@
 <script lang="ts" context="module">
 	import { z } from 'zod';
 
-	const languages = {
+	// const languages = {
-		en: 'English',
+	// 	en: 'English',
-		fr: 'French',
+	// 	fr: 'French',
-		de: 'German',
+	// 	de: 'German',
-		es: 'Spanish',
+	// 	es: 'Spanish',
-		pt: 'Portuguese',
+	// 	pt: 'Portuguese',
-		ru: 'Russian',
+	// 	ru: 'Russian',
-		ja: 'Japanese',
+	// 	ja: 'Japanese',
-		ko: 'Korean',
+	// 	ko: 'Korean',
-		zh: 'Chinese'
+	// 	zh: 'Chinese'
-	} as const;
+	// } as const;
 
-	type Language = keyof typeof languages;
+	// type Language = keyof typeof languages;
 
 	export const accountFormSchema = z.object({
 		name: z
@@ -23,7 +23,7 @@
 			.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[]])
+		// language: z.enum(Object.keys(languages) as [Language, ...Language[]])
 	});
 
 	export type AccountFormSchema = typeof accountFormSchema;
@@ -32,7 +32,8 @@
 <script lang="ts">
 	import * as Form from '$lib/components/ui/form';
 	import type { SuperValidated } from 'sveltekit-superforms';
-	import { cn } from '$lib/utils';
+	// import { cn } from '$lib/utils';
+	import { dev } from '$app/environment';
 
 	export let data: SuperValidated<AccountFormSchema>;
 </script>
@@ -43,7 +44,7 @@
 	let:config
 	schema={accountFormSchema}
 	form={data}
-	debug={true}
+	debug={dev ? true : false}
 >
 	<Form.Item>
 		<Form.Field name="name" {config}>
@@ -55,7 +56,7 @@
 			<Form.Validation />
 		</Form.Field>
 	</Form.Item>
-	<Form.Item>
+	<!-- <Form.Item>
 		<Form.Field {config} name="language" let:attrs>
 			{@const { value } = attrs.input}
 			<Form.Label>Language</Form.Label>
@@ -75,6 +76,6 @@
 			<Form.Description>This is the language that will be used in the dashboard.</Form.Description>
 			<Form.Validation />
 		</Form.Field>
-	</Form.Item>
+	</Form.Item> -->
 	<Form.Button>Update account</Form.Button>
 </Form.Root>

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

@@ -3,13 +3,9 @@
 	import { z } from 'zod';
 
 	export const appearanceFormSchema = z.object({
-		theme: z.enum(['light', 'dark'], {
+		theme: z.enum(['light', 'dark', 'system'], {
 			required_error: 'Please select a theme.'
 		}),
-		font: z.enum(['inter', 'manrope', 'system'], {
-			invalid_type_error: 'Select a font',
-			required_error: 'Please select a font.'
-		})
 	});
 
 	export type AppearanceFormSchema = typeof appearanceFormSchema;
@@ -18,6 +14,7 @@
 <script lang="ts">
 	import * as Form from '$lib/components/ui/form';
 	import Label from '$lib/components/ui/label/label.svelte';
+	import { dev } from '$app/environment';
 	export let data: SuperValidated<AppearanceFormSchema>;
 </script>
 
@@ -27,28 +24,14 @@
 	class="space-y-8"
 	method="POST"
 	let:config
-	debug={true}
+	debug={dev ? true : false}
 >
-	<Form.Item>
-		<Form.Field {config} name="font">
-			<Form.Label>Font</Form.Label>
-			<div class="w-max">
-				<Form.NativeSelect class="w-[200px]">
-					<option value="inter">Inter</option>
-					<option value="manrope">Manrope</option>
-					<option value="system">System</option>
-				</Form.NativeSelect>
-			</div>
-			<Form.Description>Set the font you want to use in the dashboard.</Form.Description>
-			<Form.Validation />
-		</Form.Field>
-	</Form.Item>
 	<Form.Item>
 		<Form.Field {config} name="theme">
 			<Form.Label>Theme</Form.Label>
 			<Form.Description>Select the theme for the dashboard.</Form.Description>
 			<Form.Validation />
-			<Form.RadioGroup class="grid max-w-md grid-cols-2 gap-8 pt-2" orientation="horizontal">
+			<Form.RadioGroup class="grid max-w-xl grid-cols-3 gap-8 pt-2" orientation="horizontal">
 				<Label for="light" class="[&:has([data-state=checked])>div]:border-primary">
 					<Form.RadioItem id="light" value="light" class="sr-only" />
 					<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
@@ -91,6 +74,28 @@
 					</div>
 					<span class="block w-full p-2 text-center font-normal"> Dark </span>
 				</Label>
+				<Label for="system" class="[&:has([data-state=checked])>div]:border-primary">
+					<Form.RadioItem id="system" value="system" class="sr-only" />
+					<div
+						class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"
+					>
+						<div class="space-y-2 rounded-sm bg-slate-500 p-2">
+							<div class="space-y-2 rounded-md bg-slate-400 p-2 shadow-sm">
+								<div class="h-2 w-[80px] rounded-lg bg-slate-200" />
+								<div class="h-2 w-[100px] rounded-lg bg-slate-200" />
+							</div>
+							<div class="flex items-center space-x-2 rounded-md bg-slate-400 p-2 shadow-sm">
+								<div class="h-4 w-4 rounded-full bg-slate-200" />
+								<div class="h-2 w-[100px] rounded-lg bg-slate-200" />
+							</div>
+							<div class="flex items-center space-x-2 rounded-md bg-slate-400 p-2 shadow-sm">
+								<div class="h-4 w-4 rounded-full bg-slate-200" />
+								<div class="h-2 w-[100px] rounded-lg bg-slate-200" />
+							</div>
+						</div>
+					</div>
+					<span class="block w-full p-2 text-center font-normal"> System </span>
+				</Label>
 			</Form.RadioGroup>
 		</Form.Field>
 	</Form.Item>

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

@@ -1,14 +1,9 @@
 <script lang="ts" context="module">
 	import { z } from 'zod';
 	export const notificationsFormSchema = z.object({
-		type: z.enum(['all', 'mentions', 'none'], {
+		type: z.enum(['all', 'tickets', 'none'], {
 			required_error: 'You need to select a notification type.'
-		}),
+		})
-		mobile: z.boolean().default(false).optional(),
-		communication_emails: z.boolean().default(false).optional(),
-		social_emails: z.boolean().default(false).optional(),
-		marketing_emails: z.boolean().default(false).optional(),
-		security_emails: z.boolean()
 	});
 	type NotificationFormSchema = typeof notificationsFormSchema;
 </script>
@@ -18,6 +13,7 @@
 	import * as Form from '$lib/components/ui/form';
 	import { Label } from '$lib/components/ui/label';
 	export let data: SuperValidated<NotificationFormSchema>;
+	import { dev } from '$app/environment';
 </script>
 
 <Form.Root
@@ -26,7 +22,7 @@
 	let:config
 	method="POST"
 	class="space-y-8"
-	debug={true}
+	debug={dev ? true : false}
 >
 	<Form.Item>
 		<Form.Field {config} name="type">
@@ -34,11 +30,11 @@
 			<Form.RadioGroup class="flex flex-col space-y-1">
 				<div class="flex items-center space-x-3">
 					<Form.RadioItem value="all" id="all" />
-					<Label for="all" class="font-normal">All new messages</Label>
+					<Label for="all" class="font-normal">New tickets and SLA breaches</Label>
 				</div>
 				<div class="flex items-center space-x-3">
-					<Form.RadioItem value="mentions" id="mentions" />
+					<Form.RadioItem value="tickets" id="mentions" />
-					<Label for="mentions" class="font-normal">Direct messages and mentions</Label>
+					<Label for="mentions" class="font-normal">New tickets</Label>
 				</div>
 				<div class="flex items-center space-x-3">
 					<Form.RadioItem value="none" id="none" />
@@ -47,64 +43,5 @@
 			</Form.RadioGroup>
 		</Form.Field>
 	</Form.Item>
-	<div>
-		<h3 class="mb-4 text-lg font-medium">Email Notifications</h3>
-		<div class="space-y-4">
-			<Form.Field {config} name="communication_emails">
-				<Form.Item class="flex flex-row items-center justify-between rounded-lg border p-4">
-					<div class="space-y-0.5">
-						<Form.Label class="text-base">Communication emails</Form.Label>
-						<Form.Description>Receive emails about your account activity.</Form.Description>
-					</div>
-					<Form.Switch />
-				</Form.Item>
-			</Form.Field>
-			<Form.Field {config} name="marketing_emails">
-				<Form.Item class="flex flex-row items-center justify-between rounded-lg border p-4">
-					<div class="space-y-0.5">
-						<Form.Label class="text-base">Marketing emails</Form.Label>
-						<Form.Description>
-							Receive emails about new products, features, and more.
-						</Form.Description>
-					</div>
-					<Form.Switch />
-				</Form.Item>
-			</Form.Field>
-			<Form.Field {config} name="social_emails">
-				<Form.Item class="flex flex-row items-center justify-between rounded-lg border p-4">
-					<div class="space-y-0.5">
-						<Form.Label class="text-base">Social emails</Form.Label>
-						<Form.Description>
-							Receive emails for friend requests, follows, and more.
-						</Form.Description>
-					</div>
-					<Form.Switch />
-				</Form.Item>
-			</Form.Field>
-			<Form.Field {config} name="security_emails">
-				<Form.Item class="flex flex-row items-center justify-between rounded-lg border p-4">
-					<div class="space-y-0.5">
-						<Form.Label class="text-base">Security emails</Form.Label>
-						<Form.Description>
-							Receive emails about your account activity and security.
-						</Form.Description>
-					</div>
-					<Form.Switch />
-				</Form.Item>
-			</Form.Field>
-		</div>
-	</div>
-	<Form.Field {config} name="mobile">
-		<Form.Item class="flex flex-row items-start space-x-3 space-y-0">
-			<Form.Checkbox />
-			<div class="space-y-1 leading-none">
-				<Form.Label>Use different settings for my mobile devices</Form.Label>
-				<Form.Description>
-					You can manage your mobile notifications in the{' '}<a href="/settings">mobile settings</a
-					> page.
-				</Form.Description>
-			</div>
-		</Form.Item>
-	</Form.Field>
 	<Form.Button>Update notifications</Form.Button>
 </Form.Root>

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

@@ -18,7 +18,7 @@
 <script lang="ts">
 	import * as Form from '$lib/components/ui/form';
 	import type { SuperValidated } from 'sveltekit-superforms';
-
+	import { dev } from '$app/environment';
 	export let data: SuperValidated<ProfileFormSchema>;
 </script>
 
@@ -28,7 +28,7 @@
 	let:config
 	method="POST"
 	class="space-y-8"
-	debug={true}
+	debug={dev ? true : false}
 >
 	<Form.Item>
 		<Form.Field {config} name="username">