account page

src/routes/account/+page.svelte

@@ -1,10 +1,130 @@
+<!-- src/routes/account/+page.svelte -->
 <script lang="ts">
+	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
+	import { Badge } from '$lib/components/ui/badge';
+	import { Separator } from '$lib/components/ui/separator';
+	import { Input } from '$lib/components/ui/input';
+	import { Label } from '$lib/components/ui/label';
+	import { Switch } from '$lib/components/ui/switch';
 	import { Button } from '$lib/components/ui/button';
+	import { DefaultUserSettings } from '$lib/types/user';
+	import { enhance } from '$app/forms';
+
+	let { data } = $props();
 
 	function signOut() {
 		document.cookie = 'jwt=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
 		window.location.href = '/';
 	}
+
+	let form = $derived({
+		name: data.userData.name,
+		email: data.userData.email,
+		staleItemDays:
+			data.userData.settings?.staleItemDays ?? DefaultUserSettings.staleItemDays,
+		notifyAllApprovedInquiries:
+			data.userData.settings?.notifyAllApprovedInquiries ?? false,
+		notifyAllTurnedInInquiries:
+			data.userData.settings?.notifyAllTurnedInInquiries ?? false
+	});
+
+	const formatDate = (date: Date | string) => {
+		const d = new Date(date);
+		return d.toLocaleString();
+	};
 </script>
 
-<Button onclick={signOut}>Sign out</Button>
+<svelte:head>
+	<title>Account</title>
+</svelte:head>
+
+<div class="container mx-auto max-w-3xl py-10">
+	<Card class="rounded-2xl shadow-sm">
+		<CardHeader>
+			<div class="flex items-center justify-between">
+				<CardTitle class="text-2xl font-semibold">Account Overview</CardTitle>
+				<Badge variant="secondary">ID #{data.userData.id}</Badge>
+			</div>
+		</CardHeader>
+
+		<CardContent class="space-y-6">
+			<!-- Editable Profile Form -->
+			<form method="POST" use:enhance class="space-y-6">
+				<div class="grid gap-4 sm:grid-cols-2">
+					<div class="space-y-2">
+						<Label for="username">Username</Label>
+						<Input id="username" value={data.userData.username} disabled />
+					</div>
+
+					<div class="space-y-2">
+						<Label for="name">Full Name</Label>
+						<Input id="name" name="name" bind:value={form.name} />
+					</div>
+
+					<div class="space-y-2 sm:col-span-2">
+						<Label for="email">Email</Label>
+						<Input id="email" name="email" type="email" bind:value={form.email} />
+					</div>
+
+					<div class="space-y-2">
+						<Label for="staleItemDays">Stale Item Days</Label>
+						<Input
+							id="staleItemDays"
+							name="staleItemDays"
+							type="number"
+							bind:value={form.staleItemDays}
+							min="0"
+						/>
+					</div>
+				</div>
+
+				<Separator />
+
+				<div class="space-y-4">
+					<h2 class="text-lg font-semibold">Notifications</h2>
+
+					<div class="flex items-center justify-between">
+						<div>
+							<p class="font-medium">Notify All Approved</p>
+							<p class="text-sm text-muted-foreground">
+								Receive notifications when inquiries are approved.
+							</p>
+						</div>
+						<Switch
+							name="notifyAllApprovedInquiries"
+							bind:checked={form.notifyAllApprovedInquiries}
+						/>
+					</div>
+
+					<div class="flex items-center justify-between">
+						<div>
+							<p class="font-medium">Notify All Turned In</p>
+							<p class="text-sm text-muted-foreground">
+								Receive notifications when inquiries are turned in.
+							</p>
+						</div>
+						<Switch
+							name="notifyAllTurnedInInquiries"
+							bind:checked={form.notifyAllTurnedInInquiries}
+						/>
+					</div>
+				</div>
+
+				<div class="flex items-center justify-between pt-4">
+					<div class="text-sm text-muted-foreground">
+						Member since {formatDate(data.userData.createdAt)} · Last sign in {formatDate(
+						data.userData.lastSignIn
+					)}
+					</div>
+
+					<div class="flex gap-2">
+						<Button type="submit">Save Changes</Button>
+						<Button type="button" onclick={signOut} variant="destructive">
+							Sign Out
+						</Button>
+					</div>
+				</div>
+			</form>
+		</CardContent>
+	</Card>
+</div>