Mega push vol 4

src/routes/[orgSlug]/calendar/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext, onMount } from "svelte";
-	import { Button, Modal } from "$lib/components/ui";
+	import { Button, Modal, Avatar } from "$lib/components/ui";
 	import { Calendar } from "$lib/components/calendar";
 	import {
 		getCalendarSubscribeUrl,
@@ -24,6 +24,9 @@
 	const supabase = getContext<SupabaseClient<Database>>("supabase");
 
 	let events = $state(data.events);
+	$effect(() => {
+		events = data.events;
+	});
 	let googleEvents = $state<CalendarEvent[]>([]);
 	let isOrgCalendarConnected = $state(false);
 	let isLoadingGoogle = $state(false);
@@ -133,56 +136,49 @@
 	<title>Calendar - {data.org.name} | Root</title>
 </svelte:head>
 
-<div class="p-6 h-full overflow-auto">
-	<header class="flex items-center justify-between mb-6">
-		<div class="flex items-center gap-4">
-			<h1 class="text-2xl font-bold text-light">Calendar</h1>
-			{#if isOrgCalendarConnected}
-				<div class="flex items-center gap-2">
-					<span
-						class="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-500/10 text-blue-400 rounded-lg"
-					>
-						<svg class="w-4 h-4" viewBox="0 0 24 24">
-							<path
-								fill="currentColor"
-								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"
-							/>
-						</svg>
-						{orgCalendarName ?? "Google Calendar"}
-						{#if isLoadingGoogle}
-							<span class="animate-spin">⟳</span>
-						{/if}
-					</span>
-					<button
-						class="flex items-center gap-2 px-3 py-1.5 text-sm bg-green-500/10 text-green-400 rounded-lg hover:bg-green-500/20 transition-colors"
-						onclick={subscribeToCalendar}
-						title="Add to your Google Calendar"
-					>
-						<svg
-							class="w-4 h-4"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							stroke-width="2"
-						>
-							<path d="M12 5v14M5 12h14" />
-						</svg>
-						Subscribe
-					</button>
-				</div>
-			{/if}
-		</div>
+<div class="flex flex-col h-full p-4 lg:p-5 gap-4">
+	<!-- Header -->
+	<header class="flex items-center gap-2 p-1">
+		<Avatar name="Calendar" size="md" />
+		<h1 class="flex-1 font-heading text-h1 text-white">Calendar</h1>
+		{#if isOrgCalendarConnected}
+			<button
+				type="button"
+				class="flex items-center gap-2 px-3 py-1.5 text-sm bg-primary/10 text-primary rounded-[32px] hover:bg-primary/20 transition-colors"
+				onclick={subscribeToCalendar}
+				title="Add to your Google Calendar"
+			>
+				<span
+					class="material-symbols-rounded"
+					style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
+				>
+					add
+				</span>
+				Subscribe
+			</button>
+		{/if}
+		<button
+			type="button"
+			class="p-1 hover:bg-dark rounded-lg transition-colors"
+			aria-label="More options"
+		>
+			<span
+				class="material-symbols-rounded text-light"
+				style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
+			>
+				more_horiz
+			</span>
+		</button>
 	</header>
 
-	<p class="text-light/50 text-sm mb-4">
-		View events from connected Google Calendar. Event creation coming soon.
-	</p>
-
-	<Calendar
-		events={allEvents}
-		onDateClick={handleDateClick}
-		onEventClick={handleEventClick}
-	/>
+	<!-- Calendar Grid -->
+	<div class="flex-1 overflow-auto">
+		<Calendar
+			events={allEvents}
+			onDateClick={handleDateClick}
+			onEventClick={handleEventClick}
+		/>
+	</div>
 </div>
 
 <Modal