@luckydye/calendar 1.2.2 → 1.3.0

package/src/app.ts

@@ -116,6 +116,42 @@ async function sync(cal: Calendar, options?: { force?: boolean }): Promise<void>
 	await scheduleNotificationsForEvents(events);
 }
 
+// Mutation coordination: batches post-mutation syncs so concurrent
+// mutations don't each trigger their own reconciliation round-trip.
+let pendingMutations = 0;
+let mutationsSettledResolve: (() => void) | null = null;
+let mutationsSettledPromise: Promise<void> | null = null;
+const dirtyCalendars = new Set<Calendar>();
+
+async function withMutation(cal: Calendar, fn: () => Promise<void>): Promise<void> {
+	if (pendingMutations === 0) {
+		mutationsSettledPromise = new Promise(r => { mutationsSettledResolve = r; });
+	}
+	pendingMutations++;
+	try {
+		await fn();
+	} finally {
+		dirtyCalendars.add(cal);
+		pendingMutations--;
+		if (pendingMutations === 0) {
+			const resolve = mutationsSettledResolve;
+			mutationsSettledResolve = null;
+			mutationsSettledPromise = null;
+			resolve?.();
+			const toSync = [...dirtyCalendars];
+			dirtyCalendars.clear();
+			for (const c of toSync) {
+				await sync(c, { force: true });
+			}
+			updateStatusBar();
+		}
+	}
+}
+
+async function waitForMutations(): Promise<void> {
+	if (mutationsSettledPromise) await mutationsSettledPromise;
+}
+
 // Initialize calendar with storage first, then sync sources
 (async () => {
 	await calendar.initPromise;
@@ -126,18 +162,33 @@ async function sync(cal: Calendar, options?: { force?: boolean }): Promise<void>
 	loadedCalendars.set(sampleCalendar.id, sampleCalendar);
 	activeCalendarStore.registerCalendar(sampleCalendar);
 	
-	const button = document.createElement("button");
-	button.className = "toolbar-button";
-	button.title = "CalDAV Sources";
-	button.innerHTML = "📅";
-	button.addEventListener("click", () => {
-		showCalDAVConfig();
+	// Create sidebar with CalDAV config
+	const sidebar = document.createElement("div");
+	sidebar.slot = "sidebar";
+	sidebar.className = "caldav-sidebar";
+
+	config = document.createElement("caldav-config") as CalDAVConfigElement;
+	config.addEventListener("sources-changed", async () => {
+		await syncCalDAV();
+	});
+	config.addEventListener("collapsed-changed", (e: Event) => {
+		const { collapsed } = (e as CustomEvent).detail;
+		sidebar.classList.toggle("collapsed", collapsed);
 	});
-	button.slot = "toolbar-center";
-	calendarElement.appendChild(button);
+	config.addEventListener("active-calendar-changed", (e: Event) => {
+		const { calendarId } = (e as CustomEvent).detail;
+		activeCalendarStore.setActive(calendarId);
+		updateActiveCalendarColor();
+	});
+	sidebar.classList.toggle("collapsed", config.collapsed);
+	sidebar.appendChild(config);
+	calendarElement.appendChild(sidebar);
 
-	// Create the active calendar selector UI
-	createActiveCalendarSelector();
+	// Subscribe to active calendar store changes → update sidebar
+	activeCalendarStore.subscribe(() => {
+		config.activeCalendarId = activeCalendarStore.getActiveId();
+		updateActiveCalendarColor();
+	});
 
 	// Sync CalDAV sources (this will call updateEnabledCalendars after calendars are registered)
 	await syncCalDAV();
@@ -146,55 +197,10 @@ async function sync(cal: Calendar, options?: { force?: boolean }): Promise<void>
 	updateActiveCalendarColor();
 })();
 
-// CalDAV configuration UI
-calendarElement.addEventListener("caldav-config", () => {
-	showCalDAVConfig();
-});
-
-function showCalDAVConfig() {
-	// Remove existing modal if present
-	const existing = document.querySelector("caldav-config-modal");
-	if (existing) {
-		existing.remove();
-		return;
-	}
-
-	// Create modal overlay
-	const modal = document.createElement("div");
-	modal.className = "caldav-config-modal";
-	modal.style.cssText = `
-    position: fixed;
-    top: 6.5rem;
-    left: 0.5rem;
-    bottom: 7rem;
-    width: 400px;
-    z-index: 1000;
-  `;
-
-	// Create CalDAV config component
-	const config = document.createElement("caldav-config") as CalDAVConfigElement;
-
-	config.addEventListener("close", () => {
-		modal.remove();
-	});
-
-	config.addEventListener("sources-changed", async () => {
-		await syncCalDAV();
-	});
-
-	modal.appendChild(config);
-	document.body.appendChild(modal);
-
-	// Close on backdrop click
-	modal.addEventListener("click", (e) => {
-		if (e.target === modal) {
-			modal.remove();
-		}
-	});
-}
 
 // Store for loaded calendars
 const loadedCalendars: Map<string, Calendar> = new Map();
+let config: CalDAVConfigElement;
 
 function findCalendarForEvent(event: CalendarEvent): Calendar | undefined {
 	if (event.calendarId) {
@@ -449,6 +455,7 @@ let configuredSourceIds: Set<string> = new Set();
 
 // Initial CalDAV sync - sync all configured sources
 async function syncCalDAV(force = false) {
+	await waitForMutations();
 	const saved = localStorage.getItem("caldav-sources");
 	if (!saved) return;
 
@@ -478,7 +485,15 @@ async function syncCalDAV(force = false) {
 	configuredSourceIds = newSourceIds;
 
 	for (const source of sources) {
-		if (!source.enabled) continue;
+		if (!source.enabled) {
+			// Mark existing calendars from this source as disabled
+			for (const cal of loadedCalendars.values()) {
+				if (cal.sourceId === source.id) {
+					cal.enabled = false;
+				}
+			}
+			continue;
+		}
 
 		if (source.type === "caldav") {
 			if (
@@ -563,8 +578,14 @@ async function syncCalDAV(force = false) {
 	updateEnabledCalendars();
 	updateLockedCalendars();
 
-	// Update the UI selector and color after sync
-	updateActiveCalendarSelector();
+	// Push calendar list to sidebar
+	config.calendars = Array.from(loadedCalendars.values()).map(cal => ({
+		id: cal.id,
+		name: cal.name,
+		color: cal.color,
+		sourceId: cal.sourceId,
+	}));
+	config.activeCalendarId = activeCalendarStore.getActiveId();
 	updateActiveCalendarColor();
 }
 
@@ -582,6 +603,55 @@ calendarElement.addEventListener("selection-change", (e) => {
 	console.log("Selection changed:", e.detail.selectedEvents);
 });
 
+function showDeleteConfirmDialog(count: number): Promise<boolean> {
+	return new Promise((resolve) => {
+		const dialog = document.createElement("dialog");
+		dialog.style.cssText =
+			"margin:auto;color:var(--text-primary);border:1px solid var(--grid-color-strong);border-radius:var(--border-radius);padding:16px;min-width:280px;";
+
+		const message = document.createElement("p");
+		message.style.cssText = "margin:0 0 16px 0;";
+		message.textContent = `Delete ${count} event${count === 1 ? "" : "s"}?`;
+
+		const buttons = document.createElement("div");
+		buttons.style.cssText = "display:flex;gap:8px;justify-content:flex-end;";
+
+		const cancel = document.createElement("button");
+		cancel.textContent = "Cancel";
+		cancel.style.cssText =
+			"padding:6px 12px;background:var(--bg-item);color:var(--text-primary);border:1px solid var(--grid-color-strong);border-radius:var(--border-radius-sm);cursor:pointer;";
+		cancel.addEventListener("click", () => {
+			dialog.close();
+			resolve(false);
+		});
+
+		const confirm = document.createElement("button");
+		confirm.textContent = "Delete";
+		confirm.style.cssText =
+			"padding:6px 12px;background:var(--color-danger, #e53e3e);color:#fff;border:none;border-radius:var(--border-radius-sm);cursor:pointer;";
+		confirm.addEventListener("click", () => {
+			dialog.close();
+			resolve(true);
+		});
+
+		dialog.addEventListener("close", () => {
+			dialog.remove();
+		});
+		dialog.addEventListener("click", (ev) => {
+			if (ev.target === dialog) {
+				dialog.close();
+				resolve(false);
+			}
+		});
+
+		buttons.append(cancel, confirm);
+		dialog.append(message, buttons);
+		document.body.appendChild(dialog);
+		dialog.showModal();
+		confirm.focus();
+	});
+}
+
 function showProjectPickerDialog(
 	projects: Array<{ id: number; name: string }>,
 ): Promise<number | null> {
@@ -595,7 +665,7 @@ function showProjectPickerDialog(
 
 		const dialog = document.createElement("dialog");
 		dialog.style.cssText =
-			"background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--grid-color-strong);border-radius:var(--border-radius);padding:16px;min-width:300px;max-width:480px;";
+			"margin:auto;color:var(--text-primary);border:1px solid var(--grid-color-strong);border-radius:var(--border-radius);padding:16px;min-width:300px;max-width:480px;";
 
 		const input = document.createElement("input");
 		input.type = "text";
@@ -676,9 +746,24 @@ calendarElement.addEventListener("create-event", async (e) => {
 		id = `0:0:${projectId}`;
 	}
 
-	await calendar.createEvent({ id, title: "New Event", start, end });
-	await sync(calendar, { force: true });
-	updateStatusBar();
+	calendarElement.internal.applyEventOptimistically({
+		id,
+		title: "New Event",
+		start,
+		end,
+		calendar: calendar.name,
+		calendarId: calendar.calendarUrl ?? calendar.id,
+		sourceId: calendar.sourceId,
+		color: calendar.color,
+		lastSynced: new Date(),
+	});
+	try {
+		await withMutation(calendar, () => calendar.createEvent({ id, title: "New Event", start, end }));
+	} catch (error) {
+		calendarElement.internal.removeEventOptimistically(id);
+		console.error("Failed to create event:", error);
+		queueStatus(`Failed to create event: ${error instanceof Error ? error.message : String(error)}`);
+	}
 });
 
 calendarElement.addEventListener("move-event", async (e) => {
@@ -707,11 +792,10 @@ calendarElement.addEventListener("move-event", async (e) => {
 		calendar.name,
 	);
 	try {
-		await calendar.updateEvent(event.id, { start, end });
-		await sync(calendar, { force: true });
-		console.log("Move completed on calendar:", calendar.name);
-		updateStatusBar();
+		calendarElement.internal.applyEventOptimistically({ ...event, start, end });
+		await withMutation(calendar, () => calendar.updateEvent(event.id, { start, end }));
 	} catch (error) {
+		calendarElement.internal.applyEventOptimistically(event);
 		console.error("Failed to move event:", error);
 		queueStatus(`Failed to move event: ${error instanceof Error ? error.message : String(error)}`);
 	}
@@ -739,8 +823,8 @@ calendarElement.addEventListener("update-event", async (e) => {
 		event
 	);
 	try {
-		await calendar.updateEvent(event.id, updates);
-		await sync(calendar, { force: true });
+		calendarElement.internal.applyEventOptimistically({ ...event, ...updates });
+		await withMutation(calendar, () => calendar.updateEvent(event.id, updates));
 
 		if ("reminders" in updates) {
 			const eventWithReminders = { ...event, ...updates };
@@ -750,10 +834,8 @@ calendarElement.addEventListener("update-event", async (e) => {
 				calendarElement.selectedEventForDetail = eventWithReminders;
 			}
 		}
-
-		console.log("Update completed on calendar:", calendar.name);
-		updateStatusBar();
 	} catch (error) {
+		calendarElement.internal.applyEventOptimistically(event);
 		console.error("Failed to update event:", error);
 		queueStatus(`Failed to update event: ${error instanceof Error ? error.message : String(error)}`);
 	}
@@ -762,6 +844,13 @@ calendarElement.addEventListener("update-event", async (e) => {
 calendarElement.addEventListener("delete-events", async (e) => {
 	const { events } = e.detail;
 
+	const confirmed = await showDeleteConfirmDialog(events.length);
+	if (!confirmed) return;
+
+	for (const event of events) {
+		calendarElement.internal.removeEventOptimistically(event.id);
+	}
+
 	// Group events by their calendarId
 	const eventsByCalendar = new Map<string, typeof events>();
 	for (const event of events) {
@@ -800,17 +889,19 @@ calendarElement.addEventListener("delete-events", async (e) => {
 			calendarEvents.map((ev) => ev.id),
 		);
 		try {
+			await withMutation(calendar, async () => {
+				for (const event of calendarEvents) {
+					await calendar.deleteEvent(event.id);
+				}
+			});
+		} catch (error) {
 			for (const event of calendarEvents) {
-				await calendar.deleteEvent(event.id);
+				calendarElement.internal.applyEventOptimistically(event);
 			}
-			await sync(calendar, { force: true });
-		} catch (error) {
 			console.error("Failed to delete event:", error);
 			queueStatus(`Failed to delete event: ${error instanceof Error ? error.message : String(error)}`);
 		}
 	}
-	console.log("Delete completed");
-	updateStatusBar();
 });
 
 calendarElement.addEventListener("force-sync", async () => {
@@ -897,71 +988,6 @@ calendarElement.addEventListener("import-ical", async (e) => {
 	}
 });
 
-// --- Active Calendar Selector UI ---
-function createActiveCalendarSelector() {
-	// Check if selector already exists in the slot
-	if (document.getElementById("active-calendar-selector")) {
-		return;
-	}
-
-	const selector = document.createElement("div");
-	selector.id = "active-calendar-selector";
-	selector.setAttribute("slot", "toolbar-center");
-	selector.style.cssText = `
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 13px;
-    margin-right: auto;
-  `;
-
-	const label = document.createElement("span");
-	label.style.cssText = `
-    color: var(--text-muted, rgba(255, 255, 255, 0.5));
-    white-space: nowrap;
-  `;
-
-	const select = document.createElement("select");
-	select.id = "active-calendar-select";
-	select.style.cssText = `
-    background: var(--bg-input, rgba(0, 0, 0, 0.3));
-    border: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
-    border-radius: var(--border-radius-sm, 4px);
-    color: var(--text-primary, rgba(255, 255, 255, 0.9));
-    padding: 4px 8px;
-    font-size: 13px;
-    cursor: pointer;
-    min-width: 150px;
-  `;
-
-	select.addEventListener("change", (e) => {
-		const target = e.target as HTMLSelectElement;
-		try {
-			activeCalendarStore.setActive(target.value || null);
-			updateActiveCalendarColor();
-			const calendar = activeCalendarStore.getActiveCalendar();
-			if (calendar) {
-				queueStatus(`Active calendar: ${calendar.name}`);
-			}
-		} catch (err) {
-			console.error("Failed to set active calendar:", err);
-			queueStatus(`Error: ${err.message}`);
-		}
-	});
-
-	selector.appendChild(label);
-	selector.appendChild(select);
-	calendarElement.appendChild(selector);
-
-	// Subscribe to changes and update the selector and color
-	activeCalendarStore.subscribe(() => {
-		updateActiveCalendarSelector();
-		updateActiveCalendarColor();
-	});
-
-	// Initial update
-	updateActiveCalendarSelector();
-}
 
 function updateActiveCalendarColor() {
 	const calendar = activeCalendarStore.getActiveCalendar();
@@ -1002,44 +1028,3 @@ function updateLockedCalendars() {
 	calendar.setLockedCalendars(lockedCalendarIdentifiers);
 }
 
-function getActiveCalendarSelect(): HTMLSelectElement | null {
-	// Look in the light DOM first (where slotted content lives)
-	const selector = document.getElementById("active-calendar-selector");
-	if (selector) {
-		return selector.querySelector(
-			"#active-calendar-select",
-		) as HTMLSelectElement | null;
-	}
-	return null;
-}
-
-function updateActiveCalendarSelector() {
-	const select = getActiveCalendarSelect();
-	if (!select) return;
-
-	const calendars = activeCalendarStore.getAvailableCalendars();
-	const activeId = activeCalendarStore.getActiveId();
-
-	// Clear current options
-	select.innerHTML = "";
-
-	if (calendars.length === 0) {
-		const option = document.createElement("option");
-		option.value = "";
-		option.textContent = "No calendars";
-		option.disabled = true;
-		option.selected = true;
-		select.appendChild(option);
-		return;
-	}
-
-	for (const calendar of calendars) {
-		const option = document.createElement("option");
-		option.value = calendar.id;
-		option.textContent = calendar.name;
-		if (calendar.id === activeId) {
-			option.selected = true;
-		}
-		select.appendChild(option);
-	}
-}