authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-02-19 15:52:11-08:00
committergravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-02-19 15:52:11-08:00
logc00354c0b11d97779ba387c046a2da367fd4c1d1
treeb909cedff0d8ed961413df144f3e8e0c26670c92
parenta002239fc40750ca04fe1c890cd5b9395cceb89b

Use non-passive wheel listener for turn strip

Co-authored-by: codex <codex@users.noreply.github.com>

1 files changed, 5 insertions(+), 11 deletions(-)

apps/web/src/components/DiffPanel.tsx+5-11
...@@ -3,14 +3,7 @@ import { FileDiff, type FileDiffMetadata, Virtualizer } from "@pierre/diffs/reac...@@ -3,14 +3,7 @@ import { FileDiff, type FileDiffMetadata, Virtualizer } from "@pierre/diffs/reac
3import { useQuery } from "@tanstack/react-query";3import { useQuery } from "@tanstack/react-query";
4import { useNavigate, useParams, useSearch } from "@tanstack/react-router";4import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
5import { ChevronLeftIcon, ChevronRightIcon, Columns2Icon, Rows3Icon } from "lucide-react";5import { ChevronLeftIcon, ChevronRightIcon, Columns2Icon, Rows3Icon } from "lucide-react";
6import {6import { useCallback, useEffect, useMemo, useRef, useState } from "react";
7 type WheelEvent as ReactWheelEvent,
8 useCallback,
9 useEffect,
10 useMemo,
11 useRef,
12 useState,
13} from "react";
14import { checkpointDiffQueryOptions } from "~/lib/providerReactQuery";7import { checkpointDiffQueryOptions } from "~/lib/providerReactQuery";
15import { cn } from "~/lib/utils";8import { cn } from "~/lib/utils";
16import { parseDiffRouteSearch, stripDiffSearchParams } from "../diffRouteSearch";9import { parseDiffRouteSearch, stripDiffSearchParams } from "../diffRouteSearch";
...@@ -250,7 +243,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {...@@ -250,7 +243,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
250 if (!element) return;243 if (!element) return;
251 element.scrollBy({ left: offset, behavior: "smooth" });244 element.scrollBy({ left: offset, behavior: "smooth" });
252 }, []);245 }, []);
253 const onTurnStripWheel = useCallback((event: ReactWheelEvent<HTMLDivElement>) => {246 const onTurnStripWheel = useCallback((event: WheelEvent) => {
254 const element = turnStripRef.current;247 const element = turnStripRef.current;
255 if (!element) return;248 if (!element) return;
256 if (element.scrollWidth <= element.clientWidth + 1) return;249 if (element.scrollWidth <= element.clientWidth + 1) return;
...@@ -267,15 +260,17 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {...@@ -267,15 +260,17 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
267 updateTurnStripScrollState();260 updateTurnStripScrollState();
268 const onScroll = () => updateTurnStripScrollState();261 const onScroll = () => updateTurnStripScrollState();
269 element.addEventListener("scroll", onScroll, { passive: true });262 element.addEventListener("scroll", onScroll, { passive: true });
263 element.addEventListener("wheel", onTurnStripWheel, { passive: false });
270264
271 const resizeObserver = new ResizeObserver(() => updateTurnStripScrollState());265 const resizeObserver = new ResizeObserver(() => updateTurnStripScrollState());
272 resizeObserver.observe(element);266 resizeObserver.observe(element);
273267
274 return () => {268 return () => {
275 element.removeEventListener("scroll", onScroll);269 element.removeEventListener("scroll", onScroll);
270 element.removeEventListener("wheel", onTurnStripWheel);
276 resizeObserver.disconnect();271 resizeObserver.disconnect();
277 };272 };
278 }, [updateTurnStripScrollState]);273 }, [onTurnStripWheel, updateTurnStripScrollState]);
279274
280 useEffect(() => {275 useEffect(() => {
281 updateTurnStripScrollState();276 updateTurnStripScrollState();
...@@ -344,7 +339,6 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {...@@ -344,7 +339,6 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
344 <div339 <div
345 ref={turnStripRef}340 ref={turnStripRef}
346 className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"341 className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
347 onWheel={onTurnStripWheel}
348 >342 >
349 <button343 <button
350 type="button"344 type="button"