add feedback when preference is saved

src/routes/profile/+page.svelte

@@ -6,15 +6,12 @@
 
 	let isAuthenticated = false;
 	let isLoading = true;
-	let user = null;
 	let currency = 'USD';
 	let orderBy = 'total';
+	let preferenceSaved = false;
 
 	$: authentication.subscribe((value) => {
 		isAuthenticated = !!value;
-		if (value) {
-			user = value;
-		}
 	});
 
 	onMount(() => {
@@ -54,11 +51,18 @@
 	function updateCurrency(event) {
 		currency = event.target.value;
 		localStorage.setItem('defaultCurrency', currency);
+		showPreferenceSaved();
 	}
 
 	function updateOrderBy(event) {
 		orderBy = event.target.value;
 		localStorage.setItem('defaultOrder', orderBy);
+		showPreferenceSaved();
+	}
+
+	function showPreferenceSaved() {
+		preferenceSaved = true;
+		setTimeout(() => (preferenceSaved = false), 1000);
 	}
 
 </script>
@@ -68,70 +72,139 @@
 	<meta name="description" content="Profile" />
 </svelte:head>
 
-<div in:fade class="text-column">
+<div in:fade class="profile-container">
 	{#if isLoading}
 		<p>Loading...</p>
 	{:else if isAuthenticated}
-		<p>You are logged in as <strong>{user.username}</strong>!</p>
-
-		<div class="button-container">
-			<select class="form-control order-select" on:change={updateCurrency} value={currency}>
-				<option value="BRL">BRL</option>
-				<option value="EUR">EUR</option>
-				<option value="USD" selected>USD</option>
-			</select>
+		<div class="profile-header">
+<!--			<p class="welcome-message">Logged in as <strong>{user.username}</strong></p>-->
 		</div>
 
-		<div class="button-container">
-			<select class="form-control order-select" on:change={updateOrderBy} value={orderBy}>
-				<option value="code">Order by Code</option>
-				<option value="name">Order by Name</option>
-				<option value="total" selected>Order by Total</option>
-				<option value="weight">Order by Weight</option>
-			</select>
-		</div>
+		<div class="settings-card">
+			<h2>Preferences</h2>
+			<div class="settings-group">
+				<label for="currency">Currency:</label>
+				<select id="currency" class="form-control" on:change={updateCurrency} bind:value={currency}>
+					<option value="BRL">BRL</option>
+					<option value="EUR">EUR</option>
+					<option value="USD">USD</option>
+				</select>
+			</div>
+
+			<div class="settings-group">
+				<label for="orderBy">Order By:</label>
+				<select id="orderBy" class="form-control" on:change={updateOrderBy} bind:value={orderBy}>
+					<option value="code">Code</option>
+					<option value="name">Name</option>
+					<option value="total">Total</option>
+					<option value="weight">Weight</option>
+				</select>
+			</div>
+
+			<div class="settings-group">
+				<label for="theme">Theme:</label>
+				<select id="theme" class="form-control">
+					<option value="light">Light</option>
+					<!-- <option value="dark">Dark</option> -->
+				</select>
+			</div>
+
+			<div class="save-feedback">
+				<div in:fade out:fade class="saved-message" style="visibility: {preferenceSaved ? 'visible' : 'hidden'}">
+					✓ Preference saved
+				</div>
+			</div>
 
-		<div class="button-container">
-			<select class="form-control order-select">
-				<option value="light">Light</option>
-				<!--				<option value="dark">Dark</option>-->
-			</select>
 		</div>
 
 		<button class="logout-button" on:click={logout}>Logout</button>
+
 	{/if}
 </div>
 
 <style>
-    .button-container {
-        display: flex;
-        gap: 10px;
-        margin-bottom: 1rem;
-        align-items: center;
-        justify-content: flex-end;
+    .profile-container {
+        max-width: 600px;
+        margin: 2rem auto;
+        padding: 1rem;
     }
 
-    .order-select {
-        width: 200px;
-        padding: 0.5rem;
-        border-radius: 8px;
-        border: 1px solid #ddd;
-        font-size: 1rem;
-        background-color: #f9f9f9;
-        transition: border-color 0.3s ease;
+    .profile-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 1.5rem;
     }
 
-    .order-select:focus {
-        border-color: #2980b9;
-        outline: none;
+    .welcome-message {
+        margin: 0;
+        font-size: 1.1rem;
     }
 
     .logout-button {
         background-color: #f44336;
         color: white;
+        border: none;
+        border-radius: 8px;
+        padding: 0.5rem 1rem;
+        cursor: pointer;
     }
 
     .logout-button:hover {
         background-color: #d32f2f;
     }
+
+    .settings-card {
+        border: 1px solid #ddd;
+        border-radius: 10px;
+        padding: 1.5rem;
+        background-color: #fefefe;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+    }
+
+    .settings-card h2 {
+        margin-top: 0;
+        margin-bottom: 1rem;
+        font-size: 1.25rem;
+    }
+
+    .settings-group {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 1rem;
+    }
+
+    .settings-group label {
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+				width: 260px;
+    }
+
+    .form-control {
+        width: 100%;
+        padding: 0.5rem;
+        border-radius: 8px;
+        border: 1px solid #ccc;
+        background-color: #fff;
+        font-size: 1rem;
+    }
+
+    .save-feedback {
+        height: 2rem;
+        overflow: hidden;
+        position: relative;
+        margin-top: 1rem;
+    }
+
+    .saved-message {
+        color: green;
+        font-size: 0.9rem;
+        line-height: 1.2;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        text-align: left;
+    }
+
 </style>