Move data processing to the browser for better responsivness and privacy

src/routes/private/events/creator/+page.server.ts

@@ -1,61 +0,0 @@
-import type { Actions } from './$types';
-import { error as kitError } from '@sveltejs/kit';
-import Papa from 'papaparse';
-import { fail } from '@sveltejs/kit';
-
-export async function load({ locals }) {
-    const { data: events, error } = await locals.supabase
-        .from('events')
-        .select('*')
-        .order('date', { ascending: true });
-
-    if (error) {
-        console.error('❌ supabase error:', error);
-        // optional: throw to render SvelteKit error page
-        throw kitError(500, 'Could not load events');
-    }
-
-    return { events };
-}
-
-export const actions = {
-    create: async (event) => {
-        const formData = await event.request.formData();
-        let { data: new_event, error } = await event.locals.supabase.rpc("create_event",
-            {
-                "p_name": formData.get('name'),
-                "p_date": formData.get('date'),
-                "p_description": formData.get('description'),
-            });
-        return {
-            new_event,
-            error
-        }
-    },
-    participants: async (event) => {
-        const formData = await event.request.formData();
-        const file = formData.get('participants') as File;
-
-        let csvText = await file.text();
-
-        const { data: parsedRows, errors } = Papa.parse<string[]>(csvText, {
-            skipEmptyLines: true,
-            header: false
-        });
-        // Remove the first row (header)
-        if (parsedRows.length > 0) {
-            parsedRows.shift();
-        }
-
-        // Map each row to an object with keys: name, surname, email
-        const participants = parsedRows.map((row: string[]) => ({
-            name: row[0],
-            surname: row[1],
-            email: row[2]
-        }));
-
-        return {
-            participants,
-        }
-    }
-} satisfies Actions;

src/routes/private/events/creator/+page.svelte

@@ -3,7 +3,7 @@
   import StepCraftEmail from "./steps/StepCraftEmail.svelte";
   import StepCreateEvent from "./steps/StepCreateEvent.svelte";
   import StepOverview from "./steps/StepOverview.svelte";
-  import StepUploadFiles from "./steps/StepUploadFiles.svelte";
+	import StepUploadParticipants from "./steps/StepUploadParticipants.svelte";
 
   let { data, form } = $props();
 
@@ -13,8 +13,8 @@
   let authorized = $state(false);
 
   $effect(() => {
-    if (form && form.new_event) {
-      event = form.new_event;
+    if (form && form.event) {
+      event = form.event;
     }
     if (form && form.participants) {
       participants = form.participants;
@@ -25,7 +25,7 @@
   const steps = [
     StepConnectGoogle,
     StepCreateEvent,
-    StepUploadFiles,
+    StepUploadParticipants,
     StepCraftEmail,
     StepOverview
   ];
@@ -78,9 +78,9 @@
 {#if step == 0}
   <StepConnectGoogle bind:authorized />
 {:else if step == 1}
-  <StepCreateEvent {event} />
+  <StepCreateEvent bind:event />
 {:else if step == 2}
-  <StepUploadFiles {participants} />
+  <StepUploadParticipants bind:participants />
 {:else if step == 3}
   <StepCraftEmail bind:email />
 {:else if step == 4}

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

@@ -1,25 +1,66 @@
 <script lang="ts">
-  export let email: { subject: string, body: string } = { subject: '', body: '' };
+	let { email = $bindable() } = $props();
+
+	let showForm = $derived(!email.subject || !email.body);
+
+	function handleSubmit(e: Event) {
+		e.preventDefault();
+		const form = e.target as HTMLFormElement;
+		const formData = new FormData(form);
+		email = {
+			subject: formData.get('subject') as string,
+			body: formData.get('body') as string
+		};
+		showForm = false;
+	}
+
+	function showEditForm() {
+		showForm = true;
+	}
 </script>
 
-<form class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
-  <h2 class="text-2xl font-semibold text-center mb-4">Craft Email</h2>
-  <label class="flex flex-col text-gray-700">
-    Subject
-    <input
-      type="text"
-      bind:value={email.subject}
-      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
-      required
-    />
-  </label>
-  <label class="flex flex-col text-gray-700">
-    Body
-    <textarea
-      bind:value={email.body}
-      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
-      rows="6"
-      required
-    ></textarea>
-  </label>
-</form>
+{#if showForm}
+	<form on:submit={handleSubmit} class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
+		<h2 class="text-2xl font-semibold text-center mb-4">Craft Email</h2>
+		<label class="flex flex-col text-gray-700">
+			Subject
+			<input
+				type="text"
+				name="subject"
+				value={email.subject ?? ''}
+				class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
+				required
+			/>
+		</label>
+		<label class="flex flex-col text-gray-700">
+			Body
+			<textarea
+				name="body"
+				value={email.body ?? ''}
+				class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
+				rows="6"
+				required
+			></textarea>
+		</label>
+		<button
+			type="submit"
+			class="mt-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		>
+			Save
+		</button>
+	</form>
+{:else}
+	<button
+		class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		on:click={showEditForm}
+		aria-label="Edit email"
+	>
+		Edit email
+	</button>
+	<div class="rounded border-l-4 border-green-500 p-4 text-green-700 bg-green-100">
+		<ol>
+			<li><strong>{email.subject}</strong></li>
+			<li class="whitespace-pre-line">{email.body}</li>
+		</ol>
+	</div>
+{/if}

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

@@ -1,71 +1,88 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
+	let { event = $bindable() } = $props();
 
-	let { event } = $props();
 	let loading = $state(false);
+	let showForm = $derived(!event.name || !event.date);
 
-	function handleEnhance() {
+	function handleSubmit(e: Event) {
+		e.preventDefault();
 		loading = true;
-
-		return async ({ update }) => {
-			await update();
-			loading = false;
+		const form = e.target as HTMLFormElement;
+		const formData = new FormData(form);
+		event = {
+			name: formData.get('name'),
+			date: formData.get('date')
 		};
+		showForm = false;
+		loading = false;
+	}
+
+	function showEditForm() {
+		showForm = true;
 	}
 </script>
 
-
-<form method="POST" action="?/create" use:enhance={handleEnhance} class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
-  <h2 class="text-2xl font-semibold text-center mb-4">Create Event</h2>
-  <label class="flex flex-col text-gray-700">
-    Name
-    <input
-      type="text"
-      name="name"
-      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
-      required
-    />
-  </label>
-  <label class="flex flex-col text-gray-700">
-    Date
-    <input
-      type="date"
-      name="date"
-      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
-      required
-    />
-  </label>
-  <label class="flex flex-col text-gray-700">
-    Description
-    <textarea
-      name="description"
-      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
-      rows="3"
-      required
-    ></textarea>
-  </label>
-  <button
-    type="submit"
-    class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
-  >
-    Submit
-  </button>
-</form>
-
-{#if Object.keys(event).length === 0}
-  <div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
-    {#if loading}
-      <strong>Loading...</strong>
-    {:else}
-      <strong>No event created yet...</strong>
-    {/if}
-  </div>
-{:else}
-  <div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700 mt-4">
-    <ol>
-      <li><strong>{event.name}</strong></li>
-      <li>{event.date}</li>
-      <li>{event.description}</li>
-    </ol>
-  </div>
+{#if showForm}
+	<form
+		on:submit={handleSubmit}
+		autocomplete="off"
+		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">Create Event</h2>
+		<label class="mt-2 flex flex-col text-gray-700">
+			Name
+			<input
+				type="text"
+				name="name"
+				class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
+				required
+				value={event.name ?? ''}
+			/>
+		</label>
+		<label class="mt-2 flex flex-col text-gray-700">
+			Date
+			<input
+				type="date"
+				name="date"
+				class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
+				required
+				value={event.date ?? ''}
+			/>
+		</label>
+		<button
+			type="submit"
+			class="mt-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		>
+			Save
+		</button>
+	</form>
+{/if}
+
+{#if !showForm}
+	<button
+		class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		on:click={showEditForm}
+		aria-label="Edit event"
+	>
+		Edit the event
+	</button>
+{/if}
+
+{#if !showForm}
+	<div
+		class="rounded border-l-4 border-green-500 p-4 text-green-700"
+		class:bg-gray-100={loading}
+		class:bg-green-100={!loading}
+	>
+		{#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}
+	</div>
 {/if}

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

@@ -23,7 +23,6 @@
 	<ul class="space-y-1">
 		<li><span class="font-semibold">Name:</span> {event.name}</li>
 		<li><span class="font-semibold">Date:</span> {event.date}</li>
-		<li><span class="font-semibold">Description:</span> {event.description}</li>
 	</ul>
 </div>
 

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

@@ -1,65 +0,0 @@
-<script lang="ts">
-	import { enhance } from '$app/forms';
-
-	let { participants = [] } = $props();
-	let loading = $state(false);
-
-	function handleEnhance() {
-		loading = true;
-
-		return async ({ update }) => {
-			await update();
-			loading = false;
-		};
-	}
-</script>
-
-<form
-	method="POST"
-	action="?/participants"
-	use:enhance={handleEnhance}
-	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>
-
-{#if participants.length === 0}
-	<div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
-		{#if loading}
-			<strong>Loading...</strong>
-		{:else}
-			<strong>No participants yet...</strong>
-		{/if}
-	</div>
-{:else}
-	<div class="mt-4 rounded border-l-4 border-green-500 bg-green-50 p-4 text-green-700">
-		<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>
-	</div>
-{/if}

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}