toast -> styled the toast

frontend/src/components/CheckmarkIcon.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    export let primary = '#61d345';
+    export let secondary = '#fff';
+</script>
+
+<div style:--primary={primary} style:--secondary={secondary}></div>
+
+<style>
+    div {
+        width: 20px;
+        opacity: 0;
+        height: 20px;
+        border-radius: 10px;
+        background: var(--primary, #61d345);
+        position: relative;
+        transform: rotate(45deg);
+        animation: circleAnimation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+        animation-delay: 100ms;
+    }
+
+    div::after {
+        content: '';
+        box-sizing: border-box;
+        animation: checkmarkAnimation 0.2s ease-out forwards;
+        opacity: 0;
+        animation-delay: 200ms;
+        position: absolute;
+        border-right: 2px solid;
+        border-bottom: 2px solid;
+        border-color: var(--secondary, #fff);
+        bottom: 6px;
+        left: 6px;
+        height: 10px;
+        width: 6px;
+    }
+
+    @keyframes circleAnimation {
+        from {
+            transform: scale(0) rotate(45deg);
+            opacity: 0;
+        }
+        to {
+            transform: scale(1) rotate(45deg);
+            opacity: 1;
+        }
+    }
+
+    @keyframes checkmarkAnimation {
+        0% {
+            height: 0;
+            width: 0;
+            opacity: 0;
+        }
+        40% {
+            height: 0;
+            width: 6px;
+            opacity: 1;
+        }
+        100% {
+            opacity: 1;
+            height: 10px;
+        }
+    }
+</style>

frontend/src/components/ErrorIcon.svelte

@@ -0,0 +1,75 @@
+<!-- Adapted from https://github.com/timolins/react-hot-toast -->
+<script lang="ts">
+    export let primary = '#ff4b4b';
+    export let secondary = '#fff';
+</script>
+
+<div style:--primary={primary} style:--secondary={secondary}></div>
+
+<style>
+    div {
+        width: 20px;
+        opacity: 0;
+        height: 20px;
+        border-radius: 10px;
+        background: var(--primary, #ff4b4b);
+        position: relative;
+        transform: rotate(45deg);
+        animation: circleAnimation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+        animation-delay: 100ms;
+    }
+
+    div::after,
+    div::before {
+        content: '';
+        animation: firstLineAnimation 0.15s ease-out forwards;
+        animation-delay: 150ms;
+        position: absolute;
+        border-radius: 3px;
+        opacity: 0;
+        background: var(--secondary, #fff);
+        bottom: 9px;
+        left: 4px;
+        height: 2px;
+        width: 12px;
+    }
+
+    div:before {
+        animation: secondLineAnimation 0.15s ease-out forwards;
+        animation-delay: 180ms;
+        transform: rotate(90deg);
+    }
+
+    @keyframes circleAnimation {
+        from {
+            transform: scale(0) rotate(45deg);
+            opacity: 0;
+        }
+        to {
+            transform: scale(1) rotate(45deg);
+            opacity: 1;
+        }
+    }
+
+    @keyframes firstLineAnimation {
+        from {
+            transform: scale(0);
+            opacity: 0;
+        }
+        to {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+
+    @keyframes secondLineAnimation {
+        from {
+            transform: scale(0) rotate(90deg);
+            opacity: 0;
+        }
+        to {
+            transform: scale(1) rotate(90deg);
+            opacity: 1;
+        }
+    }
+</style>

frontend/src/components/LinkButton.svelte

@@ -8,6 +8,7 @@
         console.log("Copied to clipboard")
         const toast: ToastData = {
             id: Date.now(),
+            type: "success",
             title: "Copied to clipboard",
             description: "The link has been copied to your clipboard",
             color: "green"

frontend/src/components/Toaster.svelte

@@ -1,29 +1,43 @@
 <script lang="ts" context="module">
     import toasts from "../lib/toast.ts";
-    import {closeToast} from "../lib/toast.ts";
 
     export type ToastData = {
         id: number
+        type: "success" | "error"
         title: string
         description: string
         color: string
     }
-    let toast_data: ToastData[] = []
 
 </script>
+<script>
+    import CheckmarkIcon from "./CheckmarkIcon.svelte";
+    import ErrorIcon from "./ErrorIcon.svelte";
+</script>
 
-{#each $toasts as toast (toast.id)}
-    <div>
-        <div>
-            <div>
-                <h3>
-                    {toast.title}
-                </h3>
+<div class="fixed left-0 right-0 top-4 mx-auto flex flex-col gap-4 z-50 w-max h-max">
+    {#each $toasts as toast (toast.id)}
+        <div class="card card-compact card-bordered z-10 bg-base-100 shadow-xl w-96 transition-popup">
+            <div class="card-body flex flex-row">
+                <div class="my-auto px-2">
+                    {#if toast.type === "success"}
+                        <CheckmarkIcon/>
+                    {/if}
+                    {#if toast.type === "error"}
+                        <ErrorIcon/>
+                    {/if}
+                </div>
                 <div>
-                    {toast.description}
+                    <div>
+                        <h3 class="font-bold text-lg">
+                            {toast.title}
+                        </h3>
+                        <div>
+                            {toast.description}
+                        </div>
+                    </div>
                 </div>
             </div>
-            <button on:click={() => closeToast(toast.id)} aria-label="close notification"> X</button>
         </div>
-    </div>
-{/each}
+    {/each}
+</div>

frontend/src/layouts/Layout.astro

@@ -4,8 +4,6 @@ interface Props {
 }
 
 import '@fontsource-variable/gabarito';
-import Toaster from "../components/Toaster.svelte";
-
 const {title} = Astro.props;
 ---