feat: live trades (/live & sidebar) + sidebar skeleton

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

@@ -12,7 +12,7 @@
 	import { formatTimeAgo, getPublicUrl } from '$lib/utils';
 	import SignInConfirmDialog from '$lib/components/self/SignInConfirmDialog.svelte';
 	import UserProfilePreview from '$lib/components/self/UserProfilePreview.svelte';
-	import WebSocket, { type WebSocketHandle } from '$lib/components/self/WebSocket.svelte';
+	import { websocketController } from '$lib/stores/websocket';
 
 	const { coinSymbol } = $props<{ coinSymbol: string }>();
 	import type { Comment } from '$lib/types/comment';
@@ -21,7 +21,15 @@
 	let isSubmitting = $state(false);
 	let isLoading = $state(true);
 	let shouldSignIn = $state(false);
-	let wsManager = $state<WebSocketHandle | undefined>();
+
+	$effect(() => {
+		websocketController.setCoin(coinSymbol);
+		websocketController.subscribeToComments(coinSymbol, handleWebSocketMessage);
+
+		return () => {
+			websocketController.unsubscribeFromComments(coinSymbol);
+		};
+	});
 
 	function handleWebSocketMessage(message: { type: string; data?: any }) {
 		switch (message.type) {
@@ -48,13 +56,6 @@
 		}
 	}
 
-	function handleWebSocketOpen() {
-		wsManager?.send({
-			type: 'set_coin',
-			coinSymbol
-		});
-	}
-
 	async function loadComments() {
 		try {
 			const response = await fetch(`/api/coin/${coinSymbol}/comments`);
@@ -151,13 +152,6 @@
 
 <SignInConfirmDialog bind:open={shouldSignIn} />
 
-<WebSocket
-	bind:this={wsManager}
-	onMessage={handleWebSocketMessage}
-	onOpen={handleWebSocketOpen}
-	disableReconnect={true}
-/>
-
 <Card.Root>
 	<Card.Header>
 		<Card.Title class="flex items-center gap-2">