init new frontend

frontend/src/lib/components/Toaster.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { ui } from '$lib/stores/ui.svelte';
+</script>
+
+<div class="toaster" role="region" aria-live="polite" aria-label="Notifications">
+	{#each ui.toasts as toast (toast.id)}
+		<div class="toast toast--{toast.kind}" role="status">
+			<span class="toast__msg">{toast.message}</span>
+			<button class="toast__close" aria-label="Dismiss" onclick={() => ui.dismiss(toast.id)}>
+				×
+			</button>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.toaster {
+		position: fixed;
+		bottom: 1rem;
+		right: 1rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		z-index: 1000;
+		max-width: min(92vw, 24rem);
+	}
+
+	.toast {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 0.75rem 1rem;
+		border-radius: var(--radius-md);
+		background: var(--color-bg-surface);
+		color: var(--color-text);
+		box-shadow: var(--shadow-md);
+		border-left: 4px solid var(--color-border);
+	}
+
+	.toast--success {
+		border-left-color: var(--color-success-text);
+	}
+
+	.toast--error {
+		border-left-color: var(--color-danger-text);
+	}
+
+	.toast--warning {
+		border-left-color: var(--color-warning-text);
+	}
+
+	.toast--info {
+		border-left-color: var(--color-primary);
+	}
+
+	.toast__msg {
+		flex: 1;
+	}
+
+	.toast__close {
+		background: none;
+		border: none;
+		cursor: pointer;
+		font-size: 1.25rem;
+		line-height: 1;
+		color: inherit;
+		opacity: 0.7;
+	}
+
+	.toast__close:hover {
+		opacity: 1;
+	}
+</style>