ui: redesign a lot

apps/ui/src/lib/components/Toasts.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import Toast from './Toast.svelte';
+
+	import { toasts } from '$lib/store';
+</script>
+
+{#if $toasts}
+	<section>
+		<article class="toast toast-bottom toast-end rounded-none" role="alert" transition:fade>
+			{#each $toasts as toast (toast.id)}
+				<Toast type={toast.type}>{toast.message}</Toast>
+			{/each}
+		</article>
+	</section>
+{/if}
+
+<style lang="postcss">
+	section {
+		@apply fixed top-0 left-0 right-0 w-full flex flex-col mt-4 justify-center z-[1000];		
+	}
+</style>