feat(frontend): Migrate toasts to svelte-sonner

2024-05-06 10:13:07 +02:00
parent 0175f90d8d
commit 0eb656a3c0
5 changed files with 51 additions and 101 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -47,6 +47,7 @@
 				"svelte-exmarkdown": "^3.0.3",
 				"svelte-infinite-loading": "^1.3.8",
 				"svelte-portal": "^2.2.1",
+				"svelte-sonner": "^0.3.22",
 				"svelte-tiny-virtual-list": "^2.0.5",
 				"tailwind-merge": "^1.13.2",
 				"vscode": "npm:@codingame/monaco-vscode-api@>=1.83.5 <1.84.0",
@@ -78,7 +79,6 @@
 				"@types/vscode": "^1.83.5",
 				"@typescript-eslint/eslint-plugin": "^5.59.8",
 				"@typescript-eslint/parser": "^5.60.0",
-				"@zerodevx/svelte-toast": "^0.9.5",
 				"autoprefixer": "^10.4.13",
 				"cssnano": "^6.0.1",
 				"d3-dag": "^0.11.5",
@@ -2198,15 +2198,6 @@
 			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
 			"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
 		},
-		"node_modules/@zerodevx/svelte-toast": {
-			"version": "0.9.5",
-			"resolved": "https://registry.npmjs.org/@zerodevx/svelte-toast/-/svelte-toast-0.9.5.tgz",
-			"integrity": "sha512-JLeB/oRdJfT+dz9A5bgd3Z7TuQnBQbeUtXrGIrNWMGqWbabpepBF2KxtWVhL2qtxpRqhae2f6NAOzH7xs4jUSw==",
-			"dev": true,
-			"peerDependencies": {
-				"svelte": "^3.57.0 || ^4.0.0"
-			}
-		},
 		"node_modules/abbrev": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -9522,6 +9513,14 @@
 			"integrity": "sha512-P29PNqHld+SiaDuHzf98rLvhSYWXb3TVL9p7U5RG9UX8emUgypZgp9zuIIwpmIXysGQC6JG8duMc5FuaPnSVdg==",
 			"dev": true
 		},
+		"node_modules/svelte-sonner": {
+			"version": "0.3.22",
+			"resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.22.tgz",
+			"integrity": "sha512-1AEBl7rTP4oeMAmBmkcvoHNOwB8gPzz73RYApcY8pyDwbjBewU8ATnXV8N42omV1sQvtSX/X0o5A1nfkN3T6cg==",
+			"peerDependencies": {
+				"svelte": ">=3 <5"
+			}
+		},
 		"node_modules/svelte-splitpanes": {
 			"version": "0.8.0",
 			"resolved": "https://registry.npmjs.org/svelte-splitpanes/-/svelte-splitpanes-0.8.0.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -34,7 +34,6 @@
 		"@types/vscode": "^1.83.5",
 		"@typescript-eslint/eslint-plugin": "^5.59.8",
 		"@typescript-eslint/parser": "^5.60.0",
-		"@zerodevx/svelte-toast": "^0.9.5",
 		"autoprefixer": "^10.4.13",
 		"cssnano": "^6.0.1",
 		"d3-dag": "^0.11.5",
@@ -127,6 +126,7 @@
 		"svelte-exmarkdown": "^3.0.3",
 		"svelte-infinite-loading": "^1.3.8",
 		"svelte-portal": "^2.2.1",
+		"svelte-sonner": "^0.3.22",
 		"svelte-tiny-virtual-list": "^2.0.5",
 		"tailwind-merge": "^1.13.2",
 		"vscode": "npm:@codingame/monaco-vscode-api@>=1.83.5 <1.84.0",
--- a/frontend/src/lib/components/Toast.svelte
+++ b/frontend/src/lib/components/Toast.svelte
@@ -1,79 +1,47 @@
 <script lang="ts">
-	import { toast } from '@zerodevx/svelte-toast'
-	import { CheckCircle2, XCircleIcon } from 'lucide-svelte'
-	import { onMount } from 'svelte'
 	import Button from './common/button/Button.svelte'
 	import type { ToastAction } from '$lib/toast'

 	export let message: string
-	export let toastId: string
-	export let error: boolean = false
 	export let actions: ToastAction[] = []
 	export let errorMessage: string | undefined = undefined
-	export let duration = 5000
+	export let onClose: () => void
+	export let duration: number | undefined = undefined

-	function handleClose() {
-		toast.pop(toastId)
-	}
-
-	// On mount, close after 5 seconds
-	onMount(() => {
+	// if duration is set, close the toast after that duration
+	if (duration) {
 		setTimeout(() => {
-			toast.pop(toastId)
+			onClose()
 		}, duration)
-	})
+	}
 </script>

-<div
-	class="pointer-events-auto w-full max-w-sm overflow-hidden bg-surface shadow-lg ring-1 ring-black ring-opacity-5 border"
->
-	<div class="p-2 min-h-[60px] flex flex-col">
-		<div class="flex items-start w-full">
-			<div class="flex-shrink-0 mt-0.5">
-				{#if error}
-					<XCircleIcon class="h-4 w-4 text-red-400" />
-				{:else}
-					<CheckCircle2 class="h-4 w-4 text-green-400" />
-				{/if}
-			</div>
-			<div class="ml-3 flex-1 w-0">
-				<p class="text-sm text-secondary break-words">{message}</p>
-				{#if errorMessage}
-					<p
-						class="text-sm text-secondary border bg-surface-secondary p-2 w-full overflow-auto mt-2"
-					>
-						{errorMessage}
-					</p>
-				{/if}
-			</div>
-
-			<div class="ml-4 flex flex-shrink-0">
-				<button
-					type="button"
-					on:click={handleClose}
-					class="inline-flex rounded-md bg-surface-secondary text-gray-400 hover:text-tertiary focus:outline-none"
-				>
-					<span class="sr-only">Close</span>
-					<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-						<path
-							d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-						/>
-					</svg>
-				</button>
-			</div>
-		</div>
-		<div class="mt-2 flex flex-col gap-2 h-15 items-center">
+<div class="w-full flex flex-col gap-2">
+	<div>
+		<p class="text-xs font-semibold text-secondary break-words">{message}</p>
+		{#if errorMessage}
+			<p
+				class=" w-full text-secondary border border-red-200 rounded-md text-xs bg-red-100 p-2 overflow-auto mt-2"
+			>
+				{errorMessage}
+			</p>
+		{/if}
+	</div>
+	{#if actions.length > 0}
+		<div class="flex flex-col gap-2 items-start">
 			{#each actions as action, index (index)}
 				<Button
 					on:click={() => {
 						action.callback()
-						toast.pop(toastId)
+						onClose()
 					}}
-					class="text-sm !text-primary"
+					color="light"
+					variant="border"
+					size="xs2"
 				>
 					{action.label}
 				</Button>
 			{/each}
 		</div>
-	</div>
+	{/if}
 </div>
--- a/frontend/src/lib/toast.ts
+++ b/frontend/src/lib/toast.ts
@@ -1,6 +1,5 @@
 import Toast from '$lib/components/Toast.svelte'
-import { toast } from '@zerodevx/svelte-toast'
-
+import { toast } from 'svelte-sonner'
 export type ToastAction = {
 	label: string
 	callback: () => void
@@ -13,23 +12,19 @@ export function sendUserToast(
 	errorMessage: string | undefined = undefined,
 	duration: number = 5000
 ): void {
-	toast.push({
-		component: {
-			src: Toast,
-			props: {
-				message,
-				error,
-				actions,
-				errorMessage,
-				duration
-			},
-			sendIdTo: 'toastId'
-		},
-		dismissable: false,
-		initial: 0,
-		theme: {
-			'--toastPadding': '0',
-			'--toastMsgPadding': '0'
+	function onClose() {
+		toast.dismiss(toastId)
+	}
+
+	const props = {
+		componentProps: {
+			message,
+			actions,
+			errorMessage,
+			duration,
+			onClose
 		}
-	})
+	}
+
+	const toastId = error ? toast.error(Toast, props) : toast.info(Toast, props)
 }
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,20 +1,8 @@
 <script lang="ts">
 	import { page } from '$app/stores'

-	import { SvelteToast } from '@zerodevx/svelte-toast'
+	import { Toaster } from 'svelte-sonner'
 	import '$lib/assets/app.css'
-
-	// Default toast options
-	const toastOptions = {
-		duration: 5000, // duration of progress bar tween to the `next` value
-		initial: 1, // initial progress bar value
-		next: 0, // next progress value
-		pausable: true, // pause progress bar tween on mouse hover
-		dismissable: true, // allow dismiss with close button
-		reversed: false, // insert new toast to bottom of stack
-		intro: { x: 256 }, // toast intro fly animation settings
-		theme: {} // css var overrides
-	}
 </script>

 <svelte:head>
@@ -31,7 +19,7 @@
 <slot />

 <div class="wrap">
-	<SvelteToast options={toastOptions} />
+	<Toaster position="top-right" richColors closeButton />
 </div>

 <style>