Add the ability to add participants to already created events

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

@@ -1,16 +1,43 @@
 <script lang="ts">
-  import StepConnectGoogle from "./steps/StepConnectGoogle.svelte";
+	import StepConnectGoogle from './steps/StepConnectGoogle.svelte';
-  import StepCraftEmail from "./steps/StepCraftEmail.svelte";
+	import StepCraftEmail from './steps/StepCraftEmail.svelte';
-  import StepCreateEvent from "./steps/StepCreateEvent.svelte";
+	import StepCreateEvent from './steps/StepCreateEvent.svelte';
-  import StepOverview from "./steps/StepOverview.svelte";
+	import StepOverview from './steps/StepOverview.svelte';
-	import StepUploadParticipants from "./steps/StepUploadParticipants.svelte";
+	import StepUploadParticipants from './steps/StepUploadParticipants.svelte';
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
 
 	let { data, form } = $props();
 
 	let event = $state({});
 	let participants = $state([]);
-  let email = $state({'body': '', 'subject': ''});
+	let email = $state({ body: '', subject: '' });
 	let authorized = $state(false);
+	let existingEventId = $state(null);
+	let isAddingParticipants = $state(false);
+
+	onMount(async () => {
+		const eventId = page.url.searchParams.get('id');
+		if (eventId) {
+			existingEventId = eventId;
+			isAddingParticipants = true;
+
+			// Fetch existing event data to prefill the form
+			const { data: existingEvent } = await data.supabase
+				.from('events')
+				.select('*')
+				.eq('id', eventId)
+				.single();
+
+			if (existingEvent) {
+				event = {
+					name: existingEvent.name,
+					date: existingEvent.date,
+					id: existingEvent.id
+				};
+			}
+		}
+	});
 
 	$effect(() => {
 		if (form && form.event) {
@@ -47,30 +74,16 @@
 	}
 </script>
 
-<div class="flex items-center justify-between mb-4 mt-2">
+<div class="mt-2 mb-4">
-  <button
+	{#if isAddingParticipants}
-    onclick={prevStep}
+		<h1 class="text-xl font-semibold text-gray-700 text-center">Add Participants to "{event.name}"</h1>
-    disabled={step === 0}
+	{/if}
-    class="min-w-[100px] py-2 px-4 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition"
-  >
-    Previous
-  </button>
-  <span class="flex-1 text-center text-gray-600 font-medium">
-    Step {step + 1} of {steps.length}
-  </span>
-  <button
-    onclick={nextStep}
-    disabled={step === steps.length - 1 || !stepConditions[step]}
-    class="min-w-[100px] py-2 px-4 bg-white border border-gray-300 text-gray-700 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition"
-  >
-    Next
-  </button>
 </div>
 
 {#if step == 0}
 	<StepConnectGoogle bind:authorized />
 {:else if step == 1}
-  <StepCreateEvent bind:event />
+	<StepCreateEvent bind:event readonly={isAddingParticipants} />
 {:else if step == 2}
 	<StepUploadParticipants bind:participants />
 {:else if step == 3}
@@ -82,5 +95,35 @@
 		{participants}
 		{email}
 		{stepConditions}
+		{existingEventId}
+		{isAddingParticipants}
 	/>
 {/if}
+
+<div class="pb-20"></div>
+
+<div
+  class="fixed bottom-0 left-0 z-10 flex w-full items-center justify-between gap-4 border-t border-gray-300 bg-white px-4 py-2"
+  style="max-width: 100vw;"
+>
+  <div class="container mx-auto max-w-2xl p-2 flex justify-content-center">
+    <button
+      onclick={prevStep}
+      disabled={step === 0}
+      class="min-w-[100px] rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+      aria-label="Previous step"
+    >
+      Previous
+    </button>
+    <span class="flex-1 flex items-center justify-center text-center font-medium text-gray-600">
+      Step {step + 1} of {steps.length}
+    </span>
+    <button
+      onclick={nextStep}
+      disabled={step === steps.length - 1 || !stepConditions[step]}
+      class="min-w-[100px] rounded border border-gray-300 bg-white px-4 py-2 text-gray-700 transition hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+    >
+      Next
+    </button>
+  </div>
+</div>

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

@@ -29,9 +29,18 @@
 		all_data = JSON.parse(sessionStorage.getItem(session_storage_id) || '{}');
 
 		try {
-			event_status = StepStatus.Loading;
+			let createdEvent;
-			const createdEvent = await createEventInSupabase(all_data.event);
+			
+			if (all_data.isAddingParticipants && all_data.existingEventId) {
+				// Skip event creation for existing events
 				event_status = StepStatus.Success;
+				createdEvent = { id: all_data.existingEventId, ...all_data.event };
+			} else {
+				// Create new event
+				event_status = StepStatus.Loading;
+				createdEvent = await createEventInSupabase(all_data.event);
+				event_status = StepStatus.Success;
+			}
 
 			participants_status = StepStatus.Loading;
 			createdParticipants = await createParticipantsInSupabase(all_data.participants, createdEvent);
@@ -141,13 +150,17 @@
 
 <!-- Creating Event Entry -->
 <div class="mb-4 rounded border border-gray-300 bg-white p-4">
-	<h2 class="mb-2 text-xl font-bold">Creating event</h2>
+	<h2 class="mb-2 text-xl font-bold">
+		{all_data.isAddingParticipants ? 'Using existing event' : 'Creating event'}
+	</h2>
 	{#if event_status === StepStatus.Waiting}
 		<span class="text-black-600">Waiting...</span>
 	{:else if event_status === StepStatus.Loading}
 		<span class="text-black-600">Creating event...</span>
 	{:else if event_status === StepStatus.Success}
-		<span class="text-green-600">Event created successfully.</span>
+		<span class="text-green-600">
+			{all_data.isAddingParticipants ? 'Using existing event.' : 'Event created successfully.'}
+		</span>
 	{:else if event_status === StepStatus.Failure}
 		<span class="text-red-600">Failed to create event.</span>
 	{/if}

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

@@ -1,8 +1,8 @@
 <script lang="ts">
-	let { event = $bindable() } = $props();
+	let { event = $bindable(), readonly = false } = $props();
 
 	let loading = $state(false);
-	let showForm = $derived(!event.name || !event.date);
+	let showForm = $derived((!event.name || !event.date) && !readonly);
 
 	function handleSubmit(e: Event) {
 		e.preventDefault();
@@ -18,8 +18,10 @@
 	}
 
 	function showEditForm() {
+		if (!readonly) {
 			showForm = true;
 		}
+	}
 </script>
 
 {#if showForm}
@@ -59,6 +61,7 @@
 {/if}
 
 {#if !showForm}
+	{#if !readonly}
 		<button
 			class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
 			onclick={showEditForm}
@@ -66,6 +69,7 @@
 		>
 			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 Object.keys(event).length > 0}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	
-	let { data, event, participants, email, stepConditions } = $props();
+	let { data, event, participants, email, stepConditions, existingEventId = null, isAddingParticipants = false } = $props();
 
 	function redirectToFinish() {
 		// Generate a random variable name
@@ -9,7 +9,7 @@
 		// Save the data to sessionStorage
 		sessionStorage.setItem(
 			varName,
-			JSON.stringify({ event, participants, email })
+			JSON.stringify({ event, participants, email, existingEventId, isAddingParticipants })
 		);
 		// Redirect with the variable name as a query parameter
 		goto(`/private/events/creator/finish?data=${encodeURIComponent(varName)}`);
@@ -58,7 +58,7 @@
 	disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500"
 	disabled={!stepConditions.every(Boolean)}
 >
-	Generate QR codes and send
+	{isAddingParticipants ? 'Add participants and send emails' : 'Generate QR codes and send'}
 </button>
 
 <div class="mt-2 space-y-1">

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

@@ -37,13 +37,23 @@
 <h1 class="mt-2 mb-4 text-center text-2xl font-bold">Event Overview</h1>
 
 <div class="mb-2 rounded border border-gray-300 bg-white p-4">
+	<div class="flex items-center justify-between gap-4">
 		<div class="flex flex-col gap-1">
 			{#if loading}
-			<div class="h-6 w-40 bg-gray-200 rounded animate-pulse mb-2"></div>
+				<div class="mb-2 h-6 w-40 animate-pulse rounded bg-gray-200"></div>
-			<div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div>
+				<div class="h-4 w-24 animate-pulse rounded bg-gray-100"></div>
 			{:else}
-			<span class="text-black-700 text-lg font-semibold">{event_data?.name}</span>
+				<span class="text-gray-700 text-lg font-semibold">{event_data?.name}</span>
-			<span class="text-black-500 text-sm">{event_data?.date}</span>
+				<span class="text-gray-500 text-sm">{event_data?.date}</span>
+			{/if}
+		</div>
+		{#if !loading && event_data}
+			<a
+				href={`/private/events/creator?eventId=${event_data.id}`}
+				class="rounded border border-gray-300 bg-blue-600 px-6 py-2 font-semibold text-white transition hover:bg-blue-700"
+			>
+				Add Participants
+			</a>
 		{/if}
 	</div>
 </div>
@@ -60,7 +70,7 @@
 			<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
 		</svg>
 		{#if loading}
-			<div class="h-4 w-16 bg-gray-200 rounded animate-pulse"></div>
+			<div class="h-4 w-16 animate-pulse rounded bg-gray-200"></div>
 		{:else}
 			<span class="text-sm text-gray-700">Scanned ({scannedCount})</span>
 		{/if}
@@ -79,7 +89,7 @@
 			<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
 		</svg>
 		{#if loading}
-			<div class="h-4 w-24 bg-gray-200 rounded animate-pulse"></div>
+			<div class="h-4 w-24 animate-pulse rounded bg-gray-200"></div>
 		{:else}
 			<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span>
 		{/if}
@@ -89,7 +99,7 @@
 <div class="rounded border border-gray-300 bg-white p-4">
 	<h2 class="mb-2 rounded text-xl font-bold">
 		{#if loading}
-			<div class="h-6 w-32 bg-gray-200 rounded animate-pulse"></div>
+			<div class="h-6 w-32 animate-pulse rounded bg-gray-200"></div>
 		{:else}
 			Participants ({participants.length})
 		{/if}
@@ -97,7 +107,7 @@
 	<ul class="space-y-1">
 		{#if loading}
 			<li>
-				<div class="h-10 w-full bg-gray-200 rounded animate-pulse"></div>
+				<div class="h-10 w-full animate-pulse rounded bg-gray-200"></div>
 			</li>
 		{:else}
 			{#each participants as p}