From 6b2b7035cff7f36d6ea768a5ee6d04250e7a9437 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sun, 22 Mar 2026 17:52:32 +0100
Subject: [PATCH] fix(calendar): scroll to current time and show time label on
 indicator

- Changed scroll behavior to position current time ~1/3 from viewport
  top instead of centering, so the red time indicator line is always
  visible on load
- Added current time label (e.g. "14:30") above the red indicator line
  on the right side

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../lib/components/calendar/WeekView.svelte   | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

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 895795389..d705d17ae 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
@@ -178,23 +178,24 @@
 
 	$effect(() => keyboard.setup());
 
-	// Scroll to current hour on mount
+	// Scroll to current time on mount so the red indicator line is visible
 	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 now = new Date();
+		const currentMinutesFromMidnight = now.getHours() * 60 + now.getMinutes();
 		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;
+		// Calculate pixel position of current time
+		const effectiveMinutes = Math.max(0, currentMinutesFromMidnight - firstVisibleHour * 60);
+		const currentTimePixels = (effectiveMinutes / 60) * hourHeight;
+
+		// Scroll so current time is ~1/3 from the top of the viewport
+		const scrollPosition = currentTimePixels - viewportHeight / 3;
 
-		// Scroll to position (instant, not smooth, for initial load)
 		timeGridEl.scrollTo({
 			top: Math.max(0, scrollPosition),
 			behavior: 'instant',
@@ -587,7 +588,10 @@
 
 					<!-- Current time indicator -->
 					{#if isToday(day)}
-						<div class="time-indicator" style="top: {currentTimePosition}%"></div>
+						<div class="time-indicator" style="top: {currentTimePosition}%">
+							<span class="time-indicator-label">{settingsStore.formatTime(timeIndicator.now)}</span
+							>
+						</div>
 					{/if}
 				</div>
 			{/each}
@@ -883,6 +887,17 @@
 		border-radius: 50%;
 	}
 
+	.time-indicator-label {
+		position: absolute;
+		right: 4px;
+		bottom: 3px;
+		font-size: 0.6rem;
+		font-weight: 600;
+		color: hsl(var(--color-error));
+		line-height: 1;
+		pointer-events: none;
+	}
+
 	/* Overflow indicators for events outside visible time range */
 	.overflow-indicator {
 		position: absolute;