First working POC

2026-01-26 22:21:54 +01:00
commit cfddc1edea
255 changed files with 77606 additions and 0 deletions
@@ -0,0 +1,68 @@
+<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>