Mega push vol1

src/routes/[orgSlug]/calendar/+page.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { getContext, onMount } from "svelte";
-	import { Button, Modal, Input, Textarea } from "$lib/components/ui";
+	import { Button, Modal } from "$lib/components/ui";
 	import { Calendar } from "$lib/components/calendar";
-	import { createEvent } from "$lib/api/calendar";
 	import {
 		getCalendarSubscribeUrl,
 		type GoogleCalendarEvent,
@@ -36,34 +35,11 @@
 	);
 
 	const allEvents = $derived([...events, ...googleEvents]);
-	let showCreateModal = $state(false);
 	let showEventModal = $state(false);
+	let isDeleting = $state(false);
 	let selectedEvent = $state<CalendarEvent | null>(null);
-	let selectedDate = $state<Date | null>(null);
-
-	let newEvent = $state({
-		title: "",
-		description: "",
-		date: "",
-		startTime: "09:00",
-		endTime: "10:00",
-		allDay: false,
-		color: "#6366f1",
-	});
-
-	const colorOptions = [
-		{ value: "#6366f1", label: "Indigo" },
-		{ value: "#ec4899", label: "Pink" },
-		{ value: "#10b981", label: "Green" },
-		{ value: "#f59e0b", label: "Amber" },
-		{ value: "#ef4444", label: "Red" },
-		{ value: "#8b5cf6", label: "Purple" },
-	];
-
-	function handleDateClick(date: Date) {
-		selectedDate = date;
-		newEvent.date = date.toISOString().split("T")[0];
-		showCreateModal = true;
+	function handleDateClick(_date: Date) {
+		// Event creation disabled
 	}
 
 	function handleEventClick(event: CalendarEvent) {
@@ -71,46 +47,25 @@
 		showEventModal = true;
 	}
 
-	async function handleCreateEvent() {
-		if (!newEvent.title.trim() || !newEvent.date || !data.user) return;
+	async function handleDeleteEvent() {
+		if (!selectedEvent || selectedEvent.id.startsWith("google-")) return;
 
-		const startTime = newEvent.allDay
-			? `${newEvent.date}T00:00:00`
-			: `${newEvent.date}T${newEvent.startTime}:00`;
-		const endTime = newEvent.allDay
-			? `${newEvent.date}T23:59:59`
-			: `${newEvent.date}T${newEvent.endTime}:00`;
+		isDeleting = true;
+		try {
+			const { error } = await supabase
+				.from("calendar_events")
+				.delete()
+				.eq("id", selectedEvent.id);
 
-		const created = await createEvent(
-			supabase,
-			data.org.id,
-			{
-				title: newEvent.title,
-				description: newEvent.description || undefined,
-				start_time: startTime,
-				end_time: endTime,
-				all_day: newEvent.allDay,
-				color: newEvent.color,
-			},
-			data.user.id,
-		);
-
-		events = [...events, created];
-		resetForm();
-	}
-
-	function resetForm() {
-		showCreateModal = false;
-		newEvent = {
-			title: "",
-			description: "",
-			date: "",
-			startTime: "09:00",
-			endTime: "10:00",
-			allDay: false,
-			color: "#6366f1",
-		};
-		selectedDate = null;
+			if (!error) {
+				events = events.filter((e) => e.id !== selectedEvent?.id);
+				showEventModal = false;
+				selectedEvent = null;
+			}
+		} catch (e) {
+			console.error("Failed to delete event:", e);
+		}
+		isDeleting = false;
 	}
 
 	function formatEventTime(event: CalendarEvent): string {
@@ -213,21 +168,12 @@
 				</div>
 			{/if}
 		</div>
-		<Button onclick={() => (showCreateModal = true)}>
-			<svg
-				class="w-4 h-4 mr-2"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-			>
-				<line x1="12" y1="5" x2="12" y2="19" />
-				<line x1="5" y1="12" x2="19" y2="12" />
-			</svg>
-			New Event
-		</Button>
 	</header>
 
+	<p class="text-light/50 text-sm mb-4">
+		View events from connected Google Calendar. Event creation coming soon.
+	</p>
+
 	<Calendar
 		events={allEvents}
 		onDateClick={handleDateClick}
@@ -235,78 +181,6 @@
 	/>
 </div>
 
-<Modal isOpen={showCreateModal} onClose={resetForm} title="Create Event">
-	<div class="space-y-4">
-		<Input
-			label="Title"
-			bind:value={newEvent.title}
-			placeholder="Event title"
-		/>
-
-		<Textarea
-			label="Description"
-			bind:value={newEvent.description}
-			placeholder="Optional description"
-			rows={2}
-		/>
-
-		<Input label="Date" type="date" bind:value={newEvent.date} />
-
-		<label class="flex items-center gap-2 text-sm text-light">
-			<input
-				type="checkbox"
-				bind:checked={newEvent.allDay}
-				class="rounded"
-			/>
-			All day event
-		</label>
-
-		{#if !newEvent.allDay}
-			<div class="grid grid-cols-2 gap-4">
-				<Input
-					label="Start Time"
-					type="time"
-					bind:value={newEvent.startTime}
-				/>
-				<Input
-					label="End Time"
-					type="time"
-					bind:value={newEvent.endTime}
-				/>
-			</div>
-		{/if}
-
-		<div>
-			<label class="block text-sm font-medium text-light mb-2"
-				>Color</label
-			>
-			<div class="flex gap-2">
-				{#each colorOptions as color}
-					<button
-						type="button"
-						class="w-8 h-8 rounded-full transition-transform"
-						class:ring-2={newEvent.color === color.value}
-						class:ring-white={newEvent.color === color.value}
-						class:scale-110={newEvent.color === color.value}
-						style="background-color: {color.value}"
-						onclick={() => (newEvent.color = color.value)}
-						aria-label={color.label}
-					></button>
-				{/each}
-			</div>
-		</div>
-
-		<div class="flex justify-end gap-2 pt-2">
-			<Button variant="ghost" onclick={resetForm}>Cancel</Button>
-			<Button
-				onclick={handleCreateEvent}
-				disabled={!newEvent.title.trim() || !newEvent.date}
-				>Create</Button
-			>
-		</div>
-	</div>
-</Modal>
-
 <Modal
 	isOpen={showEventModal}
 	onClose={() => (showEventModal = false)}
@@ -437,6 +311,19 @@
 					</p>
 				</div>
 			{/if}
+
+			<!-- Delete local event -->
+			{#if !selectedEvent.id.startsWith("google-")}
+				<div class="pt-3 border-t border-light/10">
+					<Button
+						variant="danger"
+						onclick={handleDeleteEvent}
+						loading={isDeleting}
+					>
+						Delete Event
+					</Button>
+				</div>
+			{/if}
 		</div>
 	{/if}
 </Modal>