From 83f0bd2ead156f99a0279f5ad46de77bc8e322ec Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Fri, 6 Nov 2026 12:16:54 +0100
Subject: [PATCH] feat(mobile): pull sheets from anywhere with a mouse too,
 glide the active day

A pull on a sheet's content only answered touch, so with a mouse the sheet
could only be dragged by its top edge, and a pull that started on a button
read as a press. Mouse and pen now pull the content like a finger, a pull
that starts on a button swallows its click, and text fields keep their own
gesture.

The active day chip and the segmented controls now glide one shared pill to
the new item on the compositor, instead of repainting two buttons.
---
 client/src/mobile/components/MSegmented.tsx   |  24 +--
 client/src/mobile/components/useActivePill.ts |  50 ++++++
 client/src/mobile/components/useSheetDrag.ts  | 143 ++++++++++++------
 client/src/mobile/screens/trip/MTripShell.tsx |  16 +-
 client/tests/unit/mobile/MSheet.test.tsx      |  28 ++++
 5 files changed, 192 insertions(+), 69 deletions(-)
 create mode 100644 client/src/mobile/components/useActivePill.ts

diff --git a/client/src/mobile/components/MSegmented.tsx b/client/src/mobile/components/MSegmented.tsx
index 470128a4e..d89aa60f1 100644
--- a/client/src/mobile/components/MSegmented.tsx
+++ b/client/src/mobile/components/MSegmented.tsx
@@ -1,4 +1,5 @@
-import { ReactNode, useLayoutEffect, useRef, useState } from 'react'
+import { ReactNode, useRef } from 'react'
+import { useActivePill } from './useActivePill'
 
 export interface MSegmentedOption<T extends string = string> {
   value: T
@@ -26,19 +27,9 @@ export default function MSegmented<T extends string = string>({
   className = '',
 }: MSegmentedProps<T>) {
   const trackRef = useRef<HTMLDivElement>(null)
-  const [indicator, setIndicator] = useState<{ left: number; width: number } | null>(null)
+  const pill = useActivePill(trackRef, '[data-active="true"]', [value, options.length])
 
-  useLayoutEffect(() => {
-    const track = trackRef.current
-    if (!track) return
-    const measure = () => {
-      const active = track.querySelector<HTMLElement>('[data-active="true"]')
-      if (active) setIndicator({ left: active.offsetLeft, width: active.offsetWidth })
-    }
-    measure()
-    const ro = new ResizeObserver(measure)
-    ro.observe(track)
-    return () => ro.disconnect()
+  return () => ro.disconnect()
   }, [value, options.length])
 
   return (
@@ -47,12 +38,7 @@ export default function MSegmented<T extends string = string>({
       role="tablist"
       className={`relative flex rounded-full bg-[color:var(--m-ic)] p-[3px] ${className}`}
     >
-      {indicator && (
-        <div
-          className="absolute top-[3px] bottom-[3px] rounded-full bg-m-act transition-[left,width] duration-[280ms] ease-[var(--ease-drawer)]"
-          style={{ left: indicator.left, width: indicator.width }}
-        />
-      )}
+      {pill && <div aria-hidden="true" className="absolute bottom-[3px] left-0 top-[3px] rounded-full bg-m-act" style={pill} />}
       {options.map((opt) => {
         const active = opt.value === value
         return (
diff --git a/client/src/mobile/components/useActivePill.ts b/client/src/mobile/components/useActivePill.ts
new file mode 100644
index 000000000..a23946a32
--- /dev/null
+++ b/client/src/mobile/components/useActivePill.ts
@@ -0,0 +1,50 @@
+import type { CSSProperties, DependencyList, RefObject } from 'react';
+import { useLayoutEffect, useState } from 'react';
+
+/**
+ * The pill that glides under the active item of a segmented control or a chip
+ * rail, the way a native segmented control moves its thumb instead of
+ * repainting two buttons.
+ *
+ * Measures the active item inside `trackRef` (the first match of `selector`)
+ * and hands back the pill's style: positioned by transform, so the glide runs
+ * on the compositor. The first placement does not animate, so a screen opens
+ * with the pill already in place rather than sliding in from the edge. The
+ * pill sits inside the track's scroll content, so a rail that scrolls carries
+ * it along.
+ */
+export function useActivePill(
+  /** The track, as a ref or as the element itself (a callback-ref'd rail). */
+  trackRef: RefObject<HTMLElement | null> | HTMLElement | null,
+  selector: string,
+  deps: DependencyList
+): CSSProperties | null {
+  const [box, setBox] = useState<{ left: number; width: number; animate: boolean } | null>(null);
+
+  useLayoutEffect(() => {
+    const track = trackRef && 'current' in trackRef ? trackRef.current : trackRef;
+    if (!track) return;
+    const measure = () => {
+      const active = track.querySelector<HTMLElement>(selector);
+      if (!active) {
+        setBox(null);
+        return;
+      }
+      setBox((prev) => ({ left: active.offsetLeft, width: active.offsetWidth, animate: prev !== null }));
+    };
+    measure();
+    if (typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(track);
+    return () => observer.disconnect();
+    // The caller names what moves the active item; the ref and selector are stable.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  if (!box) return null;
+  return {
+    width: box.width,
+    transform: `translateX(${box.left}px)`,
+    transition: box.animate ? 'transform 320ms var(--ease-drawer), width 320ms var(--ease-drawer)' : 'none',
+  };
+}
diff --git a/client/src/mobile/components/useSheetDrag.ts b/client/src/mobile/components/useSheetDrag.ts
index 7c2995de1..1b5f2c09f 100644
--- a/client/src/mobile/components/useSheetDrag.ts
+++ b/client/src/mobile/components/useSheetDrag.ts
@@ -6,7 +6,8 @@ import { useCallback, useEffect, useRef } from 'react';
  *
  * Two ways in. The grab strip along the top edge answers pointers, so a mouse
  * or a pen on a narrow window can pull it too. And the sheet's content answers
- * a finger pulling down once whatever it scrolls is at its top: the gesture
+ * a finger, a mouse or a pen pulling down once whatever it scrolls is at its top
+ * (a pull that starts on a button is a pull, and its click is swallowed): the gesture
  * that would otherwise only rubber-band the list carries the whole sheet, as
  * on iOS. A content drag is claimed on the first move or not at all, so the
  * list's own scroll and any horizontal scroller inside keep their gestures.
@@ -34,7 +35,8 @@ const STRETCH_MAX = 20;
 export const SPRING_BACK = 'transform 280ms var(--ease-drawer)';
 
 /** Controls that own a downward finger themselves. */
-const OWNS_GESTURE = 'input[type="range"], textarea, select, [data-sheet-nodrag]';
+const OWNS_GESTURE =
+  'input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), textarea, select, [contenteditable="true"], [data-sheet-nodrag]';
 
 interface Drag {
   y0: number;
@@ -156,68 +158,115 @@ export function useSheetDrag({ enabled, panelRef, onDismiss }: SheetDragOptions)
     [release]
   );
 
-  // ── The content: touch events, claimed on the first move ──────────────────
+  // ── The content: a finger (touch events) or a mouse or pen (pointer events),
+  // claimed on the first move or let go ─────────────────────────────────────
   useEffect(() => {
     const panel = panelRef.current;
     if (!enabled || !panel) return;
+    /** Set by a claimed drag: the click the browser sends after it is not a tap. */
+    let swallowClick = false;
 
-    const onStart = (e: TouchEvent) => {
+    const begin = (x: number, y: number, t: number, target: EventTarget | null): boolean => {
+      const el = target as Element | null;
+      if (el?.closest?.('[data-sheet-grab]') || el?.closest?.(OWNS_GESTURE)) return false;
+      swallowClick = false;
+      drag.current = { y0: y, x0: x, samples: [{ y, t }], claimed: false, scroller: nearestScroller(target, panel) };
+      return true;
+    };
+    /** False once the gesture is not ours, so the caller lets it go. */
+    const advance = (x: number, y: number, t: number): boolean => {
+      const d = drag.current;
+      if (!d) return false;
+      if (!d.claimed) {
+        const dy = y - d.y0;
+        const dx = x - d.x0;
+        if (Math.abs(dy) <= CLASSIFY_PX && Math.abs(dx) <= CLASSIFY_PX) return true;
+        const atTop = !d.scroller || d.scroller.scrollTop <= 0;
+        if (!(dy > 0 && Math.abs(dy) > Math.abs(dx) * AXIS_BIAS && atTop)) {
+          drag.current = null;
+          return false;
+        }
+        d.claimed = true;
+        // Measured from here, so the sheet does not jump by the classify slop.
+        d.y0 = y;
+        d.samples = [{ y, t }];
+      }
+      sample(d, y, t);
+      follow(y - d.y0);
+      return true;
+    };
+    const finish = (y: number | undefined) => {
+      const d = drag.current;
+      drag.current = null;
+      if (!d?.claimed) return;
+      swallowClick = true;
+      const last = d.samples[d.samples.length - 1];
+      release(d, y ?? last.y);
+    };
+
+    const onTouchStart = (e: TouchEvent) => {
       if (e.touches.length !== 1) {
         drag.current = null;
         return;
       }
-      const target = e.target as Element | null;
-      if (target?.closest?.('[data-sheet-grab]') || target?.closest?.(OWNS_GESTURE)) return;
       const t = e.touches[0];
-      drag.current = {
-        y0: t.clientY,
-        x0: t.clientX,
-        samples: [{ y: t.clientY, t: e.timeStamp }],
-        claimed: false,
-        scroller: nearestScroller(e.target, panel),
-      };
+      begin(t.clientX, t.clientY, e.timeStamp, e.target);
     };
-    const onMove = (e: TouchEvent) => {
-      const d = drag.current;
-      if (!d || e.touches.length !== 1) return;
+    const onTouchMove = (e: TouchEvent) => {
+      if (!drag.current || e.touches.length !== 1) return;
       const t = e.touches[0];
-      const dy = t.clientY - d.y0;
-      const dx = t.clientX - d.x0;
-      if (!d.claimed) {
-        if (Math.abs(dy) <= CLASSIFY_PX && Math.abs(dx) <= CLASSIFY_PX) return;
-        const atTop = !d.scroller || d.scroller.scrollTop <= 0;
-        if (dy > 0 && Math.abs(dy) > Math.abs(dx) * AXIS_BIAS && atTop) {
-          d.claimed = true;
-          // Measured from here, so the sheet does not jump by the classify slop.
-          d.y0 = t.clientY;
-          d.samples = [{ y: t.clientY, t: e.timeStamp }];
-        } else {
-          drag.current = null;
-          return;
-        }
+      if (advance(t.clientX, t.clientY, e.timeStamp) && drag.current?.claimed && e.cancelable) e.preventDefault();
+    };
+    const onTouchEnd = (e: TouchEvent) => finish(e.changedTouches[0]?.clientY);
+
+    // Touch has its own path above: a touch pointer is cancelled the moment the
+    // browser starts scrolling, so only mouse and pen come through here.
+    const onPointerDown = (e: PointerEvent) => {
+      if (e.pointerType === 'touch' || e.button !== 0) return;
+      if (!begin(e.clientX, e.clientY, e.timeStamp, e.target)) return;
+      window.addEventListener('pointermove', onPointerMove);
+      window.addEventListener('pointerup', onPointerUp);
+      window.addEventListener('pointercancel', onPointerUp);
+    };
+    const onPointerMove = (e: PointerEvent) => {
+      if (!advance(e.clientX, e.clientY, e.timeStamp)) {
+        stopPointer();
+        return;
       }
-      if (e.cancelable) e.preventDefault();
-      sample(d, t.clientY, e.timeStamp);
-      follow(t.clientY - d.y0);
+      // No text selection while the sheet is being pulled.
+      if (drag.current?.claimed) e.preventDefault();
     };
-    const onEnd = (e: TouchEvent) => {
-      const d = drag.current;
-      drag.current = null;
-      if (!d?.claimed) return;
-      const last = d.samples[d.samples.length - 1];
-      release(d, e.changedTouches[0]?.clientY ?? last.y);
+    const onPointerUp = (e: PointerEvent) => {
+      stopPointer();
+      finish(e.type === 'pointercancel' ? undefined : e.clientY);
+    };
+    const stopPointer = () => {
+      window.removeEventListener('pointermove', onPointerMove);
+      window.removeEventListener('pointerup', onPointerUp);
+      window.removeEventListener('pointercancel', onPointerUp);
+    };
+    const onClickCapture = (e: MouseEvent) => {
+      if (!swallowClick) return;
+      swallowClick = false;
+      e.preventDefault();
+      e.stopPropagation();
     };
 
-    panel.addEventListener('touchstart', onStart, { passive: true });
-    panel.addEventListener('touchmove', onMove, { passive: false });
-    panel.addEventListener('touchend', onEnd, { passive: true });
-    panel.addEventListener('touchcancel', onEnd, { passive: true });
+    panel.addEventListener('touchstart', onTouchStart, { passive: true });
+    panel.addEventListener('touchmove', onTouchMove, { passive: false });
+    panel.addEventListener('touchend', onTouchEnd, { passive: true });
+    panel.addEventListener('touchcancel', onTouchEnd, { passive: true });
+    panel.addEventListener('pointerdown', onPointerDown);
+    panel.addEventListener('click', onClickCapture, true);
     return () => {
       cancelAnimationFrame(frame.current);
-      panel.removeEventListener('touchstart', onStart);
-      panel.removeEventListener('touchmove', onMove);
-      panel.removeEventListener('touchend', onEnd);
-      panel.removeEventListener('touchcancel', onEnd);
+      stopPointer();
+      panel.removeEventListener('touchstart', onTouchStart);
+      panel.removeEventListener('touchmove', onTouchMove);
+      panel.removeEventListener('touchend', onTouchEnd);
+      panel.removeEventListener('touchcancel', onTouchEnd);
+      panel.removeEventListener('pointerdown', onPointerDown);
+      panel.removeEventListener('click', onClickCapture, true);
     };
   }, [enabled, panelRef, follow, release]);
 
diff --git a/client/src/mobile/screens/trip/MTripShell.tsx b/client/src/mobile/screens/trip/MTripShell.tsx
index 477d302f4..44aee039e 100644
--- a/client/src/mobile/screens/trip/MTripShell.tsx
+++ b/client/src/mobile/screens/trip/MTripShell.tsx
@@ -8,6 +8,7 @@ import { useTripPlanner } from '../../../pages/tripPlanner/useTripPlanner'
 import { pickDockTabs } from './dockTabs'
 import MBadge from '../../components/MBadge'
 import MIconBtn from '../../components/MIconBtn'
+import { useActivePill } from '../../components/useActivePill'
 import MPlanTimeline from './plan/MPlanTimeline'
 import MMapArea from './map/MMapArea'
 import MPlacesBrowser from './places/MPlacesBrowser'
@@ -289,6 +290,8 @@ export default function MTripShell({
       block: 'nearest',
     })
   }, [planner.selectedDayId, days, dayRail])
+  // The active day's pill glides to the next chip rather than jumping there.
+  const dayPill = useActivePill(dayRail, '[aria-current="true"]', [planner.selectedDayId, days, dayRail, language])
 
   const trTab = planner.activeTab
 
@@ -498,7 +501,14 @@ export default function MTripShell({
       {/* ── Day chips (z-25 — covered by non-plan tab overlays, stays mounted) ── */}
       {days.length > 0 && (
         <div className="absolute inset-x-4 z-[25] flex gap-[6px] top-[calc(var(--m-safe-top,12px)+50px)]">
-          <div ref={setDayRail} className="flex flex-1 items-center gap-[2px] overflow-x-auto rounded-full border border-[color:var(--m-gbr)] bg-[color:var(--m-glass)] p-[3px] backdrop-blur-[24px] backdrop-saturate-[1.7]">
+          <div ref={setDayRail} className="relative flex flex-1 items-center gap-[2px] overflow-x-auto rounded-full border border-[color:var(--m-gbr)] bg-[color:var(--m-glass)] p-[3px] backdrop-blur-[24px] backdrop-saturate-[1.7]">
+            {dayPill && (
+              <span
+                aria-hidden="true"
+                className="pointer-events-none absolute bottom-[3px] left-0 top-[3px] rounded-full bg-m-act shadow-[0_6px_16px_-6px_rgba(0,0,0,.4)]"
+                style={dayPill}
+              />
+            )}
             {days.map((day, idx) => {
               const active = day.id === planner.selectedDayId
               const isToday = day.id === todayDayId
@@ -516,8 +526,8 @@ export default function MTripShell({
                   // the active chip's bg-m-act class.
                   style={active ? undefined : { background: dayTintBackground(tint, 'badge', '--day-tint-chip') }}
                   data-today={isToday || undefined}
-                  className={`flex flex-1 items-center justify-center gap-[3px] whitespace-nowrap rounded-full px-3 py-[5px] text-center text-[0.75rem] font-semibold ${
-                    active ? 'bg-m-act text-m-actfg shadow-[0_6px_16px_-6px_rgba(0,0,0,.4)]' : 'text-m-ink'
+                  className={`relative flex flex-1 items-center justify-center gap-[3px] whitespace-nowrap rounded-full px-3 py-[5px] text-center text-[0.75rem] font-semibold transition-colors duration-200 ${
+                    active ? `text-m-actfg ${dayPill ? '' : 'bg-m-act'}` : 'text-m-ink'
                   } ${isToday && !active ? 'ring-[1.5px] ring-inset ring-[color:var(--m-st-info)]' : ''}`}
                 >
                   {isToday && (
diff --git a/client/tests/unit/mobile/MSheet.test.tsx b/client/tests/unit/mobile/MSheet.test.tsx
index 8d8d20d8e..2ba3c0197 100644
--- a/client/tests/unit/mobile/MSheet.test.tsx
+++ b/client/tests/unit/mobile/MSheet.test.tsx
@@ -385,6 +385,34 @@ describe('MSheet', () => {
       expect(dialog.style.transform).toBe('translateY(0px)');
     });
 
+    it('FE-MOB-SHEET-027: a mouse pull that starts on a button carries the sheet and does not press it', () => {
+      const pressed = vi.fn();
+      const { dialog, onClose } = renderBottom(vi.fn(), <button type="button" onClick={pressed}>Go</button>);
+      const button = screen.getByRole('button', { name: 'Go' });
+
+      fireEvent.pointerDown(button, { pointerType: 'mouse', button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerMove(window, { pointerType: 'mouse', clientX: 100, clientY: 140 });
+      fireEvent.pointerMove(window, { pointerType: 'mouse', clientX: 100, clientY: 300 });
+      expect(dialog.style.transform).toBe('translateY(160px)');
+      fireEvent.pointerUp(window, { pointerType: 'mouse', clientX: 100, clientY: 300 });
+      fireEvent.click(button);
+
+      expect(onClose).toHaveBeenCalledTimes(1);
+      expect(pressed).not.toHaveBeenCalled();
+    });
+
+    it('FE-MOB-SHEET-028: a plain click on a button in the sheet still presses it', () => {
+      const pressed = vi.fn();
+      renderBottom(vi.fn(), <button type="button" onClick={pressed}>Go</button>);
+      const button = screen.getByRole('button', { name: 'Go' });
+
+      fireEvent.pointerDown(button, { pointerType: 'mouse', button: 0, clientX: 100, clientY: 100 });
+      fireEvent.pointerUp(window, { pointerType: 'mouse', clientX: 100, clientY: 101 });
+      fireEvent.click(button);
+
+      expect(pressed).toHaveBeenCalledTimes(1);
+    });
+
     it('FE-MOB-SHEET-026: the docked sheet rises from below, the card pops in place', () => {
       const { dialog } = renderBottom();
       expect(dialog.className).toContain('m-sheet-up');