Oxicloud/frontend/src/lib/components/Toaster.svelte

<script lang="ts">
	import { ui } from '$lib/stores/ui.svelte';
	import { t } from '$lib/i18n/index.svelte';
</script>

<div
	class="toaster"
	role="region"
	aria-live="polite"
	aria-label={t('notifications.title', '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={t('common.dismiss', 'Dismiss')}
				onclick={() => ui.dismiss(toast.id)}
			>
				×
			</button>
		</div>
	{/each}
</div>

<style>
	.toaster {
		position: fixed;
		/* Offset clears any bottom-right FAB the file view may mount; the
		   --toaster-offset hook lets a page lift the stack further if needed. */
		bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + var(--toaster-offset, 0px));
		right: 1rem;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		z-index: 1200;
		max-width: min(92vw, 24rem);
		/* Let clicks pass through the gaps; individual toasts re-enable below. */
		pointer-events: none;
	}

	.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);
		pointer-events: auto;
	}

	.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>