feat: add edit events functionality

feat: add edit events functionality

src/lib/components/Navbar.svelte

@@ -2,14 +2,10 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 
-	function navigateTo(path: string) {
-		goto(path);
-	}
-
 	// Check if current page is active
-	function isActive(path: string): boolean {
+	const isActive = (path: string): boolean => {
 		return $page.url.pathname === path;
-	}
+	};
 </script>
 
 <nav class="relative z-50 backdrop-blur-md">
@@ -18,7 +14,7 @@
 			<!-- Logo/Brand -->
 			<div class="flex items-center">
 				<button
-					on:click={() => navigateTo('/')}
+					on:click={() => goto('/')}
 					class="cursor-pointer text-2xl font-medium text-violet-400"
 				>
 					Cactoide
@@ -28,28 +24,28 @@
 			<!-- Navigation -->
 			<div class="md:flex md:items-center md:space-x-8">
 				<button
-					on:click={() => navigateTo('/')}
+					on:click={() => goto('/')}
 					class={isActive('/') ? 'text-violet-400' : 'cursor-pointer'}
 				>
 					Home
 				</button>
 
 				<button
-					on:click={() => navigateTo('/discover')}
+					on:click={() => goto('/discover')}
 					class={isActive('/discover') ? 'text-violet-400' : 'cursor-pointer'}
 				>
 					Discover
 				</button>
 
 				<button
-					on:click={() => navigateTo('/create')}
+					on:click={() => goto('/create')}
 					class={isActive('/create') ? 'text-violet-400' : 'cursor-pointer'}
 				>
 					Create
 				</button>
 
 				<button
-					on:click={() => navigateTo('/event')}
+					on:click={() => goto('/event')}
 					class={isActive('/event') ? 'text-violet-400' : 'cursor-pointer'}
 				>
 					My Events

src/routes/create/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { CreateEventData, EventType } from '$lib/types';
 	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
 
 	export let form;
 
@@ -37,12 +38,16 @@
 		};
 	}
 
-	function handleTypeChange(type: EventType) {
+	const handleTypeChange = (type: EventType) => {
 		eventData.type = type;
 		if (type === 'unlimited') {
 			eventData.attendee_limit = undefined;
 		}
-	}
+	};
+
+	const handleCancel = () => {
+		goto(`/discover`);
+	};
 </script>
 
 <svelte:head>
@@ -248,11 +253,19 @@
 						</p>
 					</div>
 
+					<div class="flex space-x-3">
+						<button
+							type="button"
+							on:click={handleCancel}
+							class="flex-1 rounded-sm border-2 border-slate-300 bg-slate-200 px-4 py-3 font-semibold text-slate-700 transition-all duration-200 hover:bg-slate-400 hover:text-slate-200"
+						>
+							Cancel
+						</button>
 						<!-- Submit Button -->
 						<button
 							type="submit"
 							disabled={isSubmitting}
-						class="hover:bg-violet-400/70' w-full rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
+							class="hover:bg-violet-400/70'l rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
 						>
 							{#if isSubmitting}
 								<div class="flex items-center justify-center">
@@ -263,17 +276,8 @@
 								Create Event
 							{/if}
 						</button>
-				</form>
 					</div>
-
+				</form>
-			<!-- Info Section -->
-			<div class="mt-8 p-6 text-center">
-				<p class="text-dark-100 font-medium">
-					Share the generated link with others to collect RSVPs.
-				</p>
-				<p class="mt-2 text-sm text-violet-300">
-					No registration required • Mobile optimized • Instant sharing
-				</p>
 			</div>
 		</div>
 	</div>

src/routes/discover/+page.svelte

@@ -295,12 +295,12 @@
 								</div>
 							</div>
 
-							<div class="flex space-x-3">
+							<div class="flex">
 								<button
 									on:click={() => goto(`/event/${event.id}`)}
 									class="flex-1 rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-2 font-semibold duration-200 hover:bg-violet-400/70"
 								>
-									View Event
+									View
 								</button>
 							</div>
 						</div>

src/routes/event/+page.server.ts

@@ -2,6 +2,7 @@ import { database } from '$lib/database/db';
 import { events } from '$lib/database/schema';
 import { fail } from '@sveltejs/kit';
 import { eq, desc } from 'drizzle-orm';
+import type { Actions } from './$types';
 
 export const load = async ({ cookies }) => {
 	const userId = cookies.get('cactoideUserId');

src/routes/event/+page.svelte

@@ -149,15 +149,65 @@
 								<button
 									on:click={() => goto(`/event/${event.id}`)}
 									class="flex-1 rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-2 font-semibold duration-200 hover:bg-violet-400/70"
+									aria-label="View event"
 								>
-									View
+									<svg
+										class="mx-auto h-4 w-4"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+										></path>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+										></path>
+									</svg>
+								</button>
+								<button
+									on:click={() => goto(`/event/${event.id}/edit`)}
+									class="flex-1 rounded-sm border-2 border-blue-400 bg-blue-400/20 px-4 py-2 font-semibold text-white duration-200 hover:bg-blue-400/70"
+									aria-label="Edit event"
+								>
+									<svg
+										class="mx-auto h-4 w-4"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+										></path>
+									</svg>
 								</button>
 								<button
 									on:click={() => openDeleteModal(event)}
 									class="flex-1 rounded-sm border-2 border-red-400 bg-red-400/20 px-4 py-2 font-semibold text-white duration-200 hover:bg-red-400/70"
 									aria-label="Delete event"
 								>
-									Delete
+									<svg
+										class="mx-auto h-4 w-4"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+										></path>
+									</svg>
 								</button>
 							</div>
 						</div>

src/routes/event/[id]/+page.svelte

@@ -35,7 +35,7 @@
 
 	const eventId = $page.params.id;
 
-	function copyEventLink() {
+	const copyEventLink = () => {
 		const url = `${window.location.origin}/event/${eventId}`;
 		navigator.clipboard.writeText(url).then(() => {
 			success = 'Event link copied to clipboard!';
@@ -43,12 +43,12 @@
 				success = '';
 			}, 3000);
 		});
-	}
+	};
 
-	function clearMessages() {
+	const clearMessages = () => {
 		error = '';
 		success = '';
-	}
+	};
 </script>
 
 <svelte:head>
@@ -300,7 +300,7 @@
 						</div>
 					{/if}
 				</div>
-
+				succcess: {success}
 				<!-- Action Buttons -->
 				<div class="max-w-2xl">
 					<button

src/routes/event/[id]/edit/+page.server.ts

@@ -0,0 +1,123 @@
+import { database } from '$lib/database/db';
+import { events } from '$lib/database/schema';
+import { eq, and } from 'drizzle-orm';
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params, cookies }) => {
+	const eventId = params.id;
+	const userId = cookies.get('cactoideUserId');
+
+	if (!userId) {
+		throw redirect(303, '/');
+	}
+
+	// Fetch the event and verify ownership
+	const event = await database
+		.select()
+		.from(events)
+		.where(and(eq(events.id, eventId), eq(events.userId, userId)))
+		.limit(1);
+
+	if (event.length === 0) {
+		throw redirect(303, '/event');
+	}
+
+	return {
+		event: event[0]
+	};
+};
+
+export const actions: Actions = {
+	default: async ({ request, params, cookies }) => {
+		const eventId = params.id;
+		const userId = cookies.get('cactoideUserId');
+		const formData = await request.formData();
+
+		if (!userId) {
+			return fail(401, { error: 'Unauthorized' });
+		}
+
+		// Verify event ownership before allowing edit
+		const existingEvent = await database
+			.select()
+			.from(events)
+			.where(and(eq(events.id, eventId), eq(events.userId, userId)))
+			.limit(1);
+
+		if (existingEvent.length === 0) {
+			return fail(403, { error: 'You can only edit your own events' });
+		}
+
+		const name = formData.get('name') as string;
+		const date = formData.get('date') as string;
+		const time = formData.get('time') as string;
+		const location = formData.get('location') as string;
+		const type = formData.get('type') as 'limited' | 'unlimited';
+		const attendeeLimit = formData.get('attendee_limit') as string;
+		const visibility = formData.get('visibility') as 'public' | 'private';
+
+		// Validation
+		const missingFields: string[] = [];
+
+		if (!name?.trim()) missingFields.push('name');
+		if (!date) missingFields.push('date');
+		if (!time) missingFields.push('time');
+		if (!location?.trim()) missingFields.push('location');
+
+		if (missingFields.length > 0) {
+			return fail(400, {
+				error: `Missing or empty fields: ${missingFields.join(', ')}`,
+				values: {
+					name,
+					date,
+					time,
+					location,
+					type,
+					attendee_limit: attendeeLimit,
+					visibility
+				}
+			});
+		}
+
+		// Check if date is in the past (but allow editing past events for corrections)
+		const eventDate = new Date(date);
+		const today = new Date();
+		today.setHours(0, 0, 0, 0);
+
+		if (eventDate < today) {
+			return fail(400, {
+				error: 'Date cannot be in the past.',
+				values: { name, date, time, location, type, attendee_limit: attendeeLimit, visibility }
+			});
+		}
+
+		if (type === 'limited' && (!attendeeLimit || parseInt(attendeeLimit) < 2)) {
+			return fail(400, {
+				error: 'Limit must be at least 2 for limited events.',
+				values: { name, date, time, location, type, attendee_limit: attendeeLimit, visibility }
+			});
+		}
+
+		// Update the event
+		await database
+			.update(events)
+			.set({
+				name: name.trim(),
+				date: date,
+				time: time,
+				location: location.trim(),
+				type: type,
+				attendeeLimit: type === 'limited' ? parseInt(attendeeLimit) : null,
+				visibility: visibility,
+				updatedAt: new Date()
+			})
+			.where(and(eq(events.id, eventId), eq(events.userId, userId)))
+			.catch((error) => {
+				console.error('Unexpected error updating event', error);
+				throw error;
+			});
+
+		throw redirect(303, `/event/${eventId}`);
+	}
+};

src/routes/event/[id]/edit/+page.svelte

@@ -0,0 +1,289 @@
+<script lang="ts">
+	import type { EventType } from '$lib/types';
+	import { enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
+
+	export let data;
+	export let form;
+
+	let eventData = {
+		name: data.event.name,
+		date: data.event.date,
+		time: data.event.time,
+		location: data.event.location,
+		type: data.event.type,
+		attendee_limit: data.event.attendeeLimit,
+		visibility: data.event.visibility
+	};
+
+	let errors: Record<string, string> = {};
+	let isSubmitting = false;
+
+	// Get today's date in YYYY-MM-DD format for min attribute
+	const today = new Date().toISOString().split('T')[0];
+
+	// Handle form errors from server
+	$: if (form?.error) {
+		errors.server = form.error;
+	}
+
+	// Pre-fill form with values from server on error
+	$: if (form && 'values' in form && form.values) {
+		const values = form.values;
+		eventData = {
+			...eventData,
+			...values,
+			attendee_limit: values.attendee_limit ? parseInt(String(values.attendee_limit)) : null
+		};
+	}
+
+	const handleTypeChange = (type: EventType) => {
+		eventData.type = type;
+		if (type === 'unlimited') {
+			eventData.attendee_limit = null;
+		}
+	};
+
+	const handleCancel = () => {
+		goto(`/event/${data.event.id}`);
+	};
+</script>
+
+<svelte:head>
+	<title>Edit Event - {data.event.name} - Cactoide</title>
+</svelte:head>
+
+<div class="flex min-h-screen flex-col">
+	<!-- Main Content -->
+	<div class="container mx-auto flex-1 px-4 py-8">
+		<div class="mx-auto max-w-md">
+			<!-- Event Edit Form -->
+			<div class="rounded-sm border p-8">
+				<div class="mb-8 text-center">
+					<h2 class="text-3xl font-bold text-violet-400">Edit Event</h2>
+					<p class="mt-2 text-sm text-slate-400">Update your event details</p>
+				</div>
+
+				<form
+					method="POST"
+					use:enhance={() => {
+						isSubmitting = true;
+						return async ({ result, update }) => {
+							isSubmitting = false;
+							if (result.type === 'failure') {
+								// Handle validation errors
+								if (result.data?.error) {
+									errors.server = String(result.data.error);
+								}
+							}
+							update();
+						};
+					}}
+					class="space-y-6"
+				>
+					<input type="hidden" name="type" value={eventData.type} />
+					<input type="hidden" name="visibility" value={eventData.visibility} />
+
+					{#if errors.server}
+						<div class="mb-6 rounded-sm border border-red-200 bg-red-50 p-4 text-red-700">
+							{errors.server}
+						</div>
+					{/if}
+
+					<!-- Event Name -->
+					<div>
+						<label for="name" class="text-dark-800 mb-3 block text-sm font-semibold">
+							Name <span class="text-red-400">*</span>
+						</label>
+						<input
+							id="name"
+							name="name"
+							type="text"
+							bind:value={eventData.name}
+							class="border-dark-300 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm"
+							placeholder="Enter event name"
+							maxlength="100"
+							required
+						/>
+						{#if errors.name}
+							<p class="mt-2 text-sm font-medium text-red-600">{errors.name}</p>
+						{/if}
+					</div>
+
+					<!-- Date and Time Row -->
+					<div class="grid grid-cols-2 gap-4">
+						<div>
+							<label for="date" class="text-dark-800 mb-3 block text-sm font-semibold">
+								Date <span class="text-red-400">*</span>
+							</label>
+							<input
+								id="date"
+								name="date"
+								type="date"
+								bind:value={eventData.date}
+								min={today}
+								class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
+								required
+							/>
+							{#if errors.date}
+								<p class="mt-2 text-sm font-medium text-red-600">{errors.date}</p>
+							{/if}
+						</div>
+
+						<div>
+							<label for="time" class="text-dark-800 mb-3 block text-sm font-semibold">
+								Time <span class="text-red-400">*</span>
+							</label>
+							<input
+								id="time"
+								name="time"
+								type="time"
+								bind:value={eventData.time}
+								class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
+								required
+							/>
+							{#if errors.time}
+								<p class="mt-2 text-sm font-medium text-red-600">{errors.time}</p>
+							{/if}
+						</div>
+					</div>
+
+					<!-- Location -->
+					<div>
+						<label for="location" class="text-dark-800 mb-3 block text-sm font-semibold">
+							Location <span class="text-red-400">*</span>
+						</label>
+						<input
+							id="location"
+							name="location"
+							type="text"
+							bind:value={eventData.location}
+							class="border-dark-300 placeholder-dark-500 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm transition-all"
+							placeholder="Enter location"
+							maxlength="200"
+							required
+						/>
+						{#if errors.location}
+							<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
+						{/if}
+					</div>
+
+					<!-- Event Type -->
+					<div>
+						<fieldset>
+							<legend class="text-dark-800 mb-3 block text-sm font-semibold">
+								Type <span class="text-red-400">*</span>
+							</legend>
+							<div class="grid grid-cols-2 gap-3">
+								<button
+									type="button"
+									class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.type ===
+									'unlimited'
+										? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
+										: 'border-dark-300 text-dark-700'}"
+									on:click={() => handleTypeChange('unlimited')}
+								>
+									Unlimited
+								</button>
+								<button
+									type="button"
+									class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.type ===
+									'limited'
+										? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
+										: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
+									on:click={() => handleTypeChange('limited')}
+								>
+									Limited
+								</button>
+							</div>
+						</fieldset>
+					</div>
+
+					<!-- Limit (only for limited events) -->
+					{#if eventData.type === 'limited'}
+						<div>
+							<label for="limit" class="text-dark-800 mb-3 block text-sm font-semibold">
+								Attendee Limit *
+							</label>
+							<input
+								id="attendee_limit"
+								name="attendee_limit"
+								type="number"
+								bind:value={eventData.attendee_limit}
+								min="1"
+								max="1000"
+								class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
+								placeholder="Enter limit"
+								required
+							/>
+							{#if errors.attendee_limit}
+								<p class="mt-2 text-sm font-medium text-red-600">{errors.attendee_limit}</p>
+							{/if}
+						</div>
+					{/if}
+
+					<!-- Event Visibility -->
+					<div>
+						<fieldset>
+							<legend class="text-dark-800 mb-3 block text-sm font-semibold">
+								Visibility <span class="text-red-400">*</span>
+							</legend>
+							<div class="grid grid-cols-2 gap-3">
+								<button
+									type="button"
+									class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.visibility ===
+									'public'
+										? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
+										: 'border-dark-300 text-dark-700'}"
+									on:click={() => (eventData.visibility = 'public')}
+								>
+									🌍 Public
+								</button>
+								<button
+									type="button"
+									class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.visibility ===
+									'private'
+										? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
+										: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
+									on:click={() => (eventData.visibility = 'private')}
+								>
+									🔒 Private
+								</button>
+							</div>
+							<p class="mt-2 text-xs text-slate-400">
+								{eventData.visibility === 'public'
+									? 'Public events are visible to everyone and can be discovered by others'
+									: 'Private events are only visible to you and people you share the link with'}
+							</p>
+						</fieldset>
+					</div>
+
+					<!-- Action Buttons -->
+					<div class="flex space-x-3">
+						<button
+							type="button"
+							on:click={handleCancel}
+							class="flex-1 rounded-sm border-2 border-slate-300 bg-slate-200 px-4 py-3 font-semibold text-slate-700 transition-all duration-200 hover:bg-slate-400 hover:text-slate-200"
+						>
+							Cancel
+						</button>
+						<button
+							type="submit"
+							disabled={isSubmitting}
+							class="hover:bg-violet-400/70' flex-1 rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
+						>
+							{#if isSubmitting}
+								<div class="flex items-center justify-center">
+									<div class="mr-2 h-5 w-5 animate-spin rounded-full border-b-2 border-white"></div>
+									Updating...
+								</div>
+							{:else}
+								Update Event
+							{/if}
+						</button>
+					</div>
+				</form>
+			</div>
+		</div>
+	</div>
+</div>