packages/client/src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 
     import '../app.css';
     import ThemeSelector from '$lib/components/theme-selector.svelte';
+    import { Toaster } from '$lib/components/ui/sonner';
     import { ModeWatcher } from 'mode-watcher';
 
     let { children } = $props();
@@ -10,6 +11,8 @@
 
 <ModeWatcher/>
 
+<Toaster/>
+
 <!-- navigation bar -->
 <header class="sticky top-0 right-0 left-0 flex justify-center z-50 backdrop-blur py-4 px-4 lg:px-8">
     <div class="flex items-center justify-between w-full max-w-7xl">

packages/client/src/routes/+page.svelte

@@ -23,6 +23,7 @@
     import { env } from '$env/dynamic/public';
     import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '$lib/components/ui/tooltip';
     import { dev } from '$app/environment';
+    import { toast } from 'svelte-sonner';
 
     // connection state
     let ws = $state<WebSocket | undefined>(undefined); // websocket client
@@ -78,6 +79,7 @@
         socket.onopen = () => {
             console.log('WebSocket connection established.');
             ws = socket;
+            isSending = false
         };
 
         // register message handlers
@@ -105,13 +107,15 @@
                 // our message was successfully delivered
                 case MessageType.delivery_success:
                     sentMessages = [message, ...sentMessages];
+                    toast.success("Message delivered successfully")
                     isSending = false
                     break;
 
                 // message from server due to delivery error
                 case MessageType.delivery_error:
                     deliveryError = message.payload.error;
-                    setTimeout(() => deliveryError = '', 5000); // Clear error after 5 seconds
+                    toast.error(deliveryError);
+                    isSending = false
                     break;
             }
         };
@@ -280,9 +284,6 @@
                                     <SendIcon/>
                                     <span>Send Message</span>
                                 </Button>
-                                {#if deliveryError}
-                                    <p class="text-red-600 dark:text-red-400 text-center mt-2">{deliveryError}</p>
-                                {/if}
                             </div>
                         {:else if connectionState === ConnectionState.disconnected}
                             <div class="flex flex-col items-center justify-center min-h-96 text-foreground/70 space-y-4">