Create notifications system without style

src/lib/notifier.svelte.js

@@ -0,0 +1,13 @@
+let notifications = $state([]);
+
+export function notify(type, message){
+    notifications.push({type, message});
+
+    setTimeout(()=>{
+        notifications.shift();
+    }, 7500);
+}
+
+export function getNotifications(){
+    return notifications;
+}

src/routes/+layout.svelte

@@ -1,10 +1,11 @@
 <script>
     import "$lib/global.css";
 	import logo from '$lib/assets/favicon.svg';
-
     import {page} from "$app/state";
+    import {getNotifications} from "$lib/notifier.svelte.js";
 
 	let {data, children} = $props();
+    let notifications = getNotifications();
 </script>
 
 <svelte:head>
@@ -27,6 +28,12 @@
     {#if page.url.pathname === "/register"}
         <a href="/login" class="button">Log In</a>
     {/if}
+
+    <div class="notifications">
+        {#each notifications as n}
+            <p class="{n.type}">{n.message}</p>
+        {/each}
+    </div>
 </header>
 
 {@render children()}

src/routes/register/+page.svelte

@@ -1,12 +1,19 @@
 <script>
     import {enhance} from "$app/forms";
-    import {onMount} from "svelte";
+    import {untrack} from "svelte";
+    import {notify} from "$lib/notifier.svelte.js";
 
+    let {form} = $props();
     let nameInput;
+    $inspect(form);
 
     $effect(()=>{
         nameInput?.focus();
     });
+
+    $effect(()=>{
+        if(form) untrack(()=>{notify("error", form)});
+    });
 </script>
 
 <div class="container">