settings and fixes

src/routes/account/+page.svelte

@@ -1,4 +1,4 @@
-<!-- src/routes/account/+page.svelte -->
+<!-- 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';
@@ -9,8 +9,11 @@
 	import { Button } from '$lib/components/ui/button';
 	import { DefaultUserSettings } from '$lib/types/user';
 	import { enhance } from '$app/forms';
+	import { toast } from 'svelte-sonner';
+	import { Toaster } from '$lib/components/ui/sonner';
+	import CheckIcon from '@lucide/svelte/icons/check';
 
-	let { data } = $props();
+	let { data, form } = $props();
 
 	function signOut() {
 		document.cookie = 'jwt=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
@@ -32,13 +35,18 @@
 		const d = new Date(date);
 		return d.toLocaleString();
 	};
+
+
 </script>
 
 <svelte:head>
 	<title>Account</title>
 </svelte:head>
 
+<Toaster></Toaster>
+
 <div class="container mx-auto max-w-3xl py-10">
+
 	<Card class="rounded-2xl shadow-sm">
 		<CardHeader>
 			<div class="flex items-center justify-between">
@@ -49,7 +57,19 @@
 
 		<CardContent class="space-y-6">
 			<!-- Editable Profile Form -->
-			<form method="POST" use:enhance class="space-y-6">
+			<form method="POST" class="space-y-6" use:enhance={({ formElement, formData, action, cancel, submitter }) => {
+					return async ({ result, update }) => {
+						console.log("bleh")
+						console.log(result.status)
+						if (result.status === 200) {
+							toast('Saved', {
+								icon: CheckIcon,
+								description: 'Your account has been saved!',
+							});
+						}
+					};
+				}
+			}>
 
 				<div class="grid gap-4 sm:grid-cols-2">
 					<div class="space-y-2">