feat: polish

src/lib/ui/Toast.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Toast, ToastBody, ToastHeader, Icon } from '@sveltestrap/sveltestrap';
+	import { toasts, removeToast, type ToastColor } from './toasts';
+
+	const ICONS: Record<ToastColor, string> = {
+		primary: 'info-circle-fill',
+		secondary: 'info-circle-fill',
+		success: 'check-circle-fill',
+		danger: 'exclamation-triangle-fill',
+		warning: 'exclamation-circle-fill',
+		info: 'info-circle-fill',
+		light: 'lightbulb',
+		dark: 'question',
+	};
+</script>
+
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
+	{#each $toasts as toast (toast.id)}
+		<Toast
+			isOpen={true}
+			autohide={!toast.persistent}
+			delay={5000}
+			color={toast.color}
+			on:close={() => removeToast(toast.id)}>
+			<ToastHeader toggle={() => removeToast(toast.id)} class={`text-${toast.color}`}>
+				<Icon slot="icon" name={ICONS[toast.color]} class="me-2" color={toast.color} />
+				{toast.header}
+			</ToastHeader>
+			<ToastBody>
+				{toast.body}
+			</ToastBody>
+		</Toast>
+	{/each}
+</div>
+
+<style>
+	.toast-container {
+		z-index: 1090;
+	}
+</style>