@luckydye/calendar 1.3.1 → 1.4.0

package/src/CalDAVConfig.ts

@@ -1,73 +1,73 @@
-import { css, html, LitElement } from "lit";
+import { LitElement, css, html } from "lit";
+import { CalDAVSource as CalDAVSourceClass } from "./CalDAVSource.js";
 import type { CalendarSource } from "./CalendarIntegration.js";
 import { authenticateWithGoogle } from "./GoogleCalendarSource.js";
 import { InhouseBookingSource } from "./InhouseBookingSource.js";
-import { CalDAVSource as CalDAVSourceClass } from "./CalDAVSource.js";
 
 interface CalDAVSourceConfig extends CalendarSource {
-  type: "caldav";
-  credentials: {
-    serverUrl: string;
-    username: string;
-    password: string;
-  };
-  locked?: boolean;
+	type: "caldav";
+	credentials: {
+		serverUrl: string;
+		username: string;
+		password: string;
+	};
+	locked?: boolean;
 }
 
 interface ICalSource extends CalendarSource {
-  type: "ical";
-  credentials: {
-    url: string;
-  };
-  locked?: boolean;
+	type: "ical";
+	credentials: {
+		url: string;
+	};
+	locked?: boolean;
 }
 
 interface GoogleSource extends CalendarSource {
-  type: "google";
-  credentials: {
-    accessToken: string;
-    refreshToken?: string;
-    tokenExpiry?: string;
-    calendarId?: string;
-  };
-  locked?: boolean;
+	type: "google";
+	credentials: {
+		accessToken: string;
+		refreshToken?: string;
+		tokenExpiry?: string;
+		calendarId?: string;
+	};
+	locked?: boolean;
 }
 
 interface InhouseSource extends CalendarSource {
-  type: "inhouse";
-  credentials: {
-    sessionCookie: string;
-    employeeId: string;
-    unitId?: string;
-    startHour?: 9 | 10;
-  };
-  locked?: boolean;
+	type: "inhouse";
+	credentials: {
+		sessionCookie: string;
+		employeeId: string;
+		unitId?: string;
+		startHour?: 9 | 10;
+	};
+	locked?: boolean;
 }
 
 interface TimeseriesJsonSource extends CalendarSource {
-  type: "timeseries-json";
-  credentials: {
-    url: string;
-  };
-  locked?: boolean;
+	type: "timeseries-json";
+	credentials: {
+		url: string;
+	};
+	locked?: boolean;
 }
 
 type ConfigurableSource =
-  | CalDAVSourceConfig
-  | ICalSource
-  | GoogleSource
-  | InhouseSource
-  | TimeseriesJsonSource;
+	| CalDAVSourceConfig
+	| ICalSource
+	| GoogleSource
+	| InhouseSource
+	| TimeseriesJsonSource;
 
 interface SidebarCalendar {
-  id: string;
-  name: string;
-  color: string;
-  sourceId: string;
+	id: string;
+	name: string;
+	color: string;
+	sourceId: string;
 }
 
 export class CalDAVConfigElement extends LitElement {
-  static styles = css`
+	static styles = css`
     :host {
       display: block;
       font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
@@ -457,405 +457,438 @@ export class CalDAVConfigElement extends LitElement {
     }
   `;
 
-  sources: ConfigurableSource[] = [];
-  calendars: SidebarCalendar[] = [];
-  activeCalendarId: string | null = null;
-  isAdding = false;
-  editingId: string | null = null;
-  isGoogleAuthenticating = false;
-  googleAuthError: string | null = null;
-  collapsed = localStorage.getItem("caldav-sidebar-collapsed") === "true";
-
-  private formData: Partial<ConfigurableSource> = {};
-
-  static get properties() {
-    return {
-      sources: { type: Array },
-      calendars: { type: Array },
-      activeCalendarId: { type: String },
-      isAdding: { type: Boolean },
-      editingId: { type: String },
-      isGoogleAuthenticating: { type: Boolean },
-      googleAuthError: { type: String },
-      collapsed: { type: Boolean, reflect: true },
-    };
-  }
-
-  constructor() {
-    super();
-    this.loadSources();
-
-    // Check for OAuth callback (authorization code flow)
-    if (typeof window !== 'undefined' && window.location.search) {
-      const params = new URLSearchParams(window.location.search);
-      const code = params.get('code');
-      const error = params.get('error');
-      const state = params.get('state');
-
-      if (code || error) {
-        // Send the result to the opener window
-        if (window.opener) {
-          window.opener.postMessage({
-            type: 'google-oauth-callback',
-            code: code,
-            error: error,
-            receivedState: state,
-          }, window.location.origin);
-          window.close();
-        }
-      }
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.loadSources();
-  }
-
-  loadSources() {
-    const saved = localStorage.getItem("caldav-sources");
-    if (saved) {
-      try {
-        this.sources = JSON.parse(saved);
-      } catch {
-        this.sources = [];
-      }
-    }
-
-  }
-
-  saveSources() {
-    localStorage.setItem("caldav-sources", JSON.stringify(this.sources));
-    this.dispatchEvent(new CustomEvent("sources-changed", {
-      detail: { sources: this.sources },
-      bubbles: true,
-    }));
-    this.requestUpdate();
-  }
-
-  toggleCollapsed() {
-    this.collapsed = !this.collapsed;
-    localStorage.setItem("caldav-sidebar-collapsed", String(this.collapsed));
-    this.dispatchEvent(new CustomEvent("collapsed-changed", {
-      detail: { collapsed: this.collapsed },
-      bubbles: true,
-    }));
-  }
-
-  addSource() {
-    this.isAdding = true;
-    this.editingId = null;
-    this.formData = {
-      type: "caldav",
-      color: "#FF6E68",
-      enabled: true,
-    };
-    this.requestUpdate();
-  }
-
-  editSource(source: ConfigurableSource) {
-    this.isAdding = false;
-    this.editingId = source.id;
-    this.formData = { ...source };
-    this.requestUpdate();
-  }
-
-  deleteSource(id: string) {
-    this.sources = this.sources.filter((s) => s.id !== id);
-    this.saveSources();
-  }
-
-  toggleEnabled(source: ConfigurableSource) {
-    source.enabled = !source.enabled;
-    this.saveSources();
-  }
-
-  toggleLocked(source: ConfigurableSource) {
-    source.locked = !source.locked;
-    this.saveSources();
-  }
-
-  selectCalendar(calendarId: string) {
-    this.activeCalendarId = calendarId;
-    this.dispatchEvent(new CustomEvent("active-calendar-changed", {
-      detail: { calendarId },
-      bubbles: true,
-    }));
-  }
-
-  saveForm() {
-    if (!this.formData.name?.trim()) {
-      alert('Please enter a calendar name');
-      return;
-    }
-
-    if (!this.formData.type) {
-      alert('Please select a calendar type');
-      return;
-    }
-
-    let source: ConfigurableSource;
-
-    if (this.formData.type === "caldav") {
-      if (
-        !this.formData.credentials?.serverUrl ||
-        !this.formData.credentials?.username ||
-        !this.formData.credentials?.password
-      ) {
-        return;
-      }
-
-      source = {
-        id: this.editingId || crypto.randomUUID(),
-        name: this.formData.name,
-        type: "caldav",
-        credentials: {
-          serverUrl: this.formData.credentials.serverUrl,
-          username: this.formData.credentials.username,
-          password: this.formData.credentials.password,
-        },
-        color: this.formData.color || "#FF6E68",
-        enabled: this.formData.enabled ?? true,
-        locked: this.formData.locked ?? false,
-      } as CalDAVSourceConfig;
-    } else if (this.formData.type === "ical") {
-      if (!this.formData.credentials?.url) {
-        return;
-      }
-
-      source = {
-        id: this.editingId || crypto.randomUUID(),
-        name: this.formData.name,
-        type: "ical",
-        credentials: {
-          url: this.formData.credentials.url,
-        },
-        color: this.formData.color || "#FF6E68",
-        enabled: this.formData.enabled ?? true,
-        locked: this.formData.locked ?? false,
-      } as ICalSource;
-    } else if (this.formData.type === "timeseries-json") {
-      if (!this.formData.credentials?.url) {
-        return;
-      }
-
-      source = {
-        id: this.editingId || crypto.randomUUID(),
-        name: this.formData.name,
-        type: "timeseries-json",
-        credentials: {
-          url: this.formData.credentials.url,
-        },
-        color: this.formData.color || "#06B6D4",
-        enabled: this.formData.enabled ?? true,
-        locked: this.formData.locked ?? false,
-      } as TimeseriesJsonSource;
-    } else if (this.formData.type === "google") {
-      if (!this.formData.credentials?.accessToken) {
-        alert('Please authenticate with Google before adding the calendar');
-        return;
-      }
-
-      source = {
-        id: this.editingId || crypto.randomUUID(),
-        name: this.formData.name,
-        type: "google",
-        credentials: {
-          accessToken: this.formData.credentials.accessToken,
-          refreshToken: this.formData.credentials.refreshToken,
-          tokenExpiry: this.formData.credentials.tokenExpiry,
-          calendarId: this.formData.credentials.calendarId || "primary",
-        },
-        color: this.formData.color || "#4285F4",
-        enabled: this.formData.enabled ?? true,
-        locked: this.formData.locked ?? false,
-      } as GoogleSource;
-    } else if (this.formData.type === "inhouse") {
-      if (!this.formData.credentials?.sessionCookie || !this.formData.credentials?.employeeId) {
-        alert('Please enter session cookie and employee ID');
-        return;
-      }
-
-      source = {
-        id: this.editingId || crypto.randomUUID(),
-        name: this.formData.name,
-        type: "inhouse",
-        credentials: {
-          sessionCookie: this.formData.credentials.sessionCookie,
-          employeeId: this.formData.credentials.employeeId,
-          unitId: this.formData.credentials.unitId,
-          startHour: this.formData.credentials.startHour,
-        },
-        color: this.formData.color || "#FF6E68",
-        enabled: this.formData.enabled ?? true,
-        locked: this.formData.locked ?? false,
-      } as InhouseSource;
-    } else {
-      return;
-    }
-
-    if (this.editingId) {
-      const index = this.sources.findIndex((s) => s.id === this.editingId);
-      if (index >= 0) {
-        this.sources[index] = source;
-      }
-    } else {
-      this.sources.push(source);
-    }
-
-    this.isAdding = false;
-    this.editingId = null;
-    this.formData = {};
-    this.googleAuthError = null;
-    this.saveSources();
-    this.requestUpdate();
-  }
-
-  cancelForm() {
-    this.isAdding = false;
-    this.editingId = null;
-    this.formData = {};
-    this.googleAuthError = null;
-    this.isGoogleAuthenticating = false;
-    this.requestUpdate();
-  }
-
-  updateForm(field: string, value: string | boolean | number) {
-    if (field === "serverUrl" || field === "username" || field === "password" || field === "url" ||
-        field === "accessToken" || field === "refreshToken" || field === "tokenExpiry" || field === "calendarId" ||
-        field === "sessionCookie" || field === "employeeId" || field === "unitId" || field === "startHour") {
-      this.formData = {
-        ...this.formData,
-        credentials: {
-          ...this.formData.credentials,
-          [field]: value,
-        } as ConfigurableSource["credentials"],
-      };
-    } else {
-      this.formData = { ...this.formData, [field]: value };
-    }
-    this.requestUpdate();
-  }
-
-  async signInWithGoogle() {
-    this.isGoogleAuthenticating = true;
-    this.googleAuthError = null;
-    this.requestUpdate();
-
-    try {
-      // Load Google OAuth credentials from public directory
-      const credentialsResponse = await fetch('/credentials_google.json');
-      if (!credentialsResponse.ok) {
-        throw new Error('Google OAuth credentials file not found. Please add credentials_google.json to the public directory.');
-      }
-
-      const credentials = await credentialsResponse.json();
-      const clientId = credentials.installed?.client_id || credentials.web?.client_id;
-      const clientSecret = credentials.installed?.client_secret || credentials.web?.client_secret;
-
-      if (!clientId || !clientSecret) {
-        throw new Error('Invalid credentials file format. Expected client_id and client_secret.');
-      }
-
-      const tokens = await authenticateWithGoogle(clientId, clientSecret);
-
-      // Fetch the list of calendars from Google
-      const calendarListResponse = await fetch(
-        'https://www.googleapis.com/calendar/v3/users/me/calendarList',
-        {
-          headers: {
-            Authorization: `Bearer ${tokens.accessToken}`,
-          },
-        }
-      );
-
-      if (!calendarListResponse.ok) {
-        throw new Error('Failed to fetch calendar list from Google');
-      }
-
-      const calendarList = await calendarListResponse.json();
-
-      // Create a source for each calendar
-      for (const calendar of calendarList.items || []) {
-        const newSource: GoogleSource = {
-          id: crypto.randomUUID(),
-          name: calendar.summary || 'Untitled Calendar',
-          type: 'google',
-          credentials: {
-            accessToken: tokens.accessToken,
-            refreshToken: tokens.refreshToken,
-            tokenExpiry: tokens.expiry,
-            calendarId: calendar.id,
-          },
-          color: calendar.backgroundColor || '#4285F4',
-          enabled: true,
-        };
-
-        this.sources.push(newSource);
-      }
-
-      this.saveSources();
-      this.isAdding = false;
-      this.formData = {};
-      this.isGoogleAuthenticating = false;
-      this.requestUpdate();
-    } catch (error) {
-      this.isGoogleAuthenticating = false;
-      this.googleAuthError = error instanceof Error ? error.message : "Authentication failed";
-      this.requestUpdate();
-    }
-  }
-
-  close() {
-    this.dispatchEvent(new CustomEvent("close", { bubbles: true }));
-  }
-
-  render() {
-    const colors = [
-      "#FF6E68",
-      "#FFB800",
-      "#83D754",
-      "#0095FD",
-      "#9FC6E7",
-      "#888082",
-      "#E91E63",
-      "#9C27B0",
-      "#673AB7",
-      "#3F51B5",
-      "#2196F3",
-      "#00BCD4",
-      "#009688",
-      "#4CAF50",
-      "#8BC34A",
-      "#CDDC39",
-      "#FFEB3B",
-      "#FFC107",
-      "#FF9800",
-      "#FF5722",
-      "#795548",
-    ];
-
-    return html`
+	sources: ConfigurableSource[] = [];
+	calendars: SidebarCalendar[] = [];
+	activeCalendarId: string | null = null;
+	isAdding = false;
+	editingId: string | null = null;
+	isGoogleAuthenticating = false;
+	googleAuthError: string | null = null;
+	collapsed = localStorage.getItem("caldav-sidebar-collapsed") === "true";
+
+	private formData: Partial<ConfigurableSource> = {};
+
+	static get properties() {
+		return {
+			sources: { type: Array },
+			calendars: { type: Array },
+			activeCalendarId: { type: String },
+			isAdding: { type: Boolean },
+			editingId: { type: String },
+			isGoogleAuthenticating: { type: Boolean },
+			googleAuthError: { type: String },
+			collapsed: { type: Boolean, reflect: true },
+		};
+	}
+
+	constructor() {
+		super();
+		this.loadSources();
+
+		// Check for OAuth callback (authorization code flow)
+		if (typeof window !== "undefined" && window.location.search) {
+			const params = new URLSearchParams(window.location.search);
+			const code = params.get("code");
+			const error = params.get("error");
+			const state = params.get("state");
+
+			if (code || error) {
+				// Send the result to the opener window
+				if (window.opener) {
+					window.opener.postMessage(
+						{
+							type: "google-oauth-callback",
+							code: code,
+							error: error,
+							receivedState: state,
+						},
+						window.location.origin,
+					);
+					window.close();
+				}
+			}
+		}
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.loadSources();
+	}
+
+	loadSources() {
+		const saved = localStorage.getItem("caldav-sources");
+		if (saved) {
+			try {
+				this.sources = JSON.parse(saved);
+			} catch {
+				this.sources = [];
+			}
+		}
+	}
+
+	saveSources() {
+		localStorage.setItem("caldav-sources", JSON.stringify(this.sources));
+		this.dispatchEvent(
+			new CustomEvent("sources-changed", {
+				detail: { sources: this.sources },
+				bubbles: true,
+			}),
+		);
+		this.requestUpdate();
+	}
+
+	toggleCollapsed() {
+		this.collapsed = !this.collapsed;
+		localStorage.setItem("caldav-sidebar-collapsed", String(this.collapsed));
+		this.dispatchEvent(
+			new CustomEvent("collapsed-changed", {
+				detail: { collapsed: this.collapsed },
+				bubbles: true,
+			}),
+		);
+	}
+
+	addSource() {
+		this.isAdding = true;
+		this.editingId = null;
+		this.formData = {
+			type: "caldav",
+			color: "#FF6E68",
+			enabled: true,
+		};
+		this.requestUpdate();
+	}
+
+	editSource(source: ConfigurableSource) {
+		this.isAdding = false;
+		this.editingId = source.id;
+		this.formData = { ...source };
+		this.requestUpdate();
+	}
+
+	deleteSource(id: string) {
+		this.sources = this.sources.filter((s) => s.id !== id);
+		this.saveSources();
+	}
+
+	toggleEnabled(source: ConfigurableSource) {
+		source.enabled = !source.enabled;
+		this.saveSources();
+	}
+
+	toggleLocked(source: ConfigurableSource) {
+		source.locked = !source.locked;
+		this.saveSources();
+	}
+
+	selectCalendar(calendarId: string) {
+		this.activeCalendarId = calendarId;
+		this.dispatchEvent(
+			new CustomEvent("active-calendar-changed", {
+				detail: { calendarId },
+				bubbles: true,
+			}),
+		);
+	}
+
+	saveForm() {
+		if (!this.formData.name?.trim()) {
+			alert("Please enter a calendar name");
+			return;
+		}
+
+		if (!this.formData.type) {
+			alert("Please select a calendar type");
+			return;
+		}
+
+		let source: ConfigurableSource;
+
+		if (this.formData.type === "caldav") {
+			if (
+				!this.formData.credentials?.serverUrl ||
+				!this.formData.credentials?.username ||
+				!this.formData.credentials?.password
+			) {
+				return;
+			}
+
+			source = {
+				id: this.editingId || crypto.randomUUID(),
+				name: this.formData.name,
+				type: "caldav",
+				credentials: {
+					serverUrl: this.formData.credentials.serverUrl,
+					username: this.formData.credentials.username,
+					password: this.formData.credentials.password,
+				},
+				color: this.formData.color || "#FF6E68",
+				enabled: this.formData.enabled ?? true,
+				locked: this.formData.locked ?? false,
+			} as CalDAVSourceConfig;
+		} else if (this.formData.type === "ical") {
+			if (!this.formData.credentials?.url) {
+				return;
+			}
+
+			source = {
+				id: this.editingId || crypto.randomUUID(),
+				name: this.formData.name,
+				type: "ical",
+				credentials: {
+					url: this.formData.credentials.url,
+				},
+				color: this.formData.color || "#FF6E68",
+				enabled: this.formData.enabled ?? true,
+				locked: this.formData.locked ?? false,
+			} as ICalSource;
+		} else if (this.formData.type === "timeseries-json") {
+			if (!this.formData.credentials?.url) {
+				return;
+			}
+
+			source = {
+				id: this.editingId || crypto.randomUUID(),
+				name: this.formData.name,
+				type: "timeseries-json",
+				credentials: {
+					url: this.formData.credentials.url,
+				},
+				color: this.formData.color || "#06B6D4",
+				enabled: this.formData.enabled ?? true,
+				locked: this.formData.locked ?? false,
+			} as TimeseriesJsonSource;
+		} else if (this.formData.type === "google") {
+			if (!this.formData.credentials?.accessToken) {
+				alert("Please authenticate with Google before adding the calendar");
+				return;
+			}
+
+			source = {
+				id: this.editingId || crypto.randomUUID(),
+				name: this.formData.name,
+				type: "google",
+				credentials: {
+					accessToken: this.formData.credentials.accessToken,
+					refreshToken: this.formData.credentials.refreshToken,
+					tokenExpiry: this.formData.credentials.tokenExpiry,
+					calendarId: this.formData.credentials.calendarId || "primary",
+				},
+				color: this.formData.color || "#4285F4",
+				enabled: this.formData.enabled ?? true,
+				locked: this.formData.locked ?? false,
+			} as GoogleSource;
+		} else if (this.formData.type === "inhouse") {
+			if (
+				!this.formData.credentials?.sessionCookie ||
+				!this.formData.credentials?.employeeId
+			) {
+				alert("Please enter session cookie and employee ID");
+				return;
+			}
+
+			source = {
+				id: this.editingId || crypto.randomUUID(),
+				name: this.formData.name,
+				type: "inhouse",
+				credentials: {
+					sessionCookie: this.formData.credentials.sessionCookie,
+					employeeId: this.formData.credentials.employeeId,
+					unitId: this.formData.credentials.unitId,
+					startHour: this.formData.credentials.startHour,
+				},
+				color: this.formData.color || "#FF6E68",
+				enabled: this.formData.enabled ?? true,
+				locked: this.formData.locked ?? false,
+			} as InhouseSource;
+		} else {
+			return;
+		}
+
+		if (this.editingId) {
+			const index = this.sources.findIndex((s) => s.id === this.editingId);
+			if (index >= 0) {
+				this.sources[index] = source;
+			}
+		} else {
+			this.sources.push(source);
+		}
+
+		this.isAdding = false;
+		this.editingId = null;
+		this.formData = {};
+		this.googleAuthError = null;
+		this.saveSources();
+		this.requestUpdate();
+	}
+
+	cancelForm() {
+		this.isAdding = false;
+		this.editingId = null;
+		this.formData = {};
+		this.googleAuthError = null;
+		this.isGoogleAuthenticating = false;
+		this.requestUpdate();
+	}
+
+	updateForm(field: string, value: string | boolean | number) {
+		if (
+			field === "serverUrl" ||
+			field === "username" ||
+			field === "password" ||
+			field === "url" ||
+			field === "accessToken" ||
+			field === "refreshToken" ||
+			field === "tokenExpiry" ||
+			field === "calendarId" ||
+			field === "sessionCookie" ||
+			field === "employeeId" ||
+			field === "unitId" ||
+			field === "startHour"
+		) {
+			this.formData = {
+				...this.formData,
+				credentials: {
+					...this.formData.credentials,
+					[field]: value,
+				} as ConfigurableSource["credentials"],
+			};
+		} else {
+			this.formData = { ...this.formData, [field]: value };
+		}
+		this.requestUpdate();
+	}
+
+	async signInWithGoogle() {
+		this.isGoogleAuthenticating = true;
+		this.googleAuthError = null;
+		this.requestUpdate();
+
+		try {
+			// Load Google OAuth credentials from public directory
+			const credentialsResponse = await fetch("/credentials_google.json");
+			if (!credentialsResponse.ok) {
+				throw new Error(
+					"Google OAuth credentials file not found. Please add credentials_google.json to the public directory.",
+				);
+			}
+
+			const credentials = await credentialsResponse.json();
+			const clientId =
+				credentials.installed?.client_id || credentials.web?.client_id;
+			const clientSecret =
+				credentials.installed?.client_secret || credentials.web?.client_secret;
+
+			if (!clientId || !clientSecret) {
+				throw new Error(
+					"Invalid credentials file format. Expected client_id and client_secret.",
+				);
+			}
+
+			const tokens = await authenticateWithGoogle(clientId, clientSecret);
+
+			// Fetch the list of calendars from Google
+			const calendarListResponse = await fetch(
+				"https://www.googleapis.com/calendar/v3/users/me/calendarList",
+				{
+					headers: {
+						Authorization: `Bearer ${tokens.accessToken}`,
+					},
+				},
+			);
+
+			if (!calendarListResponse.ok) {
+				throw new Error("Failed to fetch calendar list from Google");
+			}
+
+			const calendarList = await calendarListResponse.json();
+
+			// Create a source for each calendar
+			for (const calendar of calendarList.items || []) {
+				const newSource: GoogleSource = {
+					id: crypto.randomUUID(),
+					name: calendar.summary || "Untitled Calendar",
+					type: "google",
+					credentials: {
+						accessToken: tokens.accessToken,
+						refreshToken: tokens.refreshToken,
+						tokenExpiry: tokens.expiry,
+						calendarId: calendar.id,
+					},
+					color: calendar.backgroundColor || "#4285F4",
+					enabled: true,
+				};
+
+				this.sources.push(newSource);
+			}
+
+			this.saveSources();
+			this.isAdding = false;
+			this.formData = {};
+			this.isGoogleAuthenticating = false;
+			this.requestUpdate();
+		} catch (error) {
+			this.isGoogleAuthenticating = false;
+			this.googleAuthError =
+				error instanceof Error ? error.message : "Authentication failed";
+			this.requestUpdate();
+		}
+	}
+
+	close() {
+		this.dispatchEvent(new CustomEvent("close", { bubbles: true }));
+	}
+
+	render() {
+		const colors = [
+			"#FF6E68",
+			"#FFB800",
+			"#83D754",
+			"#0095FD",
+			"#9FC6E7",
+			"#888082",
+			"#E91E63",
+			"#9C27B0",
+			"#673AB7",
+			"#3F51B5",
+			"#2196F3",
+			"#00BCD4",
+			"#009688",
+			"#4CAF50",
+			"#8BC34A",
+			"#CDDC39",
+			"#FFEB3B",
+			"#FFC107",
+			"#FF9800",
+			"#FF5722",
+			"#795548",
+		];
+
+		return html`
       <div class="container">
         <div class="header">
           <span class="title">Sources</span>
-          <button class="collapse-btn" @click=${this.toggleCollapsed} title="${this.collapsed ? "Expand" : "Collapse"}">
+          <button class="collapse-btn" @click=${this.toggleCollapsed} title="${
+						this.collapsed ? "Expand" : "Collapse"
+					}">
             ${this.collapsed ? "▶" : "◀"}
           </button>
         </div>
 
-        ${this.collapsed
-          ? this.renderSourcesList()
-          : (this.isAdding || this.editingId
-            ? this.renderForm(colors)
-            : this.renderSourcesList())}
+        ${
+					this.collapsed
+						? this.renderSourcesList()
+						: this.isAdding || this.editingId
+						  ? this.renderForm(colors)
+						  : this.renderSourcesList()
+				}
       </div>
     `;
-  }
+	}
 
-  renderSourcesList() {
-    if (this.sources.length === 0) {
-      return html`
+	renderSourcesList() {
+		if (this.sources.length === 0) {
+			return html`
         <div class="empty-state">
           No calendar sources configured
         </div>
@@ -863,18 +896,24 @@ export class CalDAVConfigElement extends LitElement {
           + Add Source
         </button>
       `;
-    }
+		}
 
-    return html`
+		return html`
       <div class="sources-list">
-        ${this.sources.map(
-          (source) => {
-            const sourceCalendars = this.calendars.filter(c => c.sourceId === source.id);
-            return html`
-              <div class="source-item" @click=${() => this.collapsed ? this.toggleEnabled(source) : this.editSource(source)}>
+        ${this.sources.map((source) => {
+					const sourceCalendars = this.calendars.filter(
+						(c) => c.sourceId === source.id,
+					);
+					return html`
+              <div class="source-item" @click=${() =>
+								this.collapsed
+									? this.toggleEnabled(source)
+									: this.editSource(source)}>
                 <div
                   class="source-color ${source.enabled ? "" : "disabled"}"
-                  style="background: ${source.color}; --source-color: ${source.color}"
+                  style="background: ${source.color}; --source-color: ${
+										source.color
+									}"
                 ></div>
                 <span class="source-name">${source.name}</span>
                 <input
@@ -886,34 +925,43 @@ export class CalDAVConfigElement extends LitElement {
                   title="${source.enabled ? "Disable" : "Enable"} sync"
                 />
               </div>
-              ${source.enabled && sourceCalendars.length > 0 ? html`
+              ${
+								source.enabled && sourceCalendars.length > 0
+									? html`
                 <div class="calendar-list">
-                  ${sourceCalendars.map(cal => html`
+                  ${sourceCalendars.map(
+										(cal) => html`
                     <div
-                      class="calendar-item ${this.activeCalendarId === cal.id ? "active" : ""}"
+                      class="calendar-item ${
+												this.activeCalendarId === cal.id ? "active" : ""
+											}"
                       @click=${() => this.selectCalendar(cal.id)}
                     >
-                      <div class="calendar-color" style="background: ${cal.color}"></div>
+                      <div class="calendar-color" style="background: ${
+												cal.color
+											}"></div>
                       <span class="calendar-name">${cal.name}</span>
                     </div>
-                  `)}
+                  `,
+									)}
                 </div>
-              ` : null}
+              `
+									: null
+							}
             `;
-          }
-        )}
+				})}
       </div>
       <button class="add-btn" @click=${this.addSource}>
         + Add Source
       </button>
     `;
-  }
+	}
 
-  renderForm(colors: string[]) {
-    const isEditing = this.editingId !== null;
-    const sourceType = this.formData.type || "caldav";
+	renderForm(colors: string[]) {
+		const isEditing = this.editingId !== null;
+		const sourceType = this.formData.type || "caldav";
 
-    return html`
+		return html`
       <div class="form">
         <div class="form-group">
           <label class="form-label">Type</label>
@@ -921,17 +969,17 @@ export class CalDAVConfigElement extends LitElement {
             class="form-input"
             .value=${sourceType}
             @change=${(e: Event) => {
-              const type = (e.target as HTMLSelectElement).value;
-              this.updateForm("type", type);
-              // Set default color based on type
-              if (type === "google" && !this.formData.color) {
-                this.updateForm("color", "#4285F4");
-              } else if (type === "caldav" && !this.formData.color) {
-                this.updateForm("color", "#FF6E68");
-              } else if (type === "timeseries-json" && !this.formData.color) {
-                this.updateForm("color", "#06B6D4");
-              }
-            }}
+							const type = (e.target as HTMLSelectElement).value;
+							this.updateForm("type", type);
+							// Set default color based on type
+							if (type === "google" && !this.formData.color) {
+								this.updateForm("color", "#4285F4");
+							} else if (type === "caldav" && !this.formData.color) {
+								this.updateForm("color", "#FF6E68");
+							} else if (type === "timeseries-json" && !this.formData.color) {
+								this.updateForm("color", "#06B6D4");
+							}
+						}}
             ?disabled=${isEditing}
           >
             <option value="caldav">CalDAV (with credentials)</option>
@@ -950,12 +998,13 @@ export class CalDAVConfigElement extends LitElement {
             placeholder="My Calendar"
             .value=${this.formData.name || ""}
             @input=${(e: Event) =>
-              this.updateForm("name", (e.target as HTMLInputElement).value)}
+							this.updateForm("name", (e.target as HTMLInputElement).value)}
           />
         </div>
 
-        ${sourceType === "caldav"
-          ? html`
+        ${
+					sourceType === "caldav"
+						? html`
               <div class="form-group">
                 <label class="form-label">Server URL</label>
                 <input
@@ -964,7 +1013,10 @@ export class CalDAVConfigElement extends LitElement {
                   placeholder="https://mail.example.com/caldav/users/username/"
                   .value=${this.formData.credentials?.serverUrl || ""}
                   @input=${(e: Event) =>
-                    this.updateForm("serverUrl", (e.target as HTMLInputElement).value)}
+										this.updateForm(
+											"serverUrl",
+											(e.target as HTMLInputElement).value,
+										)}
                 />
               </div>
 
@@ -975,7 +1027,10 @@ export class CalDAVConfigElement extends LitElement {
                   type="text"
                   .value=${this.formData.credentials?.username || ""}
                   @input=${(e: Event) =>
-                    this.updateForm("username", (e.target as HTMLInputElement).value)}
+										this.updateForm(
+											"username",
+											(e.target as HTMLInputElement).value,
+										)}
                 />
               </div>
 
@@ -986,12 +1041,15 @@ export class CalDAVConfigElement extends LitElement {
                   type="password"
                   .value=${this.formData.credentials?.password || ""}
                   @input=${(e: Event) =>
-                    this.updateForm("password", (e.target as HTMLInputElement).value)}
+										this.updateForm(
+											"password",
+											(e.target as HTMLInputElement).value,
+										)}
                 />
               </div>
             `
-          : sourceType === "ical"
-            ? html`
+						: sourceType === "ical"
+						  ? html`
                 <div class="form-group">
                   <label class="form-label">iCal URL</label>
                   <input
@@ -1000,12 +1058,15 @@ export class CalDAVConfigElement extends LitElement {
                     placeholder="https://example.com/calendar.ics"
                     .value=${this.formData.credentials?.url || ""}
                     @input=${(e: Event) =>
-                      this.updateForm("url", (e.target as HTMLInputElement).value)}
+											this.updateForm(
+												"url",
+												(e.target as HTMLInputElement).value,
+											)}
                   />
                 </div>
               `
-            : sourceType === "timeseries-json"
-              ? html`
+						  : sourceType === "timeseries-json"
+							  ? html`
                   <div class="form-group">
                     <label class="form-label">Timeseries JSON URL</label>
                     <input
@@ -1014,31 +1075,36 @@ export class CalDAVConfigElement extends LitElement {
                       placeholder="https://example.com/data.json"
                       .value=${this.formData.credentials?.url || ""}
                       @input=${(e: Event) =>
-                        this.updateForm("url", (e.target as HTMLInputElement).value)}
+												this.updateForm(
+													"url",
+													(e.target as HTMLInputElement).value,
+												)}
                     />
                     <small style="color: var(--text-muted, rgba(255, 255, 255, 0.5)); font-size: 11px;">
                       Expected format: JSON array of objects with a <code>timestamp</code> field. Rendered as a heatmap backdrop.
                     </small>
                   </div>
                 `
-            : sourceType === "google"
-              ? html`
+							  : sourceType === "google"
+								  ? html`
                 <div class="google-auth-section">
-                  ${this.formData.credentials?.accessToken
-                    ? html`
+                  ${
+										this.formData.credentials?.accessToken
+											? html`
                         <div class="auth-status authenticated">
                           ✓ Authenticated with Google
                         </div>
                       `
-                    : html`
+											: html`
                         <button
                           class="google-login-btn"
                           @click=${this.signInWithGoogle}
                           ?disabled=${this.isGoogleAuthenticating}
                         >
-                          ${this.isGoogleAuthenticating
-                            ? html`<span>Signing in...</span>`
-                            : html`
+                          ${
+														this.isGoogleAuthenticating
+															? html`<span>Signing in...</span>`
+															: html`
                                 <svg class="google-logo" viewBox="0 0 24 24">
                                   <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                                   <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
@@ -1046,12 +1112,16 @@ export class CalDAVConfigElement extends LitElement {
                                   <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                                 </svg>
                                 <span>Sign in with Google</span>
-                              `}
+                              `
+													}
                         </button>
-                      `}
-                  ${this.googleAuthError
-                    ? html`<div class="auth-status error">${this.googleAuthError}</div>`
-                    : null}
+                      `
+									}
+                  ${
+										this.googleAuthError
+											? html`<div class="auth-status error">${this.googleAuthError}</div>`
+											: null
+									}
                 </div>
 
                 <div class="form-group">
@@ -1062,12 +1132,15 @@ export class CalDAVConfigElement extends LitElement {
                     placeholder="primary"
                     .value=${this.formData.credentials?.calendarId || ""}
                     @input=${(e: Event) =>
-                      this.updateForm("calendarId", (e.target as HTMLInputElement).value)}
+											this.updateForm(
+												"calendarId",
+												(e.target as HTMLInputElement).value,
+											)}
                   />
                 </div>
               `
-            : sourceType === "inhouse"
-              ? html`
+								  : sourceType === "inhouse"
+									  ? html`
                   <div class="form-group">
                     <label class="form-label">Session Cookie</label>
                     <input
@@ -1076,7 +1149,10 @@ export class CalDAVConfigElement extends LitElement {
                       placeholder="sessionid=abc123; csrftoken=xyz789"
                       .value=${this.formData.credentials?.sessionCookie || ""}
                       @input=${(e: Event) =>
-                        this.updateForm("sessionCookie", (e.target as HTMLInputElement).value)}
+												this.updateForm(
+													"sessionCookie",
+													(e.target as HTMLInputElement).value,
+												)}
                     />
                     <small style="color: var(--text-muted, rgba(255, 255, 255, 0.5)); font-size: 11px;">
                       Copy from browser DevTools after logging in
@@ -1091,7 +1167,10 @@ export class CalDAVConfigElement extends LitElement {
                       placeholder="589"
                       .value=${this.formData.credentials?.employeeId || ""}
                       @input=${(e: Event) =>
-                        this.updateForm("employeeId", (e.target as HTMLInputElement).value)}
+												this.updateForm(
+													"employeeId",
+													(e.target as HTMLInputElement).value,
+												)}
                     />
                   </div>
 
@@ -1103,7 +1182,10 @@ export class CalDAVConfigElement extends LitElement {
                       placeholder="3"
                       .value=${this.formData.credentials?.unitId || ""}
                       @input=${(e: Event) =>
-                        this.updateForm("unitId", (e.target as HTMLInputElement).value)}
+												this.updateForm(
+													"unitId",
+													(e.target as HTMLInputElement).value,
+												)}
                     />
                   </div>
 
@@ -1111,40 +1193,55 @@ export class CalDAVConfigElement extends LitElement {
                     <label class="form-label">Bookings Start At</label>
                     <select
                       class="form-input"
-                      .value=${String(this.formData.credentials?.startHour ?? 9)}
+                      .value=${String(
+												this.formData.credentials?.startHour ?? 9,
+											)}
                       @change=${(e: Event) =>
-                        this.updateForm("startHour", Number((e.target as HTMLSelectElement).value))}
+												this.updateForm(
+													"startHour",
+													Number((e.target as HTMLSelectElement).value),
+												)}
                     >
-                      <option value="9" ?selected=${(this.formData.credentials?.startHour ?? 9) === 9}>9:00 AM</option>
-                      <option value="10" ?selected=${this.formData.credentials?.startHour === 10}>10:00 AM</option>
+                      <option value="9" ?selected=${
+												(this.formData.credentials?.startHour ?? 9) === 9
+											}>9:00 AM</option>
+                      <option value="10" ?selected=${
+												this.formData.credentials?.startHour === 10
+											}>10:00 AM</option>
                     </select>
                   </div>
                 `
-              : null}
+									  : null
+				}
 
         <div class="form-group">
           <label class="form-label">Color</label>
           <div class="color-picker">
             ${colors.map(
-              (color) => html`
+							(color) => html`
                 <div
-                  class="color-option ${this.formData.color === color
-                    ? "selected"
-                    : ""}"
+                  class="color-option ${
+										this.formData.color === color ? "selected" : ""
+									}"
                   style="background: ${color}"
                   @click=${() => this.updateForm("color", color)}
                 ></div>
-              `
-            )}
+              `,
+						)}
           </div>
         </div>
 
         <div class="form-actions">
-          ${isEditing ? html`
-            <button class="btn btn-danger" @click=${() => this.deleteSource(this.editingId!)}>
+          ${
+						isEditing
+							? html`
+            <button class="btn btn-danger" @click=${() =>
+							this.deleteSource(this.editingId!)}>
               Delete
             </button>
-          ` : null}
+          `
+							: null
+					}
           <button class="btn btn-secondary" @click=${this.cancelForm}>
             Cancel
           </button>
@@ -1154,11 +1251,11 @@ export class CalDAVConfigElement extends LitElement {
         </div>
       </div>
     `;
-  }
+	}
 }
 
 try {
-  customElements.define("caldav-config", CalDAVConfigElement);
+	customElements.define("caldav-config", CalDAVConfigElement);
 } catch (error) {
-  console.error("Failed to register custom element:", error);
+	console.error("Failed to register custom element:", error);
 }