From 2200ed64e8c1fe46027451b4418acec7896ed96f Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Fri, 13 Feb 2026 22:05:35 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20feat(calendar):=20auto-scroll=20?=
 =?UTF-8?q?to=20current=20hour=20and=20hide=20tasks=20by=20default?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hide tasks in calendar by default on app load (not persisted from sessions)
- Auto-scroll to current hour when loading DayView, WeekView, MultiDayView
- Center current hour in viewport for immediate visibility
- Exclude task/sidebar settings from cloud sync to ensure clean initial state
---
 .../lib/components/calendar/DayView.svelte    | 25 ++++++++++++++++
 .../components/calendar/MultiDayView.svelte   | 25 ++++++++++++++++
 .../lib/components/calendar/WeekView.svelte   | 29 ++++++++++++++++++-
 .../web/src/lib/stores/settings.svelte.ts     | 18 ++++++++++--
 4 files changed, 94 insertions(+), 3 deletions(-)

diff --git a/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
index f21b2776c..54f169c6e 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { viewStore } from '$lib/stores/view.svelte';
 	import { eventsStore } from '$lib/stores/events.svelte';
 	import { calendarsStore } from '$lib/stores/calendars.svelte';
@@ -124,6 +125,30 @@
 	let dragPreviewHeight = $state(0);
 	let dayColumnRef = $state<HTMLElement | null>(null);
 
+	// Scroll to current hour on mount
+	onMount(() => {
+		const scrollContainer = dayColumnRef?.parentElement;
+		if (!scrollContainer) return;
+
+		// Use CSS variable for hour height (default 48px)
+		const hourHeight =
+			parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--hour-height')) ||
+			48;
+		const currentHour = new Date().getHours();
+		const viewportHeight = scrollContainer.clientHeight;
+
+		// Calculate scroll position to center current hour in viewport
+		// Account for firstVisibleHour (if hour filtering is enabled)
+		const effectiveHour = Math.max(0, currentHour - firstVisibleHour);
+		const scrollPosition = effectiveHour * hourHeight - viewportHeight / 2 + hourHeight / 2;
+
+		// Scroll to position (instant, not smooth, for initial load)
+		scrollContainer.scrollTo({
+			top: Math.max(0, scrollPosition),
+			behavior: 'instant',
+		});
+	});
+
 	// ============================================================================
 	// Resize State
 	// ============================================================================
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte
index 038b02d2b..8f31cfc84 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { viewStore } from '$lib/stores/view.svelte';
 	import { eventsStore } from '$lib/stores/events.svelte';
 	import { calendarsStore } from '$lib/stores/calendars.svelte';
@@ -147,6 +148,30 @@
 	// Reference to the days container for position calculations
 	let daysContainerEl: HTMLDivElement;
 
+	// Scroll to current hour on mount
+	onMount(() => {
+		const scrollContainer = daysContainerEl?.parentElement;
+		if (!scrollContainer) return;
+
+		// Use CSS variable for hour height (default 48px)
+		const hourHeight =
+			parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--hour-height')) ||
+			48;
+		const currentHour = new Date().getHours();
+		const viewportHeight = scrollContainer.clientHeight;
+
+		// Calculate scroll position to center current hour in viewport
+		// Account for firstVisibleHour (if hour filtering is enabled)
+		const effectiveHour = Math.max(0, currentHour - firstVisibleHour);
+		const scrollPosition = effectiveHour * hourHeight - viewportHeight / 2 + hourHeight / 2;
+
+		// Scroll to position (instant, not smooth, for initial load)
+		scrollContainer.scrollTo({
+			top: Math.max(0, scrollPosition),
+			behavior: 'instant',
+		});
+	});
+
 	function getEventsForDay(day: Date): CalendarEvent[] {
 		return getVisibleTimedEvents(
 			eventsStore.getEventsForDay(day),
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
index 22ddb4341..31a76d34f 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { viewStore } from '$lib/stores/view.svelte';
 	import { eventsStore } from '$lib/stores/events.svelte';
 	import { calendarsStore } from '$lib/stores/calendars.svelte';
@@ -147,6 +148,32 @@
 	// Reference to the days container for position calculations
 	let daysContainerEl: HTMLDivElement;
 
+	// Reference to the time grid (scroll container)
+	let timeGridEl: HTMLDivElement;
+
+	// Scroll to current hour on mount
+	onMount(() => {
+		if (!timeGridEl) return;
+
+		// Use CSS variable for hour height (default 48px)
+		const hourHeight =
+			parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--hour-height')) ||
+			48;
+		const currentHour = new Date().getHours();
+		const viewportHeight = timeGridEl.clientHeight;
+
+		// Calculate scroll position to center current hour in viewport
+		// Account for firstVisibleHour (if hour filtering is enabled)
+		const effectiveHour = Math.max(0, currentHour - firstVisibleHour);
+		const scrollPosition = effectiveHour * hourHeight - viewportHeight / 2 + hourHeight / 2;
+
+		// Scroll to position (instant, not smooth, for initial load)
+		timeGridEl.scrollTo({
+			top: Math.max(0, scrollPosition),
+			behavior: 'instant',
+		});
+	});
+
 	// Birthday Popover (using composable)
 	const birthdayPopover = useBirthdayPopover();
 
@@ -933,7 +960,7 @@
 	</div>
 
 	<!-- Time grid -->
-	<div class="time-grid scrollbar-thin">
+	<div class="time-grid scrollbar-thin" bind:this={timeGridEl}>
 		<!-- Time column -->
 		<div class="time-column">
 			{#each hours as hour}
diff --git a/apps/calendar/apps/web/src/lib/stores/settings.svelte.ts b/apps/calendar/apps/web/src/lib/stores/settings.svelte.ts
index 6c58f6480..59f3f6fc5 100644
--- a/apps/calendar/apps/web/src/lib/stores/settings.svelte.ts
+++ b/apps/calendar/apps/web/src/lib/stores/settings.svelte.ts
@@ -100,7 +100,7 @@ const DEFAULT_SETTINGS: CalendarAppSettings = {
 	showBirthdays: true,
 	showBirthdayAge: true,
 	showTasksInCalendar: false,
-	sidebarCollapsed: false,
+	sidebarCollapsed: true,
 	quickViewPillViews: ['week', 'month', 'agenda'],
 	customDayCount: 30,
 	defaultEventDuration: 60,
@@ -131,6 +131,13 @@ const baseStore = createAppSettingsStore<CalendarAppSettings>(
 	}
 );
 
+// Always start with tasks/sidebar hidden when the app loads
+// (don't persist this from previous sessions)
+if (browser) {
+	baseStore.set('showTasksInCalendar', false);
+	baseStore.set('sidebarCollapsed', true);
+}
+
 // Load settings from cloud
 function loadFromCloud(): Partial<CalendarAppSettings> | null {
 	if (!userSettings.loaded) return null;
@@ -266,7 +273,14 @@ export const settingsStore = {
 		if (!initialSyncDone) {
 			const cloudSettings = loadFromCloud();
 			if (cloudSettings && Object.keys(cloudSettings).length > 0) {
-				baseStore.update(cloudSettings);
+				// Exclude showTasksInCalendar and sidebarCollapsed from cloud sync
+				// - always start with tasks hidden and sidebar collapsed
+				const {
+					showTasksInCalendar: _,
+					sidebarCollapsed: __,
+					...settingsWithoutTasks
+				} = cloudSettings;
+				baseStore.update(settingsWithoutTasks);
 			} else {
 				syncToCloud(baseStore.settings);
 			}