feat: add event guest management

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/lib/dateFormatter.ts

@@ -1,12 +0,0 @@
-export const formatDate = (dateString: string): string => {
-	const date = new Date(dateString);
-	const year = date.getFullYear();
-	const month = String(date.getMonth() + 1).padStart(2, '0');
-	const day = String(date.getDate()).padStart(2, '0');
-	return `${year}/${month}/${day}`;
-};
-
-export const formatTime = (timeString: string): string => {
-	const [hours, minutes] = timeString.split(':');
-	return `${hours}:${minutes}`;
-};

src/lib/dateHelpers.ts

@@ -0,0 +1,40 @@
+import type { Event } from './types';
+
+export const formatDate = (dateString: string): string => {
+	const date = new Date(dateString);
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, '0');
+	const day = String(date.getDate()).padStart(2, '0');
+	return `${year}/${month}/${day}`;
+};
+
+export const formatTime = (timeString: string): string => {
+	const [hours, minutes] = timeString.split(':');
+	return `${hours}:${minutes}`;
+};
+
+// Helper function to check if an event is within a time range
+export const isEventInTimeRange = (event: Event, timeFilter: string): boolean => {
+	if (timeFilter === 'any') return true;
+
+	const eventDate = new Date(`${event.date}T${event.time}`);
+	const now = new Date();
+
+	// Handle temporal status filters
+	if (timeFilter === 'upcoming') {
+		return eventDate >= now;
+	}
+
+	if (timeFilter === 'past') {
+		return eventDate < now;
+	}
+
+	// Handle time range filters
+	const ranges: Record<string, Date> = {
+		'next-week': new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000),
+		'next-month': new Date(new Date(now).setMonth(now.getMonth() + 1))
+	};
+
+	const endDate = ranges[timeFilter];
+	return endDate ? eventDate >= now && eventDate <= endDate : true;
+};

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,33 +253,32 @@
 						</p>
 					</div>
 
-					<!-- 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"
-					>
-						{#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>
-								Creating Event...
-							</div>
-						{:else}
-							Create Event
-						{/if}
-					</button>
+					<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'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">
+									<div class="mr-2 h-5 w-5 animate-spin rounded-full border-b-2 border-white"></div>
+									Creating Event...
+								</div>
+							{:else}
+								Create Event
+							{/if}
+						</button>
+					</div>
 				</form>
 			</div>
-
-			<!-- 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>
 </div>

src/routes/discover/+page.svelte

@@ -2,13 +2,17 @@
 	import type { Event, EventType } from '$lib/types';
 	import { goto } from '$app/navigation';
 	import type { PageData } from '../$types';
-	import { formatTime, formatDate } from '$lib/dateFormatter';
+	import { formatTime, formatDate, isEventInTimeRange } from '$lib/dateHelpers';
 	import Fuse from 'fuse.js';
 
 	let publicEvents: Event[] = [];
 	let error = '';
 	let searchQuery = '';
 	let selectedEventType: EventType | 'all' = 'all';
+	let selectedTimeFilter: 'any' | 'next-week' | 'next-month' = 'any';
+	let selectedTemporalStatus: 'all' | 'upcoming' | 'past' = 'all';
+	let selectedSortOrder: 'asc' | 'desc' = 'asc';
+	let showFilters = false;
 	let fuse: Fuse<Event>;
 
 	export let data: PageData;
@@ -26,7 +30,7 @@
 		includeMatches: true
 	});
 
-	// Filter events based on search query and event type using Fuse.js
+	// Filter events based on search query, event type, time filter, and temporal status
 	$: filteredEvents = (() => {
 		let events = publicEvents;
 
@@ -35,15 +39,43 @@
 			events = events.filter((event) => event.type === selectedEventType);
 		}
 
+		// Then filter by temporal status (past/upcoming/all)
+		if (selectedTemporalStatus !== 'all') {
+			events = events.filter((event) => isEventInTimeRange(event, selectedTemporalStatus));
+		}
+
+		// Then filter by time range
+		if (selectedTimeFilter !== 'any') {
+			events = events.filter((event) => isEventInTimeRange(event, selectedTimeFilter));
+		}
+
 		// Then apply search query
 		if (searchQuery.trim() !== '') {
 			events = fuse.search(searchQuery).map((result) => result.item);
-			// Re-apply type filter after search
+			// Re-apply all filters after search
 			if (selectedEventType !== 'all') {
 				events = events.filter((event) => event.type === selectedEventType);
 			}
+			if (selectedTemporalStatus !== 'all') {
+				events = events.filter((event) => isEventInTimeRange(event, selectedTemporalStatus));
+			}
+			if (selectedTimeFilter !== 'any') {
+				events = events.filter((event) => isEventInTimeRange(event, selectedTimeFilter));
+			}
 		}
 
+		// Sort events by date and time
+		events = events.sort((a, b) => {
+			const dateA = new Date(`${a.date}T${a.time}`);
+			const dateB = new Date(`${b.date}T${b.time}`);
+
+			if (selectedSortOrder === 'asc') {
+				return dateA.getTime() - dateB.getTime();
+			} else {
+				return dateB.getTime() - dateA.getTime();
+			}
+		});
+
 		return events;
 	})();
 </script>
@@ -89,10 +121,10 @@
 				</div>
 
 				<!-- Search and Filter Section -->
-				<div class="mb-8">
-					<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-center">
-						<!-- Search Bar -->
-						<div class="relative mx-auto max-w-md sm:mx-0">
+				<div class="mb-8 max-h-screen">
+					<!-- Search Bar and Filter Toggle -->
+					<div class="mx-auto flex w-full items-center gap-3 md:w-2/3">
+						<div class="relative flex-1">
 							<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
 								<svg
 									class="h-5 w-5 text-slate-400"
@@ -112,12 +144,13 @@
 								type="text"
 								bind:value={searchQuery}
 								placeholder="Search events by name, location..."
-								class="w-full rounded-lg border border-slate-600 bg-slate-800 px-4 py-3 pl-10 text-white placeholder-slate-400 focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20 focus:outline-none"
+								class="w-full rounded-sm border border-slate-600 bg-slate-800 pl-10 text-white placeholder-slate-400 focus:border-violet-500 focus:ring-violet-500/20"
 							/>
 							{#if searchQuery}
 								<button
 									on:click={() => (searchQuery = '')}
 									class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-300"
+									aria-label="Search input"
 								>
 									<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 										<path
@@ -131,37 +164,88 @@
 							{/if}
 						</div>
 
-						<!-- Event Type Filter -->
-						<div class="flex items-center justify-center gap-2">
-							<button
-								on:click={() => (selectedEventType = 'all')}
-								class="rounded-sm border px-3 py-2 text-sm font-medium transition-colors {selectedEventType ===
-								'all'
-									? 'border-violet-500 bg-violet-500/20 text-violet-400'
-									: 'border-slate-600 text-slate-400 hover:border-slate-500 hover:text-slate-300'}"
-							>
-								All
-							</button>
-							<button
-								on:click={() => (selectedEventType = 'limited')}
-								class="rounded-sm border px-3 py-2 text-sm font-medium transition-colors {selectedEventType ===
-								'limited'
-									? 'border-amber-600 bg-amber-600/20 text-amber-600'
-									: 'border-slate-600 text-slate-400 hover:border-slate-500 hover:text-slate-300'}"
-							>
-								Limited
-							</button>
-							<button
-								on:click={() => (selectedEventType = 'unlimited')}
-								class="rounded-sm border px-3 py-2 text-sm font-medium transition-colors {selectedEventType ===
-								'unlimited'
-									? 'border-teal-500 bg-teal-500/20 text-teal-500'
-									: 'border-slate-600 text-slate-400 hover:border-slate-500 hover:text-slate-300'}"
-							>
-								Unlimited
-							</button>
-						</div>
+						<!-- Filter Toggle Button -->
+						<button
+							on:click={() => (showFilters = !showFilters)}
+							class="flex items-center rounded-sm border p-3 font-semibold {showFilters
+								? 'border-violet-500 bg-violet-400/20'
+								: 'border-slate-600 bg-slate-800'}"
+							aria-label="Toggle filters"
+						>
+							<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									stroke-width="2"
+									d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z"
+								></path>
+							</svg>
+						</button>
 					</div>
+
+					<!-- Time Filter and Sort Controls -->
+					{#if showFilters}
+						<div
+							class="mx-auto mt-4 flex flex-col items-center gap-4 sm:flex-row sm:justify-center"
+						>
+							<!-- Event Type Filter -->
+							<div class="flex items-center gap-2">
+								<label for="event-type-filter" class="text-sm font-medium text-slate-400"
+									>Type:</label
+								>
+								<select
+									id="event-type-filter"
+									bind:value={selectedEventType}
+									class="rounded-sm border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-white focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+								>
+									<option value="all">All</option>
+									<option value="limited">Limited</option>
+									<option value="unlimited">Unlimited</option>
+								</select>
+							</div>
+							<!-- Temporal Status Filter -->
+							<div class="flex items-center gap-2">
+								<label for="temporal-status-filter" class="text-sm font-medium text-slate-400"
+									>Status:</label
+								>
+								<select
+									id="temporal-status-filter"
+									bind:value={selectedTemporalStatus}
+									class="rounded-sm border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-white focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+								>
+									<option value="all">All events</option>
+									<option value="upcoming">Upcoming events</option>
+									<option value="past">Past events</option>
+								</select>
+							</div>
+							<!-- Time Filter Dropdown -->
+							<div class="flex items-center gap-2">
+								<label for="time-filter" class="text-sm font-medium text-slate-400">Time:</label>
+								<select
+									id="time-filter"
+									bind:value={selectedTimeFilter}
+									class="rounded-sm border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-white focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+								>
+									<option value="any">Any time</option>
+									<option value="next-week">Next week</option>
+									<option value="next-month">Next month</option>
+								</select>
+							</div>
+
+							<!-- Sort Order Dropdown -->
+							<div class="flex items-center gap-2">
+								<label for="sort-order" class="text-sm font-medium text-slate-400">Sort:</label>
+								<select
+									id="sort-order"
+									bind:value={selectedSortOrder}
+									class="rounded-sm border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-white focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
+								>
+									<option value="asc">Earliest first</option>
+									<option value="desc">Latest first</option>
+								</select>
+							</div>
+						</div>
+					{/if}
 				</div>
 
 				<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
@@ -211,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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Event } from '$lib/types';
 	import { goto } from '$app/navigation';
-	import { formatTime, formatDate } from '$lib/dateFormatter';
+	import { formatTime, formatDate } from '$lib/dateHelpers';
 
 	export let data: { events: Event[] };
 
@@ -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.server.ts

@@ -69,6 +69,7 @@ export const actions: Actions = {
 		const formData = await request.formData();
 
 		const name = formData.get('newAttendeeName') as string;
+		const numberOfGuests = parseInt(formData.get('numberOfGuests') as string) || 0;
 		const userId = cookies.get('cactoideUserId');
 
 		if (!name?.trim() || !userId) {
@@ -82,27 +83,48 @@ export const actions: Actions = {
 				return fail(404, { error: 'Event not found' });
 			}
 
+			// Get current RSVPs
+			const currentRSVPs = await database.select().from(rsvps).where(eq(rsvps.eventId, eventId));
+
+			// Calculate total attendees (including guests)
+			const totalAttendees = currentRSVPs.length + numberOfGuests;
+
 			// Check if event is full (for limited type events)
 			if (eventData.type === 'limited' && eventData.attendeeLimit) {
-				const currentRSVPs = await database.select().from(rsvps).where(eq(rsvps.eventId, eventId));
-				if (currentRSVPs.length >= eventData.attendeeLimit) {
-					return fail(400, { error: 'Event is full' });
+				if (totalAttendees > eventData.attendeeLimit) {
+					return fail(400, {
+						error: `Event capacity exceeded. You're trying to add ${numberOfGuests + 1} attendees (including yourself), but only ${eventData.attendeeLimit - currentRSVPs.length} spots remain.`
+					});
 				}
 			}
 
 			// Check if name is already in the list
-			const existingRSVPs = await database.select().from(rsvps).where(eq(rsvps.eventId, eventId));
-			if (existingRSVPs.some((rsvp) => rsvp.name.toLowerCase() === name.toLowerCase())) {
+			if (currentRSVPs.some((rsvp) => rsvp.name.toLowerCase() === name.toLowerCase())) {
 				return fail(400, { error: 'Name already exists for this event' });
 			}
 
-			// Add RSVP to database
-			await database.insert(rsvps).values({
-				eventId: eventId,
-				name: name.trim(),
-				userId: userId,
-				createdAt: new Date()
-			});
+			// Prepare RSVPs to insert
+			const rsvpsToInsert = [
+				{
+					eventId: eventId,
+					name: name.trim(),
+					userId: userId,
+					createdAt: new Date()
+				}
+			];
+
+			// Add guest entries
+			for (let i = 1; i <= numberOfGuests; i++) {
+				rsvpsToInsert.push({
+					eventId: eventId,
+					name: `${name.trim()}'s Guest #${i}`,
+					userId: userId,
+					createdAt: new Date()
+				});
+			}
+
+			// Insert all RSVPs
+			await database.insert(rsvps).values(rsvpsToInsert);
 
 			return { success: true, type: 'add' };
 		} catch (err) {

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

@@ -3,7 +3,7 @@
 	import type { Event, RSVP } from '$lib/types';
 	import { goto } from '$app/navigation';
 	import { enhance } from '$app/forms';
-	import { formatTime, formatDate } from '$lib/dateFormatter';
+	import { formatTime, formatDate } from '$lib/dateHelpers.js';
 
 	export let data: { event: Event; rsvps: RSVP[]; userId: string };
 	export let form;
@@ -14,6 +14,8 @@
 	let isAddingRSVP = false;
 	let error = '';
 	let success = '';
+	let addGuests = false;
+	let numberOfGuests = 1;
 
 	// Use server-side data
 	$: event = data.event;
@@ -22,7 +24,7 @@
 
 	// Handle form errors from server
 	$: if (form?.error) {
-		error = form.error;
+		error = String(form.error);
 		success = '';
 	}
 
@@ -31,11 +33,13 @@
 		success = 'RSVP added successfully!';
 		error = '';
 		newAttendeeName = '';
+		addGuests = false;
+		numberOfGuests = 1;
 	}
 
 	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 +47,12 @@
 				success = '';
 			}, 3000);
 		});
-	}
+	};
 
-	function clearMessages() {
+	const clearMessages = () => {
 		error = '';
 		success = '';
-	}
+	};
 </script>
 
 <svelte:head>
@@ -179,7 +183,7 @@
 								return async ({ result, update }) => {
 									isAddingRSVP = false;
 									if (result.type === 'failure') {
-										error = result.data?.error || 'Failed to add RSVP';
+										error = String(result.data?.error || 'Failed to add RSVP');
 									}
 									update();
 								};
@@ -203,9 +207,48 @@
 								/>
 							</div>
 
+							<!-- Add Guests Toggle -->
+							<div class="flex items-center space-x-3">
+								<input
+									id="addGuests"
+									type="checkbox"
+									bind:checked={addGuests}
+									class="h-4 w-4 rounded border-gray-300 text-violet-600 focus:ring-violet-500"
+								/>
+								<label for="addGuests" class="text-sm font-medium text-white">
+									Add guest users
+								</label>
+							</div>
+
+							<!-- Number of Guests Input -->
+							{#if addGuests}
+								<div>
+									<label for="numberOfGuests" class="mb-2 block text-sm font-semibold">
+										Number of Guests <span class="text-red-400">*</span>
+									</label>
+									<input
+										id="numberOfGuests"
+										name="numberOfGuests"
+										type="number"
+										bind:value={numberOfGuests}
+										min="1"
+										max="10"
+										class="border-dark-300 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm"
+										placeholder="Enter number of guests"
+										required
+									/>
+									<p class="mt-1 text-xs text-slate-400">
+										Guests will be added as "{newAttendeeName || 'Your Name'}'s Guest #1", "{newAttendeeName ||
+											'Your Name'}'s Guest #2", etc.
+									</p>
+								</div>
+							{/if}
+
 							<button
 								type="submit"
-								disabled={isAddingRSVP || !newAttendeeName.trim()}
+								disabled={isAddingRSVP ||
+									!newAttendeeName.trim() ||
+									(addGuests && numberOfGuests < 1)}
 								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"
 							>
 								{#if isAddingRSVP}
@@ -215,6 +258,8 @@
 										></div>
 										Adding...
 									</div>
+								{:else if addGuests && numberOfGuests > 0}
+									Join Event + {numberOfGuests} Guest{numberOfGuests > 1 ? 's' : ''}
 								{:else}
 									Join Event
 								{/if}
@@ -243,12 +288,22 @@
 								>
 									<div class="flex items-center space-x-3">
 										<div
-											class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold"
+											class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold {attendee.name.includes(
+												"'s Guest"
+											)
+												? 'text-white-400 bg-violet-500/40'
+												: 'bg-violet-500/20 text-violet-400'}"
 										>
 											{attendee.name.charAt(0).toUpperCase()}
 										</div>
 										<div>
-											<p class="font-medium text-white">{attendee.name}</p>
+											<p
+												class="font-medium text-white {attendee.name.includes("'s Guest")
+													? 'text-amber-300'
+													: ''}"
+											>
+												{attendee.name}
+											</p>
 											<p class="text-xs text-violet-400">
 												{(() => {
 													const date = new Date(attendee.created_at);
@@ -271,7 +326,7 @@
 												clearMessages();
 												return async ({ result, update }) => {
 													if (result.type === 'failure') {
-														error = result.data?.error || 'Failed to remove RSVP';
+														error = String(result.data?.error || 'Failed to remove RSVP');
 													}
 													update();
 												};

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>