Move data processing to the browser for better responsivness and privacy

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

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import Papa from 'papaparse';
+
+	type Participant = { name: string; surname: string; email: string };
+	let { participants = $bindable() } = $props() as { participants: Participant[] };
+	let loading = $state(false);
+	let showForm = $derived(participants.length === 0);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		const form = e.target as HTMLFormElement;
+		const fileInput = form.elements.namedItem('participants') as HTMLInputElement;
+		const file = fileInput?.files?.[0];
+		if (!file) {
+			loading = false;
+			return;
+		}
+		const csvText = await file.text();
+		const { data: parsedRows } = Papa.parse<string[]>(csvText, {
+			skipEmptyLines: true,
+			header: false
+		});
+		// Remove the first row (header)
+		if (parsedRows.length > 0) {
+			parsedRows.shift();
+		}
+		participants = parsedRows.map((row: string[]) => ({
+			name: row[0],
+			surname: row[1],
+			email: row[2]
+		}));
+		showForm = false;
+		loading = false;
+	}
+
+	function showEditForm() {
+		showForm = true;
+	}
+</script>
+
+{#if showForm}
+	<form
+		on:submit={handleSubmit}
+		autocomplete="off"
+		enctype="multipart/form-data"
+		class="flex w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
+	>
+		<h2 class="mb-4 text-center text-2xl font-semibold">Upload Participants</h2>
+		<label class="flex flex-col text-gray-700">
+			CSV File
+			<input
+				type="file"
+				name="participants"
+				id="participants"
+				accept=".csv"
+				class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
+				required
+			/>
+		</label>
+		<button
+			type="submit"
+			class="w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		>
+			Submit
+		</button>
+	</form>
+{:else}
+	<button
+		class="w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		on:click={showEditForm}
+		aria-label="Edit participants"
+	>
+		Edit participants
+	</button>
+{/if}
+
+{#if !showForm}
+	<div class="mt-4 rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700">
+		{#if loading}
+			<strong class="text-gray-700">Loading...</strong>
+		{:else if participants.length === 0}
+			<strong class="text-gray-700">No participants yet...</strong>
+		{:else}
+			<ul class="space-y-2">
+				{#each participants as p, i}
+					<li class="flex items-center justify-between border-b pb-1">
+						<div>
+							<div class="font-semibold">{p.name} {p.surname}</div>
+							<div class="font-mono text-xs text-gray-600">{p.email}</div>
+						</div>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+{/if}