fix: live trade redirects only updating URL bar

website/src/lib/components/self/AppSidebar.svelte

@@ -89,8 +89,10 @@
 		setOpenMobile(false);
 	}
 
-	function handleTradeClick(coinSymbol: string) {
-		goto(`/coin/${coinSymbol.toLowerCase()}`);
+	async function handleTradeClick(coinSymbol: string) {
+		const targetPath = `/coin/${coinSymbol.toLowerCase()}`;
+
+		await goto(targetPath, { invalidateAll: true });
 		setOpenMobile(false);
 	}
 
@@ -443,11 +445,7 @@
 				<Sidebar.MenuItem>
 					<Sidebar.MenuButton>
 						{#snippet child({ props }: { props: MenuButtonProps })}
-							<a
-								href="/legal/terms"
-								onclick={handleTermsClick}
-								class={`${props.class}`}
-							>
+							<a href="/legal/terms" onclick={handleTermsClick} class={`${props.class}`}>
 								<Scale />
 								<span>Terms of Service</span>
 							</a>
@@ -457,11 +455,7 @@
 				<Sidebar.MenuItem>
 					<Sidebar.MenuButton>
 						{#snippet child({ props }: { props: MenuButtonProps })}
-							<a
-								href="/legal/privacy"
-								onclick={handlePrivacyClick}
-								class={`${props.class}`}
-							>
+							<a href="/legal/privacy" onclick={handlePrivacyClick} class={`${props.class}`}>
 								<ShieldCheck />
 								<span>Privacy Policy</span>
 							</a>

website/src/lib/stores/websocket.ts

@@ -226,6 +226,10 @@ function connect(): void {
 }
 
 function setCoin(coinSymbol: string): void {
+    if (activeCoin !== coinSymbol && activeCoin !== '@global') {
+        unsubscribeFromPriceUpdates(activeCoin);
+    }
+
     activeCoin = coinSymbol;
     sendMessage({ type: 'set_coin', coinSymbol });
 }

website/src/routes/coin/[coinSymbol]/+page.svelte

@@ -26,9 +26,10 @@
 	import { getPublicUrl, getTimeframeInSeconds } from '$lib/utils.js';
 	import { websocketController, type PriceUpdate, isConnectedStore } from '$lib/stores/websocket';
 	import SEO from '$lib/components/self/SEO.svelte';
+	import { page } from '$app/state';
 
 	const { data } = $props();
-	const coinSymbol = data.coinSymbol;
+	let coinSymbol = $derived(data.coinSymbol);
 	let coin = $state<any>(null);
 	let loading = $state(true);
 	let chartData = $state<any[]>([]);
@@ -63,6 +64,34 @@
 		};
 	});
 
+	// Handle route changes to update coin data
+	$effect(() => {
+		const currentCoinSymbol = page.params.coinSymbol;
+		if (currentCoinSymbol && currentCoinSymbol !== coinSymbol) {
+			loading = true;
+			coin = null;
+			chartData = [];
+			volumeData = [];
+			userHolding = 0;
+
+			// Unsubscribe from the old coin's updates
+			websocketController.unsubscribeFromPriceUpdates(coinSymbol.toUpperCase());
+
+			// Update the data prop which will trigger coinSymbol to update via $derived
+			data.coinSymbol = currentCoinSymbol;
+
+			// Load new coin data and set up new subscriptions
+			loadCoinData().then(() => {
+				loadUserHolding();
+				websocketController.setCoin(currentCoinSymbol.toUpperCase());
+				websocketController.subscribeToPriceUpdates(
+					currentCoinSymbol.toUpperCase(),
+					handlePriceUpdate
+				);
+			});
+		}
+	});
+
 	async function loadCoinData() {
 		try {
 			const response = await fetch(`/api/coin/${coinSymbol}?timeframe=${selectedTimeframe}`);