updates

src/routes/account/+page.svelte

@@ -17,16 +17,16 @@
 		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
-	});
+	// Use top-level variables for two-way binding. Binding to object properties
+	// like `form.name` doesn't create proper reactive two-way bindings in Svelte.
+	let name: string = $state(data.userData.name);
+	let email: string = $state(data.userData.email);
+	let staleItemDays: number =
+		$state(data.userData.settings?.staleItemDays ?? DefaultUserSettings.staleItemDays);
+	let notifyAllApprovedInquiries: boolean =
+		$state(data.userData.settings?.notifyAllApprovedInquiries ?? false);
+	let notifyAllTurnedInInquiries: boolean =
+		$state(data.userData.settings?.notifyAllTurnedInInquiries ?? false);
 
 	const formatDate = (date: Date | string) => {
 		const d = new Date(date);
@@ -50,6 +50,7 @@
 		<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>
@@ -57,64 +58,95 @@
 					</div>
 
 					<div class="space-y-2">
-						<Label for="name">Full Name</Label>
-						<Input id="name" name="name" bind:value={form.name} />
+						<Label for="name">Full Name<span class="text-error">*</span></Label>
+						<Input id="name" name="name" bind:value={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} />
+						<Label for="email">Email<span class="text-error">*</span></Label>
+						<Input id="email" name="email" type="email" bind:value={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"
-						/>
+						<Label for="newPassword">New Password</Label>
+						<Input id="newPassword" name="newPassword" />
 					</div>
+
+					<div class="space-y-2">
+						<Label for="retypeNewPassword">Retype New Password</Label>
+						<Input id="retypeNewPassword" name="retypeNewPassword" />
+					</div>
+
 				</div>
 
 				<Separator />
 
 				<div class="space-y-4">
-					<h2 class="text-lg font-semibold">Notifications</h2>
-
+					<h2 class="text-lg font-semibold">Settings</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}
+						<Label for="staleItemDays" class="text-base">
+							<div>
+								<p class="font-medium">Stale Item Days</p>
+								<p class="text-sm text-muted-foreground">
+									Number of days without activity before items show up as stale.
+								</p>
+							</div>
+						</Label>
+						<Input
+							class="w-min inline-block"
+							id="staleItemDays"
+							name="staleItemDays"
+							type="number"
+							bind:value={staleItemDays}
+							min="0"
 						/>
 					</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>
+						<Label for="notifyAllApprovedInquiries" class="text-base">
+							<div>
+
+								<p class="font-medium">Notify for All Approved Items</p>
+								<p class="text-sm text-muted-foreground">
+									Receive notifications for all approved items, not just yours.
+								</p>
+							</div>
+						</Label>
+						<Switch
+							name="notifyAllApprovedInquiries"
+							id="notifyAllApprovedInquiries"
+							bind:checked={notifyAllApprovedInquiries}
+						/>
+					</div>
+
+					<div class="flex items-center justify-between">
+						<Label for="notifyAllTurnedInInquiries" class="text-base">
+							<div>
+
+								<p class="font-medium">Notify for All Turned In Items</p>
+								<p class="text-sm text-muted-foreground">
+									Receive notifications for all items turned in to the school lost-and-found.
+								</p>
+							</div>
+						</Label>
 						<Switch
 							name="notifyAllTurnedInInquiries"
-							bind:checked={form.notifyAllTurnedInInquiries}
+							id="notifyAllTurnedInInquiries"
+							bind:checked={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
-					)}
+						<p>
+
+							Member since {formatDate(data.userData.createdAt)}
+						</p>
+						<p>
+
+							Last sign in {formatDate(data.userData.lastSignIn)}
+						</p>
 					</div>
 
 					<div class="flex gap-2">
@@ -127,4 +159,4 @@
 			</form>
 		</CardContent>
 	</Card>
-</div>
+</div>