HL7-6: use sonner component in code

bun.lock

@@ -25,6 +25,7 @@
         "mode-watcher": "^1.1.0",
         "svelte": "^5.0.0",
         "svelte-check": "^4.0.0",
+        "svelte-sonner": "^1.0.5",
         "sveltekit-superforms": "^2.26.1",
         "tailwind-merge": "^3.3.1",
         "tailwind-variants": "^1.0.0",
@@ -40,13 +41,11 @@
       "dependencies": {
         "@hnu.de/hl7v2-shared": "workspace:*",
         "dotenv": "^17.2.0",
+        "ws": "^8.18.3",
       },
       "devDependencies": {
         "@types/bun": "latest",
         "@types/ws": "^8.18.1",
-        "ws": "^8.18.3",
-      },
-      "peerDependencies": {
         "typescript": "^5.8.3",
       },
     },
@@ -463,6 +462,8 @@
 
     "svelte-check": ["svelte-check@4.3.0", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.25", "chokidar": "^4.0.1", "fdir": "^6.2.0", "picocolors": "^1.0.0", "sade": "^1.7.4" }, "peerDependencies": { "svelte": "^4.0.0 || ^5.0.0-next.0", "typescript": ">=5.0.0" }, "bin": { "svelte-check": "bin/svelte-check" } }, "sha512-Iz8dFXzBNAM7XlEIsUjUGQhbEE+Pvv9odb9+0+ITTgFWZBGeJRRYqHUUglwe2EkLD5LIsQaAc4IUJyvtKuOO5w=="],
 
+    "svelte-sonner": ["svelte-sonner@1.0.5", "", { "dependencies": { "runed": "^0.28.0" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-9dpGPFqKb/QWudYqGnEz93vuY+NgCEvyNvxoCLMVGw6sDN/3oVeKV1xiEirW2E1N3vJEyj5imSBNOGltQHA7mg=="],
+
     "svelte-toolbelt": ["svelte-toolbelt@0.9.3", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.29.0", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.30.2" } }, "sha512-HCSWxCtVmv+c6g1ACb8LTwHVbDqLKJvHpo6J8TaqwUme2hj9ATJCpjCPNISR1OCq2Q4U1KT41if9ON0isINQZw=="],
 
     "sveltekit-superforms": ["sveltekit-superforms@2.27.1", "", { "dependencies": { "devalue": "^5.1.1", "memoize-weak": "^1.0.2", "ts-deepmerge": "^7.0.3" }, "optionalDependencies": { "@exodus/schemasafe": "^1.3.0", "@gcornut/valibot-json-schema": "^0.42.0", "@sinclair/typebox": "^0.34.35", "@typeschema/class-validator": "^0.3.0", "@vinejs/vine": "^3.0.1", "arktype": "^2.1.20", "class-validator": "^0.14.2", "effect": "^3.16.7", "joi": "^17.13.3", "json-schema-to-ts": "^3.1.1", "superstruct": "^2.0.2", "valibot": "^1.1.0", "yup": "^1.6.1", "zod": "^3.25.64", "zod-to-json-schema": "^3.24.5" }, "peerDependencies": { "@sveltejs/kit": "1.x || 2.x", "svelte": "3.x || 4.x || >=5.0.0-next.51" } }, "sha512-cvq2AevkZ0Zrk0w0gNM3kjcnJMtJ0jzu+2zqDoM9a+lZa+8bGpNl4YqxVkemiJNkGnFgNC8xr5xF5BlMzjookQ=="],
@@ -545,6 +546,8 @@
 
     "mode-watcher/svelte-toolbelt": ["svelte-toolbelt@0.7.1", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.23.2", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ=="],
 
+    "svelte-sonner/runed": ["runed@0.28.0", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-k2xx7RuO9hWcdd9f+8JoBeqWtYrm5CALfgpkg2YDB80ds/QE4w0qqu34A7fqiAwiBBSBQOid7TLxwxVC27ymWQ=="],
+
     "tailwind-variants/tailwind-merge": ["tailwind-merge@3.0.2", "", {}, "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime/@tybys/wasm-util": ["@tybys/wasm-util@0.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ=="],

packages/client/package.json

@@ -29,6 +29,7 @@
     "mode-watcher": "^1.1.0",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
+    "svelte-sonner": "^1.0.5",
     "sveltekit-superforms": "^2.26.1",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^1.0.0",

packages/client/src/lib/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";

packages/client/src/lib/components/ui/sonner/sonner.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={mode.current}
+	class="toaster group"
+	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+	{...restProps}
+/>

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">