feat(calendar): add Apple CalDAV two-way sync with write operations

- Implement createEvent, updateEvent, deleteEvent methods in AppleCaldavProvider
- Add ICS generation for CalDAV PUT requests with proper RFC 5545 escaping
- Extract event metadata (href, etag) for optimistic locking and conflict detection
- Add syncAppleSource method to CalendarSettingsTab
- Mark Google, Outlook, Apple CalDAV providers as "Coming Soon" in source modal

perf(kanban): cache CSS custom property tag colors
- Prevent layout thrashing from repeated getComputedStyle calls
- Clear cache on css-change event (theme switch, snippet toggle)

Author: Quorafind

src/components/features/kanban/kanban-card.ts

@@ -7,6 +7,21 @@ import { createTaskCheckbox } from "@/components/features/task/view/details";
 import { getEffectiveProject } from "@/utils/task/task-operations";
 import { sanitizePriorityForClass } from "@/utils/task/priority-utils";
 
+/**
+ * Cache for CSS custom property tag colors to prevent layout thrashing.
+ * Reading getComputedStyle() in a render loop causes forced synchronous reflow.
+ * This cache stores resolved tag colors so we only read the DOM once per tag.
+ */
+const tagColorCache: Map<string, string | null> = new Map();
+
+/**
+ * Clears the tag color cache. Should be called when CSS changes
+ * (e.g., theme switch, CSS snippet toggle) to ensure fresh values.
+ */
+export function clearTagColorCache(): void {
+	tagColorCache.clear();
+}
+
 export class KanbanCardComponent extends Component {
 	public element: HTMLElement;
 	private task: Task;
@@ -317,14 +332,24 @@ export class KanbanCardComponent extends Component {
 				const color = tagColors[tagName];
 				tagEl.style.setProperty("--tag-color", color);
 				tagEl.classList.add("colored-tag");
+				return; // Color found from plugin, no need to check CSS vars
 			}
 		}
 
 		// Fallback: check for CSS custom properties set by other tag color plugins
-		const computedStyle = getComputedStyle(document.body);
-		const tagColorVar = computedStyle.getPropertyValue(
-			`--tag-color-${tagName}`,
-		);
+		// Use cache to prevent layout thrashing from repeated getComputedStyle calls
+		let tagColorVar = tagColorCache.get(tagName);
+
+		if (tagColorVar === undefined) {
+			// Cache miss: read from DOM once and cache the result
+			const computedStyle = getComputedStyle(document.body);
+			const val = computedStyle
+				.getPropertyValue(`--tag-color-${tagName}`)
+				.trim();
+			tagColorVar = val || null;
+			tagColorCache.set(tagName, tagColorVar);
+		}
+
 		if (tagColorVar) {
 			tagEl.style.setProperty("--tag-color", tagColorVar);
 			tagEl.classList.add("colored-tag");

src/components/features/kanban/kanban.ts

@@ -9,6 +9,7 @@ import {
 import TaskProgressBarPlugin from "@/index"; // Adjust path as needed
 import { Task } from "@/types/task"; // Adjust path as needed
 import { KanbanColumnComponent } from "./kanban-column";
+import { clearTagColorCache } from "./kanban-card";
 // import { DragManager, DragMoveEvent, DragEndEvent } from "@/components/ui/behavior/DragManager";
 import Sortable from "sortablejs";
 import "@/styles/kanban/kanban.scss";
@@ -136,6 +137,13 @@ export class KanbanComponent extends Component {
 		this.containerEl.empty();
 		this.containerEl.addClass("tg-kanban-view");
 
+		// Clear tag color cache on CSS changes (theme switch, snippet toggle)
+		this.registerEvent(
+			this.app.workspace.on("css-change", () => {
+				clearTagColorCache();
+			})
+		);
+
 		// Load configuration settings
 		this.loadKanbanConfig();
 		this.loadCycleSelection();

src/components/features/settings/tabs/CalendarSettingsTab.ts

@@ -319,6 +319,9 @@ export class CalendarSettingsComponent {
 					} else if (isOutlookSource(source)) {
 						// Use OutlookCalendarProvider for Outlook sources
 						await this.syncOutlookSource(source);
+					} else if (isAppleSource(source)) {
+						// Use AppleCaldavProvider for Apple CalDAV sources
+						await this.syncAppleSource(source);
 					} else if (isUrlIcsSource(source)) {
 						// Use IcsManager for URL-based sources
 						const icsManager = this.plugin.getIcsManager();
@@ -520,6 +523,49 @@ export class CalendarSettingsComponent {
 
 		new Notice(t("Sync completed") + `: ${events.length} ` + t("events"));
 	}
+
+	/**
+	 * Sync an Apple CalDAV source using AppleCaldavProvider
+	 */
+	private async syncAppleSource(
+		source: AppleCaldavSourceConfig,
+	): Promise<void> {
+		if (!source.appSpecificPassword) {
+			throw new Error("Not authenticated with iCloud Calendar");
+		}
+
+		if (!source.calendarHrefs || source.calendarHrefs.length === 0) {
+			throw new Error("No calendars selected for sync");
+		}
+
+		// Import the provider dynamically to avoid circular deps
+		const { AppleCaldavProvider } =
+			await import("@/providers/apple-caldav-provider");
+
+		// Create provider instance
+		const provider = new AppleCaldavProvider(source);
+
+		// Fetch events for the configured date range (default: last 30 days to next 90 days)
+		const now = new Date();
+		const start = new Date(now);
+		start.setDate(start.getDate() - 30);
+		const end = new Date(now);
+		end.setDate(end.getDate() + 90);
+
+		const events = await provider.getEvents({
+			range: { start, end },
+			expandRecurring: true,
+		});
+
+		// Update cache in IcsManager
+		const icsManager = this.plugin.getIcsManager();
+		if (icsManager && events.length > 0) {
+			// Store events in the IcsManager cache
+			icsManager.updateCacheForSource(source.id, events);
+		}
+
+		new Notice(t("Sync completed") + `: ${events.length} ` + t("events"));
+	}
 }
 
 // ============================================================================
@@ -621,19 +667,33 @@ class CalendarSourceModal extends Modal {
 			"apple-caldav",
 		];
 
+		// Temporarily disabled providers (not yet fully implemented)
+		const disabledProviders: CalendarProviderType[] = [
+			"google",
+			"outlook",
+			"apple-caldav",
+		];
+
 		for (const type of providerTypes) {
 			const meta = CalendarProviderMeta[type];
-			const card = grid.createDiv("type-card");
+			const isDisabled = disabledProviders.includes(type);
+			const card = grid.createDiv({
+				cls: `type-card${isDisabled ? " type-card-disabled" : ""}`,
+			});
 
 			const iconDiv = card.createDiv("type-icon");
 			setIcon(iconDiv, meta.icon);
 
 			card.createDiv("type-name").setText(meta.displayName);
 			card.createDiv("type-desc").setText(meta.description);
 
-			card.onclick = () => {
-				this.selectType(type);
-			};
+			if (isDisabled) {
+				card.createDiv("type-badge").setText(t("Coming Soon"));
+			} else {
+				card.onclick = () => {
+					this.selectType(type);
+				};
+			}
 		}
 	}