fix: update Avatar component to use $ prefix for state access

Co-Authored-By: charis@supabase.io <charis@supabase.io>

examples/user-management/sveltekit-user-management/src/routes/account/+page.svelte

@@ -17,23 +17,23 @@
 	const avatarUrl = state(profile?.avatar_url ?? '')
 
 	const handleSubmit = () => {
-		loading = true
+		$loading = true
 		return async ({ update }: { update: () => void }) => {
-			loading = false
+			$loading = false
 			update()
 		}
 	}
 
 	const handleSignOut = () => {
-		loading = true
+		$loading = true
 		return async ({ update }: { update: () => void }) => {
-			loading = false
+			$loading = false
 			update()
 		}
 	}
 
 	const handleUrlChange = (event: CustomEvent<string>) => {
-		avatarUrl = event.detail
+		$avatarUrl = event.detail
 	}
 </script>
 
@@ -47,7 +47,7 @@
 	>
 		<Avatar
 			{supabase}
-			urlProp={avatarUrl}
+			urlProp={$avatarUrl}
 			size={10}
 			on:urlChange={handleUrlChange}
 			on:upload={() => {
@@ -61,32 +61,32 @@
 
 		<div>
 			<label for="fullName">Full Name</label>
-			<input id="fullName" name="fullName" type="text" value={form?.fullName ?? fullName} />
+			<input id="fullName" name="fullName" type="text" value={form?.fullName ?? $fullName} />
 		</div>
 
 		<div>
 			<label for="username">Username</label>
-			<input id="username" name="username" type="text" value={form?.username ?? username} />
+			<input id="username" name="username" type="text" value={form?.username ?? $username} />
 		</div>
 
 		<div>
 			<label for="website">Website</label>
-			<input id="website" name="website" type="url" value={form?.website ?? website} />
+			<input id="website" name="website" type="url" value={form?.website ?? $website} />
 		</div>
 
 		<div>
 			<input
 				type="submit"
 				class="button block primary"
-				value={loading ? 'Loading...' : 'Update'}
-				disabled={loading}
+				value={$loading ? 'Loading...' : 'Update'}
+				disabled={$loading}
 			/>
 		</div>
 	</form>
 
 	<form method="post" action="?/signout" use:enhance={handleSignOut}>
 		<div>
-			<button class="button block" disabled={loading}>Sign Out</button>
+			<button class="button block" disabled={$loading}>Sign Out</button>
 		</div>
 	</form>
 </div>

examples/user-management/sveltekit-user-management/src/routes/account/Avatar.svelte

@@ -20,12 +20,12 @@
 
 	effect(() => {
 		// Update currentUrl when urlProp changes
-		currentUrl = urlProp
+		$currentUrl = urlProp
 	})
 
 	effect(() => {
 		// Dispatch urlChange event when currentUrl changes
-		dispatch('urlChange', currentUrl)
+		dispatch('urlChange', $currentUrl)
 	})
 
 	const downloadImage = async (path: string) => {
@@ -37,7 +37,7 @@
 			}
 
 			const imageUrl = URL.createObjectURL(imageData)
-			avatarUrl = imageUrl
+			$avatarUrl = imageUrl
 		} catch (error) {
 			if (error instanceof Error) {
 				console.log('Error downloading image: ', error.message)
@@ -47,7 +47,7 @@
 
 	const uploadAvatar = async (event: Event) => {
 		try {
-			uploading = true
+			$uploading = true
 			const input = event.target as HTMLInputElement
 			const files = input.files
 
@@ -65,7 +65,7 @@
 				throw error
 			}
 
-			currentUrl = filePath
+			$currentUrl = filePath
 			setTimeout(() => {
 				dispatch('upload')
 			}, 100)
@@ -74,31 +74,31 @@
 				alert(error.message)
 			}
 		} finally {
-			uploading = false
+			$uploading = false
 		}
 	}
 
 	effect(() => {
-		if (currentUrl) downloadImage(currentUrl)
+		if ($currentUrl) downloadImage($currentUrl)
 	})
 </script>
 
 <div>
-	{#if avatarUrl}
+	{#if $avatarUrl}
 		<img
-			src={avatarUrl}
-			alt={avatarUrl ? 'Avatar' : 'No image'}
+			src={$avatarUrl}
+			alt={$avatarUrl ? 'Avatar' : 'No image'}
 			class="avatar image"
 			style="height: {size}em; width: {size}em;"
 		/>
 	{:else}
 		<div class="avatar no-image" style="height: {size}em; width: {size}em;"></div>
 	{/if}
-	<input type="hidden" name="avatarUrl" value={currentUrl} />
+	<input type="hidden" name="avatarUrl" value={$currentUrl} />
 
 	<div style="width: {size}em;">
 		<label class="button primary block" for="single">
-			{uploading ? 'Uploading ...' : 'Upload'}
+			{$uploading ? 'Uploading ...' : 'Upload'}
 		</label>
 		<input
 			style="visibility: hidden; position:absolute;"
@@ -107,7 +107,7 @@
 			accept="image/*"
 			bind:this={fileInput}
 			onchange={uploadAvatar}
-			disabled={uploading}
+			disabled={$uploading}
 		/>
 	</div>
 </div>