refac

src/lib/components/calendar/CalendarSidebar.svelte

@@ -179,6 +179,25 @@
 			<div class="text-[11px] text-gray-400 dark:text-gray-500 uppercase tracking-wider">
 				{$i18n.t('Calendars')}
 			</div>
+			<button
+				class="p-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition"
+				title={$i18n.t('New calendar')}
+				on:click={onCreateCalendar}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="2"
+					stroke="currentColor"
+					class="size-3 text-gray-400 dark:text-gray-500"
+					><path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M12 4.5v15m7.5-7.5h-15"
+					/></svg
+				>
+			</button>
 		</div>
 
 		{#each calendars as cal (cal.id)}

src/lib/components/layout/Navbar/Menu.svelte

@@ -105,8 +105,8 @@
 						el.style.contentVisibility = 'visible';
 					});
 
-					// Wait for DOM update/layout
-					await new Promise((r) => setTimeout(r, 100));
+					// Let the browser compute layout for the cloned element
+					await new Promise((r) => requestAnimationFrame(r));
 
 					// Render entire content once
 					const canvas = await html2canvas(clonedElement, {

src/lib/components/layout/Sidebar/ChatMenu.svelte

@@ -117,8 +117,8 @@
 						el.style.contentVisibility = 'visible';
 					});
 
-					// Wait for DOM update/layout
-					await new Promise((r) => setTimeout(r, 100));
+					// Let the browser compute layout for the cloned element
+					await new Promise((r) => requestAnimationFrame(r));
 
 					// Render entire content once
 					const canvas = await html2canvas(clonedElement, {

src/routes/(app)/calendar/+page.svelte

@@ -13,6 +13,7 @@
 	import CalendarView from '$lib/components/calendar/CalendarView.svelte';
 	import CalendarSidebar from '$lib/components/calendar/CalendarSidebar.svelte';
 	import CalendarEventModal from '$lib/components/calendar/CalendarEventModal.svelte';
+	import CreateCalendarModal from '$lib/components/calendar/CreateCalendarModal.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -34,6 +35,7 @@
 	let showEventModal = false;
 	let editEvent: CalendarEventModel | null = null;
 	let defaultStartAt: number | null = null;
+	let showCreateCalendarModal = false;
 
 	const MONTH_NAMES = [
 		'January',
@@ -159,6 +161,15 @@
 		refresh();
 	}
 
+	function handleCreateCalendar() {
+		showCreateCalendarModal = true;
+	}
+
+	async function handleCalendarCreated() {
+		await loadCalendars();
+		await refresh();
+	}
+
 	function handleNewEvent() {
 		editEvent = null;
 		defaultStartAt = null;
@@ -209,6 +220,11 @@
 	on:delete={() => refresh()}
 />
 
+<CreateCalendarModal
+	bind:show={showCreateCalendarModal}
+	on:created={handleCalendarCreated}
+/>
+
 <div
 	class="flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
 		? 'md:max-w-[calc(100%-var(--sidebar-width))]'
@@ -350,6 +366,7 @@
 					{visibleCalendarIds}
 					{currentDate}
 					onToggle={toggleCalendar}
+					onCreateCalendar={handleCreateCalendar}
 					onDeleteCalendar={handleDeleteCalendar}
 					onDateSelect={handleDateSelect}
 				/>