feat: add public/private event types

src/lib/components/Navbar.svelte

@@ -14,7 +14,7 @@
 
 <nav class="relative z-50 backdrop-blur-md">
 	<div class="container mx-auto px-4">
-		<div class="flex h-16 items-center justify-between">
+		<div class="mt-4 flex h-16 flex-col items-center justify-between">
 			<!-- Logo/Brand -->
 			<div class="flex items-center">
 				<button
@@ -34,6 +34,13 @@
 					Home
 				</button>
 
+				<button
+					on:click={() => navigateTo('/discover')}
+					class={isActive('/discover') ? 'text-violet-400' : 'cursor-pointer'}
+				>
+					Discover
+				</button>
+
 				<button
 					on:click={() => navigateTo('/create')}
 					class={isActive('/create') ? 'text-violet-400' : 'cursor-pointer'}
@@ -45,7 +52,7 @@
 					on:click={() => navigateTo('/event')}
 					class={isActive('/event') ? 'text-violet-400' : 'cursor-pointer'}
 				>
-					List
+					My Events
 				</button>
 			</div>
 		</div>

src/lib/stores/events-supabase.ts

@@ -28,6 +28,7 @@ function convertDatabaseEvent(dbEvent: DatabaseEvent): Event {
 		location: dbEvent.location,
 		type: dbEvent.type,
 		attendee_limit: dbEvent.attendee_limit,
+		visibility: dbEvent.visibility,
 		user_id: dbEvent.user_id,
 		created_at: dbEvent.created_at,
 		updated_at: dbEvent.updated_at
@@ -63,6 +64,7 @@ export const eventsStore = {
 				location: eventData.location,
 				type: eventData.type,
 				attendee_limit: eventData.attendee_limit,
+				visibility: eventData.visibility,
 				user_id: userId,
 				created_at: now,
 				updated_at: now
@@ -279,6 +281,35 @@ export const eventsStore = {
 		}
 	},
 
+	// Get public events
+	getPublicEvents: async (): Promise<Event[]> => {
+		try {
+			const { data, error } = await supabase
+				.from('events')
+				.select('*')
+				.eq('visibility', 'public')
+				.order('created_at', { ascending: false });
+
+			if (error) throw error;
+
+			const publicEvents = data?.map(convertDatabaseEvent) || [];
+
+			// Update local store
+			publicEvents.forEach((event) => {
+				events.update((currentEvents) => {
+					const newMap = new Map(currentEvents);
+					newMap.set(event.id, event);
+					return newMap;
+				});
+			});
+
+			return publicEvents;
+		} catch (error) {
+			console.error('Error fetching public events:', error);
+			return [];
+		}
+	},
+
 	// Delete event (only by the user who created it)
 	deleteEvent: async (eventId: string, userId: string): Promise<boolean> => {
 		try {

src/lib/types.ts

@@ -1,4 +1,5 @@
 export type EventType = 'limited' | 'unlimited';
+export type EventVisibility = 'public' | 'private';
 
 export interface Event {
 	id: string;
@@ -8,6 +9,7 @@ export interface Event {
 	location: string;
 	type: EventType;
 	attendee_limit?: number;
+	visibility: EventVisibility;
 	user_id: string;
 	created_at: string;
 	updated_at: string;
@@ -28,6 +30,7 @@ export interface CreateEventData {
 	location: string;
 	type: EventType;
 	attendee_limit?: number;
+	visibility: EventVisibility;
 }
 
 export interface DatabaseEvent {
@@ -38,6 +41,7 @@ export interface DatabaseEvent {
 	location: string;
 	type: EventType;
 	attendee_limit?: number;
+	visibility: EventVisibility;
 	user_id: string;
 	created_at: string;
 	updated_at: string;

src/routes/+page.svelte

@@ -29,7 +29,7 @@
 
 			<div class="relative z-10">
 				<h1 class="bg-gradient-to-r bg-clip-text text-5xl font-bold md:text-7xl lg:text-8xl">
-					Event Cactus
+					Event Cactus 🌵
 				</h1>
 				<p class="mt-6 text-xl md:text-2xl">The Ultimate RSVP Platform</p>
 				<p class="mt-4 text-lg md:text-xl">Create, share, and manage events with zero friction.</p>
@@ -48,11 +48,31 @@
 		</div>
 	</section>
 
+	<!-- Public Events Section -->
+	<section class="py-8">
+		<div class="container mx-auto px-4">
+			<div class="mb-16 text-center">
+				<h2 class="text-4xl font-bold text-white">Discover Public Events</h2>
+				<p class="mt-4 text-xl text-slate-300">See what others are planning and get inspired</p>
+			</div>
+
+			<div class="text-center">
+				<button
+					on:click={() => goto('/discover')}
+					class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
+				>
+					Browse All Public Events
+				</button>
+			</div>
+		</div>
+	</section>
+
 	<!-- Features Section -->
 	<section class="py-20">
 		<div class="container mx-auto px-4">
-			<h2 class=" mb-16 text-center text-4xl font-bold">Why Event Cactus?</h2>
-
+			<h2 class=" mb-16 text-center text-4xl font-bold">
+				Why <span class="text-violet-400">Event Cactus?</span>
+			</h2>
 			<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
 				<!-- Feature 1 -->
 				<div class="rounded-sm border p-8 text-center">

src/routes/create/+page.svelte

@@ -10,7 +10,8 @@
 		time: '',
 		location: '',
 		type: 'unlimited',
-		attendee_limit: undefined
+		attendee_limit: undefined,
+		visibility: 'public'
 	};
 
 	let errors: Record<string, string> = {};
@@ -227,6 +228,40 @@
 						</div>
 					{/if}
 
+					<!-- Event Visibility -->
+					<div>
+						<label class="text-dark-800 mb-3 block text-sm font-semibold">
+							Visibility <span class="text-red-400">*</span></label
+						>
+						<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>
+					</div>
+
 					<!-- Submit Button -->
 					<button
 						type="submit"

src/routes/discover/+page.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import { eventsStore } from '$lib/stores/events-supabase';
+	import type { Event } from '$lib/types';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+
+	let publicEvents: Event[] = [];
+	let isLoading = true;
+	let error = '';
+
+	onMount(() => {
+		loadPublicEvents();
+	});
+
+	async function loadPublicEvents() {
+		try {
+			isLoading = true;
+			publicEvents = await eventsStore.getPublicEvents();
+		} catch (err) {
+			error = 'Failed to load public events';
+		} finally {
+			isLoading = false;
+		}
+	}
+
+	function 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}`;
+	}
+
+	function formatTime(timeString: string): string {
+		const [hours, minutes] = timeString.split(':');
+		return `${hours}:${minutes}`;
+	}
+</script>
+
+<svelte:head>
+	<title>Discover Events - Event Cactus</title>
+</svelte:head>
+
+<div class="flex min-h-screen flex-col">
+	<!-- Main Content -->
+	<div class="container mx-auto mt-8 flex-1 px-4 py-8 text-white">
+		{#if isLoading}
+			<div class="mx-auto max-w-2xl text-center">
+				<div
+					class="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-violet-600"
+				></div>
+				<p>Loading public events...</p>
+			</div>
+		{:else if error}
+			<div class="mx-auto max-w-2xl text-center">
+				<div class="mb-4 text-4xl text-red-500">⚠️</div>
+				<p class="text-red-600">{error}</p>
+				<button
+					on:click={loadPublicEvents}
+					class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
+				>
+					Try Again
+				</button>
+			</div>
+		{:else if publicEvents.length === 0}
+			<div class="mx-auto max-w-2xl text-center">
+				<div class="mb-4 animate-pulse text-6xl">🔍</div>
+				<h2 class="mb-4 text-2xl font-bold">No Public Events Yet</h2>
+				<p class="text-white-600 mb-8">
+					There are no public events available at the moment. Be the first to create one!
+				</p>
+				<button
+					on:click={() => goto('/create')}
+					class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
+				>
+					Create Your First Event
+				</button>
+			</div>
+		{:else}
+			<div class="mx-auto max-w-4xl">
+				<div class="mb-6">
+					<h2 class="text-2xl font-bold text-slate-400">Public Events ({publicEvents.length})</h2>
+					<p class="text-slate-500">Discover events created by the community</p>
+				</div>
+
+				<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+					{#each publicEvents as event}
+						<div class="rounded-sm border border-slate-200 p-6 shadow-sm">
+							<div class="mb-4">
+								<h3 class="mb-2 text-xl font-bold text-slate-300">{event.name}</h3>
+								<div class="space-y-2 text-sm text-slate-500">
+									<div class="flex items-center space-x-2">
+										<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+											></path>
+										</svg>
+										<span>{formatDate(event.date)} at {formatTime(event.time)}</span>
+									</div>
+									<div class="flex items-center space-x-2">
+										<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+											></path>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+											></path>
+										</svg>
+										<span>{event.location}</span>
+									</div>
+									<div class="flex items-center space-x-2">
+										<span class="rounded-sm border border-slate-300 px-2 py-1 text-xs font-medium">
+											{event.type === 'limited' ? 'Limited' : 'Unlimited'}
+										</span>
+										{#if event.type === 'limited' && event.attendee_limit}
+											<span class="text-xs">• {event.attendee_limit} max</span>
+										{/if}
+									</div>
+								</div>
+							</div>
+
+							<div class="flex space-x-3">
+								<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
+								</button>
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>

src/routes/event/+page.svelte

@@ -124,14 +124,17 @@
 		{:else}
 			<div class="mx-auto max-w-4xl">
 				<div class="mb-6">
-					<h2 class="text-2xl font-bold text-slate-400">Your Events ({userEvents.length})</h2>
+					<h2 class="text-2xl font-bold text-slate-400">My Events ({userEvents.length})</h2>
+					<p class="text-slate-500">Manage your created events</p>
 				</div>
 
 				<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
 					{#each userEvents as event}
 						<div class="rounded-sm border border-slate-200 p-6 shadow-sm">
 							<div class="mb-4">
-								<h3 class="mb-2 text-xl font-bold text-slate-300">{event.name}</h3>
+								<div class="mb-3 flex items-center justify-between">
+									<h3 class="text-xl font-bold text-slate-300">{event.name}</h3>
+								</div>
 								<div class="space-y-2 text-sm text-slate-500">
 									<div class="flex items-center space-x-2">
 										<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -165,10 +168,16 @@
 										<span class="rounded-sm border border-slate-300 px-2 py-1 text-xs font-medium">
 											{event.type === 'limited' ? 'Limited' : 'Unlimited'}
 										</span>
-										{#if event.type === 'limited' && event.attendee_limit}
-											<span class="text-xs">• {event.attendee_limit} max</span>
-										{/if}
+										<span
+											class="rounded-sm border px-2 py-1 text-xs font-medium {event.visibility ===
+											'public'
+												? 'border-green-300 text-green-400'
+												: 'border-orange-300 text-orange-400'}"
+										>
+											{event.visibility === 'public' ? 'Public' : 'Private'}
+										</span>
 									</div>
+									<div class="flex items-center space-x-2"></div>
 								</div>
 							</div>
 

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

@@ -177,12 +177,20 @@
 							</div>
 						</div>
 
-						<!-- Event Type & Capacity -->
+						<!-- Event Type, Visibility & Capacity -->
 						<div class="flex items-center justify-between rounded-sm p-3">
 							<div class="flex items-center space-x-2">
 								<span class="rounded-full border px-2 py-1 text-xs font-semibold text-violet-400">
 									{event.type === 'limited' ? 'Limited' : 'Unlimited'}
 								</span>
+								<span
+									class="rounded-full border px-2 py-1 text-xs font-semibold {event.visibility ===
+									'public'
+										? 'border-green-300 text-green-400'
+										: 'border-orange-300 text-orange-400'}"
+								>
+									{event.visibility === 'public' ? '🌍 Public' : '🔒 Private'}
+								</span>
 							</div>
 
 							{#if event.type === 'limited' && event.attendee_limit}