Better previewes for creator

src/routes/private/events/creator/steps/StepCraftEmail.svelte

@@ -57,10 +57,13 @@
 	>
 		Edit email
 	</button>
-	<div class="rounded border-l-4 border-green-500 p-4 text-green-700 bg-green-100">
+	<div class="rounded border border-gray-300 bg-white p-4">
-		<ol>
+		<h2 class="mb-2 text-xl font-bold">Email Preview</h2>
-			<li><strong>{email.subject}</strong></li>
+		<div class="mb-2">
-			<li class="whitespace-pre-line">{email.body}</li>
+			<span class="block font-semibold">{email.subject}</span>
-		</ol>
+		</div>
+		<div class="whitespace-pre-line text-gray-800">
+			{email.body}
+		</div>
 	</div>
 {/if}

src/routes/private/events/creator/steps/StepCreateEvent.svelte

@@ -66,21 +66,13 @@
 	>
 		Edit the event
 	</button>
-{/if}
+	<div class="rounded border border-gray-300 bg-white p-4">
-
+		<h2 class="mb-2 text-xl font-bold">Event Preview</h2>
-{#if !showForm}
+		{#if Object.keys(event).length > 0}
-	<div
+			<ul>
-		class="rounded border-l-4 border-green-500 p-4 text-green-700"
+				<li><span class="font-semibold">{event.name}</span></li>
-		class:bg-gray-100={loading}
+				<li class="text-gray-700">{event.date}</li>
-		class:bg-green-100={!loading}
+			</ul>
-	>
-		{#if loading}
-			<strong class="text-gray-700">Loading...</strong>
-		{:else if Object.keys(event).length > 0}
-			<ol>
-				<li><strong>{event.name}</strong></li>
-				<li>{event.date}</li>
-			</ol>
 		{:else}
 			<strong class="text-gray-700">No event created yet...</strong>
 		{/if}

src/routes/private/events/creator/steps/StepUploadParticipants.svelte

@@ -2,19 +2,20 @@
 	import Papa from 'papaparse';
 
 	let { participants = $bindable() } = $props();
-	let loading = $state(false);
 	let showForm = $derived(participants.length === 0);
+	let errors = $state([]);
+
+	function isValidEmail(email: string): boolean {
+		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+	}
 
 	async function handleSubmit(e: Event) {
 		e.preventDefault();
-		loading = true;
+		errors = [];
 		const form = e.target as HTMLFormElement;
 		const fileInput = form.elements.namedItem('participants') as HTMLInputElement;
 		const file = fileInput?.files?.[0];
-		if (!file) {
+		if (!file) return;
-			loading = false;
-			return;
-		}
 		const csvText = await file.text();
 		const { data: parsedRows } = Papa.parse<string[]>(csvText, {
 			skipEmptyLines: true,
@@ -24,13 +25,36 @@
 		if (parsedRows.length > 0) {
 			parsedRows.shift();
 		}
-		participants = parsedRows.map((row: string[]) => ({
+		const validated = [];
-			name: row[0],
+		parsedRows.forEach((row, idx) => {
-			surname: row[1],
+			if (!row || row.length < 3) {
-			email: row[2]
+				errors.push(`Row ${idx + 2} is missing columns.`);
-		}));
+				return;
+			}
+			const [name, surname, email] = row;
+			if (!name || !surname || !email) {
+				errors.push(`Row ${idx + 2} has missing values.`);
+				return;
+			}
+			validated.push({
+				name,
+				surname,
+				email,
+				email_valid: isValidEmail(email)
+			});
+		});
+		if (errors.length > 0) {
+			return; // Do not proceed if there are errors
+		}
+		if (validated.length === 0) {
+			participants = [];
+			return;
+		}
+		participants = validated.sort((a, b) => {
+			if (a.email_valid === b.email_valid) return 0;
+			return a.email_valid ? 1 : -1;
+		});
 		showForm = false;
-		loading = false;
 	}
 
 	function showEditForm() {
@@ -39,6 +63,15 @@
 </script>
 
 {#if showForm}
+	{#if errors.length > 0}
+		<div class="mb-4 rounded border border-red-400 bg-red-50 p-4 text-red-700">
+			<ul class="list-disc ml-4">
+				{#each errors as err}
+					<li>{err}</li>
+				{/each}
+			</ul>
+		</div>
+	{/if}
 	<form
 		onsubmit={handleSubmit}
 		autocomplete="off"
@@ -75,22 +108,51 @@
 {/if}
 
 {#if !showForm}
-	<div class="mt-4 rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700">
+	<div class="mt-4 rounded border border-gray-300 bg-white p-4">
-		{#if loading}
+		<div class="mb-2 flex items-center justify-between">
-			<strong class="text-gray-700">Loading...</strong>
+			<h2 class="text-xl font-bold">Participants ({participants.length})</h2>
-		{:else if participants.length === 0}
+			{#if participants.length > 0}
-			<strong class="text-gray-700">No participants yet...</strong>
+				{#if participants.some((p) => !p.email_valid)}
+					<span class="text-xs text-gray-500">Some emails appear invalid</span>
 				{:else}
-			<ul class="space-y-2">
+					<span class="text-xs text-gray-500">All emails appear valid</span>
-				{#each participants as p, i}
+				{/if}
-					<li class="flex items-center justify-between border-b pb-1">
+			{/if}
-						<div>
-							<div class="font-semibold">{p.name} {p.surname}</div>
-							<div class="font-mono text-xs text-gray-600">{p.email}</div>
 		</div>
+
+		<ul class="space-y-1">
+			{#each participants as p}
+				<li class="flex items-center gap-2 border-b pb-1 last:border-b-0">
+					{#if p.email_valid}
+						<svg
+							title="Valid email"
+							class="mr-2 inline h-4 w-4 text-green-600"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							viewBox="0 0 24 24"
+						>
+							<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+						</svg>
+					{:else}
+						<svg
+							title="Invalid email"
+							class="mr-2 inline h-4 w-4 text-red-600"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							viewBox="0 0 24 24"
+						>
+							<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
+							<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
+							<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
+						</svg>
+					{/if}
+					<span class="font-semibold">{p.name} {p.surname}</span>
+					<span class="flex-1"></span>
+					<span class="text-right font-mono text-xs text-gray-600">{p.email}</span>
 				</li>
 			{/each}
 		</ul>
-		{/if}
 	</div>
 {/if}