dtourolle
ad48d89dfe
Formatting was configured but never enforced: `bun run format:check` reported 199 unformatted files and ran in no workflow and in no git hook, so .prettierrc (printWidth 100, trailing commas) described an intention rather than the tree. This is the one-time sweep that makes the check gateable. Whitespace and token-reflow only -- no behavioural change: `bun run check` reports 0 errors and all 1053 frontend tests pass before and after. Kept out of every other commit on purpose. A 199-file diff mixed with real changes is unreviewable, and the next commit turns format:check into a hard CI gate so this cannot silently accumulate again.
74 lines
2.4 KiB
Svelte
74 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { toast } from "$lib/stores/toast";
|
|
import { fly, fade } from "svelte/transition";
|
|
import { quintOut } from "svelte/easing";
|
|
|
|
// Icons for different toast types
|
|
const icons = {
|
|
success: {
|
|
path: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",
|
|
color: "text-green-500",
|
|
bg: "bg-green-500/10",
|
|
border: "border-green-500/20",
|
|
},
|
|
error: {
|
|
path: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z",
|
|
color: "text-red-500",
|
|
bg: "bg-red-500/10",
|
|
border: "border-red-500/20",
|
|
},
|
|
warning: {
|
|
path: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z",
|
|
color: "text-yellow-500",
|
|
bg: "bg-yellow-500/10",
|
|
border: "border-yellow-500/20",
|
|
},
|
|
info: {
|
|
path: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",
|
|
color: "text-blue-500",
|
|
bg: "bg-blue-500/10",
|
|
border: "border-blue-500/20",
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<!-- Toast Container -->
|
|
<div class="fixed top-4 right-4 z-[9999] flex flex-col gap-2 pointer-events-none">
|
|
{#each $toast.toasts as toastItem (toastItem.id)}
|
|
{@const style = icons[toastItem.type]}
|
|
<div
|
|
in:fly={{ y: -20, duration: 300, easing: quintOut }}
|
|
out:fade={{ duration: 200 }}
|
|
class="pointer-events-auto flex items-center gap-3 px-4 py-3 bg-[var(--color-surface)] backdrop-blur-lg border {style.border} rounded-lg shadow-2xl min-w-[300px] max-w-md"
|
|
>
|
|
<!-- Icon -->
|
|
<div class="flex-shrink-0 w-6 h-6 rounded-full {style.bg} flex items-center justify-center">
|
|
<svg class="w-4 h-4 {style.color}" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d={style.path} />
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Message -->
|
|
<p class="flex-1 text-sm text-white font-medium">
|
|
{toastItem.message}
|
|
</p>
|
|
|
|
<!-- Close button -->
|
|
<button
|
|
onclick={() => toast.dismiss(toastItem.id)}
|
|
class="flex-shrink-0 text-gray-400 hover:text-white transition-colors"
|
|
aria-label="Dismiss"
|
|
>
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{/each}
|
|
</div>
|