refactor(toast): implemented toast.js refactored 'showToast' and updated pages accordingly

index.html

@@ -129,8 +129,8 @@
 
 		<!-- TOAST — same as product pages -->
 		<div class="toast" id="toast">
-			<span class="toast-icon">🛒</span>
-			<span id="toast-msg">Item added to cart!</span>
+			<span id="toast-icon" class="toast-icon"></span>
+			<span id="toast-msg"></span>
 			<span class="toast-view" onclick="window.location.href = 'cart.html'"
 				>View Cart</span
 			>
@@ -138,6 +138,7 @@
 
 		<script src="assets/js/components.js"></script>
 		<script src="assets/js/products.js"></script>
+		<script src="assets/js/toast.js"></script>
 		<script src="assets/js/cart.js"></script>
 
 		<script>
@@ -246,7 +247,10 @@
 				if (!product) return;
 
 				Cart.addItem(product, 1);
-				showToast(product.basic.name);
+				showToast({
+					title: `"${product.basic.name.substring(0, 30)}…" added to cart!`,
+					icon: "🛒",
+				});
 
 				button.classList.add("added");
 				setTimeout(() => button.classList.remove("added"), 1000);
@@ -254,20 +258,6 @@
 				animateToCart(button);
 			}
 
-			/* ─────────────────────────────
-				TOAST
-			───────────────────────────── */
-			function showToast(name) {
-				const toast = document.getElementById("toast");
-				document.getElementById("toast-msg").textContent = `"${name.substring(
-					0,
-					30
-				)}…" added to cart!`;
-
-				toast.classList.add("show");
-				setTimeout(() => toast.classList.remove("show"), 3500);
-			}
-
 			/* ─────────────────────────────
 				FLY ANIMATION (UNCHANGED)
 			───────────────────────────── */
@@ -324,7 +314,10 @@
 				if (!product) return;
 
 				Cart.addItem(product, 1);
-				showToast(product.basic.name);
+				showToast({
+					title: `"${product.basic.name.substring(0, 30)}…" added to cart!`,
+					icon: "🛒",
+				});
 				animateToCart(button);
 			});