Files
trueref/trueref-frontend/web/src/lib/components/ToastContainer.svelte
moze c5f950c2c0
Some checks failed
Build and publish Docker image / Build and push (push) Failing after 1m27s
Initial commit: trueref v0.1.0-SNAPSHOT
Java 21 / Spring Boot 3.5.3 multi-module Maven project.
Hybrid BM25+HNSW search with RRF, cross-encoder reranker,
ONNX Runtime 1.22.0 (CPU + CUDA 12 GPU variants).
2026-05-06 00:49:16 +02:00

68 lines
1.5 KiB
Svelte
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<script lang="ts">
import { toasts, dismissToast } from '$lib/toast';
</script>
<div class="toast-stack" aria-live="polite" aria-atomic="false">
{#each $toasts as t (t.id)}
<div class="toast lvl-{t.level}" role="status">
<span class="msg">{t.message}</span>
<button class="close" type="button" aria-label="dismiss" onclick={() => dismissToast(t.id)}
>×</button
>
</div>
{/each}
</div>
<style>
.toast-stack {
position: fixed;
bottom: 18px;
right: 18px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 1000;
pointer-events: none;
}
.toast {
pointer-events: auto;
display: flex;
align-items: center;
gap: 10px;
min-width: 260px;
max-width: 420px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--fg);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
font-size: 13px;
}
.toast.lvl-error {
border-color: color-mix(in srgb, var(--err) 55%, transparent);
background: color-mix(in srgb, var(--err) 12%, var(--bg-card));
}
.toast.lvl-warn {
border-color: color-mix(in srgb, var(--warn) 55%, transparent);
}
.toast.lvl-success {
border-color: color-mix(in srgb, var(--ok) 55%, transparent);
}
.msg {
flex: 1;
word-break: break-word;
}
.close {
background: none;
border: none;
color: var(--fg-dim);
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.close:hover {
color: var(--fg);
}
</style>