add Notifications

2026-07-06 00:47:09 +00:00 · 2025-11-06 11:49:32 +01:00
parent 9487fdd13e
commit 9fd81821f1
4 changed files with 82 additions and 0 deletions
@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { fade } from "svelte/transition";
+    import Button from "./Button.svelte";
+	import { X } from "lucide-svelte";
+	import { notifications } from "../ts/stores/notification";
+	import { get_shifted_color } from "../ts/stores/ui_behavior";
+</script>
+
+<div class="fixed flex flex-col gap-2 {true ? "top-[41%]": "top-2"} right-2 left-2 md:top-auto md:left-auto md:bottom-2 md:w-100 z-50">
+    {#each $notifications as n (n.id)}
+        <div
+            transition:fade={{ duration: 200 }}
+            class="p-2 pl-4 pb-3 rounded-lg shadow-xl/30 text-white flex flex-col gap-2 overflow-hidden relative border-1 border-black/20 {n.className}"
+            class:bg-red-900={n.type === "error"}
+            class:bg-green-900={n.type === "success"}
+            class:bg-sky-900={n.type === "info"}
+            style="--dur: {n.duration}ms"
+        >
+            <div class="flex flex-row justify-between">
+                <span class="text-xl font-bold flex items-center">{n.title}</span>
+                <Button click_function={() => notifications.remove(n.id)} className="p-2" bg="bg-stone-900/50" hover_bg="bg-stone-600/70" active_bg="bg-stone-500/80"><X/></Button>
+            </div>
+
+            <span>{n.message}</span>
+
+            <div class="absolute inset-x-0 bottom-0 h-1 bg-white/25">
+                <div
+                    class="block h-full w-full bg-white/80 origin-left animate-progress-bar"
+                ></div>
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style>
+    @keyframes progress {
+        from {
+            transform: scaleX(0);
+        }
+        to {
+            transform: scaleX(1);
+        }
+    }
+    .animate-progress-bar {
+        animation: progress var(--dur) linear forwards;
+        transform-origin: left;
+    }
+</style>