First version of Toaster using MeltUI

src/lib/Toaster.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" module>
+  import { createToaster, melt } from '@melt-ui/svelte';
+
+  export type ToastData = {
+    title: string
+    description: string
+    color: string
+  }
+  // TODO: Change color with type e setta classe
+
+  // TODO: Usa getPercentage per mostrare la loading bar sugli alert!
+
+  const {
+    elements: { content, title, description, close },
+    helpers,
+    states: { toasts },
+    actions: { portal }
+  } = createToaster<ToastData>();
+
+  export const addToast = helpers.addToast;
+</script>
+
+<div use:portal class="fixed w-screen top-0 z-50 m-4 flex flex-col items-center gap-2 pointer-events-none">
+  {#each $toasts as { id, data } (id)}
+    <div use:melt={$content(id)} class="pointer-events-auto alert alert-info relative w-[70%]">
+      <div>
+        <h3 use:melt={$title(id)} class="font-bold">
+          {data.title}
+          <!--          <span style:color={data.color}></span>-->
+        </h3>
+        <div use:melt={$description(id)}>
+          {data.description}
+        </div>
+      </div>
+      <button use:melt={$close(id)} aria-label="close notification" class="absolute right-2 top-0">x</button>
+    </div>
+  {/each}
+</div>

src/routes/+layout.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-	import '../app.css';
-	
-	let { children } = $props();
+  import '../app.css';
+  import Toaster from "$lib/Toaster.svelte";
+
+  let { children } = $props();
 </script>
 
 {@render children()}
+<Toaster/>

src/routes/[qrcode]/+page.svelte

@@ -2,6 +2,7 @@
   import { scale } from 'svelte/transition';
   import { goto } from "$app/navigation";
   import BSlideOverlay from "$lib/BSlideOverlay.svelte";
+  import { addToast } from '$lib/Toaster.svelte';
 
   let { data } = $props();
 
@@ -13,24 +14,36 @@
     startingCharge = true;
     try {
       // TODO: StartCharge fetch request
-      const response = await fetch(`/api/public/1/chargecontroller/${data.qrcode}/start_charge/`, {
-        method: 'POST',
-        headers: {
-          'Accept': 'application/json',
-        }
-      });
+      // const response = await fetch(`/api/public/1/chargecontroller/${data.qrcode}/start_charge/`, {
+      //   method: 'POST',
+      //   headers: {
+      //     'Accept': 'application/json',
+      //   }
+      // });
       console.log("nop");
       await goto(`/${data.qrcode}/status`);
     } finally {
       startingCharge = false;
     }
   }
+
+  function test() {
+    addToast({
+      closeDelay: 50000,
+      data: {
+        title: 'Success',
+        description: 'The resource was created!',
+        color: 'green'
+      },
+    });
+  }
 </script>
 
 <div class="grid grid-rows-6 h-full w-full">
   <div class="row-start-5 col-start-1 flex flex-col justify-center items-center">
     <div class="pointer-events-auto">
       <button class="btn btn-primary btn-lg uppercase" onclick={() => showOverlay = true}>Attivare la Ricarica</button>
+      <button class="btn btn-secondary" onclick={test}>Test</button>
     </div>
   </div>
   <BSlideOverlay bind:show={showOverlay} closable={!startingCharge}>