fix: location missing field error

feat: add option to link Google Maps to events

database/init.sql

@@ -14,6 +14,8 @@ CREATE TABLE IF NOT EXISTS events (
     date            DATE NOT NULL,
     time            TIME NOT NULL,
     location        VARCHAR(200) NOT NULL,
+    location_type   VARCHAR(20) NOT NULL DEFAULT 'none' CHECK (location_type IN ('none','text','maps')),
+    location_url    VARCHAR(500),
     type            VARCHAR(20) NOT NULL CHECK (type IN ('limited','unlimited')),
     attendee_limit  INTEGER CHECK (attendee_limit > 0),
     user_id         VARCHAR(100) NOT NULL,
@@ -37,6 +39,7 @@ CREATE TABLE IF NOT EXISTS rsvps (
 -- =======================================
 CREATE INDEX IF NOT EXISTS idx_events_user_id  ON events(user_id);
 CREATE INDEX IF NOT EXISTS idx_events_date     ON events(date);
+CREATE INDEX IF NOT EXISTS idx_events_location_type ON events(location_type);
 CREATE INDEX IF NOT EXISTS idx_rsvps_event_id  ON rsvps(event_id);
 CREATE INDEX IF NOT EXISTS idx_rsvps_user_id   ON rsvps(user_id);
 

src/lib/database/schema.ts

@@ -17,6 +17,7 @@ import type { InferInsertModel, InferSelectModel } from 'drizzle-orm';
 // --- Enums (matching the SQL CHECK constraints)
 export const eventTypeEnum = pgEnum('event_type', ['limited', 'unlimited']);
 export const visibilityEnum = pgEnum('visibility', ['public', 'private']);
+export const locationTypeEnum = pgEnum('location_type', ['none', 'text', 'maps']);
 
 // --- Events table
 export const events = pgTable(
@@ -27,6 +28,8 @@ export const events = pgTable(
 		date: date('date', { mode: 'string' }).notNull(), // ISO 'YYYY-MM-DD'
 		time: time('time', { withTimezone: false }).notNull(), // 'HH:MM:SS'
 		location: varchar('location', { length: 200 }).notNull(),
+		locationType: locationTypeEnum('location_type').notNull().default('none'),
+		locationUrl: varchar('location_url', { length: 500 }),
 		type: eventTypeEnum('type').notNull(),
 		attendeeLimit: integer('attendee_limit'), // nullable in SQL
 		userId: varchar('user_id', { length: 100 }).notNull(),

src/lib/i18n/messages.json

@@ -14,6 +14,15 @@
 		"date": "Date",
 		"time": "Time",
 		"location": "Location",
+		"locationType": "Location Type",
+		"locationNone": "None",
+		"locationText": "Text",
+		"locationMaps": "Google Maps",
+		"locationNoneDescription": "No location specified",
+		"locationTextDescription": "Enter location as plain text.",
+		"locationMapsDescription": "Enter Google Maps link.",
+		"googleMapsUrl": "Google Maps URL",
+		"googleMapsUrlPlaceholder": "https://maps.google.com/...",
 		"type": "Type",
 		"visibility": "Visibility",
 		"public": "Public",
@@ -134,6 +143,15 @@
 		"timeLabel": "Time",
 		"locationLabel": "Location",
 		"locationPlaceholder": "Enter location",
+		"locationTypeLabel": "Location Type",
+		"locationNoneOption": "None",
+		"locationTextOption": "Plain Text",
+		"locationMapsOption": "Google Maps",
+		"locationNoneDescription": "No location specified.",
+		"locationTextDescription": "Enter location as plain text.",
+		"locationMapsDescription": "Enter Google Maps link.",
+		"googleMapsUrlLabel": "Google Maps URL",
+		"googleMapsUrlPlaceholder": "https://maps.google.com/...",
 		"typeLabel": "Type",
 		"unlimitedOption": "Unlimited",
 		"limitedOption": "Limited",
@@ -142,8 +160,8 @@
 		"visibilityLabel": "Visibility",
 		"publicOption": "🌍 Public",
 		"privateOption": "🔒 Private",
-		"publicDescription": "Public events are visible to everyone and can be discovered by others",
+		"publicDescription": "Public events are visible to everyone and can be discovered by others.",
-		"privateDescription": "Private events are only visible to you and people you share the link with",
+		"privateDescription": "Private events are only visible to you and people you share the link with.",
 		"creatingEvent": "Creating Event...",
 		"createEventButton": "Create Event"
 	},

src/lib/types.ts

@@ -1,6 +1,7 @@
 export type EventType = 'limited' | 'unlimited';
 export type EventVisibility = 'public' | 'private';
 export type ActionType = 'add' | 'remove';
+export type LocationType = 'none' | 'text' | 'maps';
 
 export interface Event {
 	id: string;
@@ -8,6 +9,8 @@ export interface Event {
 	date: string;
 	time: string;
 	location: string;
+	location_type: LocationType;
+	location_url?: string;
 	type: EventType;
 	attendee_limit?: number;
 	visibility: EventVisibility;
@@ -29,6 +32,8 @@ export interface CreateEventData {
 	date: string;
 	time: string;
 	location: string;
+	location_type: LocationType;
+	location_url?: string;
 	type: EventType;
 	attendee_limit?: number;
 	visibility: EventVisibility;
@@ -40,6 +45,8 @@ export interface DatabaseEvent {
 	date: string;
 	time: string;
 	location: string;
+	location_type: LocationType;
+	location_url?: string;
 	type: EventType;
 	attendee_limit?: number;
 	visibility: EventVisibility;

src/routes/+page.svelte

@@ -25,7 +25,7 @@
 			<h2 class="mt-6 pt-8 text-xl md:text-2xl">
 				{t('home.whyCactoideTitle')}<span class="text-violet-400"
 					><a href="https://en.wikipedia.org/wiki/Cactoideae" target="_blank">*</a></span
-				>?🌵
+				>
 			</h2>
 			<p class="mt-4 text-lg md:text-xl">
 				{t('home.whyCactoideDescription')}

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

@@ -21,6 +21,8 @@ export const actions: Actions = {
 		const date = formData.get('date') as string;
 		const time = formData.get('time') as string;
 		const location = formData.get('location') as string;
+		const locationType = formData.get('location_type') as 'none' | 'text' | 'maps';
+		const locationUrl = formData.get('location_url') 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';
@@ -32,7 +34,9 @@ export const actions: Actions = {
 		if (!name?.trim()) missingFields.push('name');
 		if (!date) missingFields.push('date');
 		if (!time) missingFields.push('time');
-		if (!location?.trim()) missingFields.push('location');
+		if (!locationType) missingFields.push('location_type');
+		if (locationType === 'text' && !location?.trim()) missingFields.push('location');
+		if (locationType === 'maps' && !locationUrl?.trim()) missingFields.push('location_url');
 		if (!userId) missingFields.push('userId');
 
 		if (missingFields.length > 0) {
@@ -43,6 +47,8 @@ export const actions: Actions = {
 					date,
 					time,
 					location,
+					location_type: locationType,
+					location_url: locationUrl,
 					type,
 					attendee_limit: attendeeLimit,
 					visibility
@@ -53,14 +59,34 @@ export const actions: Actions = {
 		if (new Date(date) < new Date()) {
 			return fail(400, {
 				error: 'Date cannot be in the past.',
-				values: { name, date, time, location, type, attendee_limit: attendeeLimit, visibility }
+				values: {
+					name,
+					date,
+					time,
+					location,
+					location_type: locationType,
+					location_url: locationUrl,
+					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 }
+				values: {
+					name,
+					date,
+					time,
+					location,
+					location_type: locationType,
+					location_url: locationUrl,
+					type,
+					attendee_limit: attendeeLimit,
+					visibility
+				}
 			});
 		}
 
@@ -73,7 +99,9 @@ export const actions: Actions = {
 				name: name.trim(),
 				date: date,
 				time: time,
-				location: location.trim(),
+				location: location?.trim() || '',
+				locationType: locationType,
+				locationUrl: locationType === 'maps' ? locationUrl?.trim() : null,
 				type: type,
 				attendeeLimit: type === 'limited' ? parseInt(attendeeLimit) : null,
 				visibility: visibility,

src/routes/create/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { CreateEventData, EventType } from '$lib/types';
+	import type { CreateEventData, EventType, LocationType } from '$lib/types';
 	import { enhance } from '$app/forms';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/i18n/i18n.js';
@@ -11,6 +11,8 @@
 		date: '',
 		time: '',
 		location: '',
+		location_type: 'none',
+		location_url: '',
 		type: 'unlimited',
 		attendee_limit: undefined,
 		visibility: 'public'
@@ -46,6 +48,19 @@
 		}
 	};
 
+	const handleLocationTypeChange = (locationType: LocationType) => {
+		eventData.location_type = locationType;
+		if (locationType === 'none') {
+			eventData.location = '';
+			eventData.location_url = '';
+		} else if (locationType === 'text') {
+			eventData.location_url = '';
+			eventData.location = '';
+		} else {
+			eventData.location = 'Google Maps';
+		}
+	};
+
 	const handleCancel = () => {
 		goto(`/discover`);
 	};
@@ -58,7 +73,7 @@
 <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">
+		<div class="mx-auto max-w-2xl">
 			<!-- Event Creation Form -->
 			<div class="rounded-sm border p-8">
 				<h2 class="mb-8 text-center text-3xl font-bold text-violet-400">{t('create.formTitle')}</h2>
@@ -83,6 +98,7 @@
 					<input type="hidden" name="userId" value={currentUserId} />
 					<input type="hidden" name="type" value={eventData.type} />
 					<input type="hidden" name="visibility" value={eventData.visibility} />
+					<input type="hidden" name="location_type" value={eventData.location_type} />
 
 					{#if errors.server}
 						<div class="mb-6 rounded-sm border border-red-200 bg-red-50 p-4 text-red-700">
@@ -148,54 +164,126 @@
 						</div>
 					</div>
 
-					<!-- Location -->
+					<!-- Location Type -->
 					<div>
-						<label for="location" class="text-dark-800 mb-3 block text-sm font-semibold">
+						<fieldset>
-							{t('create.locationLabel')} <span class="text-red-400">{t('common.required')}</span>
+							<legend class="text-dark-800 mb-3 block text-sm font-semibold">
-						</label>
+								{t('create.locationTypeLabel')}
-						<input
+								<span class="text-red-400">{t('common.required')}</span>
-							id="location"
+							</legend>
-							name="location"
+							<div class="grid grid-cols-3 gap-3">
-							type="text"
+								<button
-							bind:value={eventData.location}
+									type="button"
-							class="border-dark-300 placeholder-dark-500 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm transition-all"
+									class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.location_type ===
-							placeholder={t('create.locationPlaceholder')}
+									'none'
-							maxlength="200"
+										? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
-							required
+										: 'border-dark-300 text-dark-700'}"
-						/>
+									on:click={() => handleLocationTypeChange('none')}
-						{#if errors.location}
+								>
-							<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
+									{t('create.locationNoneOption')}
-						{/if}
+								</button>
+								<button
+									type="button"
+									class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.location_type ===
+									'text'
+										? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
+										: 'border-dark-300 text-dark-700'}"
+									on:click={() => handleLocationTypeChange('text')}
+								>
+									{t('create.locationTextOption')}
+								</button>
+								<button
+									type="button"
+									class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.location_type ===
+									'maps'
+										? ' 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={() => handleLocationTypeChange('maps')}
+								>
+									{t('create.locationMapsOption')}
+								</button>
+							</div>
+							<p class="mt-2 text-xs text-slate-400 italic">
+								{eventData.location_type === 'none'
+									? t('create.locationNoneDescription')
+									: eventData.location_type === 'text'
+										? t('create.locationTextDescription')
+										: t('create.locationMapsDescription')}
+							</p>
+						</fieldset>
 					</div>
 
+					<!-- Location Input (only show when not 'none') -->
+					{#if eventData.location_type !== 'none'}
+						<div>
+							<label for="location" class="text-dark-800 mb-3 block text-sm font-semibold">
+								{eventData.location_type === 'text'
+									? t('create.locationLabel')
+									: t('create.googleMapsUrlLabel')}
+								<span class="text-red-400">{t('common.required')}</span>
+							</label>
+							{#if eventData.location_type === 'text'}
+								<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={t('create.locationPlaceholder')}
+									maxlength="200"
+									required
+								/>
+							{:else}
+								<input
+									id="location_url"
+									name="location_url"
+									type="url"
+									bind:value={eventData.location_url}
+									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={t('create.googleMapsUrlPlaceholder')}
+									maxlength="500"
+									required
+								/>
+							{/if}
+							{#if errors.location}
+								<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
+							{/if}
+							{#if errors.location_url}
+								<p class="mt-2 text-sm font-medium text-red-600">{errors.location_url}</p>
+							{/if}
+						</div>
+					{/if}
+
 					<!-- Event Type -->
 					<div>
-						<label class="text-dark-800 mb-3 block text-sm font-semibold">
+						<fieldset>
-							{t('create.typeLabel')}
+							<legend class="text-dark-800 mb-3 block text-sm font-semibold">
-							<span class="text-red-400">{t('common.required')}</span></label
+								{t('create.typeLabel')}
-						>
+								<span class="text-red-400">{t('common.required')}</span>
-						<div class="grid grid-cols-2 gap-3">
+							</legend>
-							<button
+							<div class="grid grid-cols-2 gap-3">
-								type="button"
+								<button
-								class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.type ===
+									type="button"
-								'unlimited'
+									class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.type ===
-									? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
+									'unlimited'
-									: 'border-dark-300 text-dark-700'}"
+										? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
-								on:click={() => handleTypeChange('unlimited')}
+										: 'border-dark-300 text-dark-700'}"
-							>
+									on:click={() => handleTypeChange('unlimited')}
-								{t('create.unlimitedOption')}
+								>
-							</button>
+									{t('create.unlimitedOption')}
-							<button
+								</button>
-								type="button"
+								<button
-								class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.type ===
+									type="button"
-								'limited'
+									class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.type ===
-									? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
+									'limited'
-									: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
+										? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
-								on:click={() => handleTypeChange('limited')}
+										: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
-							>
+									on:click={() => handleTypeChange('limited')}
-								{t('create.limitedOption')}
+								>
-							</button>
+									{t('create.limitedOption')}
-						</div>
+								</button>
+							</div>
+						</fieldset>
 					</div>
 
 					<!-- Limit (only for limited events) -->
@@ -203,7 +291,7 @@
 						<div>
 							<label for="limit" class="text-dark-800 mb-3 block text-sm font-semibold">
 								{t('create.attendeeLimitLabel')}
-								{t('common.required')}
+								<span class="text-red-400">{t('common.required')}</span>
 							</label>
 							<input
 								id="attendee_limit"
@@ -224,37 +312,39 @@
 
 					<!-- Event Visibility -->
 					<div>
-						<label class="text-dark-800 mb-3 block text-sm font-semibold">
+						<fieldset>
-							{t('create.visibilityLabel')}
+							<legend class="text-dark-800 mb-3 block text-sm font-semibold">
-							<span class="text-red-400">{t('common.required')}</span></label
+								{t('create.visibilityLabel')}
-						>
+								<span class="text-red-400">{t('common.required')}</span>
-						<div class="grid grid-cols-2 gap-3">
+							</legend>
-							<button
+							<div class="grid grid-cols-2 gap-3">
-								type="button"
+								<button
-								class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.visibility ===
+									type="button"
-								'public'
+									class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.visibility ===
-									? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
+									'public'
-									: 'border-dark-300 text-dark-700'}"
+										? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
-								on:click={() => (eventData.visibility = 'public')}
+										: 'border-dark-300 text-dark-700'}"
-							>
+									on:click={() => (eventData.visibility = 'public')}
-								{t('create.publicOption')}
+								>
-							</button>
+									{t('create.publicOption')}
-							<button
+								</button>
-								type="button"
+								<button
-								class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.visibility ===
+									type="button"
-								'private'
+									class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.visibility ===
-									? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
+									'private'
-									: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
+										? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
-								on:click={() => (eventData.visibility = 'private')}
+										: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
-							>
+									on:click={() => (eventData.visibility = 'private')}
-								{t('create.privateOption')}
+								>
-							</button>
+									{t('create.privateOption')}
-						</div>
+								</button>
-						<p class="mt-2 text-xs text-slate-400">
+							</div>
-							{eventData.visibility === 'public'
+							<p class="mt-2 text-xs text-slate-400 italic">
-								? t('create.publicDescription')
+								{eventData.visibility === 'public'
-								: t('create.privateDescription')}
+									? t('create.publicDescription')
-						</p>
+									: t('create.privateDescription')}
+							</p>
+						</fieldset>
 					</div>
 
 					<div class="flex space-x-3">
@@ -269,7 +359,7 @@
 						<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"
+							class="hover:bg-violet-400/70'l flex-2 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">

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

@@ -19,6 +19,8 @@ export const load: PageServerLoad = async () => {
 			date: event.date, // Already in 'YYYY-MM-DD' format
 			time: event.time, // Already in 'HH:MM:SS' format
 			location: event.location,
+			location_type: event.locationType,
+			location_url: event.locationUrl,
 			type: event.type,
 			attendee_limit: event.attendeeLimit, // Note: schema uses camelCase
 			visibility: event.visibility,

src/routes/discover/+page.svelte

@@ -289,7 +289,20 @@
 												d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
 											></path>
 										</svg>
-										<span>{event.location}</span>
+										{#if event.location_type === 'none'}
+											<span>N/A</span>
+										{:else if event.location_type === 'maps' && event.location_url}
+											<a
+												href={event.location_url}
+												target="_blank"
+												rel="noopener noreferrer"
+												class="text-slate-500 transition-colors duration-200 hover:text-slate-300"
+											>
+												{t('create.locationMapsOption')}
+											</a>
+										{:else}
+											<span>{event.location}</span>
+										{/if}
 									</div>
 									<div class="flex items-center space-x-2">
 										<span

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

@@ -24,6 +24,8 @@ export const load = async ({ cookies }) => {
 			date: event.date,
 			time: event.time,
 			location: event.location,
+			location_type: event.locationType,
+			location_url: event.locationUrl,
 			type: event.type,
 			attendee_limit: event.attendeeLimit,
 			visibility: event.visibility,

src/routes/event/+page.svelte

@@ -126,7 +126,20 @@
 												d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
 											></path>
 										</svg>
-										<span>{event.location}</span>
+										{#if event.location_type === 'none'}
+											<span>N/A</span>
+										{:else if event.location_type === 'maps' && event.location_url}
+											<a
+												href={event.location_url}
+												target="_blank"
+												rel="noopener noreferrer"
+												class="text-slate-500 transition-colors duration-200 hover:text-slate-300"
+											>
+												Google Maps
+											</a>
+										{:else}
+											<span>{event.location}</span>
+										{/if}
 									</div>
 									<div class="flex items-center space-x-2">
 										<span

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

@@ -32,6 +32,8 @@ export const load: PageServerLoad = async ({ params, cookies }) => {
 			date: event.date,
 			time: event.time,
 			location: event.location,
+			location_type: event.locationType,
+			location_url: event.locationUrl,
 			type: event.type,
 			attendee_limit: event.attendeeLimit,
 			visibility: event.visibility,

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

@@ -106,7 +106,7 @@
 				</div>
 			</div>
 		{:else if event}
-			<div class="mx-auto max-w-md space-y-6">
+			<div class="mx-auto max-w-2xl space-y-6">
 				<!-- Event Details Card -->
 
 				<div class="rounded-sm border p-6 shadow-2xl">
@@ -136,7 +136,7 @@
 							</div>
 						</div>
 
-						<!-- Location -->
+						<!-- Location (only show when not 'none') -->
 						<div class="flex items-center space-x-3 text-violet-400">
 							<div class="flex h-8 w-8 items-center justify-center rounded-sm">
 								<svg class=" h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -155,7 +155,20 @@
 								</svg>
 							</div>
 							<div>
-								<p class="font-semibold text-white">{event.location}</p>
+								{#if event.location_type === 'none'}
+									<p class="font-semibold text-white">N/A</p>
+								{:else if event.location_type === 'maps' && event.location_url}
+									<a
+										href={event.location_url}
+										target="_blank"
+										rel="noopener noreferrer"
+										class="font-semibold text-white transition-colors duration-200 hover:text-violet-300"
+									>
+										{t('create.locationMapsOption')}
+									</a>
+								{:else}
+									<p class="font-semibold text-white">{event.location}</p>
+								{/if}
 							</div>
 						</div>
 

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

@@ -53,6 +53,8 @@ export const actions: Actions = {
 		const date = formData.get('date') as string;
 		const time = formData.get('time') as string;
 		const location = formData.get('location') as string;
+		const locationType = formData.get('location_type') as 'none' | 'text' | 'maps';
+		const locationUrl = formData.get('location_url') 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';
@@ -63,7 +65,9 @@ export const actions: Actions = {
 		if (!name?.trim()) missingFields.push('name');
 		if (!date) missingFields.push('date');
 		if (!time) missingFields.push('time');
-		if (!location?.trim()) missingFields.push('location');
+		if (!locationType) missingFields.push('location_type');
+		if (locationType === 'text' && !location?.trim()) missingFields.push('location');
+		if (locationType === 'maps' && !locationUrl?.trim()) missingFields.push('location_url');
 
 		if (missingFields.length > 0) {
 			return fail(400, {
@@ -73,6 +77,8 @@ export const actions: Actions = {
 					date,
 					time,
 					location,
+					location_type: locationType,
+					location_url: locationUrl,
 					type,
 					attendee_limit: attendeeLimit,
 					visibility
@@ -88,14 +94,34 @@ export const actions: Actions = {
 		if (eventDate < today) {
 			return fail(400, {
 				error: 'Date cannot be in the past.',
-				values: { name, date, time, location, type, attendee_limit: attendeeLimit, visibility }
+				values: {
+					name,
+					date,
+					time,
+					location,
+					location_type: locationType,
+					location_url: locationUrl,
+					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 }
+				values: {
+					name,
+					date,
+					time,
+					location,
+					location_type: locationType,
+					location_url: locationUrl,
+					type,
+					attendee_limit: attendeeLimit,
+					visibility
+				}
 			});
 		}
 
@@ -106,7 +132,9 @@ export const actions: Actions = {
 				name: name.trim(),
 				date: date,
 				time: time,
-				location: location.trim(),
+				location: location?.trim() || '',
+				locationType: locationType,
+				locationUrl: locationType === 'maps' ? locationUrl?.trim() : null,
 				type: type,
 				attendeeLimit: type === 'limited' ? parseInt(attendeeLimit) : null,
 				visibility: visibility,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { EventType } from '$lib/types';
+	import type { EventType, LocationType } from '$lib/types';
 	import { enhance } from '$app/forms';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/i18n/i18n.js';
@@ -12,6 +12,8 @@
 		date: data.event.date,
 		time: data.event.time,
 		location: data.event.location,
+		location_type: data.event.locationType || 'none',
+		location_url: data.event.locationUrl || '',
 		type: data.event.type,
 		attendee_limit: data.event.attendeeLimit,
 		visibility: data.event.visibility
@@ -49,6 +51,19 @@
 		}
 	};
 
+	const handleLocationTypeChange = (locationType: LocationType) => {
+		eventData.location_type = locationType;
+		if (locationType === 'none') {
+			eventData.location = '';
+			eventData.location_url = '';
+		} else if (locationType === 'text') {
+			eventData.location_url = '';
+			eventData.location = '';
+		} else {
+			eventData.location = 'Google Maps';
+		}
+	};
+
 	const handleCancel = () => {
 		goto(`/event/${data.event.id}`);
 	};
@@ -61,7 +76,7 @@
 <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">
+		<div class="mx-auto max-w-2xl">
 			<!-- Event Edit Form -->
 			<div class="rounded-sm border p-8">
 				<div class="mb-8 text-center">
@@ -86,9 +101,6 @@
 					}}
 					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}
@@ -153,26 +165,96 @@
 						</div>
 					</div>
 
-					<!-- Location -->
+					<!-- Location Type -->
 					<div>
-						<label for="location" class="text-dark-800 mb-3 block text-sm font-semibold">
+						<fieldset>
-							{t('common.location')} <span class="text-red-400">{t('common.required')}</span>
+							<legend class="text-dark-800 mb-3 block text-sm font-semibold">
-						</label>
+								{t('create.locationTypeLabel')}
-						<input
+								<span class="text-red-400">{t('common.required')}</span>
-							id="location"
+							</legend>
-							name="location"
+							<div class="grid grid-cols-3 gap-3">
-							type="text"
+								<button
-							bind:value={eventData.location}
+									type="button"
-							class="border-dark-300 placeholder-dark-500 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm transition-all"
+									class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.location_type ===
-							placeholder={t('common.enterLocation')}
+									'none'
-							maxlength="200"
+										? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
-							required
+										: 'border-dark-300 text-dark-700'}"
-						/>
+									on:click={() => handleLocationTypeChange('none')}
-						{#if errors.location}
+								>
-							<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
+									{t('create.locationNoneOption')}
-						{/if}
+								</button>
+								<button
+									type="button"
+									class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.location_type ===
+									'text'
+										? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
+										: 'border-dark-300 text-dark-700'}"
+									on:click={() => handleLocationTypeChange('text')}
+								>
+									{t('create.locationTextOption')}
+								</button>
+								<button
+									type="button"
+									class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.location_type ===
+									'maps'
+										? ' 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={() => handleLocationTypeChange('maps')}
+								>
+									{t('create.locationMapsOption')}
+								</button>
+							</div>
+							<p class="mt-2 text-xs text-slate-400">
+								{eventData.location_type === 'none'
+									? t('create.locationNoneDescription')
+									: eventData.location_type === 'text'
+										? t('create.locationTextDescription')
+										: t('create.locationMapsDescription')}
+							</p>
+						</fieldset>
 					</div>
 
+					<!-- Location Input (only show when not 'none') -->
+					{#if eventData.location_type !== 'none'}
+						<div>
+							<label for="location" class="text-dark-800 mb-3 block text-sm font-semibold">
+								{eventData.location_type === 'text'
+									? t('create.locationLabel')
+									: t('create.googleMapsUrlLabel')}
+								<span class="text-red-400">{t('common.required')}</span>
+							</label>
+							{#if eventData.location_type === 'text'}
+								<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={t('create.locationPlaceholder')}
+									maxlength="200"
+									required
+								/>
+							{:else}
+								<input
+									id="location_url"
+									name="location_url"
+									type="url"
+									bind:value={eventData.location_url}
+									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={t('create.googleMapsUrlPlaceholder')}
+									maxlength="500"
+									required
+								/>
+							{/if}
+							{#if errors.location}
+								<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
+							{/if}
+							{#if errors.location_url}
+								<p class="mt-2 text-sm font-medium text-red-600">{errors.location_url}</p>
+							{/if}
+						</div>
+					{/if}
+
 					<!-- Event Type -->
 					<div>
 						<fieldset>