diff --git a/bun.lock b/bun.lock index 6432b6d..e23bd34 100644 --- a/bun.lock +++ b/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=="], diff --git a/packages/client/package.json b/packages/client/package.json index 4b8efbe..5023548 100644 --- a/packages/client/package.json +++ b/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", diff --git a/packages/client/src/lib/components/ui/sonner/index.ts b/packages/client/src/lib/components/ui/sonner/index.ts new file mode 100644 index 0000000..1ad9f4a --- /dev/null +++ b/packages/client/src/lib/components/ui/sonner/index.ts @@ -0,0 +1 @@ +export { default as Toaster } from "./sonner.svelte"; diff --git a/packages/client/src/lib/components/ui/sonner/sonner.svelte b/packages/client/src/lib/components/ui/sonner/sonner.svelte new file mode 100644 index 0000000..1f50e1e --- /dev/null +++ b/packages/client/src/lib/components/ui/sonner/sonner.svelte @@ -0,0 +1,13 @@ + + + diff --git a/packages/client/src/routes/+layout.svelte b/packages/client/src/routes/+layout.svelte index 027af2f..1d3033a 100644 --- a/packages/client/src/routes/+layout.svelte +++ b/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 @@ + +
diff --git a/packages/client/src/routes/+page.svelte b/packages/client/src/routes/+page.svelte index 43ca8ee..4f5ca91 100644 --- a/packages/client/src/routes/+page.svelte +++ b/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(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 @@ Send Message - {#if deliveryError} -

{deliveryError}

- {/if}
{:else if connectionState === ConnectionState.disconnected}