improve preference page

src/routes/profile/+page.svelte

@@ -8,7 +8,9 @@
 	let isLoading = true;
 	let currency = 'USD';
 	let orderBy = 'total';
-	let preferenceSaved = false;
+	let savePreferenceDisabled = true;
+	let hasChanges = false;
+	let saveMessage = '';
 
 	$: authentication.subscribe((value) => {
 		isAuthenticated = !!value;
@@ -31,7 +33,7 @@
 			}
 
 			const defaultOrder = localStorage.getItem('defaultOrder');
-			if(defaultOrder) {
+			if (defaultOrder) {
 				orderBy = defaultOrder;
 			} else {
 				localStorage.setItem('defaultOrder', 'total');
@@ -50,19 +52,25 @@
 
 	function updateCurrency(event) {
 		currency = event.target.value;
-		localStorage.setItem('defaultCurrency', currency);
-		showPreferenceSaved();
+		hasChanges = true;
+		savePreferenceDisabled = false;
 	}
 
 	function updateOrderBy(event) {
 		orderBy = event.target.value;
-		localStorage.setItem('defaultOrder', orderBy);
-		showPreferenceSaved();
+		hasChanges = true;
+		savePreferenceDisabled = false;
 	}
 
-	function showPreferenceSaved() {
-		preferenceSaved = true;
-		setTimeout(() => (preferenceSaved = false), 1000);
+	function savePreferences() {
+		localStorage.setItem('defaultCurrency', currency);
+		localStorage.setItem('defaultOrder', orderBy);
+		savePreferenceDisabled = true;
+		saveMessage = 'Preferences saved successfully.';
+
+		setTimeout(() => {
+			saveMessage = '';
+		}, 2000);
 	}
 
 </script>
@@ -77,7 +85,7 @@
 		<p>Loading...</p>
 	{:else if isAuthenticated}
 		<div class="profile-header">
-<!--			<p class="welcome-message">Logged in as <strong>{user.username}</strong></p>-->
+			<!--			<p class="welcome-message">Logged in as <strong>{user.username}</strong></p>-->
 		</div>
 
 		<div class="settings-card">
@@ -109,15 +117,14 @@
 				</select>
 			</div>
 
-			<div class="save-feedback">
-				<div in:fade out:fade class="saved-message" style="visibility: {preferenceSaved ? 'visible' : 'hidden'}">
-					✓ Preference saved
-				</div>
-			</div>
-
+			<button class="save-preferences" on:click={savePreferences} disabled={savePreferenceDisabled}>Save preferences
+			</button>
+			<button class="logout-button" on:click={logout}>Logout</button>
 		</div>
 
-		<button class="logout-button" on:click={logout}>Logout</button>
+		{#if saveMessage}
+			<div in:fade out:fade class="save-message">{saveMessage}</div>
+		{/if}
 
 	{/if}
 </div>
@@ -136,13 +143,7 @@
         margin-bottom: 1.5rem;
     }
 
-    .welcome-message {
-        margin: 0;
-        font-size: 1.1rem;
-    }
-
-    .logout-button {
-        background-color: #f44336;
+    button {
         color: white;
         border: none;
         border-radius: 8px;
@@ -150,6 +151,14 @@
         cursor: pointer;
     }
 
+    .save-preferences {
+        background-color: #4caf50;
+    }
+
+    .logout-button {
+        background-color: #f44336;
+    }
+
     .logout-button:hover {
         background-color: #d32f2f;
     }
@@ -177,7 +186,7 @@
     .settings-group label {
         margin-bottom: 0.5rem;
         font-weight: 500;
-				width: 260px;
+        width: 260px;
     }
 
     .form-control {
@@ -189,22 +198,19 @@
         font-size: 1rem;
     }
 
-    .save-feedback {
+    button:disabled {
+        pointer-events: none;
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    .save-message {
+				color: green;
         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>