From 0d8d42c49e1238f9eef5f83e3577c3c464a09f24 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Sun, 22 Mar 2026 12:44:45 -0700
Subject: [PATCH] fix(rcal): distinguish pinch-zoom from scroll-pan on calendar

Trackpad pinch (ctrlKey wheel) zooms granularity, two-finger scroll
navigates the timeline forward/backward instead of zooming.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 modules/rcal/components/folk-calendar-view.ts | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/modules/rcal/components/folk-calendar-view.ts b/modules/rcal/components/folk-calendar-view.ts
index 6ba16cf..5b43373 100644
--- a/modules/rcal/components/folk-calendar-view.ts
+++ b/modules/rcal/components/folk-calendar-view.ts
@@ -2290,7 +2290,9 @@ class FolkCalendarView extends HTMLElement {
 			});
 		});
 
-		// Scroll/trackpad zoom on calendar pane
+		// Scroll/trackpad gestures on calendar pane
+		// - Pinch-to-zoom (ctrlKey wheel) → zoom in/out granularity
+		// - Two-finger scroll/pan (plain wheel) → navigate timeline
 		const calPane = $("calendar-pane");
 		if (calPane) {
 			calPane.addEventListener("wheel", (e: WheelEvent) => {
@@ -2300,16 +2302,29 @@ class FolkCalendarView extends HTMLElement {
 
 				e.preventDefault();
 
-				// Debounce: 120ms
-				if (this._wheelTimer) clearTimeout(this._wheelTimer);
-				this._wheelTimer = setTimeout(() => {
-					if (e.deltaY > 0) {
-						this.zoomOut(); // scroll down → zoom out
-					} else if (e.deltaY < 0) {
-						this.zoomIn(); // scroll up → zoom in
-					}
-					this._wheelTimer = null;
-				}, 120);
+				if (e.ctrlKey) {
+					// Pinch-to-zoom on trackpad (or Ctrl+scroll with mouse)
+					if (this._wheelTimer) clearTimeout(this._wheelTimer);
+					this._wheelTimer = setTimeout(() => {
+						if (e.deltaY > 0) {
+							this.zoomOut();
+						} else if (e.deltaY < 0) {
+							this.zoomIn();
+						}
+						this._wheelTimer = null;
+					}, 120);
+				} else {
+					// Two-finger scroll / mouse wheel → navigate timeline
+					if (this._wheelTimer) clearTimeout(this._wheelTimer);
+					this._wheelTimer = setTimeout(() => {
+						if (e.deltaY > 0) {
+							this.navigate(1);  // scroll down → next period
+						} else if (e.deltaY < 0) {
+							this.navigate(-1); // scroll up → previous period
+						}
+						this._wheelTimer = null;
+					}, 120);
+				}
 			}, { passive: false });
 
 			// Pan/swipe + pinch-to-zoom on calendar pane