add button for update portfolio

src/routes/portfolio/+page.svelte

@@ -13,6 +13,7 @@
 	let showModal = false;
 	let searchStockResult = [];
 	let orderBy = 'total';
+	let hasChanges = false;
 
 	onMount(() => {
 		const unsubscribe = authentication.subscribe((value) => {
@@ -134,25 +135,6 @@
 		}
 	}
 
-	async function handleSubmit(e) {
-		e.preventDefault();
-		const code = new FormData(e.target).get('stock_code').toUpperCase();
-
-		const data = await searchStock(code);
-		if (!data || data.length === 0) {
-			alert('Stock not found.');
-			return;
-		}
-
-		searchStockResult = data;
-		const alreadyInPortfolio = result.some((s) => s.code === data[0]?.code);
-
-		if (data.length === 1 && !alreadyInPortfolio) {
-			await addSelectedStock(data[0]);
-			closeModal()
-		}
-	}
-
 	async function addSelectedStock(newStock) {
 		const exists = result.some((stock) => stock.code === newStock.code);
 		if (exists) return;
@@ -174,6 +156,15 @@
 		await updatePortfolio(result);
 	}
 
+	async function applyChanges() {
+		try {
+			await updatePortfolio(result);
+			hasChanges = false;
+		} catch (err) {
+			console.error('Update failed', err);
+		}
+	}
+
 	function remove(code) {
 		result = result.filter((stock) => stock.code !== code);
 		updatePortfolio(result);
@@ -217,16 +208,12 @@
 	}
 
 	function handleInputChange(event) {
-		// Update stock quantity with the new value from the input field
 		const form = new FormData(event.target.closest('form'));
 		const code = form.get('code');
 		const quantity = parseInt(form.get('quantity')) || 0;
 
-		// Update the stock array with the new quantity
 		result = result.map((stock) => (stock.code === code ? { ...stock, quantity } : stock));
-
-		// Manually trigger form submission
-		event.target.form.requestSubmit();
+		hasChanges = true;
 	}
 </script>
 
@@ -340,11 +327,28 @@
 			</tbody>
 		</table>
 	</div>
+
+	{#if hasChanges}
+		<button
+			class="btn btn-primary apply-changes-btn"
+			on:click={applyChanges}
+		>
+			Apply Changes
+		</button>
+	{/if}
+
 {:else}
 	<div>No portfolio data available.</div>
 {/if}
 
 <style>
+    .apply-changes-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 100;
+    }
+
     .table-container {
         margin-top: 2rem;
         overflow-x: auto;

src/routes/stocks/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
 
 	let myStocks = ['AAPL', 'AME', 'BVMF:ABEV3'];
 	let result = [];
@@ -57,10 +58,10 @@
 
 <svelte:head>
 	<title>Stocks</title>
-	<meta name="description" content="About" />
+	<meta name="description" content="Stocks" />
 </svelte:head>
 
-<div>
+<div in:fade>
 	<div class="card">
 		<form on:submit={add}>
 			<input
@@ -74,7 +75,7 @@
 	</div>
 
 	{#if result.length !== 0}
-		<div class="result">
+		<div in:fade class="result">
 			{#each result as stock}
 				<div class="card card2">
 					<div class="stock-info">