feat: add error section to modals

src/lib/components/modal.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
     import { createEventDispatcher, onMount } from 'svelte';
     import { fade, fly, type FadeParams, type FlyParams } from 'svelte/transition';
+    import { Alert } from '$lib/components';
 
     export let show = false;
     export let size: 'small' | 'big' = null;
     export let warning = false;
+    export let error: string = null;
     let browser = false;
     //TODO: explore other solutions compatible with testing library
     onMount(() => {
@@ -76,6 +78,16 @@
                 </button>
             </header>
             <div class="modal-content">
+                {#if error}
+                    <Alert
+                        dismissible
+                        type="warning"
+                        on:dismiss={() => {
+                            error = null;
+                        }}>
+                        {error}
+                    </Alert>
+                {/if}
                 <slot />
             </div>
             <div class="modal-footer">

src/routes/console/[project]/users/_createTeam.svelte

@@ -12,6 +12,7 @@
 
     let name: string, id: string;
     let showDropdown = false;
+    let modalError: string;
 
     const create = async () => {
         try {
@@ -25,10 +26,7 @@
             });
             dispatch('created', team);
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 
@@ -37,11 +35,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
+        modalError = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal size="big" bind:show={showCreate}>
+    <Modal error={modalError} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create Team</svelte:fragment>
         <FormList>
             <InputText

src/routes/console/[project]/users/_createUser.svelte

@@ -19,6 +19,7 @@
 
     let showDropdown = false;
     let name: string, mail: string, pass: string, id: string;
+    let modalError: string;
 
     const create = async () => {
         try {
@@ -32,10 +33,7 @@
             });
             dispatch('created', user);
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
+            modalError = error.message;
         }
     };
 
@@ -44,11 +42,12 @@
     }
     $: if (!showCreate) {
         showDropdown = false;
+        modalError = null;
     }
 </script>
 
 <Form on:submit={create}>
-    <Modal size="big" bind:show={showCreate}>
+    <Modal error={modalError} size="big" bind:show={showCreate}>
         <svelte:fragment slot="header">Create User</svelte:fragment>
         <FormList>
             <InputText