@luckydye/calendar 1.1.0 → 1.1.2

package/src/app.ts

@@ -0,0 +1,932 @@
+import { CalendarViewElement } from "./lib.ts";
+import "./CalDAVConfig.ts";
+import type { CalDAVConfigElement } from "./CalDAVConfig.ts";
+import {
+	CalendarIntegration,
+	type Calendar,
+	type CalendarSource,
+} from "./CalendarIntegration.js";
+import { CalDAVSource } from "./CalDAVSource.js";
+import { fetchICalEventsWithNotifications, parseICalEvents, parseICalEventsWithNotifications } from "./ICal.js";
+import { initializeTheme } from "./Theme.js";
+import { InMemorySource } from "./InMemorySource.js";
+import { GoogleCalendarSource } from "./GoogleCalendarSource.js";
+import { InhouseBookingSource } from "./InhouseBookingSource.js";
+import { queueStatus } from "./StatusMessage.js";
+import { activeCalendarStore } from "./ActiveCalendarStore.js";
+import type { CalendarEvent } from "./CalendarInternal.js";
+import "./StatusBar.js";
+import { NotificationScheduler } from "./NotificationScheduler.js";
+import serviceWorkerUrl from "./service-worker.js?url";
+import type { StatusBarElement } from "./StatusBar.js";
+
+try {
+  customElements.define("calendar-view", CalendarViewElement);
+} catch(err) {
+  console.error(err);
+}
+
+// Initialize theme on app start
+initializeTheme();
+
+const calendarElement = document.querySelector(
+	"calendar-view",
+) as CalendarViewElement;
+const calendar = calendarElement.internal;
+
+let workerPromise;
+
+// Register service worker for PWA
+if ("serviceWorker" in navigator) {
+	workerPromise = navigator.serviceWorker
+		.register(serviceWorkerUrl)
+		.catch((error) => {
+			console.error("Service Worker registration failed:", error);
+		});
+}
+
+// Initialize notification scheduler
+const notificationScheduler = new NotificationScheduler(() => workerPromise);
+
+async function scheduleNotificationsForEvents(events: CalendarEvent[]): Promise<void> {
+	const now = new Date();
+	const next24Hours = new Date(now.getTime() + 24 * 60 * 60 * 1000);
+	const upcoming = events.filter(e => e.start >= now && e.start <= next24Hours && e.reminders?.length);
+	for (const event of upcoming) {
+		await notificationScheduler.scheduleEventNotifications(event);
+	}
+}
+
+// Create and add statusbar to app layer
+const statusBar = document.querySelector<StatusBarElement>("status-bar");
+
+// Update statusbar data
+function updateStatusBar() {
+	statusBar.data = calendarElement.getStatusBarData();
+}
+
+// Update statusbar on relevant events
+calendarElement.addEventListener("selection-change", updateStatusBar);
+
+// Update statusbar periodically for current time
+setInterval(updateStatusBar, 10000); // Every 10 seconds
+
+// Initial update after calendar is ready
+calendar.initPromise.then(async (events) => {
+	await scheduleNotificationsForEvents(events);
+	updateStatusBar();
+	// Also update on any calendar interaction
+	calendarElement.addEventListener("event-click", updateStatusBar);
+	calendarElement.addEventListener("selection", updateStatusBar);
+});
+
+// Request notification permission on first interaction
+async function requestNotificationPermission() {
+	if (!("Notification" in window)) return;
+	if (Notification.permission === "default") {
+		const permission = await Notification.requestPermission();
+		if (permission === "granted") {
+			queueStatus("Notifications enabled");
+		}
+	}
+}
+
+calendarElement.addEventListener("event-click", () => {
+	requestNotificationPermission();
+}, { once: true });
+
+// Load iCal files
+const integration = new CalendarIntegration(calendar);
+
+async function sync(cal: Calendar, options?: { force?: boolean }): Promise<void> {
+	const events = await integration.sync(cal, options);
+	await scheduleNotificationsForEvents(events);
+}
+
+// Initialize calendar with storage first, then sync sources
+(async () => {
+	await calendar.initPromise;
+
+	// Sync CalDAV sources
+	await syncCalDAV();
+})();
+
+// 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();
+
+function findCalendarForEvent(event: CalendarEvent): Calendar | undefined {
+	if (event.calendarId) {
+		// Direct ID match (most sources)
+		const byId = loadedCalendars.get(event.calendarId);
+		if (byId) return byId;
+		// CalDAV: calendar.id is "sourceId::url" but event.calendarId is just the URL
+		for (const cal of loadedCalendars.values()) {
+			if (cal.calendarUrl === event.calendarId) return cal;
+		}
+	}
+	for (const cal of loadedCalendars.values()) {
+		if (cal.name === event.calendar) return cal;
+	}
+	return undefined;
+}
+
+function getActiveCalendar(): Calendar | null {
+	return activeCalendarStore.getActiveCalendar();
+}
+
+// Create a CalDAV calendar wrapper
+async function createCalDAVCalendars(
+	source: CalendarSource,
+): Promise<{ calendars: Calendar[]; userEmail: string }> {
+	const serverUrl = source.credentials.serverUrl;
+	const username = source.credentials.username;
+	const password = source.credentials.password;
+	if (!serverUrl || !username || !password) {
+		throw new Error("Missing CalDAV credentials");
+	}
+
+	const caldavSource = new CalDAVSource(
+		source.id,
+		source.name,
+		source.color,
+		{
+			serverUrl,
+			username,
+			password,
+		},
+		source.enabled
+	);
+
+	// Fetch all calendars and the current user's email from the CalDAV server
+	const [calendarInfos, userEmail] = await Promise.all([
+		caldavSource.fetchCalendars(),
+		caldavSource.fetchCurrentUserEmail(),
+	]);
+	const calendars: Calendar[] = [];
+
+	for (const calInfo of calendarInfos) {
+		const calendarId = `${source.id}::${calInfo.url}`;
+
+		calendars.push({
+			id: calendarId,
+			name: calInfo.displayName,
+			color: calInfo.color || source.color,
+			enabled: source.enabled,
+			sourceId: source.id,
+			sourceType: "caldav",
+			calendarUrl: calInfo.url,
+
+			async fetchEvents(): Promise<CalendarEvent[]> {
+				return caldavSource.fetchEventsForCalendar(calInfo.url, calInfo.displayName, calInfo.color);
+			},
+
+			async createEvent(
+				event: Omit<CalendarEvent, "calendar" | "color">,
+			): Promise<CalendarEvent> {
+				return caldavSource.createEvent({ ...event, calendarId: calInfo.url });
+			},
+
+			async updateEvent(
+				id: string,
+				updates: Partial<CalendarEvent>,
+			): Promise<CalendarEvent> {
+				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, {});
+			},
+		});
+	}
+
+	return { calendars, userEmail };
+}
+
+// Create an iCal calendar wrapper
+function createICalCalendar(source: CalendarSource): Calendar {
+	return {
+		id: source.id,
+		name: source.name,
+		color: source.color,
+		enabled: source.enabled,
+		sourceId: source.id,
+		sourceType: "ical",
+
+		async fetchEvents(): Promise<CalendarEvent[]> {
+			const result = await fetchICalEventsWithNotifications(source.credentials, source.color, source.name);
+			return result.events;
+		},
+		// iCal calendars are read-only
+	};
+}
+
+// Create a Google Calendar wrapper
+function createGoogleCalendar(source: CalendarSource): Calendar {
+	const calendarId = source.credentials.calendarId || "primary";
+	const googleSource = new GoogleCalendarSource(
+		source.id,
+		source.name,
+		source.color,
+		{
+			accessToken: source.credentials.accessToken,
+			refreshToken: source.credentials.refreshToken,
+			tokenExpiry: source.credentials.tokenExpiry,
+			calendarId: calendarId,
+		},
+		source.enabled
+	);
+
+	return {
+		id: source.id,
+		name: source.name,
+		color: source.color,
+		enabled: source.enabled,
+		sourceId: source.id,
+		sourceType: "google",
+		calendarUrl: "https://calendar.google.com/calendar/u/0/r?tab=mc",
+
+		async fetchEvents(): Promise<CalendarEvent[]> {
+			return googleSource.fetchEvents();
+		},
+
+		async createEvent(
+			event: Omit<CalendarEvent, "calendar" | "color">,
+		): Promise<CalendarEvent> {
+			return googleSource.createEvent(event);
+		},
+
+		async updateEvent(
+			id: string,
+			updates: Partial<CalendarEvent>,
+		): Promise<CalendarEvent> {
+			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);
+		},
+	};
+}
+
+// Create an Inhouse Booking calendar wrapper
+function createInhouseCalendar(source: CalendarSource): Calendar {
+	const inhouseSource = new InhouseBookingSource(
+		source.id,
+		source.name,
+		source.color,
+		{
+			sessionCookie: source.credentials.sessionCookie,
+			employeeId: source.credentials.employeeId,
+			unitId: source.credentials.unitId,
+		},
+		source.enabled
+	);
+
+	return {
+		id: source.id,
+		name: source.name,
+		color: source.color,
+		enabled: source.enabled,
+		sourceId: source.id,
+		sourceType: "inhouse",
+
+		async fetchEvents(): Promise<CalendarEvent[]> {
+			return inhouseSource.fetchEvents();
+		},
+	};
+}
+
+// Create an in-memory calendar wrapper
+function createInMemoryCalendar(source: InMemorySource): Calendar {
+	return {
+		id: source.id,
+		name: source.name,
+		color: source.color,
+		enabled: source.enabled,
+		sourceId: source.id,
+		sourceType: "in-memory",
+
+		async fetchEvents(): Promise<CalendarEvent[]> {
+			return source.fetchEvents();
+		},
+
+		async createEvent(
+			event: Omit<CalendarEvent, "calendar" | "color">,
+		): Promise<CalendarEvent> {
+			if (!source.createEvent)
+				throw new Error("Source does not support createEvent");
+			return source.createEvent(event);
+		},
+
+		async updateEvent(
+			id: string,
+			updates: Partial<CalendarEvent>,
+		): Promise<CalendarEvent> {
+			if (!source.updateEvent)
+				throw new Error("Source does not support updateEvent");
+			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");
+			return source.deleteEvent(id);
+		},
+	};
+}
+
+// Keep track of configured source IDs to detect removals
+let configuredSourceIds: Set<string> = new Set();
+
+// Initial CalDAV sync - sync all configured sources
+async function syncCalDAV(force = false) {
+	const saved = localStorage.getItem("caldav-sources");
+	if (!saved) return;
+
+	let sources: CalendarSource[];
+	try {
+		sources = JSON.parse(saved);
+	} catch {
+		return;
+	}
+
+	const newSourceIds = new Set(sources.map((s) => s.id));
+
+	// Remove calendars from sources that are no longer configured
+	for (const sourceId of configuredSourceIds) {
+		if (!newSourceIds.has(sourceId)) {
+			// Unregister all calendars from this source and clean up their events
+			for (const [id, calendarObj] of loadedCalendars) {
+				if (calendarObj.sourceId === sourceId) {
+					// Sync with empty events to trigger stale event deletion
+					calendar.sync(calendarObj.name, new Date(), []);
+					loadedCalendars.delete(id);
+					activeCalendarStore.unregisterCalendar(id);
+				}
+			}
+		}
+	}
+	configuredSourceIds = newSourceIds;
+
+	for (const source of sources) {
+		if (source.type === "caldav") {
+			if (
+				!source.credentials?.serverUrl ||
+				!source.credentials?.username ||
+				!source.credentials?.password
+			) {
+				console.warn(
+					`Skipping CalDAV source ${source.name}: missing credentials`,
+				);
+				continue;
+			}
+
+			try {
+				const { calendars, userEmail } = await createCalDAVCalendars(source);
+
+				calendarElement.currentUserEmails.add(userEmail);
+
+				for (const calendar of calendars) {
+					loadedCalendars.set(calendar.id, calendar);
+					activeCalendarStore.registerCalendar(calendar);
+
+					// Sync this calendar
+					await sync(calendar, { force });
+				}
+			} catch (error) {
+				console.error(`Sync error for CalDAV source ${source.name}:`, error);
+			}
+		} else if (source.type === "ical") {
+			if (!source.credentials?.url) {
+				console.warn(`Skipping iCal source ${source.name}: missing URL`);
+				continue;
+			}
+
+			// iCal sources have one calendar
+			const calendar = createICalCalendar(source);
+			loadedCalendars.set(calendar.id, calendar);
+			activeCalendarStore.registerCalendar(calendar);
+
+			try {
+				await sync(calendar, { force });
+			} catch (error) {
+				console.error(`Sync error for iCal source ${source.name}:`, error);
+			}
+		} else if (source.type === "google") {
+			if (!source.credentials?.accessToken) {
+				console.warn(`Skipping Google Calendar source ${source.name}: missing access token`);
+				continue;
+			}
+
+			// Google Calendar sources have one calendar
+			const calendar = createGoogleCalendar(source);
+			loadedCalendars.set(calendar.id, calendar);
+			activeCalendarStore.registerCalendar(calendar);
+
+			try {
+				await sync(calendar, { force });
+			} catch (error) {
+				console.error(`Sync error for Google Calendar source ${source.name}:`, error);
+			}
+		} else if (source.type === "inhouse") {
+			if (!source.credentials?.sessionCookie || !source.credentials?.employeeId) {
+				console.warn(`Skipping Inhouse Booking source ${source.name}: missing session cookie or employee ID`);
+				continue;
+			}
+
+			// Inhouse Booking sources have one calendar
+			const calendar = createInhouseCalendar(source);
+			loadedCalendars.set(calendar.id, calendar);
+			activeCalendarStore.registerCalendar(calendar);
+
+			try {
+				await sync(calendar, { force });
+			} catch (error) {
+				console.error(`Sync error for Inhouse Booking source ${source.name}:`, error);
+			}
+		} else {
+			console.warn(`Unknown source type for ${source.name}: ${source.type}`);
+		}
+	}
+
+	// Update enabled calendars filter
+	updateEnabledCalendars();
+
+	// Update the UI selector and color after sync
+	updateActiveCalendarSelector();
+	updateActiveCalendarColor();
+}
+
+// Refresh CalDAV every 5 minutes
+setInterval(syncCalDAV, 5 * 60 * 1000);
+
+calendarElement.addEventListener("selection", (e) => {
+	console.log("Box selection time ranges:", e.detail.timeRanges);
+	console.log("Overall range:", e.detail.start, "to", e.detail.end);
+});
+calendarElement.addEventListener("event-click", (e) => {
+	console.log("Event clicked:", e.detail);
+});
+calendarElement.addEventListener("selection-change", (e) => {
+	console.log("Selection changed:", e.detail.selectedEvents);
+});
+
+calendarElement.addEventListener("create-event", async (e) => {
+	const { start, end } = e.detail;
+	const calendar = getActiveCalendar();
+	if (!calendar) {
+		queueStatus("No calendar selected. Please configure a calendar first.");
+		return;
+	}
+
+	if (!calendar.createEvent) {
+		queueStatus(`Calendar "${calendar.name}" is read-only.`);
+		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,
+	});
+	await sync(calendar, { force: true });
+	updateStatusBar();
+});
+
+calendarElement.addEventListener("move-event", async (e) => {
+	const { event, start, end } = e.detail;
+
+	const calendar = findCalendarForEvent(event);
+
+	if (!calendar) {
+		queueStatus("Cannot move event: calendar not found.");
+		return;
+	}
+
+	if (!calendar.moveEvent) {
+		queueStatus(`Calendar "${calendar.name}" does not support moving events.`);
+		return;
+	}
+
+	console.log(
+		"Moving event:",
+		event.id,
+		"from",
+		event.start,
+		"to",
+		start,
+		"on calendar:",
+		calendar.name,
+	);
+	try {
+		await calendar.moveEvent(event.id, start, end);
+		await sync(calendar, { force: true });
+		console.log("Move completed on calendar:", calendar.name);
+		updateStatusBar();
+	} catch (error) {
+		console.error("Failed to move event:", error);
+		queueStatus(`Failed to move event: ${error instanceof Error ? error.message : String(error)}`);
+	}
+});
+
+calendarElement.addEventListener("update-event", async (e) => {
+	const { event, updates } = e.detail;
+
+	const calendar = findCalendarForEvent(event);
+
+	if (!calendar) {
+		queueStatus("Cannot update event: calendar not found.");
+		return;
+	}
+
+	if (!calendar.updateEvent) {
+		queueStatus(
+			`Calendar "${calendar.name}" does not support updating events.`,
+		);
+		return;
+	}
+
+	console.log(
+		"Updating event:",
+		event
+	);
+	try {
+		await calendar.updateEvent(event.id, updates);
+		await sync(calendar, { force: true });
+
+		if ("reminders" in updates) {
+			const eventWithReminders = { ...event, ...updates };
+			await notificationScheduler.scheduleEventNotifications(eventWithReminders);
+
+			if (calendarElement.selectedEventForDetail?.id === event.id) {
+				calendarElement.selectedEventForDetail = eventWithReminders;
+			}
+		}
+
+		console.log("Update completed on calendar:", calendar.name);
+		updateStatusBar();
+	} catch (error) {
+		console.error("Failed to update event:", error);
+		queueStatus(`Failed to update event: ${error instanceof Error ? error.message : String(error)}`);
+	}
+});
+
+calendarElement.addEventListener("delete-events", async (e) => {
+	const { events } = e.detail;
+
+	// Group events by their calendarId
+	const eventsByCalendar = new Map<string, typeof events>();
+	for (const event of events) {
+		const calendarId = event.calendarId ?? "";
+		if (!eventsByCalendar.has(calendarId)) {
+			eventsByCalendar.set(calendarId, []);
+		}
+		const calendarEvents = eventsByCalendar.get(calendarId);
+		if (calendarEvents) {
+			calendarEvents.push(event);
+		}
+	}
+
+	// Delete events from each calendar
+	for (const [, calendarEvents] of eventsByCalendar) {
+		const calendar = findCalendarForEvent(calendarEvents[0]);
+
+		if (!calendar) {
+			queueStatus(
+				`Cannot delete events: calendar "${calendarId}" not found.`,
+			);
+			continue;
+		}
+
+		if (!calendar.deleteEvent) {
+			queueStatus(
+				`Calendar "${calendar.name}" does not support deleting events.`,
+			);
+			continue;
+		}
+
+		console.log(
+			"Deleting events from",
+			calendar.name,
+			":",
+			calendarEvents.map((ev) => ev.id),
+		);
+		for (const event of calendarEvents) {
+			await calendar.deleteEvent(event.id);
+		}
+		await sync(calendar, { force: true });
+	}
+	console.log("Delete completed");
+	updateStatusBar();
+});
+
+calendarElement.addEventListener("force-sync", async () => {
+	queueStatus("Force syncing all calendars...");
+	console.log("Force sync triggered");
+
+	await syncCalDAV(true);
+
+	queueStatus("Sync completed");
+	console.log("Force sync completed");
+	updateStatusBar();
+});
+
+calendarElement.addEventListener("load-notifications", async () => {
+	try {
+		const notifications = await notificationScheduler.getScheduledNotifications();
+		calendarElement.setScheduledNotifications(notifications);
+	} catch (error) {
+		console.error("Failed to load scheduled notifications:", error);
+	}
+});
+
+calendarElement.addEventListener("import-ical", async (e) => {
+	const { icalText, fileName } = e.detail;
+	const calendar = getActiveCalendar();
+
+	if (!calendar) {
+		queueStatus("No calendar selected. Please configure a calendar first.");
+		return;
+	}
+
+	if (!calendar.createEvent) {
+		queueStatus(
+			`Calendar "${calendar.name}" is read-only and cannot import events.`,
+		);
+		return;
+	}
+
+	try {
+		const parsedEvents = parseICalEvents(
+			icalText,
+			calendar.color,
+			calendar.name,
+		);
+
+		if (parsedEvents.length === 0) {
+			queueStatus(`No events found in ${fileName}`);
+			return;
+		}
+
+		queueStatus(
+			`Importing ${parsedEvents.length} event${
+				parsedEvents.length === 1 ? "" : "s"
+			} from ${fileName} into "${calendar.name}"...`,
+		);
+
+		const firstEventStart = parsedEvents[0].start;
+
+		for (const event of parsedEvents) {
+			await calendar.createEvent({
+				id: `imported-${Date.now()}-${Math.random()}`,
+				title: event.title,
+				start: event.start,
+				end: event.end,
+				description: event.description,
+				location: event.location,
+				url: event.url,
+				readOnly: false,
+			});
+		}
+
+		await sync(calendar, { force: true });
+		queueStatus(
+			`Successfully imported ${parsedEvents.length} event${
+				parsedEvents.length === 1 ? "" : "s"
+			} into "${calendar.name}"`,
+		);
+
+		calendarElement.scrollToDate(firstEventStart, 0.5, true, true);
+		updateStatusBar();
+	} catch (error) {
+		console.error("Import error:", error);
+		queueStatus(`Failed to import ${fileName}: ${error.message}`);
+	}
+});
+
+// --- 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
+	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.textContent = "Active:";
+	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();
+	calendarElement.activeCalendarColor = calendar?.color ?? null;
+}
+
+function updateEnabledCalendars() {
+	const enabledCalendarIdentifiers = Array.from(loadedCalendars.values())
+		.filter(cal => cal.enabled)
+		.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.setEnabledCalendars(enabledCalendarIdentifiers);
+}
+
+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);
+	}
+}