✨ Added custom alert-component

frontend/src/routes/__layout.svelte

@@ -12,11 +12,12 @@
 <script>
 	import '../app.css';
 	import Navbar from '$lib/navbar.svelte';
-	import { navbarVisible, pathname } from '$lib/stores';
+	import { navbarVisible, pathname, alertModal } from '$lib/stores';
 	import * as Sentry from '@sentry/browser';
 	import { BrowserTracing } from '@sentry/tracing';
 	import { initLocalizationContext } from '$lib/i18n';
 	import { browser } from '$app/env';
+	import Alert from '$lib/modals/alert.svelte';
 
 	if (browser) {
 		pathname.set(window.location.pathname);
@@ -64,6 +65,17 @@
 {:else}
 	<slot />
 {/if}
+{#if $alertModal.open}
+	<div
+		class="fixed inset-0 h-screen w-screen bg-black z-30 bg-opacity-60 flex items-center justify-center content-center"
+	>
+		<Alert
+			bind:title={$alertModal.title}
+			bind:body={$alertModal.body}
+			bind:open={$alertModal.open}
+		/>
+	</div>
+{/if}
 
 <style lang="scss">
 	:global(html:not(.dark)) {

frontend/src/routes/import.svelte

@@ -21,7 +21,7 @@
 
 <script lang="ts">
 	import { getLocalization } from '$lib/i18n';
-	import { navbarVisible } from '$lib/stores';
+	import { navbarVisible, alertModal } from '$lib/stores';
 
 	navbarVisible.set(true);
 
@@ -50,9 +50,17 @@
 		if (res.status === 200) {
 			window.location.href = '/overview';
 		} else if (res.status === 400) {
-			alert("This quiz isn't (yet) supported!");
+			alertModal.set({
+				open: true,
+				title: 'Import failed',
+				body: "This quiz isn't (yet) supported!"
+			});
 		} else {
-			alert('Error importing quiz');
+			alertModal.set({
+				open: true,
+				title: 'Import failed',
+				body: 'Unknown error while importing the quiz!'
+			});
 		}
 		is_loading = false;
 	};

frontend/src/routes/overview.svelte

@@ -19,7 +19,7 @@
 	import { DateTime } from 'luxon';
 	import { getLocalization } from '$lib/i18n';
 	import Footer from '$lib/footer.svelte';
-	import { navbarVisible, signedIn } from '$lib/stores';
+	import { alertModal, navbarVisible, signedIn } from '$lib/stores';
 
 	interface QuizData {
 		id: string;
@@ -60,9 +60,14 @@
 		}
 
 		if (res.status !== 200) {
-			alert('Failed to start game!');
-			console.error(`Failed to start game, ${await res.text()}`);
-			window.location.replace('/account/login?returnTo=/overview');
+			alertModal.set({
+				open: true,
+				title: 'Start failed',
+				body: `Failed to start game, ${await res.text()}`
+			});
+			alertModal.subscribe((_) => {
+				window.location.replace('/account/login?returnTo=/overview');
+			});
 		}
 		const data = await res.json();
 		// eslint-disable-next-line no-undef