@luckydye/calendar 1.1.2 → 1.2.0

package/src/app.ts

@@ -15,6 +15,7 @@ import { InhouseBookingSource } from "./InhouseBookingSource.js";
 import { queueStatus } from "./StatusMessage.js";
 import { activeCalendarStore } from "./ActiveCalendarStore.js";
 import type { CalendarEvent } from "./CalendarInternal.js";
+import { registerKeybinds } from "./Keybinds.js";
 import "./StatusBar.js";
 import { NotificationScheduler } from "./NotificationScheduler.js";
 import serviceWorkerUrl from "./service-worker.js?url";
@@ -34,7 +35,19 @@ const calendarElement = document.querySelector(
 ) as CalendarViewElement;
 const calendar = calendarElement.internal;
 
-let workerPromise;
+registerKeybinds(
+	[
+		{ key: "r", cmdOrCtrl: true, shift: true, action: () => calendarElement.forceSync() },
+		{ key: "c", cmdOrCtrl: true, action: () => calendarElement.copySelectedEvents() },
+		{ key: "Backspace", action: () => calendarElement.deleteSelectedEvents() },
+		{ key: "Delete", action: () => calendarElement.deleteSelectedEvents() },
+		{ key: "Escape", action: () => calendarElement.escape() },
+		{ key: "t", action: () => calendarElement.scrollToToday() },
+	],
+	calendarElement,
+);
+
+let workerPromise: Promise<ServiceWorkerRegistration> | undefined;
 
 // Register service worker for PWA
 if ("serviceWorker" in navigator) {
@@ -107,8 +120,30 @@ async function sync(cal: Calendar, options?: { force?: boolean }): Promise<void>
 (async () => {
 	await calendar.initPromise;
 
-	// Sync CalDAV sources
+	// Register sample source
+	const sampleSource = new InMemorySource('sample', "Sample Events", '#10b981');
+	const sampleCalendar = createInMemoryCalendar(sampleSource);
+	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();
+	});
+	button.slot = "toolbar-center";
+	calendarElement.appendChild(button);
+
+	// Create the active calendar selector UI
+	createActiveCalendarSelector();
+
+	// Sync CalDAV sources (this will call updateEnabledCalendars after calendars are registered)
 	await syncCalDAV();
+
+	// Update active calendar color after sync
+	updateActiveCalendarColor();
 })();
 
 // CalDAV configuration UI
@@ -219,6 +254,7 @@ async function createCalDAVCalendars(
 			name: calInfo.displayName,
 			color: calInfo.color || source.color,
 			enabled: source.enabled,
+			locked: (source as { locked?: boolean }).locked,
 			sourceId: source.id,
 			sourceType: "caldav",
 			calendarUrl: calInfo.url,
@@ -240,14 +276,6 @@ async function createCalDAVCalendars(
 				return caldavSource.updateEvent(id, { ...updates, calendarId: calInfo.url });
 			},
 
-			async moveEvent(
-				id: string,
-				newStart: Date,
-				newEnd: Date,
-			): Promise<CalendarEvent> {
-				return caldavSource.updateEvent(id, { start: newStart, end: newEnd, calendarId: calInfo.url });
-			},
-
 			async deleteEvent(id: string): Promise<void> {
 				const eventUrl = `${calInfo.url.replace(/\/$/, '')}/${id}.ics`;
 				await caldavSource.request(eventUrl, 'DELETE', undefined, {});
@@ -265,6 +293,7 @@ function createICalCalendar(source: CalendarSource): Calendar {
 		name: source.name,
 		color: source.color,
 		enabled: source.enabled,
+		locked: (source as { locked?: boolean }).locked,
 		sourceId: source.id,
 		sourceType: "ical",
 
@@ -272,7 +301,7 @@ function createICalCalendar(source: CalendarSource): Calendar {
 			const result = await fetchICalEventsWithNotifications(source.credentials, source.color, source.name);
 			return result.events;
 		},
-		// iCal calendars are read-only
+		// iCal calendars are read-only by default
 	};
 }
 
@@ -297,6 +326,7 @@ function createGoogleCalendar(source: CalendarSource): Calendar {
 		name: source.name,
 		color: source.color,
 		enabled: source.enabled,
+		locked: (source as { locked?: boolean }).locked,
 		sourceId: source.id,
 		sourceType: "google",
 		calendarUrl: "https://calendar.google.com/calendar/u/0/r?tab=mc",
@@ -318,14 +348,6 @@ function createGoogleCalendar(source: CalendarSource): Calendar {
 			return googleSource.updateEvent(id, updates);
 		},
 
-		async moveEvent(
-			id: string,
-			newStart: Date,
-			newEnd: Date,
-		): Promise<CalendarEvent> {
-			return googleSource.moveEvent(id, newStart, newEnd);
-		},
-
 		async deleteEvent(id: string): Promise<void> {
 			return googleSource.deleteEvent(id);
 		},
@@ -351,12 +373,34 @@ function createInhouseCalendar(source: CalendarSource): Calendar {
 		name: source.name,
 		color: source.color,
 		enabled: source.enabled,
+		locked: (source as { locked?: boolean }).locked,
 		sourceId: source.id,
 		sourceType: "inhouse",
 
 		async fetchEvents(): Promise<CalendarEvent[]> {
 			return inhouseSource.fetchEvents();
 		},
+
+		async createEvent(
+			event: Omit<CalendarEvent, "calendar" | "color">,
+		): Promise<CalendarEvent> {
+			return inhouseSource.createEvent(event);
+		},
+
+		async updateEvent(
+			id: string,
+			updates: Partial<CalendarEvent>,
+		): Promise<CalendarEvent> {
+			return inhouseSource.updateEvent(id, updates);
+		},
+
+		async deleteEvent(id: string): Promise<void> {
+			return inhouseSource.deleteEvent(id);
+		},
+
+		async fetchProjects(): Promise<Array<{ id: number; name: string }>> {
+			return inhouseSource.fetchProjects();
+		},
 	};
 }
 
@@ -391,16 +435,6 @@ function createInMemoryCalendar(source: InMemorySource): Calendar {
 			return source.updateEvent(id, updates);
 		},
 
-		async moveEvent(
-			id: string,
-			newStart: Date,
-			newEnd: Date,
-		): Promise<CalendarEvent> {
-			if (!source.moveEvent)
-				throw new Error("Source does not support moveEvent");
-			return source.moveEvent(id, newStart, newEnd);
-		},
-
 		async deleteEvent(id: string): Promise<void> {
 			if (!source.deleteEvent)
 				throw new Error("Source does not support deleteEvent");
@@ -443,6 +477,8 @@ async function syncCalDAV(force = false) {
 	configuredSourceIds = newSourceIds;
 
 	for (const source of sources) {
+		if (!source.enabled) continue;
+
 		if (source.type === "caldav") {
 			if (
 				!source.credentials?.serverUrl ||
@@ -508,7 +544,6 @@ async function syncCalDAV(force = false) {
 				continue;
 			}
 
-			// Inhouse Booking sources have one calendar
 			const calendar = createInhouseCalendar(source);
 			loadedCalendars.set(calendar.id, calendar);
 			activeCalendarStore.registerCalendar(calendar);
@@ -525,6 +560,7 @@ async function syncCalDAV(force = false) {
 
 	// Update enabled calendars filter
 	updateEnabledCalendars();
+	updateLockedCalendars();
 
 	// Update the UI selector and color after sync
 	updateActiveCalendarSelector();
@@ -545,6 +581,75 @@ calendarElement.addEventListener("selection-change", (e) => {
 	console.log("Selection changed:", e.detail.selectedEvents);
 });
 
+function showProjectPickerDialog(
+	projects: Array<{ id: number; name: string }>,
+): Promise<number | null> {
+	return new Promise((resolve) => {
+		let resolved = false;
+		const finish = (value: number | null) => {
+			if (resolved) return;
+			resolved = true;
+			resolve(value);
+		};
+
+		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;";
+
+		const input = document.createElement("input");
+		input.type = "text";
+		input.placeholder = "Search projects...";
+		input.style.cssText =
+			"width:100%;padding:6px 8px;margin-bottom:8px;background:var(--bg-input);color:var(--text-primary);border:1px solid var(--grid-color-strong);border-radius:var(--border-radius-sm);box-sizing:border-box;";
+
+		const list = document.createElement("div");
+		list.style.cssText =
+			"max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;";
+
+		const renderList = (filter: string) => {
+			list.innerHTML = "";
+			const filtered = filter
+				? projects.filter((p) =>
+						p.name.toLowerCase().includes(filter.toLowerCase()),
+					)
+				: projects;
+			for (const project of filtered) {
+				const item = document.createElement("button");
+				item.textContent = project.name;
+				item.style.cssText =
+					"text-align:left;padding:6px 8px;background:var(--bg-item);color:var(--text-primary);border:none;border-radius:var(--border-radius-sm);cursor:pointer;";
+				item.addEventListener("mouseenter", () => {
+					item.style.background = "var(--bg-item-hover)";
+				});
+				item.addEventListener("mouseleave", () => {
+					item.style.background = "var(--bg-item)";
+				});
+				item.addEventListener("click", () => {
+					finish(project.id);
+					dialog.close();
+				});
+				list.appendChild(item);
+			}
+		};
+
+		renderList("");
+		input.addEventListener("input", () => renderList(input.value));
+
+		dialog.addEventListener("close", () => {
+			dialog.remove();
+			finish(null);
+		});
+		dialog.addEventListener("click", (ev) => {
+			if (ev.target === dialog) dialog.close();
+		});
+
+		dialog.append(input, list);
+		document.body.appendChild(dialog);
+		dialog.showModal();
+		input.focus();
+	});
+}
+
 calendarElement.addEventListener("create-event", async (e) => {
 	const { start, end } = e.detail;
 	const calendar = getActiveCalendar();
@@ -558,14 +663,19 @@ calendarElement.addEventListener("create-event", async (e) => {
 		return;
 	}
 
-	const id = `event-${Date.now()}`;
-	console.log("Creating event:", id, start, end, "on calendar:", calendar.name);
-	await calendar.createEvent({
-		id,
-		title: "New Event",
-		start,
-		end,
-	});
+	let id = `event-${Date.now()}`;
+
+	if (calendar.sourceType === "inhouse") {
+		const inhouseCalendar = calendar as typeof calendar & {
+			fetchProjects(): Promise<Array<{ id: number; name: string }>>;
+		};
+		const projects = await inhouseCalendar.fetchProjects();
+		const projectId = await showProjectPickerDialog(projects);
+		if (projectId === null) return; // user cancelled
+		id = `0:0:${projectId}`;
+	}
+
+	await calendar.createEvent({ id, title: "New Event", start, end });
 	await sync(calendar, { force: true });
 	updateStatusBar();
 });
@@ -580,7 +690,7 @@ calendarElement.addEventListener("move-event", async (e) => {
 		return;
 	}
 
-	if (!calendar.moveEvent) {
+	if (!calendar.updateEvent) {
 		queueStatus(`Calendar "${calendar.name}" does not support moving events.`);
 		return;
 	}
@@ -596,7 +706,7 @@ calendarElement.addEventListener("move-event", async (e) => {
 		calendar.name,
 	);
 	try {
-		await calendar.moveEvent(event.id, start, end);
+		await calendar.updateEvent(event.id, { start, end });
 		await sync(calendar, { force: true });
 		console.log("Move completed on calendar:", calendar.name);
 		updateStatusBar();
@@ -688,10 +798,15 @@ calendarElement.addEventListener("delete-events", async (e) => {
 			":",
 			calendarEvents.map((ev) => ev.id),
 		);
-		for (const event of calendarEvents) {
-			await calendar.deleteEvent(event.id);
+		try {
+			for (const event of calendarEvents) {
+				await calendar.deleteEvent(event.id);
+			}
+			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)}`);
 		}
-		await sync(calendar, { force: true });
 	}
 	console.log("Delete completed");
 	updateStatusBar();
@@ -781,25 +896,6 @@ calendarElement.addEventListener("import-ical", async (e) => {
 	}
 });
 
-// --- In-Memory Source for Testing ---
-let sampleSource: InMemorySource | null = null;
-
-(async () => {
-	sampleSource = new InMemorySource('sample', "Sample Events", '#10b981');
-
-	// Register the sample source as a calendar
-	const sampleCalendar = createInMemoryCalendar(sampleSource);
-	loadedCalendars.set(sampleCalendar.id, sampleCalendar);
-	activeCalendarStore.registerCalendar(sampleCalendar);
-
-	// Create the active calendar selector UI
-	createActiveCalendarSelector();
-
-	// Update enabled calendars and active calendar color
-	updateEnabledCalendars();
-	updateActiveCalendarColor();
-})();
-
 // --- Active Calendar Selector UI ---
 function createActiveCalendarSelector() {
 	// Check if selector already exists in the slot
@@ -819,7 +915,6 @@ function createActiveCalendarSelector() {
   `;
 
 	const label = document.createElement("span");
-	label.textContent = "Active:";
 	label.style.cssText = `
     color: var(--text-muted, rgba(255, 255, 255, 0.5));
     white-space: nowrap;
@@ -889,6 +984,23 @@ function updateEnabledCalendars() {
 	calendar.setEnabledCalendars(enabledCalendarIdentifiers);
 }
 
+function updateLockedCalendars() {
+	const lockedCalendarIdentifiers = Array.from(loadedCalendars.values())
+		.filter(cal => (cal as { locked?: boolean }).locked)
+		.flatMap(cal => {
+			// For CalDAV, use the calendar URL; for others, use the source ID
+			const identifiers = [];
+			if (cal.calendarUrl) {
+				identifiers.push(cal.calendarUrl);
+			}
+			if (cal.sourceId) {
+				identifiers.push(cal.sourceId);
+			}
+			return identifiers;
+		});
+	calendar.setLockedCalendars(lockedCalendarIdentifiers);
+}
+
 function getActiveCalendarSelect(): HTMLSelectElement | null {
 	// Look in the light DOM first (where slotted content lives)
 	const selector = document.getElementById("active-calendar-selector");