torus/src/lib/components/Notifier.svelte

<script>
	import { dismiss, notices } from '$lib/notifier.svelte.js';
</script>

{#if notices.length}
	<div class="notifier" aria-live="polite" aria-relevant="additions">
		{#each notices as notice (notice.id)}
			<div class="toast toast-{notice.kind}" role="status">
				<p class="message">{notice.message}</p>
				<button
					type="button"
					class="close"
					aria-label="Dismiss"
					onclick={() => dismiss(notice.id)}
				>
					×
				</button>
			</div>
		{/each}
	</div>
{/if}

<style>
	.notifier {
		position: fixed;
		z-index: 1000;
		top: 16px;
		left: 50%;
		transform: translateX(-50%);
		width: min(360px, calc(100vw - 24px));
		display: grid;
		gap: 8px;
		pointer-events: none;
	}

	.toast {
		pointer-events: auto;
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: start;
		gap: 10px;
		padding: 12px 12px 12px 14px;
		border-radius: var(--radius);
		border: 1px solid var(--border);
		background: var(--surface-2);
		box-shadow: 0 12px 32px color-mix(in srgb, black 45%, transparent);
		animation: toast-in 160ms ease-out;
	}

	.toast-ok {
		border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
		background: color-mix(in srgb, var(--ok) 12%, var(--surface-2));
	}

	.toast-fail {
		border-color: color-mix(in srgb, var(--fail) 45%, var(--border));
		background: color-mix(in srgb, var(--fail) 12%, var(--surface-2));
	}

	.toast-warn {
		border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
		background: color-mix(in srgb, var(--warn) 12%, var(--surface-2));
	}

	.toast-info {
		border-color: color-mix(in srgb, var(--ember) 40%, var(--border));
		background: color-mix(in srgb, var(--ember) 10%, var(--surface-2));
	}

	.message {
		margin: 0;
		font-size: 14px;
		font-weight: 650;
		line-height: 1.35;
		color: var(--bone);
	}

	.toast-ok .message {
		color: var(--ok);
	}

	.toast-fail .message {
		color: var(--fail);
	}

	.toast-warn .message {
		color: var(--warn);
	}

	.toast-info .message {
		color: var(--heat);
	}

	.close {
		margin: -4px -4px 0 0;
		padding: 0 6px;
		border: 0;
		border-radius: 6px;
		background: transparent;
		color: var(--text-muted);
		font-size: 18px;
		line-height: 1.2;
		cursor: pointer;
	}

	.close:hover,
	.close:focus-visible {
		color: var(--bone);
		background: var(--plate);
	}

	@keyframes toast-in {
		from {
			opacity: 0;
			transform: translateY(-6px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>