BSlideOverlay in qrcode and qrcode/status

src/routes/+layout.svelte

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

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

@@ -2,9 +2,12 @@
   import { scale } from 'svelte/transition';
   import { goto } from "$app/navigation";
   import BSlideOverlay from "$lib/BSlideOverlay.svelte";
+  import { useToast } from "$lib/ToastService/useToast";
 
   let { data } = $props();
 
+  const { fireToast } = useToast();
+
   let showOverlay = $state(false);
   let startingCharge = $state(false);
 
@@ -13,12 +16,12 @@
     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 {
@@ -31,6 +34,9 @@
   <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={() => fireToast({type: 'success', content: 'Messaggio Ricevuto!'})}>
+        TEST
+      </button>
     </div>
   </div>
   <BSlideOverlay bind:show={showOverlay} closable={!startingCharge}>