diff --git a/tests/e2e_ui/sessions/test_sidebar_project_context_menu.py b/tests/e2e_ui/sessions/test_sidebar_project_context_menu.py new file mode 100644 index 0000000000..9436adc263 --- /dev/null +++ b/tests/e2e_ui/sessions/test_sidebar_project_context_menu.py @@ -0,0 +1,280 @@ +"""Browser e2e for the project-folder header's context menu. + +Project folder headers used to expose their actions only through a +hover-revealed kebab: a right-click fell through to the browser's native menu, +and touch — which has no right-click at all — could not reach them. The header +button now also carries a Radix ``ContextMenuTrigger``, which brings BOTH +gestures with it (``contextmenu`` for mouse; a built-in 700ms pointerdown timer +for touch), so the same actions open either way. The kebab is unchanged. + +Both menus render from one shared item body (``ProjectFolderMenuItems`` in +``Sidebar.tsx``) — one under a Radix ``DropdownMenu`` (the kebab), one under a +``ContextMenu`` (these gestures) — mirroring how the session rows do it. + +This guards the wiring the mocked unit tests can't exercise end-to-end: + +- Desktop right-click suppresses the native menu and opens the app's, and + picking an item drives the real dialog. +- A **real touch long-press** opens the same menu. Dispatched via CDP + ``Input.dispatchTouchEvent`` (touchStart → hold → touchEnd) on a + ``has_touch`` context, because that is the only way to produce genuine + ``touchstart``/``pointerdown`` sequences here: ``page.touchscreen.tap()`` is + instantaneous and cannot hold, and a synthetic ``dispatch_event("pointerdown")`` + emits no ``touchstart`` at all — it under-exercises the pipeline and can pass + while real touch fails. +- Neither gesture toggles the folder's expand/collapse (the header button's + onClick), while a plain left-click still does. +""" + +from __future__ import annotations + +import time +import uuid +from collections.abc import Iterator + +import httpx +import pytest +from playwright.sync_api import Browser, Locator, Page, expect + +# Phone-width viewport, below the 768px `md` breakpoint: the sidebar is the +# mobile overlay there, which is where a long-press actually matters. +_MOBILE_VIEWPORT = {"width": 390, "height": 844} + +# Comfortably past Radix's 700ms long-press timer. +_LONG_PRESS_MS = 900 + + +def _set_title(base_url: str, session_id: str, title: str) -> None: + """Give a session a unique title so its row is easy to spot on the shared + server (other tests' sessions live there too).""" + resp = httpx.patch( + f"{base_url}/v1/sessions/{session_id}", + json={"title": title}, + timeout=10.0, + ) + resp.raise_for_status() + + +def _create_project(base_url: str, name: str) -> None: + """Create an empty project via ``POST /v1/projects``. + + Seeded over the API rather than through the sidebar's + button: that button + is hover-revealed on desktop and hidden entirely on the mobile overlay, and + what's under test here is the folder header's context menu — not project + creation (``test_sidebar_projects.py`` already covers that UI path). + """ + resp = httpx.post(f"{base_url}/v1/projects", json={"name": name}, timeout=10.0) + resp.raise_for_status() + + +def _folder_header(page: Page, project: str) -> Locator: + """The project folder's collapse-toggle header button. + + A DOM locator rather than ``get_by_role``: an open Radix menu is modal and + ``aria-hidden``s the rest of the tree, so role queries can't see the header + while its own context menu is up — which is exactly when these tests need to + read ``aria-expanded``. Project names here are unique hex, so the text filter + is unambiguous. + """ + return page.locator("h2 button").filter(has_text=project) + + +def _expanded(page: Page, project: str) -> str: + """Read the folder's current expand state as the raw ``aria-expanded`` value. + + Read rather than asserted against a constant: a freshly created project may + render already-expanded, and what the context-menu tests care about is that + the gesture leaves the state UNCHANGED, whatever it started as. + """ + value = _folder_header(page, project).get_attribute("aria-expanded") + assert value is not None, "folder header is missing aria-expanded" + return value + + +def _long_press( + page: Page, + target: Locator, + menu_testid: str = "rename-project", + hold_ms: int = _LONG_PRESS_MS, +) -> bool: + """Long-press *target* with real touch events and report whether the menu opened. + + Uses CDP ``Input.dispatchTouchEvent`` so the page sees a genuine + ``touchstart`` → ``pointerdown`` sequence (Playwright's ``touchscreen.tap`` + is instantaneous and cannot hold a press, and a synthetic + ``dispatch_event("pointerdown")`` emits no ``touchstart`` at all). + + Polls for the menu *during* the hold rather than only after release: the + menu opens mid-gesture off Radix's 700ms timer, and a post-release-only + check can miss it entirely. + + :param page: The page whose CDP session dispatches the touch. + :param target: Element to press; its bounding box centre is the touch point. + :param menu_testid: An item test-id that only the expected menu renders. + :param hold_ms: How long to hold before releasing, in milliseconds. + :returns: Whether the menu was observed open during (or at the end of) the press. + """ + box = target.bounding_box() + assert box is not None, "long-press target has no bounding box" + x = box["x"] + box["width"] / 2 + y = box["y"] + box["height"] / 2 + + cdp = page.context.new_cdp_session(page) + opened = False + try: + cdp.send( + "Input.dispatchTouchEvent", + {"type": "touchStart", "touchPoints": [{"x": x, "y": y}]}, + ) + # Peak-poll through the hold; stop as soon as the menu is up. + deadline = time.monotonic() + hold_ms / 1000 + while time.monotonic() < deadline: + if page.get_by_test_id(menu_testid).count() > 0: + opened = True + break + page.wait_for_timeout(50) + cdp.send("Input.dispatchTouchEvent", {"type": "touchEnd", "touchPoints": []}) + # A menu that opens right at the release still counts. + if not opened: + opened = page.get_by_test_id(menu_testid).count() > 0 + finally: + cdp.detach() + return opened + + +@pytest.fixture +def project_page(page: Page, seeded_session: tuple[str, str]) -> Iterator[tuple[Page, str]]: + """A desktop page with a fresh, empty project folder in the sidebar. + + :param page: Playwright page fixture (fresh context per test). + :param seeded_session: ``(base_url, session_id)`` for a pre-created session. + :returns: ``(page, project_name)``. + """ + base_url, session_id = seeded_session + _set_title(base_url, session_id, f"e2e-projctx-{uuid.uuid4().hex[:8]}") + project = f"Project {uuid.uuid4().hex[:6]}" + + _create_project(base_url, project) + page.goto(f"{base_url}/c/{session_id}") + expect(_folder_header(page, project)).to_be_visible() + + yield (page, project) + + +def test_right_click_opens_project_folder_menu(project_page: tuple[Page, str]) -> None: + """Right-clicking a folder header opens the kebab's actions, and they work. + + :param project_page: ``(page, project_name)`` with the folder in the sidebar. + """ + page, project = project_page + header = _folder_header(page, project) + + # Whatever state the folder is in, the right-click must not change it. + before = _expanded(page, project) + + # Radix's ContextMenuTrigger preventDefaults the native contextmenu and + # opens the app menu at the cursor. + header.click(button="right") + + # The full kebab action set, same testids — it renders from the shared + # ProjectFolderMenuItems body. (The kebab DropdownMenu is closed, so these + # are the context menu's own items.) + expect(page.get_by_test_id("rename-project")).to_be_visible() + expect(page.get_by_test_id("project-settings")).to_be_visible() + expect(page.get_by_test_id("delete-project")).to_be_visible() + + # Opening the menu did NOT collapse/expand the folder. + expect(header).to_have_attribute("aria-expanded", before) + + # The item drives the real dialog, same as the kebab's Rename. + page.get_by_test_id("rename-project").click() + expect(page.get_by_test_id("rename-project-confirm")).to_be_visible() + + +def test_left_click_still_toggles_the_folder(project_page: tuple[Page, str]) -> None: + """A plain left-click on the header still expands and collapses the folder. + + :param project_page: ``(page, project_name)`` with the folder in the sidebar. + """ + page, project = project_page + header = _folder_header(page, project) + + # Toggle relative to the starting state (a fresh project may already be + # expanded), so this asserts the flip rather than an absolute value. + before = _expanded(page, project) + flipped = "false" if before == "true" else "true" + + header.click() + expect(header).to_have_attribute("aria-expanded", flipped) + header.click() + expect(header).to_have_attribute("aria-expanded", before) + + +def test_touch_long_press_opens_project_folder_menu( + browser: Browser, + seeded_session: tuple[str, str], +) -> None: + """A real touch long-press on the folder header opens the same menu. + + Runs on its own ``has_touch``/``is_mobile`` phone-width context: mobile is + the case that had no way to reach these actions at all before, since touch + cannot right-click. + + Includes a **positive control** — the same press on a session row, whose + long-press menu already worked before this change — so a negative result on + the folder header means the folder is broken rather than that the CDP touch + plumbing failed to reach the page. + + :param browser: Playwright browser fixture (a fresh context is made here). + :param seeded_session: ``(base_url, session_id)`` for a pre-created session. + """ + base_url, session_id = seeded_session + _set_title(base_url, session_id, f"e2e-projctx-touch-{uuid.uuid4().hex[:8]}") + project = f"Project {uuid.uuid4().hex[:6]}" + + _create_project(base_url, project) + + context = browser.new_context( + has_touch=True, + is_mobile=True, + viewport=_MOBILE_VIEWPORT, + ) + try: + page = context.new_page() + # The mobile sidebar starts closed; ?sidebar=open is the one-shot param + # the notification-tap destination uses. + page.goto(f"{base_url}/c/{session_id}?sidebar=open") + + header = _folder_header(page, project) + expect(header).to_be_visible() + before = _expanded(page, project) + + # Detector validation: prove the CDP touch pipeline actually reaches the + # page BEFORE trusting a negative on the folder. A session row's + # long-press menu is the known-good reference; if this press produces + # nothing, the plumbing is at fault and the folder result is meaningless. + row = page.locator(f'a[href="/c/{session_id}"]') + expect(row).to_be_visible() + assert _long_press(page, row, menu_testid="rename-conversation"), ( + "CDP touch long-press did not reach the page (control failed) — " + "the folder assertion below would be meaningless" + ) + # Dismiss the control's menu so it can't be mistaken for the folder's. + page.keyboard.press("Escape") + expect(page.get_by_test_id("rename-conversation")).to_have_count(0) + + # The actual assertion: long-press the folder header. + assert _long_press(page, header), ( + "long-press on the project folder header did not open the context menu" + ) + + expect(page.get_by_test_id("rename-project")).to_be_visible() + expect(page.get_by_test_id("project-settings")).to_be_visible() + expect(page.get_by_test_id("delete-project")).to_be_visible() + + # The long-press must not have toggled the folder: Radix opens the menu + # mid-gesture, and the press's trailing click would otherwise collapse + # or expand it under the just-opened menu. + expect(_folder_header(page, project)).to_have_attribute("aria-expanded", before) + finally: + context.close() diff --git a/tests/e2e_ui/sessions/test_sidebar_session_gestures.py b/tests/e2e_ui/sessions/test_sidebar_session_gestures.py new file mode 100644 index 0000000000..21a09c8212 --- /dev/null +++ b/tests/e2e_ui/sessions/test_sidebar_session_gestures.py @@ -0,0 +1,227 @@ +"""Browser e2e coverage for touch gestures on draggable session rows. + +The sidebar uses dnd-kit for touch dragging and Radix for its context menu. +These tests drive Chromium through CDP so the page receives a genuine touch +sequence; synthetic pointer events do not arm dnd-kit's ``TouchSensor``. +""" + +from __future__ import annotations + +import re +import uuid + +import httpx +from playwright.sync_api import Browser, Locator, Page, expect + + +_MOBILE_VIEWPORT = {"width": 390, "height": 844} + + +def _set_title(base_url: str, session_id: str, title: str) -> None: + """Give the test session a unique, visible sidebar label.""" + response = httpx.patch( + f"{base_url}/v1/sessions/{session_id}", + json={"title": title}, + timeout=10.0, + ) + response.raise_for_status() + + +def _create_project(base_url: str, name: str) -> None: + """Create an empty project for a drag target.""" + response = httpx.post(f"{base_url}/v1/projects", json={"name": name}, timeout=10.0) + response.raise_for_status() + + +def _row_link(page: Page, session_id: str) -> Locator: + """Locate the sidebar link for ``session_id``.""" + return page.locator(f'a[href="/c/{session_id}"]') + + +def _section(page: Page, title: str) -> Locator: + """Locate the sidebar section headed by ``title``.""" + return page.locator("section").filter( + has=page.get_by_role("button", name=title, exact=True) + ) + + +def test_still_touch_opens_session_context_menu_without_dragging( + browser: Browser, + seeded_session: tuple[str, str], +) -> None: + """A still touch opens the context menu; only a moving finger drags.""" + base_url, session_id = seeded_session + title = f"e2e-touch-hold-{uuid.uuid4().hex[:8]}" + _set_title(base_url, session_id, title) + + context = browser.new_context( + has_touch=True, + is_mobile=True, + viewport=_MOBILE_VIEWPORT, + ) + try: + page = context.new_page() + page.goto(f"{base_url}/c/{session_id}?sidebar=open") + + link = _row_link(page, session_id) + expect(link).to_be_visible() + row = link.locator("xpath=ancestor::li[1]") + box = link.bounding_box() + assert box is not None, "session row has no touchable bounding box" + x = box["x"] + box["width"] / 2 + y = box["y"] + box["height"] / 2 + + cdp = page.context.new_cdp_session(page) + try: + cdp.send( + "Input.dispatchTouchEvent", + {"type": "touchStart", "touchPoints": [{"x": x, "y": y}]}, + ) + + # The hold arms and lifts the row; the menu itself waits for release, + # so a finger that never moves is never picked up as a drag. + expect(row).to_have_class(re.compile(r"\bscale-\[1\.01\]"), timeout=2000) + expect(row).not_to_have_class(re.compile(r"\bopacity-40\b")) + + cdp.send("Input.dispatchTouchEvent", {"type": "touchEnd", "touchPoints": []}) + expect(page.get_by_test_id("rename-conversation")).to_have_count(1, timeout=2000) + expect(row).not_to_have_class(re.compile(r"\bopacity-40\b")) + finally: + cdp.send("Input.dispatchTouchEvent", {"type": "touchEnd", "touchPoints": []}) + cdp.detach() + finally: + context.close() + + +def test_vertical_touch_scroll_still_works_on_session_row( + browser: Browser, + seeded_session: tuple[str, str], +) -> None: + """Moving before the hold delay scrolls the sidebar instead of dragging.""" + base_url, session_id = seeded_session + _set_title(base_url, session_id, f"e2e-touch-scroll-{uuid.uuid4().hex[:8]}") + + context = browser.new_context( + has_touch=True, + is_mobile=True, + viewport=_MOBILE_VIEWPORT, + ) + try: + page = context.new_page() + page.goto(f"{base_url}/c/{session_id}?sidebar=open") + + link = _row_link(page, session_id) + expect(link).to_be_visible() + row = link.locator("xpath=ancestor::li[1]") + scroll_area = page.locator("aside nav") + conversation_list = page.get_by_test_id("sidebar-conversation-list") + + # One seeded row does not naturally overflow. Extend the real list's + # layout so Chromium has native scroll range without adding fake rows. + conversation_list.evaluate("element => { element.style.minHeight = '1800px'; }") + scroll_area.evaluate("element => { element.scrollTop = 0; }") + assert scroll_area.evaluate("element => element.scrollHeight > element.clientHeight") + + box = link.bounding_box() + assert box is not None, "session row has no touchable bounding box" + x = box["x"] + box["width"] / 2 + y = box["y"] + box["height"] / 2 + + cdp = page.context.new_cdp_session(page) + try: + cdp.send( + "Input.dispatchTouchEvent", + {"type": "touchStart", "touchPoints": [{"x": x, "y": y}]}, + ) + for offset in (20, 45, 70, 95, 120): + cdp.send( + "Input.dispatchTouchEvent", + {"type": "touchMove", "touchPoints": [{"x": x, "y": y - offset}]}, + ) + page.wait_for_timeout(20) + cdp.send("Input.dispatchTouchEvent", {"type": "touchEnd", "touchPoints": []}) + finally: + cdp.detach() + + page.wait_for_function( + "element => element.scrollTop > 20", + arg=scroll_area.element_handle(), + ) + assert "opacity-40" not in (row.get_attribute("class") or "") + expect(page.get_by_test_id("rename-conversation")).to_have_count(0) + finally: + context.close() + + +def test_touch_drag_moves_session_into_project( + browser: Browser, + seeded_session: tuple[str, str], +) -> None: + """A touch drag still drops the session into a project folder.""" + base_url, session_id = seeded_session + _set_title(base_url, session_id, f"e2e-touch-drop-{uuid.uuid4().hex[:8]}") + project = f"Project {uuid.uuid4().hex[:6]}" + _create_project(base_url, project) + + context = browser.new_context( + has_touch=True, + is_mobile=True, + viewport=_MOBILE_VIEWPORT, + ) + try: + page = context.new_page() + page.goto(f"{base_url}/c/{session_id}?sidebar=open") + + link = _row_link(page, session_id) + header = page.get_by_role("button", name=project, exact=True) + expect(link).to_be_visible() + expect(header).to_be_visible() + row = link.locator("xpath=ancestor::li[1]") + + source = link.bounding_box() + target = header.bounding_box() + assert source is not None, "session row has no touchable bounding box" + assert target is not None, "project header has no droppable bounding box" + start_x = source["x"] + source["width"] / 2 + start_y = source["y"] + source["height"] / 2 + end_x = target["x"] + target["width"] / 2 + end_y = target["y"] + target["height"] / 2 + + cdp = page.context.new_cdp_session(page) + try: + cdp.send( + "Input.dispatchTouchEvent", + { + "type": "touchStart", + "touchPoints": [{"x": start_x, "y": start_y}], + }, + ) + # Hold until the row lifts, then the first move picks it up as a drag. + expect(row).to_have_class(re.compile(r"\bscale-\[1\.01\]"), timeout=2000) + + for step in range(1, 6): + progress = step / 5 + cdp.send( + "Input.dispatchTouchEvent", + { + "type": "touchMove", + "touchPoints": [ + { + "x": start_x + (end_x - start_x) * progress, + "y": start_y + (end_y - start_y) * progress, + } + ], + }, + ) + page.wait_for_timeout(20) + if step == 1: + # Moving out of the armed hold is what hands the row to dnd-kit. + expect(row).to_have_class(re.compile(r"\bopacity-40\b"), timeout=1000) + cdp.send("Input.dispatchTouchEvent", {"type": "touchEnd", "touchPoints": []}) + finally: + cdp.detach() + + expect(_section(page, project).locator(f'a[href="/c/{session_id}"]')).to_be_visible() + expect(_section(page, "Sessions").locator(f'a[href="/c/{session_id}"]')).to_have_count(0) + finally: + context.close() diff --git a/web/android/app/src/main/AndroidManifest.xml b/web/android/app/src/main/AndroidManifest.xml index d9abeadbe3..9dc3af7c15 100644 --- a/web/android/app/src/main/AndroidManifest.xml +++ b/web/android/app/src/main/AndroidManifest.xml @@ -6,6 +6,8 @@ + + diff --git a/web/src/components/ui/context-menu.tsx b/web/src/components/ui/context-menu.tsx index 964ee261cb..e575ac2e5c 100644 --- a/web/src/components/ui/context-menu.tsx +++ b/web/src/components/ui/context-menu.tsx @@ -36,7 +36,10 @@ function ContextMenuContent({ void): () => void { - if (typeof window === "undefined" || !window.matchMedia) return () => {}; - const mql = window.matchMedia(MOBILE_QUERY); - mql.addEventListener("change", callback); - return () => mql.removeEventListener("change", callback); -} - -function getSnapshot(): boolean { - if (typeof window === "undefined" || !window.matchMedia) return false; - return window.matchMedia(MOBILE_QUERY).matches; -} - /** * True when the viewport is narrower than Tailwind's `md` breakpoint (768px) * — i.e. the "mobile" layout the shell's `max-md:` classes target. Reactive: @@ -31,5 +19,5 @@ function getSnapshot(): boolean { * (returns `false` on the server, matching `initialSidebarOpen`). */ export function useIsMobileViewport(): boolean { - return useSyncExternalStore(subscribe, getSnapshot, () => false); + return useMediaQuery(MOBILE_QUERY); } diff --git a/web/src/hooks/useMediaQuery.ts b/web/src/hooks/useMediaQuery.ts new file mode 100644 index 0000000000..1a6aa6ee5f --- /dev/null +++ b/web/src/hooks/useMediaQuery.ts @@ -0,0 +1,57 @@ +// Shared reactive media-query subscription. Each distinct query string gets +// ONE module-level MediaQueryList and one native "change" listener fanning out +// to a shared listener set — so many subscribers (e.g. every sidebar row) cost +// a single matchMedia registration instead of one each. + +import { useSyncExternalStore } from "react"; + +interface MediaQueryStore { + subscribe: (onChange: () => void) => () => void; + getSnapshot: () => boolean; +} + +const stores = new Map(); + +function createStore(query: string): MediaQueryStore { + const listeners = new Set<() => void>(); + // The native registration is created lazily (SSR-safe import) and kept for + // the app's lifetime; queries are static, so this never accumulates. + let registered = false; + return { + subscribe(onChange) { + if (!registered && typeof window !== "undefined" && window.matchMedia) { + registered = true; + window.matchMedia(query).addEventListener("change", () => { + for (const listener of listeners) listener(); + }); + } + listeners.add(onChange); + return () => listeners.delete(onChange); + }, + getSnapshot() { + // Read fresh rather than off a cached MediaQueryList: `matches` is a + // cheap live getter, and tests stub window.matchMedia per case. + if (typeof window === "undefined" || !window.matchMedia) return false; + return window.matchMedia(query).matches; + }, + }; +} + +function storeFor(query: string): MediaQueryStore { + let store = stores.get(query); + if (store === undefined) { + store = createStore(query); + stores.set(query, store); + } + return store; +} + +/** + * True while `query` matches. Reactive (re-renders on change) and SSR-safe + * (returns `false` on the server). Subscriptions for the same query share one + * MediaQueryList and one native listener. + */ +export function useMediaQuery(query: string): boolean { + const store = storeFor(query); + return useSyncExternalStore(store.subscribe, store.getSnapshot, () => false); +} diff --git a/web/src/hooks/useRowGesture.ts b/web/src/hooks/useRowGesture.ts new file mode 100644 index 0000000000..bb1e533cef --- /dev/null +++ b/web/src/hooks/useRowGesture.ts @@ -0,0 +1,468 @@ +import { + type PointerEvent as ReactPointerEvent, + type SyntheticEvent, + type TouchEvent as ReactTouchEvent, + useCallback, + useEffect, + useMemo, + useRef, + useState, +} from "react"; +import { + type DraggableSyntheticListeners, + TouchSensor, + type TouchSensorOptions, +} from "@dnd-kit/core"; +import type { SwipeAction, SwipeActionPreferences } from "@/lib/swipeActionPreferences"; + +export const ROW_GESTURE_HOLD_MS = 400; +export const ROW_SWIPE_ACTIVATE_PX = 12; +export const ROW_SWIPE_COMMIT_PX = 72; +// Native touch slop is typically 8-10dp; 10px filters hold tremble while +// keeping a deliberate pull immediate. +export const ROW_DRAG_ACTIVATE_PX = 10; +// Marks the recognizer's own contextmenu dispatch so the mid-gesture guards +// can suppress the OS long-press contextmenu without eating their own. +export const ROW_MENU_SYNTHETIC = Symbol("row-menu-synthetic"); + +const ROW_SCROLL_ACTIVATE_PX = 25; +const ROW_HOLD_TOLERANCE_PX = 20; +const ROW_SWIPE_MAX_PX = 96; +const ROW_SWIPE_RESIST = 1 / 3; + +export type RowGesturePhase = "idle" | "pending" | "swipe" | "scroll" | "armed" | "drag"; + +interface ActiveRowGesture { + pointerId: number; + startX: number; + startY: number; + lastX: number; + lastY: number; + armX: number; + armY: number; + phase: Exclude; + target: Element; + sensorTarget: Element; + offset: number; +} + +interface RowGestureDndState { + shouldStartDrag: () => boolean; +} + +export interface RowGestureDndData { + rowGesture: RowGestureDndState; +} + +interface RowGestureActivationContext { + active: { data: { current?: unknown } }; +} + +type RowGestureReset = (cancelDrag: boolean) => void; + +const rowGestureResets = new Set(); + +function handleGlobalTouchStart(event: TouchEvent) { + if (event.touches.length <= 1) return; + for (const reset of rowGestureResets) reset(true); +} + +function registerRowGestureReset(reset: RowGestureReset) { + if (rowGestureResets.size === 0) document.addEventListener("touchstart", handleGlobalTouchStart); + rowGestureResets.add(reset); + return () => { + rowGestureResets.delete(reset); + if (rowGestureResets.size === 0) { + document.removeEventListener("touchstart", handleGlobalTouchStart); + } + }; +} + +/** Clears the recognizer after dnd-kit has ended or cancelled its drag. */ +export function finishActiveRowGesture() { + for (const reset of rowGestureResets) reset(false); +} + +const rowGestureActivators = [ + { + eventName: "onTouchMove", + handler: ( + { nativeEvent: event }: ReactTouchEvent, + { onActivation }: TouchSensorOptions, + { active }: RowGestureActivationContext, + ) => { + if (event.touches.length !== 1) return false; + const data = active.data.current as Partial | undefined; + if (!data?.rowGesture?.shouldStartDrag()) return false; + onActivation?.({ event }); + return true; + }, + }, +]; + +/** A touch sensor that is instantiated only after the row recognizer chooses drag. */ +export class RowGestureTouchSensor extends TouchSensor { + static override activators = rowGestureActivators as unknown as typeof TouchSensor.activators; +} + +function swipeOffset(deltaX: number): number { + const direction = Math.sign(deltaX); + const travel = Math.abs(deltaX); + if (travel <= ROW_SWIPE_COMMIT_PX) return deltaX; + const damped = ROW_SWIPE_COMMIT_PX + (travel - ROW_SWIPE_COMMIT_PX) * ROW_SWIPE_RESIST; + return direction * Math.min(damped, ROW_SWIPE_MAX_PX); +} + +function callDndListener( + listeners: DraggableSyntheticListeners, + name: string, + event: SyntheticEvent, +) { + const listener = listeners?.[name] as ((event: SyntheticEvent) => void) | undefined; + listener?.(event); +} + +export function useRowGesture({ + enabled, + swipeEnabled, + dragEnabled, + actions, + onAction, + onLongPress, + onDragStart, + onPickUp, +}: { + enabled: boolean; + swipeEnabled: boolean; + dragEnabled: boolean; + actions: SwipeActionPreferences; + onAction: (action: Exclude) => void; + onLongPress: (point: { clientX: number; clientY: number }) => void; + onDragStart?: () => void; + onPickUp?: () => void; +}) { + const [dx, setDx] = useState(0); + const [phase, setPhase] = useState("idle"); + const state = useRef(null); + const holdTimer = useRef(null); + const suppressClick = useRef(false); + const touchMoveGuard = useRef<(() => void) | null>(null); + + const clearHoldTimer = useCallback(() => { + if (holdTimer.current === null) return; + window.clearTimeout(holdTimer.current); + holdTimer.current = null; + }, []); + + // Chrome samples touch-action at touchstart, so the armed-state class swap + // to touch-none can't stop an in-flight touch from being claimed as a native + // pan. A held finger hasn't started a scroll yet, so its touchmoves are + // still cancelable — preventDefault here forestalls the pan until the + // gesture resolves to drag or resets. React's delegated listeners are + // passive, so this has to be a real native listener. + const armTouchMoveGuard = useCallback(() => { + if (touchMoveGuard.current) return; + const handler = (event: TouchEvent) => { + if (event.cancelable) event.preventDefault(); + }; + // The OS long-press contextmenu hit-tests the element under the finger — + // once the row menu opens there, that is the menu itself, past every + // row-level guard. Unprevented it starts text selection and cancels the + // pointer stream, so suppress it document-wide while the gesture owns the + // touch. The recognizer's own tagged dispatch passes through. + const contextMenuHandler = (event: Event) => { + if (ROW_MENU_SYNTHETIC in event) return; + event.preventDefault(); + }; + const selectStartHandler = (event: Event) => event.preventDefault(); + touchMoveGuard.current = () => { + document.removeEventListener("touchmove", handler, { + passive: false, + } as EventListenerOptions); + document.removeEventListener("contextmenu", contextMenuHandler, true); + document.removeEventListener("selectstart", selectStartHandler, true); + }; + document.addEventListener("touchmove", handler, { passive: false }); + document.addEventListener("contextmenu", contextMenuHandler, true); + document.addEventListener("selectstart", selectStartHandler, true); + }, []); + + const disarmTouchMoveGuard = useCallback(() => { + const teardown = touchMoveGuard.current; + if (!teardown) return; + touchMoveGuard.current = null; + teardown(); + }, []); + + const releaseCapture = useCallback((gesture: ActiveRowGesture | null) => { + if (!gesture) return; + try { + if (gesture.target.hasPointerCapture(gesture.pointerId)) { + gesture.target.releasePointerCapture(gesture.pointerId); + } + } catch { + // The browser may have released capture during pointer cancellation. + } + }, []); + + const reset = useCallback( + (cancelDrag = false) => { + const gesture = state.current; + if (!gesture) return; + clearHoldTimer(); + releaseCapture(gesture); + disarmTouchMoveGuard(); + state.current = null; + setDx(0); + setPhase("idle"); + if (cancelDrag && gesture.phase === "drag") { + gesture.sensorTarget.dispatchEvent( + new Event("touchcancel", { bubbles: true, cancelable: true }), + ); + } + }, + [clearHoldTimer, disarmTouchMoveGuard, releaseCapture], + ); + + // Armed until the trailing click arrives or the next press clears it. A timer + // would race the click: the browser does not guarantee dispatch inside the + // same task, and losing that race navigates into the row just swiped away. + const suppressTrailingClick = useCallback(() => { + suppressClick.current = true; + }, []); + + const consumeClick = useCallback(() => { + if (!suppressClick.current) return false; + suppressClick.current = false; + return true; + }, []); + + const setGesturePhase = useCallback( + (gesture: ActiveRowGesture, next: ActiveRowGesture["phase"]) => { + gesture.phase = next; + setPhase(next); + }, + [], + ); + + const capturePointer = useCallback((gesture: ActiveRowGesture) => { + try { + gesture.target.setPointerCapture(gesture.pointerId); + } catch { + // Capture can fail if the pointer ended in the timer callback's turn. + } + }, []); + + const onPointerDown = useCallback( + (event: ReactPointerEvent) => { + suppressClick.current = false; + if (event.pointerType !== "touch") return; + if (!event.isPrimary) { + reset(true); + return; + } + if (!enabled) return; + const target = event.target; + if (target instanceof Node && !event.currentTarget.contains(target)) return; + + reset(); + const gesture: ActiveRowGesture = { + pointerId: event.pointerId, + startX: event.clientX, + startY: event.clientY, + lastX: event.clientX, + lastY: event.clientY, + armX: event.clientX, + armY: event.clientY, + phase: "pending", + target: event.currentTarget, + sensorTarget: target instanceof Element ? target : event.currentTarget, + offset: 0, + }; + state.current = gesture; + setPhase("pending"); + holdTimer.current = window.setTimeout(() => { + if (state.current !== gesture || gesture.phase !== "pending") return; + // A finger still creeping hasn't held still, it's scrolling slowly — and + // arming would capture the pointer and take the scroll away. + const drift = Math.hypot(gesture.lastX - gesture.startX, gesture.lastY - gesture.startY); + if (drift > ROW_HOLD_TOLERANCE_PX) { + holdTimer.current = null; + setGesturePhase(gesture, "scroll"); + return; + } + holdTimer.current = null; + gesture.armX = gesture.lastX; + gesture.armY = gesture.lastY; + setGesturePhase(gesture, "armed"); + capturePointer(gesture); + armTouchMoveGuard(); + if (typeof navigator.vibrate === "function") navigator.vibrate(10); + onPickUp?.(); + onLongPress({ clientX: gesture.lastX, clientY: gesture.lastY }); + }, ROW_GESTURE_HOLD_MS); + }, + [armTouchMoveGuard, capturePointer, enabled, onLongPress, onPickUp, reset, setGesturePhase], + ); + + const onPointerMove = useCallback( + (event: ReactPointerEvent) => { + const gesture = state.current; + if (!gesture || gesture.pointerId !== event.pointerId) return; + const deltaX = event.clientX - gesture.startX; + const deltaY = event.clientY - gesture.startY; + const moved = event.clientX !== gesture.lastX || event.clientY !== gesture.lastY; + gesture.lastX = event.clientX; + gesture.lastY = event.clientY; + + if (gesture.phase === "armed") { + if ( + !moved || + Math.hypot(event.clientX - gesture.armX, event.clientY - gesture.armY) < + ROW_DRAG_ACTIVATE_PX + ) { + return; + } + if (dragEnabled) { + onDragStart?.(); + setGesturePhase(gesture, "drag"); + } else { + setGesturePhase(gesture, "scroll"); + releaseCapture(gesture); + } + return; + } + if (gesture.phase === "drag" || gesture.phase === "scroll") return; + if (gesture.phase === "swipe") { + // Reversing past the origin crosses into the other direction, which may + // be configured inert. Rest the row there and stop claiming the gesture, + // rather than translating with nothing revealed behind it. + const reversedInto = deltaX < 0 ? actions.left : actions.right; + if (reversedInto === "none") { + gesture.offset = 0; + setDx(0); + return; + } + event.preventDefault(); + gesture.offset = swipeOffset(deltaX); + setDx(gesture.offset); + return; + } + + const horizontal = Math.abs(deltaX); + const vertical = Math.abs(deltaY); + // Horizontal-dominant travel locks swipe at 12px. The regions overlap + // (e.g. 18,17.5 satisfies both) — this check running first is what gives + // swipe precedence; everything it declines waits for the 25px circle. + if (horizontal >= ROW_SWIPE_ACTIVATE_PX && horizontal > vertical) { + const action = deltaX < 0 ? actions.left : actions.right; + if (!swipeEnabled || action === "none") { + clearHoldTimer(); + setGesturePhase(gesture, "scroll"); + return; + } + clearHoldTimer(); + setGesturePhase(gesture, "swipe"); + capturePointer(gesture); + event.preventDefault(); + gesture.offset = swipeOffset(deltaX); + setDx(gesture.offset); + return; + } + if (Math.hypot(deltaX, deltaY) >= ROW_SCROLL_ACTIVATE_PX) { + clearHoldTimer(); + setGesturePhase(gesture, "scroll"); + } + }, + [ + actions.left, + actions.right, + capturePointer, + clearHoldTimer, + dragEnabled, + onDragStart, + releaseCapture, + setGesturePhase, + swipeEnabled, + ], + ); + + const onPointerUp = useCallback( + (event: ReactPointerEvent) => { + const gesture = state.current; + if (!gesture || gesture.pointerId !== event.pointerId) return; + const resolvedPhase = gesture.phase; + const offset = gesture.offset; + const action = offset < 0 ? actions.left : actions.right; + reset(); + + if (resolvedPhase !== "pending") suppressTrailingClick(); + if ( + resolvedPhase === "swipe" && + Math.abs(offset) >= ROW_SWIPE_COMMIT_PX && + action !== "none" + ) { + onAction(action); + } + }, + [actions.left, actions.right, onAction, reset, suppressTrailingClick], + ); + + const onPointerCancel = useCallback( + (event: ReactPointerEvent) => { + if (state.current?.pointerId !== event.pointerId) return; + reset(true); + }, + [reset], + ); + + const onTouchStart = useCallback( + (event: ReactTouchEvent) => { + if (event.touches.length > 1) reset(true); + }, + [reset], + ); + + const dndData = useMemo( + () => ({ shouldStartDrag: () => state.current?.phase === "drag" }), + [], + ); + + const bindListeners = useCallback( + (dragListeners: DraggableSyntheticListeners) => ({ + ...dragListeners, + onPointerDown, + onPointerMove, + onPointerUp, + onPointerCancel, + onTouchStart: (event: ReactTouchEvent) => { + onTouchStart(event); + callDndListener(dragListeners, "onTouchStart", event); + }, + }), + [onPointerCancel, onPointerDown, onPointerMove, onPointerUp, onTouchStart], + ); + + useEffect(() => { + if (!enabled) reset(true); + }, [enabled, reset]); + + useEffect(() => registerRowGestureReset(reset), [reset]); + + useEffect( + () => () => { + clearHoldTimer(); + releaseCapture(state.current); + disarmTouchMoveGuard(); + }, + [clearHoldTimer, disarmTouchMoveGuard, releaseCapture], + ); + + return { + dx, + phase, + listeners: bindListeners, + dndData, + consumeClick, + }; +} diff --git a/web/src/lib/swipeActionPreferences.test.ts b/web/src/lib/swipeActionPreferences.test.ts new file mode 100644 index 0000000000..475d42c1f1 --- /dev/null +++ b/web/src/lib/swipeActionPreferences.test.ts @@ -0,0 +1,172 @@ +import { act, cleanup, renderHook } from "@testing-library/react"; +import { afterEach, describe, expect, it } from "vitest"; +import { + DEFAULT_SWIPE_ACTIONS, + isSwipeAction, + normalizeSwipeActions, + readSwipeActions, + useSwipeActions, + writeSwipeActions, +} from "./swipeActionPreferences"; + +const STORAGE_KEY = "omnigent:swipe-actions"; + +afterEach(() => { + cleanup(); + localStorage.clear(); +}); + +describe("swipeActionPreferences — read/write", () => { + it("returns the defaults when nothing is stored", () => { + expect(readSwipeActions()).toEqual(DEFAULT_SWIPE_ACTIONS); + expect(localStorage.getItem(STORAGE_KEY)).toBeNull(); + }); + + it("round-trips a written preference", () => { + writeSwipeActions({ left: "delete", right: "archive" }); + expect(readSwipeActions()).toEqual({ left: "delete", right: "archive" }); + expect(JSON.parse(localStorage.getItem(STORAGE_KEY)!)).toEqual({ + left: "delete", + right: "archive", + }); + }); + + it("allows both directions to map to the same action", () => { + writeSwipeActions({ left: "archive", right: "archive" }); + expect(readSwipeActions()).toEqual({ left: "archive", right: "archive" }); + }); + + it("persists a 'none' direction", () => { + writeSwipeActions({ left: "none", right: "delete" }); + expect(readSwipeActions()).toEqual({ left: "none", right: "delete" }); + }); +}); + +describe("isSwipeAction", () => { + it("accepts the known actions and rejects everything else", () => { + expect(isSwipeAction("archive")).toBe(true); + expect(isSwipeAction("delete")).toBe(true); + expect(isSwipeAction("none")).toBe(true); + expect(isSwipeAction("bogus")).toBe(false); + expect(isSwipeAction(null)).toBe(false); + expect(isSwipeAction(undefined)).toBe(false); + expect(isSwipeAction(42)).toBe(false); + }); +}); + +describe("normalizeSwipeActions", () => { + it("passes through a valid object", () => { + expect(normalizeSwipeActions({ left: "delete", right: "none" })).toEqual({ + left: "delete", + right: "none", + }); + }); + + it("fills absent directions from the defaults", () => { + expect(normalizeSwipeActions({ left: "delete" })).toEqual({ + left: "delete", + right: DEFAULT_SWIPE_ACTIONS.right, + }); + }); + + it("makes a present but unrecognized action inert", () => { + expect(normalizeSwipeActions({ left: "trash", right: "archive" })).toEqual({ + left: "none", + right: "archive", + }); + }); + + it("maps null, arrays, and primitives to the defaults", () => { + expect(normalizeSwipeActions(null)).toEqual(DEFAULT_SWIPE_ACTIONS); + expect(normalizeSwipeActions("nope")).toEqual(DEFAULT_SWIPE_ACTIONS); + expect(normalizeSwipeActions(123)).toEqual(DEFAULT_SWIPE_ACTIONS); + expect(normalizeSwipeActions([])).toEqual(DEFAULT_SWIPE_ACTIONS); + }); +}); + +describe("readSwipeActions — corrupt storage", () => { + it("returns the safe defaults when localStorage access throws", () => { + const descriptor = Object.getOwnPropertyDescriptor(window, "localStorage")!; + Object.defineProperty(window, "localStorage", { + configurable: true, + get: () => { + throw new DOMException("Storage is unavailable", "SecurityError"); + }, + }); + + try { + expect(readSwipeActions()).toEqual(DEFAULT_SWIPE_ACTIONS); + } finally { + Object.defineProperty(window, "localStorage", descriptor); + } + }); + + it("falls back to the defaults on unparseable JSON", () => { + localStorage.setItem(STORAGE_KEY, "{not json"); + expect(readSwipeActions()).toEqual(DEFAULT_SWIPE_ACTIONS); + }); + + it("normalizes a partially-valid stored object", () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify({ left: "delete", right: "bogus" })); + expect(readSwipeActions()).toEqual({ left: "delete", right: DEFAULT_SWIPE_ACTIONS.right }); + }); + + it("makes an unrecognized stored action inert", () => { + localStorage.setItem(STORAGE_KEY, JSON.stringify({ left: "trash", right: "archive" })); + expect(readSwipeActions()).toEqual({ left: "none", right: "archive" }); + }); +}); + +describe("useSwipeActions — live updates", () => { + it("starts at the current stored value", () => { + writeSwipeActions({ left: "delete", right: "archive" }); + const { result } = renderHook(() => useSwipeActions()); + expect(result.current).toEqual({ left: "delete", right: "archive" }); + }); + + it("re-renders on a same-tab write (Settings change updates mounted rows)", () => { + const { result } = renderHook(() => useSwipeActions()); + expect(result.current).toEqual(DEFAULT_SWIPE_ACTIONS); + + act(() => { + writeSwipeActions({ left: "delete", right: "delete" }); + }); + expect(result.current).toEqual({ left: "delete", right: "delete" }); + }); + + it("re-renders on a cross-tab storage event", () => { + const { result } = renderHook(() => useSwipeActions()); + + // Another tab wrote the new value; simulate the DOM `storage` broadcast. + localStorage.setItem(STORAGE_KEY, JSON.stringify({ left: "none", right: "archive" })); + act(() => { + window.dispatchEvent(new StorageEvent("storage", { key: STORAGE_KEY })); + }); + expect(result.current).toEqual({ left: "none", right: "archive" }); + }); + + it("ignores storage events for unrelated keys", () => { + const { result } = renderHook(() => useSwipeActions()); + const before = result.current; + + localStorage.setItem("some:other:key", "x"); + act(() => { + window.dispatchEvent(new StorageEvent("storage", { key: "some:other:key" })); + }); + // Same reference — no spurious re-render/value change. + expect(result.current).toBe(before); + }); + + it("keeps a stable snapshot reference when the value is unchanged", () => { + writeSwipeActions({ left: "archive", right: "delete" }); + const { result } = renderHook(() => useSwipeActions()); + const first = result.current; + + // A write of the identical value still pings subscribers; the value must + // stay referentially stable so consumers don't needlessly re-run effects. + act(() => { + writeSwipeActions({ left: "archive", right: "delete" }); + }); + expect(result.current).toBe(first); + }); +}); diff --git a/web/src/lib/swipeActionPreferences.ts b/web/src/lib/swipeActionPreferences.ts new file mode 100644 index 0000000000..13a4c139df --- /dev/null +++ b/web/src/lib/swipeActionPreferences.ts @@ -0,0 +1,148 @@ +// Persisted, per-device preference for what a horizontal swipe on a session +// row does on touch devices. Two independent directions — swipe-left and +// swipe-right — each map to an action. Modeled after the other `*Preferences` +// helpers: a localStorage-backed value, SSR-safe reads, and writes that swallow +// quota/access errors so a corrupt entry can't break app boot. +// +// Unlike the simpler helpers this one also exposes a live subscription +// (useSwipeActions): Settings and every mounted session row read one source, so +// changing the preference updates open rows in the same session without a +// reload. writeSwipeActions notifies same-tab subscribers; a `storage` listener +// covers other tabs. +// +// Defaults mirror a phone mail app: swipe-left archives (the common tidy-away +// gesture), swipe-right is inert. Both directions may map to the SAME action — +// nothing prevents e.g. archiving on either side. + +import { useSyncExternalStore } from "react"; + +const STORAGE_KEY = "omnigent:swipe-actions"; +// Same-tab change signal. The DOM `storage` event only fires in OTHER tabs, so +// writeSwipeActions dispatches this to refresh subscribers in the writing tab. +const SWIPE_ACTIONS_EVENT = "omnigent:swipe-actions-changed"; + +export const swipeActions = ["archive", "delete", "none"] as const; +export type SwipeAction = (typeof swipeActions)[number]; + +export type SwipeDirection = "left" | "right"; + +export interface SwipeActionPreferences { + left: SwipeAction; + right: SwipeAction; +} + +/** Default: swipe-left archives, swipe-right does nothing. */ +export const DEFAULT_SWIPE_ACTIONS: SwipeActionPreferences = { + left: "archive", + right: "none", +}; + +/** Return whether a string is one of the selectable swipe actions. */ +export function isSwipeAction(value: unknown): value is SwipeAction { + return value === "archive" || value === "delete" || value === "none"; +} + +/** + * Normalize an arbitrary parsed value to a valid preferences object. Missing + * directions use the defaults; present but unknown actions become inert. + * Used both on read (localStorage drift / manual edits) and to sanitize writes. + */ +export function normalizeSwipeActions(value: unknown): SwipeActionPreferences { + const obj = typeof value === "object" && value !== null ? (value as Record) : {}; + // A direction set to something unrecognized goes inert rather than inheriting + // the default, which would silently arm archive on a swipe meant to be safe. + function actionFor(direction: SwipeDirection): SwipeAction { + const action = obj[direction]; + if (isSwipeAction(action)) return action; + return Object.hasOwn(obj, direction) ? "none" : DEFAULT_SWIPE_ACTIONS[direction]; + } + return { left: actionFor("left"), right: actionFor("right") }; +} + +/** + * Read the persisted swipe actions. Returns the defaults when nothing is + * stored, on a server render (no `window`), or when the stored value is + * missing/malformed — never throws, so a corrupt entry can't break app boot. + */ +export function readSwipeActions(): SwipeActionPreferences { + if (typeof window === "undefined") return { ...DEFAULT_SWIPE_ACTIONS }; + try { + const raw = window.localStorage.getItem(STORAGE_KEY); + if (!raw) return { ...DEFAULT_SWIPE_ACTIONS }; + return normalizeSwipeActions(JSON.parse(raw)); + } catch { + return { ...DEFAULT_SWIPE_ACTIONS }; + } +} + +/** + * Persist the swipe actions. Normalizes first so only valid values land in + * storage. Swallows quota/access errors so a failed write can't break the app. + */ +export function writeSwipeActions(value: SwipeActionPreferences): void { + if (typeof window === "undefined") return; + try { + window.localStorage.setItem(STORAGE_KEY, JSON.stringify(normalizeSwipeActions(value))); + } catch { + // localStorage quota or access errors shouldn't break the app. + } + // Refresh same-tab subscribers (the `storage` event only fires in other tabs). + window.dispatchEvent(new Event(SWIPE_ACTIONS_EVENT)); +} + +// Cached snapshot so useSyncExternalStore's getSnapshot is a cheap identity +// read on every render — a fresh object every call would loop it, and a +// re-parse every call would tax every row render. Refreshed on the change +// events and when a subscriber attaches (covering writes that happened while +// nothing was mounted); swapped only on a real change so the reference is +// stable between changes. +let snapshot: SwipeActionPreferences = readSwipeActions(); + +function refreshSnapshot(): void { + const next = readSwipeActions(); + if (next.left !== snapshot.left || next.right !== snapshot.right) snapshot = next; +} + +function getSnapshot(): SwipeActionPreferences { + return snapshot; +} + +// One module-level window listener pair fanning out to a shared set (the +// useMediaQuery shape): N mounted rows cost one registration, not 2N. +const listeners = new Set<() => void>(); + +function handleChange(e: Event): void { + // Ignore unrelated `storage` events; refresh on our key or the same-tab ping. + if (e instanceof StorageEvent && e.key !== null && e.key !== STORAGE_KEY) return; + refreshSnapshot(); + for (const listener of listeners) listener(); +} + +function subscribe(onChange: () => void): () => void { + if (typeof window === "undefined") return () => {}; + if (listeners.size === 0) { + window.addEventListener("storage", handleChange); + window.addEventListener(SWIPE_ACTIONS_EVENT, handleChange); + // Catch up on writes made while no subscriber was mounted (React re-checks + // the snapshot right after subscribing, so a change here still renders). + refreshSnapshot(); + } + listeners.add(onChange); + return () => { + listeners.delete(onChange); + if (listeners.size === 0) { + window.removeEventListener("storage", handleChange); + window.removeEventListener(SWIPE_ACTIONS_EVENT, handleChange); + } + }; +} + +/** + * Subscribe to the live swipe-action preference. Returns the current value and + * re-renders on same-tab writes (via writeSwipeActions) and cross-tab `storage` + * events, so Settings and every mounted session row share one source of truth. + * SSR-safe: renders the defaults on the server. + */ +export function useSwipeActions(): SwipeActionPreferences { + return useSyncExternalStore(subscribe, getSnapshot, () => DEFAULT_SWIPE_ACTIONS); +} diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx index 1289576409..fb02bee2c8 100644 --- a/web/src/pages/SettingsPage.tsx +++ b/web/src/pages/SettingsPage.tsx @@ -143,6 +143,15 @@ import { readHideUnconfiguredHarnesses, writeHideUnconfiguredHarnesses, } from "@/lib/harnessVisibilityPreferences"; +import { + DEFAULT_SWIPE_ACTIONS, + isSwipeAction, + type SwipeAction, + swipeActions as swipeActionOptions, + type SwipeDirection, + useSwipeActions, + writeSwipeActions, +} from "@/lib/swipeActionPreferences"; import { applyThemePalette, DEFAULT_PALETTE, @@ -823,6 +832,75 @@ function HideUnconfiguredHarnessesControl() { ); } +const SWIPE_ACTION_LABELS: Record = { + archive: "Archive", + delete: "Delete", + none: "None", +}; + +/** + * Per-device swipe-action preference for session rows on touch devices. Two + * selects — one per direction — each mapping a horizontal swipe to Archive, + * Delete, or None. Both directions may map to the same action. Delete stays + * behind the row's confirm dialog; None makes that direction inert. + */ +function SwipeActionsControl() { + // Live subscription so the selects reflect writes from anywhere (other tabs, + // and the shared source every session row reads). writeSwipeActions notifies. + const actions = useSwipeActions(); + const labelId = useId(); + + const choose = useCallback( + (direction: SwipeDirection, next: SwipeAction) => { + writeSwipeActions({ ...actions, [direction]: next }); + }, + [actions], + ); + + return ( + +
+ {(["left", "right"] as const).map((direction) => ( +
+ + Swipe {direction} → + + +
+ ))} +
+ + ); +} + function AppearanceSection() { // Embedded: the host owns light/dark, so the Mode and Color theme pickers // would be no-ops — hide them and say so (matching ThemeModeMenu). Terminal @@ -848,6 +926,8 @@ function AppearanceSection() { writeHideUnconfiguredHarnesses(DEFAULT_HIDE_UNCONFIGURED_HARNESSES); + writeSwipeActions(DEFAULT_SWIPE_ACTIONS); + applyDesktopUiFontSize(UI_FONT_SIZE_DEFAULT); applyUiFontFamily(UI_FONT_FAMILY_DEFAULT); @@ -870,6 +950,7 @@ function AppearanceSection() { "omnigent:custom-theme", "omnigent:default-workspace-panel", "omnigent:hide-unconfigured-harnesses", + "omnigent:swipe-actions", ]) { window.localStorage.removeItem(key); } @@ -914,6 +995,8 @@ function AppearanceSection() { + + diff --git a/web/src/shell/Sidebar.projectContextMenu.test.tsx b/web/src/shell/Sidebar.projectContextMenu.test.tsx new file mode 100644 index 0000000000..6764ea74c3 --- /dev/null +++ b/web/src/shell/Sidebar.projectContextMenu.test.tsx @@ -0,0 +1,474 @@ +// Tests for the project-folder header's right-click / long-press context menu. +// +// Project folder headers historically had only a hover-revealed kebab: a +// right-click fell through to the browser's native menu, and touch (which has +// no right-click) had no way to reach the actions at all. The header button now +// also carries a Radix `ContextMenuTrigger`, which supplies BOTH gestures — +// `contextmenu` for mouse and a built-in 700ms pointerdown timer for touch — so +// the same actions are reachable either way. The kebab stays. +// +// The menu body is authored once (`ProjectFolderMenuItems`) and rendered under +// both primitive families via the dropdown/context `MenuComponents` bundles, the +// same pattern the session rows use (`ConversationMenuItems`). +// +// What's locked in here: +// 1. Parity — the context menu carries the kebab's exact items, and each one +// opens the same dialog as the kebab's. +// 2. Left-click still expands/collapses the folder. +// 3. Opening the context menu does NOT toggle expansion (the pre-existing +// trap: the header button's onClick flips expand/collapse, and a +// long-press's trailing click would otherwise fire it). +// 4. A nested session row keeps its OWN context menu — the trigger wraps the +// header button, not the section, so right-click isn't hijacked. +// 5. Bulk-selection mode suppresses the header context menu, matching rows. + +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react"; +import { MemoryRouter } from "react-router-dom"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { TooltipProvider } from "@/components/ui/tooltip"; + +// `isMobile` drives the mocked `useIsMobileViewport` (jsdom doesn't evaluate +// media queries), so the mobile-only "New session" item can be exercised. +const mocks = vi.hoisted(() => ({ + isMobile: false, + renameProject: { mutate: vi.fn() }, + deleteProject: { mutate: vi.fn() }, +})); + +vi.mock("@/hooks/useIsMobileViewport", () => ({ + useIsMobileViewport: () => mocks.isMobile, +})); + +vi.mock("@/hooks/useConversations", () => ({ + useConversations: vi.fn(), + useConnectedConversations: () => [], + useStopAndDeleteConversation: () => ({ + mutate: vi.fn(), + reset: vi.fn(), + isPending: false, + isError: false, + variables: undefined, + }), + usePinnedConversations: () => ({ + data: { conversations: [], filterHonored: true }, + isSuccess: true, + }), + useTogglePinnedConversation: () => ({ mutate: vi.fn() }), + setConversationPinned: vi.fn(() => Promise.resolve({})), + PINNED_CONVERSATIONS_KEY: ["pinned-conversations"], + useRenameConversation: () => ({ mutate: vi.fn() }), + useArchiveConversation: () => ({ mutate: vi.fn() }), + useBulkArchiveConversations: () => ({ mutate: vi.fn(), isPending: false, isError: false }), + useBulkDeleteConversations: () => ({ mutate: vi.fn(), isPending: false, isError: false }), + useBulkStopSessions: () => ({ mutate: vi.fn(), isPending: false, isError: false }), + useStopSession: () => ({ mutate: vi.fn() }), + useProjects: () => ({ data: [{ id: PROJECT_ID, name: PROJECT_NAME }] }), + // The folder sources its members from the globally-loaded window too, so the + // nested-row test doesn't need this query to return anything. + useProjectSessions: () => ({ + data: undefined, + isLoading: false, + isError: false, + error: null, + fetchNextPage: vi.fn(), + hasNextPage: false, + isFetchingNextPage: false, + }), + useMoveToProject: () => ({ mutate: vi.fn() }), + useDeleteProject: () => ({ ...mocks.deleteProject, isPending: false, isError: false }), + useRenameProject: () => ({ ...mocks.renameProject, isPending: false, isError: false }), + useCreateProject: () => ({ mutate: vi.fn(), isPending: false, isError: false }), + useProjectConfig: () => ({ data: undefined, isLoading: false }), + useUpdateProjectConfig: () => ({ mutate: vi.fn(), isPending: false, isError: false }), + fetchProjectSessionIds: () => Promise.resolve([]), + PROJECT_LABEL_KEY: "omni_project", +})); + +vi.mock("./AgentTypeFilter", () => ({ AgentTypeFilter: () => null })); +vi.mock("./ReportIssueButton", () => ({ ReportIssueButton: () => null })); +vi.mock("@/components/PermissionsModal", () => ({ PermissionsModal: () => null })); + +import { type Conversation, useConversations } from "@/hooks/useConversations"; +import { Sidebar } from "./Sidebar"; + +const PROJECT_NAME = "Sprint 42"; +const PROJECT_ID = "p_sprint42"; + +const useConvMock = vi.mocked(useConversations); + +/** A session filed under PROJECT_NAME, so the folder holds a nested row. */ +const FILED_CONV: Conversation = { + id: "conv_1", + object: "conversation", + title: "My Session", + created_at: 1_700_000_000, + updated_at: 1_700_000_000, + labels: {}, + project_id: PROJECT_ID, + permission_level: null, + status: "idle", +}; + +function mockConversations(conversations: Conversation[]) { + const result = { + data: { + pages: [ + { + data: conversations, + first_id: conversations[0]?.id ?? null, + last_id: conversations.at(-1)?.id ?? null, + has_more: false, + }, + ], + pageParams: [undefined], + }, + isLoading: false, + isError: false, + error: null, + fetchNextPage: vi.fn(), + hasNextPage: false, + isFetchingNextPage: false, + } as unknown as ReturnType; + useConvMock.mockImplementation(() => result); +} + +function renderSidebar() { + const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } }); + return render( + + + + + + + , + ); +} + +/** The project folder's collapse-toggle header button. An open Radix menu is + * modal and `aria-hidden`s the rest of the tree, so role queries can't see the + * header while the menu is up — match on the accessible name via the DOM. */ +function folderHeader(): HTMLElement { + const header = Array.from(document.querySelectorAll("h2 button")).find( + (b) => b.textContent === PROJECT_NAME, + ); + if (header === undefined) throw new Error(`no folder header for ${PROJECT_NAME}`); + return header as HTMLElement; +} + +/** With `asChild`, Radix's ContextMenuTrigger renders no wrapper — its props + * (data-slot, the long-press pointer handlers) merge onto the header button + * itself, so `closest` matches the button and this equals folderHeader(). */ +function contextTrigger(): HTMLElement { + const trigger = folderHeader().closest('[data-slot="context-menu-trigger"]'); + if (trigger === null) throw new Error("folder header has no context-menu trigger"); + return trigger as HTMLElement; +} + +/** Simulate a touch long-press on the folder header: Radix arms a 700ms timer + * on a non-mouse pointerdown, so advance fake timers past it. */ +function longPressHeader() { + fireEvent.pointerDown(contextTrigger(), { pointerType: "touch", button: 0 }); + // The open happens inside the timer callback, so flush it under act(). + act(() => { + vi.advanceTimersByTime(750); + }); +} + +/** Dismiss the open menu with Escape, aimed at whatever the menu focused. */ +function dismissMenu() { + fireEvent.keyDown(document.activeElement ?? document.body, { key: "Escape" }); +} + +beforeEach(() => { + mocks.isMobile = false; + mocks.renameProject.mutate.mockReset(); + mocks.deleteProject.mutate.mockReset(); + useConvMock.mockReset(); + localStorage.clear(); + mockConversations([FILED_CONV]); +}); + +afterEach(cleanup); + +describe("project folder header context menu", () => { + it("opens the kebab's exact action set on right-click", () => { + renderSidebar(); + + // Nothing rendered until the header is right-clicked (the kebab is closed). + expect(screen.queryByTestId("rename-project")).toBeNull(); + + fireEvent.contextMenu(folderHeader()); + + // Same testids as the kebab body — it renders from the shared + // ProjectFolderMenuItems, so the two menus can't diverge. + expect(screen.getByTestId("rename-project")).toBeInTheDocument(); + expect(screen.getByTestId("project-settings")).toBeInTheDocument(); + expect(screen.getByTestId("delete-project")).toBeInTheDocument(); + // "New session" is present but mobile-only (md:hidden), matching the kebab. + expect(screen.getByTestId("project-new-session-menu")).toHaveClass("md:hidden"); + }); + + it("carries exactly the same items as the kebab", () => { + // Parity asserted item-for-item rather than by a hand-written list, so a + // future kebab item that skips the shared body fails here. + renderSidebar(); + + fireEvent.pointerDown(screen.getByTestId("project-actions"), { button: 0 }); + const kebabItems = screen + .getAllByRole("menuitem") + .map((el) => el.getAttribute("data-testid")) + .filter((id): id is string => id !== null); + expect(kebabItems.length).toBeGreaterThan(0); + + cleanup(); + renderSidebar(); + + fireEvent.contextMenu(folderHeader()); + const contextItems = screen + .getAllByRole("menuitem") + .map((el) => el.getAttribute("data-testid")) + .filter((id): id is string => id !== null); + + expect(contextItems).toEqual(kebabItems); + }); + + it("keeps the kebab working unchanged", () => { + renderSidebar(); + + fireEvent.pointerDown(screen.getByTestId("project-actions"), { button: 0 }); + + expect(screen.getByTestId("rename-project")).toBeInTheDocument(); + fireEvent.click(screen.getByTestId("rename-project")); + expect(screen.getByTestId("rename-project-confirm")).toBeInTheDocument(); + }); + + it("drives Rename from the context menu into the same dialog and mutation", () => { + renderSidebar(); + + fireEvent.contextMenu(folderHeader()); + fireEvent.click(screen.getByTestId("rename-project")); + + // The shared rename dialog — same testid the kebab path opens. + const confirm = screen.getByTestId("rename-project-confirm"); + expect(confirm).toBeInTheDocument(); + + const input = screen.getByDisplayValue(PROJECT_NAME); + fireEvent.change(input, { target: { value: "Sprint 43" } }); + fireEvent.click(confirm); + + expect(mocks.renameProject.mutate).toHaveBeenCalledWith( + { id: PROJECT_ID, oldName: PROJECT_NAME, newName: "Sprint 43" }, + expect.anything(), + ); + }); + + it("drives Project settings from the context menu", () => { + renderSidebar(); + + fireEvent.contextMenu(folderHeader()); + fireEvent.click(screen.getByTestId("project-settings")); + + expect(screen.getByRole("dialog")).toHaveTextContent(/Project settings/i); + }); + + it("drives Delete from the context menu into the same confirm + mutation", () => { + renderSidebar(); + + fireEvent.contextMenu(folderHeader()); + fireEvent.click(screen.getByTestId("delete-project")); + + // The confirm dialog (delete archives every member, so it's gated). + expect(screen.getByText("Delete project?")).toBeInTheDocument(); + fireEvent.click(screen.getByRole("button", { name: "Delete project" })); + + expect(mocks.deleteProject.mutate).toHaveBeenCalledWith( + { id: PROJECT_ID, name: PROJECT_NAME }, + expect.anything(), + ); + }); + + it("exposes the mobile-only New session item pre-filed under the project", () => { + mocks.isMobile = true; + renderSidebar(); + + fireEvent.contextMenu(folderHeader()); + + // asChild renders the item as the itself, so the href lives on it. + expect(screen.getByTestId("project-new-session-menu")).toHaveAttribute( + "href", + `/?project=${encodeURIComponent(PROJECT_NAME)}`, + ); + }); + + it("still expands and collapses the folder on plain left-click", () => { + renderSidebar(); + + // Project folders render collapsed by default. + const header = folderHeader(); + expect(header).toHaveAttribute("aria-expanded", "false"); + + fireEvent.click(header); + expect(folderHeader()).toHaveAttribute("aria-expanded", "true"); + + fireEvent.click(folderHeader()); + expect(folderHeader()).toHaveAttribute("aria-expanded", "false"); + }); + + it("toggles on the first left-click after the mouse context menu is dismissed", () => { + renderSidebar(); + + expect(folderHeader()).toHaveAttribute("aria-expanded", "false"); + + fireEvent.pointerDown(folderHeader(), { pointerType: "mouse", button: 2 }); + fireEvent.contextMenu(folderHeader()); + + // The menu is open and the folder stayed collapsed — Radix preventDefaults + // the native contextmenu, so no click reaches the collapse toggle. + expect(screen.getByTestId("rename-project")).toBeInTheDocument(); + expect(folderHeader()).toHaveAttribute("aria-expanded", "false"); + + dismissMenu(); + fireEvent.click(folderHeader()); + expect(folderHeader()).toHaveAttribute("aria-expanded", "true"); + }); + + it("toggles on the first keyboard activation after its context menu is dismissed", async () => { + renderSidebar(); + + const header = folderHeader(); + header.focus(); + + // jsdom does not synthesize contextmenu or click from keyboard keys, so + // dispatch the browser-generated events explicitly without pointer events. + fireEvent.keyDown(header, { key: "F10", shiftKey: true }); + fireEvent.contextMenu(header); + expect(screen.getByTestId("rename-project")).toBeInTheDocument(); + + dismissMenu(); + await waitFor(() => expect(header).toHaveFocus()); + + fireEvent.click(header, { detail: 0 }); + expect(folderHeader()).toHaveAttribute("aria-expanded", "true"); + }); + + it("suppresses native text selection of the header title", () => { + // A long-press must open the menu, not select the project name. Session + // rows suppress selection by preventDefault-ing touch pointerdown, but on + // this trigger that would also cancel Radix's composed long-press timer — + // so the header relies on user-select: none instead. jsdom cannot run a + // real selection, so pin the class that carries the behavior. + renderSidebar(); + expect(folderHeader()).toHaveClass("select-none"); + }); + + it("does not toggle the folder when a long-press opens the menu", () => { + // The gotcha this PR had to solve: the long-press fires mid-gesture off + // Radix's pointerdown timer, but the trailing pointerup still produces a + // click — which would collapse/expand the folder under the just-opened menu. + vi.useFakeTimers(); + try { + renderSidebar(); + expect(folderHeader()).toHaveAttribute("aria-expanded", "false"); + + longPressHeader(); + + // The menu opened from touch alone — no custom gesture code, just Radix's + // 700ms timer on the same trigger. + expect(screen.getByTestId("rename-project")).toBeInTheDocument(); + + // The trailing click of the press must NOT toggle the folder. + fireEvent.pointerUp(contextTrigger(), { pointerType: "touch", button: 0 }); + fireEvent.click(folderHeader()); + expect(folderHeader()).toHaveAttribute("aria-expanded", "false"); + } finally { + vi.useRealTimers(); + } + }); + + it("still toggles on a plain click after a long-press opened the menu", () => { + // The click-swallow must be one-shot: a later ordinary click still expands. + vi.useFakeTimers(); + try { + renderSidebar(); + + longPressHeader(); + fireEvent.pointerUp(contextTrigger(), { pointerType: "touch", button: 0 }); + fireEvent.click(folderHeader()); + expect(folderHeader()).toHaveAttribute("aria-expanded", "false"); + + // A fresh, separate click (its own pointerdown) toggles as normal. + fireEvent.pointerDown(folderHeader(), { pointerType: "mouse", button: 0 }); + fireEvent.click(folderHeader()); + expect(folderHeader()).toHaveAttribute("aria-expanded", "true"); + } finally { + vi.useRealTimers(); + } + }); + + it("does not swallow a keyboard toggle after a clickless non-mouse open", () => { + // A pen barrel-button right-click (or a touch release over the portaled + // menu) arms the swallow but never delivers a trailing click. Closing the + // menu must disarm it, or the next keyboard Enter is silently eaten. + renderSidebar(); + expect(folderHeader()).toHaveAttribute("aria-expanded", "false"); + + fireEvent.pointerDown(contextTrigger(), { pointerType: "pen", button: 2 }); + fireEvent.contextMenu(folderHeader()); + expect(screen.getByTestId("rename-project")).toBeInTheDocument(); + + dismissMenu(); + + // Keyboard activation (click with no preceding pointerdown) still toggles. + fireEvent.click(folderHeader(), { detail: 0 }); + expect(folderHeader()).toHaveAttribute("aria-expanded", "true"); + }); + + it("scopes the header trigger to the header button, clear of the nested rows", () => { + // Structural guard on placement. The trigger must wrap the header BUTTON, + // never an ancestor that also contains the child rows (the outer folder + // div, or the
) — those would put every nested session row inside + // the project's trigger and hijack right-click on them. + renderSidebar(); + + // Expand the folder so its member row renders inside the section. + fireEvent.click(folderHeader()); + const row = screen.getByRole("link", { name: /My Session/ }); + + const trigger = contextTrigger(); + expect(trigger.contains(folderHeader())).toBe(true); + expect(trigger.contains(row)).toBe(false); + }); + + it("leaves a nested session row's own context menu intact", () => { + renderSidebar(); + + fireEvent.click(folderHeader()); + const row = screen.getByRole("link", { name: /My Session/ }); + + fireEvent.contextMenu(row); + + // The SESSION's menu opened (row actions), not the project's. + expect(screen.getByTestId("rename-conversation")).toBeInTheDocument(); + expect(screen.getByTestId("archive-conversation")).toBeInTheDocument(); + expect(screen.queryByTestId("rename-project")).toBeNull(); + expect(screen.queryByTestId("delete-project")).toBeNull(); + }); + + it("suppresses the header context menu in bulk-selection mode", () => { + // Selection mode owns the rows, and the session rows already drop their + // context menus there — the folder header matches that. + renderSidebar(); + + fireEvent.click(folderHeader()); + fireEvent.pointerDown(screen.getByTestId("project-list-actions"), { button: 0 }); + fireEvent.click(screen.getByTestId("projects-select-sessions")); + + // In selection mode the header no longer carries a context-menu trigger, + // and right-clicking it opens nothing. + expect(folderHeader().closest('[data-slot="context-menu-trigger"]')).toBeNull(); + fireEvent.contextMenu(folderHeader()); + expect(screen.queryByTestId("rename-project")).toBeNull(); + }); +}); diff --git a/web/src/shell/Sidebar.rowActions.test.tsx b/web/src/shell/Sidebar.rowActions.test.tsx index c16aa3c77e..2d91cabfdb 100644 --- a/web/src/shell/Sidebar.rowActions.test.tsx +++ b/web/src/shell/Sidebar.rowActions.test.tsx @@ -6,9 +6,10 @@ // `onDoubleClick`), gated on edit permission. // See ConversationRow / ConversationEditRow in Sidebar.tsx. -import { useSyncExternalStore } from "react"; +import { Suspense, startTransition, useSyncExternalStore } from "react"; +import type * as DndKitCore from "@dnd-kit/core"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import { cleanup, fireEvent, render, screen, within } from "@testing-library/react"; +import { act, cleanup, fireEvent, render, screen, within } from "@testing-library/react"; import { MemoryRouter, Route, Routes } from "react-router-dom"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; import { TooltipProvider } from "@/components/ui/tooltip"; @@ -16,10 +17,9 @@ import type { ServerInfo } from "@/lib/capabilities"; import { CapabilitiesProvider } from "@/lib/CapabilitiesContext"; // Controllable rename mutation so the double-click test can assert the -// committed title was forwarded to the PATCH. `isMobile` toggles the mocked -// `useIsMobileViewport` so a test can render the row on a mobile viewport (the -// project flyout is disabled there). Declared via vi.hoisted so the vi.mock -// factories (hoisted above imports) can reference them. +// committed title was forwarded to the PATCH. The media-query hooks use +// separate flags so viewport layout and touch capability can vary independently. +// Declared via vi.hoisted so their mock factories can reference them. const mocks = vi.hoisted(() => { // Tiny reactive store for the server-authoritative pinned set, so a quick-pin // click re-renders the sidebar (mirrors the real query's refetch). Holds ids; @@ -46,12 +46,39 @@ const mocks = vi.hoisted(() => { return { rename: { mutate: vi.fn() }, isMobile: false, + hasCoarsePointer: false, // Projects surfaced by the picker + the move-to-project mutation, so the // mobile in-place project view test can assert both the list and the pick. projects: [] as string[], moveToProject: { mutate: vi.fn() }, conversations: [] as unknown[], + isDragging: null as boolean | null, + suspendDraggable: false, + suspendedRender: new Promise(() => {}), pinnedStore, + // Archive + stop mutations, so the swipe tests can assert the swipe→archive + // path drives the same stop→archive handler the kebab uses. + archive: { mutate: vi.fn() }, + archiveOverride: null as null | { mutate: ReturnType }, + stopSession: { mutate: vi.fn() }, + // Stop-and-delete, so the swipe→delete test can assert the row deletes only + // after the confirm dialog is accepted. + del: { mutate: vi.fn(), reset: vi.fn() }, + }; +}); + +vi.mock("@dnd-kit/core", async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + useDraggable: (args: Parameters[0]) => { + const draggable = actual.useDraggable(args); + if (mocks.suspendDraggable) throw mocks.suspendedRender; + return { + ...draggable, + isDragging: mocks.isDragging ?? draggable.isDragging, + }; + }, }; }); @@ -62,12 +89,16 @@ vi.mock("@/hooks/useIsMobileViewport", () => ({ useIsMobileViewport: () => mocks.isMobile, })); +vi.mock("@/hooks/useCoarsePointer", () => ({ + useCoarsePointer: () => mocks.hasCoarsePointer, +})); + vi.mock("@/hooks/useConversations", () => ({ useConversations: vi.fn(), useConnectedConversations: () => [], useStopAndDeleteConversation: () => ({ - mutate: vi.fn(), - reset: vi.fn(), + mutate: mocks.del.mutate, + reset: mocks.del.reset, isPending: false, isError: false, variables: undefined, @@ -92,11 +123,11 @@ vi.mock("@/hooks/useConversations", () => ({ setConversationPinned: vi.fn(() => Promise.resolve({})), PINNED_CONVERSATIONS_KEY: ["pinned-conversations"], useRenameConversation: () => mocks.rename, - useArchiveConversation: () => ({ mutate: vi.fn() }), + useArchiveConversation: () => mocks.archiveOverride ?? mocks.archive, useBulkArchiveConversations: () => ({ mutate: vi.fn(), isPending: false, isError: false }), useBulkDeleteConversations: () => ({ mutate: vi.fn(), isPending: false, isError: false }), useBulkStopSessions: () => ({ mutate: vi.fn(), isPending: false, isError: false }), - useStopSession: () => ({ mutate: vi.fn() }), + useStopSession: () => mocks.stopSession, useProjects: () => ({ data: mocks.projects.map((name: string) => ({ id: `p_${name}`, name })) }), // A non-empty `useProjects` renders a project folder, which queries its // sessions — return the collapsed (disabled) shape so the folder is inert @@ -132,6 +163,8 @@ vi.mock("@/lib/serverOrigin", () => ({ isCurrentServerLocal: () => false })); import { type Conversation, useConversations } from "@/hooks/useConversations"; import { resetReadStateForTests, seedReadState } from "@/hooks/useUnseenConversations"; +import { ROW_DRAG_ACTIVATE_PX, ROW_GESTURE_HOLD_MS } from "@/hooks/useRowGesture"; +import { writeSwipeActions } from "@/lib/swipeActionPreferences"; import { Sidebar } from "./Sidebar"; const useConvMock = vi.mocked(useConversations); @@ -201,11 +234,16 @@ function serverInfo(overrides: Partial = {}): ServerInfo { // server sharing policy via CapabilitiesProvider (default "loading" → on). function renderSidebar(activeId?: string, info?: ServerInfo) { const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } }); + const onClose = vi.fn(); // Build a FRESH element tree per render: re-rendering the identical element // reference lets React bail out without re-invoking the sidebar, which // would swallow a `mockConversations` swap applied mid-test. const makeUi = () => { - const sidebar = ; + const sidebar = ( + }> + + + ); const tree = ( @@ -228,15 +266,40 @@ function renderSidebar(activeId?: string, info?: ServerInfo) { const view = render(makeUi()); // Re-render so a test can apply a new `mockConversations` list mid-flight // (e.g. simulating a reorder pushed between user clicks). - return Object.assign(view, { rerenderSidebar: () => view.rerender(makeUi()) }); + return Object.assign(view, { + onClose, + rerenderSidebar: () => view.rerender(makeUi()), + }); } beforeEach(() => { mocks.rename.mutate.mockReset(); mocks.moveToProject.mutate.mockReset(); + // Resolve archive callbacks synchronously so the transient "Archiving…" + // status row settles back to the interactive row within the test. + mocks.archive.mutate.mockReset(); + mocks.archive.mutate.mockImplementation( + (_args: unknown, opts?: { onSuccess?: () => void; onSettled?: () => void }) => { + opts?.onSuccess?.(); + opts?.onSettled?.(); + }, + ); + // The stop that precedes archiving (runArchive) fires its `onSettled` once + // the runner stop resolves; invoke it synchronously so the follow-on + // archive.mutate runs in tests. + mocks.stopSession.mutate.mockReset(); + mocks.stopSession.mutate.mockImplementation((_id: string, opts?: { onSettled?: () => void }) => { + opts?.onSettled?.(); + }); + mocks.del.mutate.mockReset(); + mocks.del.reset.mockReset(); mocks.projects = []; + mocks.isDragging = null; + mocks.suspendDraggable = false; + mocks.archiveOverride = null; // Default every test to the desktop viewport; the mobile flyout test opts in. mocks.isMobile = false; + mocks.hasCoarsePointer = false; useConvMock.mockReset(); localStorage.clear(); // Reset the server pinned set between tests. @@ -247,7 +310,12 @@ beforeEach(() => { mockConversations([CONV]); }); -afterEach(cleanup); +afterEach(() => { + cleanup(); + // dnd-kit removes its capture-phase click blocker on a delayed timer. + if (vi.isFakeTimers()) vi.runOnlyPendingTimers(); + vi.useRealTimers(); +}); describe("quick pin/unpin hover button", () => { it("keeps the row full-width and the trailing controls inset from the right edge", () => { @@ -287,6 +355,22 @@ describe("quick pin/unpin hover button", () => { expect(rowLink).toHaveClass("md:pr-14"); }); + it("keeps the menu Pin item at desktop widths when a coarse pointer exists", () => { + // Desktop hides the menu Pin item behind the hover-revealed quick-pin + // button, but a touch device has no hover at any width — the menu must + // keep carrying Pin there or wide touch devices cannot pin at all. + mocks.hasCoarsePointer = true; + renderSidebar(); + fireEvent.pointerDown(screen.getByTestId("conversation-actions"), { button: 0 }); + expect(screen.getByTestId("pin-conversation")).not.toHaveClass("md:hidden"); + }); + + it("hides the menu Pin item at desktop widths without a coarse pointer", () => { + renderSidebar(); + fireEvent.pointerDown(screen.getByTestId("conversation-actions"), { button: 0 }); + expect(screen.getByTestId("pin-conversation")).toHaveClass("md:hidden"); + }); + it("sizes the project-folder header controls to match the session-row kebab", () => { // The folder-header pencil + kebab share the right-edge column with the // session-row kebab, so they must be the same compact `icon-xs` (size-6) @@ -295,14 +379,10 @@ describe("quick pin/unpin hover button", () => { mocks.projects = ["Sprint 42"]; renderSidebar(); - const projectActions = screen.getByTestId("project-actions"); - const projectNewSession = screen.getByTestId("project-new-session"); - for (const button of [projectActions, projectNewSession]) { - expect(button).toHaveClass("size-6", "text-muted-foreground", "hover:text-foreground"); - expect(button).not.toHaveClass("size-7"); - expect(button.querySelector("svg")).toHaveClass("size-3.5"); - expect(button.querySelector("svg")).toHaveAttribute("data-icon-size", "14"); - } + expect(screen.getByTestId("project-actions")).toHaveClass("size-6"); + expect(screen.getByTestId("project-actions")).not.toHaveClass("size-7"); + expect(screen.getByTestId("project-new-session")).toHaveClass("size-6"); + expect(screen.getByTestId("project-new-session")).not.toHaveClass("size-7"); // Same compact size as the session-row kebab it aligns with. expect(screen.getByTestId("conversation-actions")).toHaveClass("size-6"); }); @@ -315,13 +395,10 @@ describe("quick pin/unpin hover button", () => { mocks.projects = ["Sprint 42"]; renderSidebar(); - for (const button of [ - screen.getByTestId("new-project"), - screen.getByTestId("project-list-actions"), - ]) { - expect(button).toHaveClass("size-6", "text-muted-foreground", "hover:text-foreground"); - expect(button).not.toHaveClass("size-7"); - } + expect(screen.getByTestId("new-project")).toHaveClass("size-6"); + expect(screen.getByTestId("new-project")).not.toHaveClass("size-7"); + expect(screen.getByTestId("project-list-actions")).toHaveClass("size-6"); + expect(screen.getByTestId("project-list-actions")).not.toHaveClass("size-7"); }); it("hides the Projects list-actions kebab when there are no projects", () => { @@ -342,13 +419,6 @@ describe("quick pin/unpin hover button", () => { expect(screen.queryByText("Pinned")).toBeNull(); const pinButton = screen.getByTestId("quick-pin-conversation"); expect(pinButton).toHaveAttribute("aria-label", "Pin conversation"); - expect(pinButton).toHaveClass("text-muted-foreground", "hover:text-foreground"); - expect(pinButton.querySelector("svg")).toHaveClass("size-3.5"); - expect(pinButton.querySelector("svg")).toHaveAttribute("data-icon-size", "14"); - const actionsButton = screen.getByTestId("conversation-actions"); - expect(actionsButton).toHaveClass("text-muted-foreground", "hover:text-foreground"); - expect(actionsButton.querySelector("svg")).toHaveClass("size-3.5"); - expect(actionsButton.querySelector("svg")).toHaveAttribute("data-icon-size", "14"); fireEvent.click(pinButton); @@ -588,10 +658,11 @@ describe("pinned row project flyout", () => { expect(within(flyout).getByText("Moonshot")).toBeInTheDocument(); const flyoutTitle = within(flyout).getByText("My Session"); expect(flyoutTitle).toBeInTheDocument(); - // The flyout title matches sidebar row names through the shared compact - // class, which resolves to the same text-ui step as Appearance content. + // The flyout title is sized to match the sidebar row name + // (`sidebar-compact-text`, 13px at the default), not the larger `text-sm`. + // Both scale with the UI font-size setting via the rem-based root. expect(flyoutTitle).toHaveClass("sidebar-compact-text"); - expect(flyoutTitle).not.toHaveClass("text-ui"); + expect(flyoutTitle).not.toHaveClass("text-sm"); expect(within(flyout).getByTestId("pinned-project-flyout-branch")).toHaveTextContent( "fix/sidebar-row-height", ); @@ -764,6 +835,35 @@ describe("mark as unread", () => { }); describe("right-click context menu", () => { + it("does not open while the row is being dragged", () => { + mocks.isDragging = true; + renderSidebar(); + + fireEvent.contextMenu(screen.getByRole("link", { name: /My Session/ })); + + expect(screen.queryByTestId("rename-conversation")).toBeNull(); + }); + + it("leaves keyboard link activation untouched after a drag ends", async () => { + mocks.isMobile = true; + mocks.isDragging = true; + const view = renderSidebar(); + + mocks.isDragging = false; + view.rerenderSidebar(); + await act( + () => + new Promise((resolve) => { + setTimeout(resolve, 0); + }), + ); + + // Enter/Space activation reaches a link as a click with no pointerdown. + // The drag guard must not require or consume a preceding pointer gesture. + fireEvent.click(screen.getByRole("link", { name: /My Session/ }), { detail: 0 }); + expect(view.onClose).toHaveBeenCalledOnce(); + }); + it("opens the same action items as the kebab and drives the same handlers", () => { renderSidebar(); @@ -908,6 +1008,1166 @@ describe("right-click context menu", () => { }); }); +describe("row context menus render non-modally", () => { + // react-remove-scroll's modal lock hit-tests through the sidebar overlay to + // the chat behind it (pointer-events: none on body only blocks the sidebar's + // own subtree from taking the hit, not the underlying page). modal={false} + // must be set on all three row variants so a touch continuing past the menu + // never reaches native text selection in the chat. + it("does not lock body pointer-events for the desktop context menu", () => { + renderSidebar(); + fireEvent.contextMenu(screen.getByRole("link", { name: /My Session/ })); + expect(screen.getByTestId("rename-conversation")).toBeInTheDocument(); + expect(document.body).not.toHaveAttribute("data-scroll-locked"); + expect(document.body.style.pointerEvents).not.toBe("none"); + }); + + it("does not lock body pointer-events for the mobile context menu", () => { + mocks.isMobile = true; + renderSidebar(); + fireEvent.contextMenu(screen.getByRole("link", { name: /My Session/ })); + expect(screen.getByTestId("rename-conversation")).toBeInTheDocument(); + expect(document.body).not.toHaveAttribute("data-scroll-locked"); + expect(document.body.style.pointerEvents).not.toBe("none"); + }); + + it("does not lock body pointer-events for a pinned row's project-flyout context menu", () => { + mocks.pinnedStore.set(["conv_1"]); + mockConversations([{ ...CONV, labels: { omni_project: "Moonshot" } }]); + renderSidebar(); + fireEvent.contextMenu(screen.getByRole("link", { name: /My Session/ })); + expect(screen.getByTestId("rename-conversation")).toBeInTheDocument(); + expect(document.body).not.toHaveAttribute("data-scroll-locked"); + expect(document.body.style.pointerEvents).not.toBe("none"); + }); + + it("marks the menu content select-none with a scrollable, page-safe touch-action", () => { + renderSidebar(); + fireEvent.contextMenu(screen.getByRole("link", { name: /My Session/ })); + const menu = screen.getByRole("menu"); + expect(menu).toHaveClass("select-none"); + expect(menu).toHaveClass("touch-pan-y"); + expect(menu).not.toHaveClass("touch-none"); + }); +}); + +const TOUCH_POINTER = { pointerId: 1, isPrimary: true, pointerType: "touch" as const }; +// A second finger: non-primary, so the recognizer cancels the gesture in flight. +const SECOND_TOUCH_POINTER = { pointerId: 2, isPrimary: false, pointerType: "touch" as const }; + +function touchTarget() { + // ContextMenu marks the app tree aria-hidden while portalled; pointer capture + // still routes the held touch to this same row underneath it. + const link = screen.getByRole("link", { name: /My Session/, hidden: true }); + return { link, row: link.closest("li")! }; +} + +function touchPoint(target: Element, x: number, y: number, identifier = 0) { + return { + identifier, + target, + clientX: x, + clientY: y, + pageX: x, + pageY: y, + screenX: x, + screenY: y, + }; +} + +function startTouch(x = 100, y = 100) { + const { link } = touchTarget(); + const touch = touchPoint(link, x, y); + fireEvent.pointerDown(link, { ...TOUCH_POINTER, clientX: x, clientY: y }); + fireEvent.touchStart(link, { touches: [touch], changedTouches: [touch] }); +} + +function moveTouch(x: number, y: number, touches = 1) { + const { link } = touchTarget(); + const points = Array.from({ length: touches }, (_, index) => + touchPoint(link, x + index, y + index, index), + ); + const allowsNativeScroll = fireEvent.pointerMove(link, { + ...TOUCH_POINTER, + clientX: x, + clientY: y, + }); + fireEvent.touchMove(link, { touches: points, changedTouches: points }); + return allowsNativeScroll; +} + +function endTouch(x = 100, y = 100) { + const { link } = touchTarget(); + const touch = touchPoint(link, x, y); + fireEvent.pointerUp(link, { ...TOUCH_POINTER, clientX: x, clientY: y }); + fireEvent.touchEnd(link, { touches: [], changedTouches: [touch] }); +} + +describe("touch gesture arbitration", () => { + beforeEach(() => { + mocks.hasCoarsePointer = true; + }); + + function advanceHold(ms = ROW_GESTURE_HOLD_MS) { + act(() => vi.advanceTimersByTime(ms)); + } + + it("opens once at hold fire without Radix adding a second menu", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { link, row } = touchTarget(); + const contextMenus: MouseEvent[] = []; + link.addEventListener("contextmenu", (event) => contextMenus.push(event)); + + // The recognizer opens first; holding past Radix's 700ms timer must not + // add a second menu or dispatch another contextmenu event. + startTouch(140, 220); + advanceHold(); + expect(document.querySelectorAll('[role="menu"]')).toHaveLength(1); + expect(contextMenus).toHaveLength(1); + expect(row).toHaveClass("scale-[1.01]"); + + advanceHold(500); + expect(document.querySelectorAll('[role="menu"]')).toHaveLength(1); + expect(contextMenus).toHaveLength(1); + endTouch(140, 220); + expect(document.querySelectorAll('[role="menu"]')).toHaveLength(1); + expect(contextMenus).toHaveLength(1); + }); + + it("leaves a pen long-press to Radix, which the recognizer never claims", () => { + // The recognizer is touch-only, so suppressing Radix for pen would strip + // stylus users of the long-press menu they had before. + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { link } = touchTarget(); + const pen = { pointerId: 1, isPrimary: true, pointerType: "pen" as const }; + + fireEvent.pointerDown(link, { ...pen, clientX: 140, clientY: 220 }); + act(() => vi.advanceTimersByTime(900)); + + expect(screen.getByTestId("rename-conversation")).toBeInTheDocument(); + }); + + it("opens at the current finger point and stays open through release and trailing click", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + const view = renderSidebar(); + const { link, row } = touchTarget(); + const contextMenus: MouseEvent[] = []; + link.addEventListener("contextmenu", (event) => contextMenus.push(event)); + + startTouch(140, 220); + moveTouch(145, 224); + advanceHold(); + expect(row).toHaveClass("scale-[1.01]"); + expect(row).not.toHaveClass("opacity-40"); + expect(screen.getByTestId("archive-conversation")).toBeInTheDocument(); + expect(contextMenus.at(-1)).toMatchObject({ clientX: 145, clientY: 224 }); + + endTouch(145, 224); + fireEvent.click(link); + expect(screen.getByTestId("archive-conversation")).toBeInTheDocument(); + expect(row).not.toHaveClass("opacity-40"); + expect(contextMenus).toHaveLength(1); + expect(view.onClose).not.toHaveBeenCalled(); + + fireEvent.click(screen.getByTestId("archive-conversation")); + expect(mocks.archive.mutate).toHaveBeenCalledWith( + { id: "conv_1", archived: true }, + expect.anything(), + ); + }); + + it("suppresses the OS's native contextmenu while the recognizer owns the touch", () => { + // Android fires its own contextmenu at ~500ms — after the 400ms arm + // already opened the menu. Capture retargets it to the row root, + // bypassing Radix's trigger; unprevented it starts text selection and + // cancels the pointer stream, killing the pending drag. The recognizer's + // own dispatch carries a tag; the OS's does not. + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + + startTouch(); + advanceHold(); + // The tagged synthetic dispatch got through: the menu is open. + expect(screen.getByTestId("rename-conversation")).toBeInTheDocument(); + + const nativeLongPress = new MouseEvent("contextmenu", { bubbles: true, cancelable: true }); + row.dispatchEvent(nativeLongPress); + expect(nativeLongPress.defaultPrevented).toBe(true); + + // The OS hit-tests the element under the finger — once the menu opens + // there, that's the menu portal, far from the row. The document-level + // guard must still catch it. + const offRowLongPress = new MouseEvent("contextmenu", { bubbles: true, cancelable: true }); + document.body.dispatchEvent(offRowLongPress); + expect(offRowLongPress.defaultPrevented).toBe(true); + + const selection = new Event("selectstart", { bubbles: true, cancelable: true }); + document.body.dispatchEvent(selection); + expect(selection.defaultPrevented).toBe(true); + endTouch(); + + // Released: the guards are gone. + const afterRelease = new MouseEvent("contextmenu", { bubbles: true, cancelable: true }); + document.body.dispatchEvent(afterRelease); + expect(afterRelease.defaultPrevented).toBe(false); + }); + + it("renders the row link non-draggable so a stationary long-press survives", () => { + // Links are natively draggable; Chrome Android hands a stationary + // long-press on one to native drag with an unconditional pointercancel — + // fired before the contextmenu event, so no preventDefault can save the + // pointer stream. draggable=false removes that claimant entirely. + renderSidebar(); + const rowLink = screen.getByRole("link", { name: /My Session/ }); + expect(rowLink).toHaveAttribute("draggable", "false"); + }); + + it("leaves the contextmenu alone when no gesture owns the touch", () => { + // Desktop right-click arrives with the recognizer idle — it must reach + // Radix untouched or the mouse context menu dies. + renderSidebar(); + const { row } = touchTarget(); + + const rightClick = new MouseEvent("contextmenu", { bubbles: true, cancelable: true }); + row.dispatchEvent(rightClick); + expect(rightClick.defaultPrevented).toBe(false); + }); + + it("keeps a threshold-minus-one wiggle armed with the menu open", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + + startTouch(); + advanceHold(); + expect(row).not.toHaveClass("opacity-40"); + expect(row).toHaveClass("touch-none"); + expect(row).not.toHaveClass("touch-pan-y"); + expect(screen.getByTestId("rename-conversation")).toBeInTheDocument(); + + moveTouch(104, 104); + moveTouch(100 + ROW_DRAG_ACTIVATE_PX - 1, 100); + expect(row).not.toHaveClass("opacity-40"); + expect(row).toHaveClass("touch-none"); + expect(screen.getByTestId("rename-conversation")).toBeInTheDocument(); + endTouch(100 + ROW_DRAG_ACTIVATE_PX - 1, 100); + }); + + it("measures the drag threshold from the arm point, not the press origin", () => { + // A press may legally drift up to the hold tolerance before the timer + // fires; that drift must not pre-spend the drag budget, or the first + // post-arm tremble would dismiss the fresh menu into a drag. + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + + startTouch(); + // Vertical-dominant 15px drift: inside the 20px hold tolerance, outside + // the swipe wedge, under the 25px scroll circle. + moveTouch(100, 115); + advanceHold(); + expect(screen.getByTestId("rename-conversation")).toBeInTheDocument(); + + // ~3px wiggle from the ARM point (but ~17px from the press origin). + moveTouch(102, 117); + expect(row).not.toHaveClass("opacity-40"); + expect(screen.getByTestId("rename-conversation")).toBeInTheDocument(); + + // A deliberate pull measured from the arm point still drags. + moveTouch(100, 115 + ROW_DRAG_ACTIVATE_PX); + expect(row).toHaveClass("opacity-40"); + expect(screen.queryByTestId("rename-conversation")).toBeNull(); + endTouch(100, 115 + ROW_DRAG_ACTIVATE_PX); + }); + + it("starts drag at the threshold without a menu-dismissal keydown", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + const escapeKeydowns = vi.fn((event: KeyboardEvent) => event.key); + document.addEventListener("keydown", escapeKeydowns, { capture: true }); + + startTouch(); + advanceHold(); + expect(screen.getByTestId("rename-conversation")).toBeInTheDocument(); + + moveTouch(100 + ROW_DRAG_ACTIVATE_PX, 100); + expect(row).toHaveClass("opacity-40"); + expect(row).toHaveClass("touch-none"); + expect(screen.queryByTestId("rename-conversation")).toBeNull(); + + moveTouch(100 + ROW_DRAG_ACTIVATE_PX + 10, 100); + expect(row).toHaveClass("opacity-40"); + document.removeEventListener("keydown", escapeKeydowns, { capture: true }); + expect(escapeKeydowns).not.toHaveBeenCalled(); + endTouch(100 + ROW_DRAG_ACTIVATE_PX + 10, 100); + }); + + it("does not restart a drag after viewport resize cancels the sensor", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + + startTouch(); + advanceHold(); + moveTouch(100 + ROW_DRAG_ACTIVATE_PX, 100); + expect(row).toHaveClass("opacity-40"); + + act(() => window.dispatchEvent(new Event("resize"))); + expect(row).not.toHaveClass("opacity-40"); + + moveTouch(100 + ROW_DRAG_ACTIVATE_PX + 1, 100); + expect(row).not.toHaveClass("opacity-40"); + endTouch(100 + ROW_DRAG_ACTIVATE_PX + 1, 100); + }); + + it("resets the recognizer when dnd-kit ends the drag", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { link, row } = touchTarget(); + + startTouch(); + advanceHold(); + moveTouch(100 + ROW_DRAG_ACTIVATE_PX, 100); + expect(row).toHaveClass("opacity-40"); + + const touch = touchPoint(link, 100 + ROW_DRAG_ACTIVATE_PX, 100); + fireEvent.touchEnd(link, { touches: [], changedTouches: [touch] }); + + expect(row).not.toHaveClass("opacity-40"); + expect(row).not.toHaveClass("touch-none"); + moveTouch(100 + ROW_DRAG_ACTIVATE_PX + 1, 100); + expect(row).not.toHaveClass("opacity-40"); + }); + + it("arms after ordinary sixteen-pixel hold drift", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + + startTouch(); + moveTouch(100, 116); + advanceHold(); + + expect(row).toHaveClass("scale-[1.01]"); + endTouch(100, 116); + }); + + it("arms at exactly 20px of hold drift", () => { + vi.useFakeTimers(); + renderSidebar(); + const { row } = touchTarget(); + + startTouch(); + moveTouch(112, 116); + advanceHold(); + + expect(row).toHaveClass("scale-[1.01]"); + endTouch(112, 116); + }); + + it("rejects 21px of hold drift below the scroll boundary", () => { + // A slow scroll drifts under the 25px scroll threshold but is not holding + // still. Arming here would capture the pointer and hand the gesture to + // dnd-kit, which preventDefaults the scroll away for the rest of the touch. + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + + startTouch(); + // Reach 21px before the timer: past hold tolerance, still short of scroll. + for (let step = 1; step <= 3; step += 1) { + advanceHold(90); + moveTouch(100, 100 + step * 7); + } + advanceHold(130); + + expect(row).not.toHaveClass("scale-[1.01]"); + expect(row).not.toHaveClass("opacity-40"); + endTouch(100, 121); + expect(screen.queryByTestId("rename-conversation")).toBeNull(); + }); + + it("leaves a normal-speed vertical flick to the list scroller", () => { + // Scrolling must stay native even though the finger starts on a row: the + // flick clears 25px within a frame, long before the hold could arm. + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + + startTouch(); + advanceHold(16); + expect(moveTouch(100, 125)).toBe(true); + advanceHold(600); + + expect(row).not.toHaveClass("scale-[1.01]"); + expect(row).not.toHaveClass("opacity-40"); + endTouch(100, 125); + expect(screen.queryByTestId("rename-conversation")).toBeNull(); + }); + + it("keeps a slow pre-hold horizontal gesture as a swipe", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + + startTouch(); + advanceHold(260); + moveTouch(94, 100); + advanceHold(80); + moveTouch(80, 100); + expect(row).not.toHaveClass("opacity-40"); + moveTouch(10, 100); + expect(row.querySelector("div.relative")?.style.marginRight).not.toBe(""); + endTouch(10, 100); + + expect(mocks.archive.mutate).toHaveBeenCalledWith( + { id: "conv_1", archived: true }, + expect.anything(), + ); + expect(screen.queryByTestId("rename-conversation")).toBeNull(); + }); + + it("yields vertical travel to native scroll with no other outcome", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + + startTouch(); + expect(moveTouch(100, 125)).toBe(true); + advanceHold(ROW_GESTURE_HOLD_MS + 1); + endTouch(100, 125); + + expect(row).not.toHaveClass("opacity-40"); + expect(screen.queryByTestId("rename-conversation")).toBeNull(); + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + }); + + it("assigns vertical-dominant travel exactly at the 25px boundary to scroll", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + + // The 15-20-25 triangle pins the Euclidean boundary with integer deltas. + startTouch(); + expect(moveTouch(115, 120)).toBe(true); + + // Decided here, at move time — not later by the hold's drift check. Turning + // back onto the horizontal axis must stay inert, which it only does if the + // gesture already resolved to scroll. + moveTouch(60, 120); + expect(row.querySelector("div.relative")?.style.marginRight).toBe(""); + + advanceHold(ROW_GESTURE_HOLD_MS + 1); + endTouch(60, 120); + + expect(row).not.toHaveClass("opacity-40"); + expect(screen.queryByTestId("rename-conversation")).toBeNull(); + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + }); + + it("stops tracking when a locked swipe reverses into an inert direction", () => { + vi.useFakeTimers(); + // Left archives; right is inert. Locking left then dragging back past the + // origin crosses into "none", which must not translate the row with an + // empty reveal behind it. + writeSwipeActions({ left: "archive", right: "none" }); + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + const surface = row.querySelector("div.relative"); + + startTouch(); + moveTouch(80, 100); + expect(surface?.style.marginRight).toBe("20px"); + + moveTouch(190, 100); + expect(surface?.style.marginLeft).toBe(""); + expect(surface?.style.marginRight).toBe(""); + + endTouch(190, 100); + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + }); + + it("keeps 24px below the explicit scroll boundary pending", () => { + vi.useFakeTimers(); + writeSwipeActions({ left: "archive", right: "archive" }); + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + const surface = row.querySelector("div.relative"); + + // The browser normally claims this through pan-y. Without pointercancel, + // the explicit fallback must remain pending until the exact 25px boundary. + startTouch(); + moveTouch(100, 124); + expect(surface?.style.marginRight).toBe(""); + moveTouch(10, 100); + expect(surface?.style.marginRight).not.toBe(""); + endTouch(10, 100); + + expect(mocks.archive.mutate).toHaveBeenCalledWith( + { id: "conv_1", archived: true }, + expect.anything(), + ); + }); + + it("keeps 11px horizontal travel below swipe activation", () => { + vi.useFakeTimers(); + writeSwipeActions({ left: "archive", right: "archive" }); + renderSidebar(); + const { row } = touchTarget(); + + startTouch(); + moveTouch(111, 100); + const surface = row.querySelector("div.relative"); + expect(surface?.style.marginLeft).toBe(""); + advanceHold(); + expect(row).toHaveClass("scale-[1.01]"); + endTouch(111, 100); + }); + + it("assigns exactly 12px horizontal travel to swipe", () => { + vi.useFakeTimers(); + writeSwipeActions({ left: "archive", right: "archive" }); + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + + startTouch(); + moveTouch(112, 100); + const surface = row.querySelector("div.relative"); + expect(surface?.style.marginLeft).toBe("12px"); + advanceHold(ROW_GESTURE_HOLD_MS + 1); + expect(row).not.toHaveClass("opacity-40"); + endTouch(112, 100); + + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + expect(screen.queryByTestId("rename-conversation")).toBeNull(); + }); + + it("arms touch drag on a wide viewport with a coarse pointer", () => { + vi.useFakeTimers(); + mocks.isMobile = false; + renderSidebar(); + const { row } = touchTarget(); + + startTouch(); + advanceHold(); + expect(row).toHaveClass("scale-[1.01]"); + moveTouch(100 + ROW_DRAG_ACTIVATE_PX, 100); + + expect(row).toHaveClass("opacity-40"); + endTouch(100 + ROW_DRAG_ACTIVATE_PX, 100); + }); + + it("leaves a short still press as plain link activation", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + const view = renderSidebar(); + const { link, row } = touchTarget(); + + startTouch(); + advanceHold(ROW_GESTURE_HOLD_MS - 1); + endTouch(); + fireEvent.click(link); + + expect(view.onClose).toHaveBeenCalledOnce(); + expect(row).not.toHaveClass("opacity-40"); + expect(screen.queryByTestId("rename-conversation")).toBeNull(); + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + }); + + it("does not swallow a mouse click after a desktop touch scroll gesture", () => { + vi.useFakeTimers(); + const view = renderSidebar(); + const { link } = touchTarget(); + + startTouch(); + moveTouch(80, 100); + endTouch(80, 100); + fireEvent.pointerDown(link, { + pointerType: "mouse", + button: 0, + isPrimary: true, + pointerId: 9, + }); + fireEvent.click(link); + + expect(view.onClose).toHaveBeenCalledOnce(); + }); + + it("selects a row on the first tap after a short swipe", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + startTouch(); + moveTouch(80, 100); + endTouch(80, 100); + fireEvent.click(screen.getByRole("button", { name: "Select sessions" })); + const { link } = touchTarget(); + fireEvent.pointerDown(link, { ...TOUCH_POINTER, clientX: 100, clientY: 100 }); + fireEvent.click(link); + + expect(screen.getByText("1 selected")).toBeInTheDocument(); + }); + + it("fully resets when the pointer is cancelled", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { link, row } = touchTarget(); + + startTouch(); + moveTouch(80, 100); + const surface = row.querySelector("div.relative"); + expect(surface?.style.marginRight).toBe("20px"); + fireEvent.pointerCancel(link, { ...TOUCH_POINTER, clientX: 80, clientY: 100 }); + fireEvent.touchCancel(link, { touches: [], changedTouches: [touchPoint(link, 80, 100)] }); + advanceHold(ROW_GESTURE_HOLD_MS + 1); + + expect(surface?.style.marginRight).toBe(""); + expect(row).not.toHaveClass("opacity-40"); + expect(screen.queryByTestId("rename-conversation")).toBeNull(); + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + }); + + it("rejects a second touch before drag activation", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { link, row } = touchTarget(); + + startTouch(); + fireEvent.pointerDown(link, { + pointerId: 2, + isPrimary: false, + pointerType: "touch", + clientX: 104, + clientY: 104, + }); + const touches = [touchPoint(link, 100, 100), touchPoint(link, 104, 104, 1)]; + fireEvent.touchStart(link, { touches, changedTouches: [touches[1]] }); + advanceHold(ROW_GESTURE_HOLD_MS + 1); + moveTouch(120, 100, 2); + + expect(row).not.toHaveClass("opacity-40"); + expect(screen.queryByTestId("rename-conversation")).toBeNull(); + fireEvent.pointerCancel(link, { ...TOUCH_POINTER, clientX: 120, clientY: 100 }); + }); + + it("cancels the first row when a second touch starts on another row", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + mockConversations([ + { ...CONV, id: "conv_a", title: "Session A" }, + { ...CONV, id: "conv_b", title: "Session B" }, + ]); + renderSidebar(); + const linkA = screen.getByRole("link", { name: /Session A/ }); + const linkB = screen.getByRole("link", { name: /Session B/ }); + const first = touchPoint(linkA, 100, 100); + const second = touchPoint(linkB, 104, 104, 1); + + fireEvent.pointerDown(linkA, { ...TOUCH_POINTER, clientX: 100, clientY: 100 }); + fireEvent.touchStart(linkA, { touches: [first], changedTouches: [first] }); + fireEvent.pointerDown(linkB, { ...SECOND_TOUCH_POINTER, clientX: 104, clientY: 104 }); + fireEvent.touchStart(linkB, { + touches: [first, second], + changedTouches: [second], + }); + + advanceHold(ROW_GESTURE_HOLD_MS + 1); + expect(linkA.closest("li")).not.toHaveClass("scale-[1.01]"); + fireEvent.pointerMove(linkA, { ...TOUCH_POINTER, clientX: 10, clientY: 100 }); + fireEvent.pointerUp(linkA, { ...TOUCH_POINTER, clientX: 10, clientY: 100 }); + + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + expect(screen.queryByRole("menu")).toBeNull(); + expect(linkA.closest("li")).not.toHaveClass("scale-[1.01]"); + }); + + it("cancels dnd-kit when a second touch starts on another row mid-drag", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + mockConversations([ + { ...CONV, id: "conv_a", title: "Session A" }, + { ...CONV, id: "conv_b", title: "Session B" }, + ]); + renderSidebar(); + const linkA = screen.getByRole("link", { name: /Session A/ }); + const linkB = screen.getByRole("link", { name: /Session B/ }); + const rowA = linkA.closest("li")!; + const first = touchPoint(linkA, 100, 100); + const moved = touchPoint(linkA, 100 + ROW_DRAG_ACTIVATE_PX, 100); + + fireEvent.pointerDown(linkA, { ...TOUCH_POINTER, clientX: 100, clientY: 100 }); + fireEvent.touchStart(linkA, { touches: [first], changedTouches: [first] }); + advanceHold(); + fireEvent.pointerMove(linkA, { + ...TOUCH_POINTER, + clientX: 100 + ROW_DRAG_ACTIVATE_PX, + clientY: 100, + }); + fireEvent.touchMove(linkA, { touches: [moved], changedTouches: [moved] }); + expect(rowA).toHaveClass("opacity-40"); + + const second = touchPoint(linkB, 104, 104, 1); + fireEvent.pointerDown(linkB, { ...SECOND_TOUCH_POINTER, clientX: 104, clientY: 104 }); + fireEvent.touchStart(linkB, { + touches: [moved, second], + changedTouches: [second], + }); + + expect(rowA).not.toHaveClass("opacity-40"); + expect(screen.queryByRole("menu")).toBeNull(); + }); + + it("cancels dnd-kit when a second touch joins the active row", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { link, row } = touchTarget(); + + startTouch(); + advanceHold(); + moveTouch(100 + ROW_DRAG_ACTIVATE_PX, 100); + expect(row).toHaveClass("opacity-40"); + + fireEvent.pointerDown(link, { ...SECOND_TOUCH_POINTER, clientX: 104, clientY: 104 }); + + expect(row).not.toHaveClass("opacity-40"); + expect(screen.queryByRole("menu")).toBeNull(); + }); + + // Chrome samples touch-action at touchstart; the armed-state touch-none + // class swap can't retroactively stop an in-flight pan. Only a real native + // non-passive touchmove listener, held from arm to full reset, forestalls it. + describe("native touchmove guard", () => { + function nativeTouchMove() { + const event = new Event("touchmove", { bubbles: true, cancelable: true }); + document.dispatchEvent(event); + return event; + } + + it("does not guard before the hold arms", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const addSpy = vi.spyOn(document, "addEventListener"); + + startTouch(); + expect(addSpy).not.toHaveBeenCalledWith("touchmove", expect.any(Function), { + passive: false, + }); + expect(nativeTouchMove().defaultPrevented).toBe(false); + endTouch(); + addSpy.mockRestore(); + }); + + it("registers the guard exactly when armed and removes it on release", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const addSpy = vi.spyOn(document, "addEventListener"); + const removeSpy = vi.spyOn(document, "removeEventListener"); + + startTouch(); + advanceHold(); + expect(addSpy).toHaveBeenCalledWith("touchmove", expect.any(Function), { passive: false }); + const touchmoveAdds = addSpy.mock.calls.filter((call) => call[0] === "touchmove"); + expect(touchmoveAdds).toHaveLength(1); + expect(removeSpy).not.toHaveBeenCalledWith( + "touchmove", + expect.any(Function), + expect.anything(), + ); + + endTouch(); + expect(removeSpy).toHaveBeenCalledWith("touchmove", expect.any(Function), { passive: false }); + addSpy.mockRestore(); + removeSpy.mockRestore(); + }); + + it("preventDefaults a cancelable touchmove while armed and through drag", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + + startTouch(); + advanceHold(); + expect(nativeTouchMove().defaultPrevented).toBe(true); + + moveTouch(100 + ROW_DRAG_ACTIVATE_PX, 100); + expect(nativeTouchMove().defaultPrevented).toBe(true); + endTouch(100 + ROW_DRAG_ACTIVATE_PX, 100); + }); + + it("removes the guard on pointercancel", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { link } = touchTarget(); + + startTouch(); + advanceHold(); + const removeSpy = vi.spyOn(document, "removeEventListener"); + fireEvent.pointerCancel(link, { ...TOUCH_POINTER, clientX: 100, clientY: 100 }); + fireEvent.touchCancel(link, { touches: [], changedTouches: [touchPoint(link, 100, 100)] }); + + expect(removeSpy).toHaveBeenCalledWith("touchmove", expect.any(Function), { passive: false }); + expect(nativeTouchMove().defaultPrevented).toBe(false); + removeSpy.mockRestore(); + }); + + it("removes the guard when a second touch cancels the gesture", () => { + vi.useFakeTimers(); + mocks.isMobile = true; + renderSidebar(); + const { link } = touchTarget(); + + startTouch(); + advanceHold(); + const removeSpy = vi.spyOn(document, "removeEventListener"); + fireEvent.pointerDown(link, { ...SECOND_TOUCH_POINTER, clientX: 104, clientY: 104 }); + + expect(removeSpy).toHaveBeenCalledWith("touchmove", expect.any(Function), { passive: false }); + expect(nativeTouchMove().defaultPrevented).toBe(false); + removeSpy.mockRestore(); + }); + }); +}); + +describe("touch swipe actions", () => { + beforeEach(() => { + mocks.hasCoarsePointer = true; + }); + + // jsdom has no real touch, so drive the gesture with pointer events. The row + // recognizer gates on a primary touch pointer; pair each pointer event with + // its touch event so the real dnd-kit activator also sees the sequence. + + function swipeRow(dx: number) { + startTouch(); + // First move locks the axis; the second carries it past the commit point. + moveTouch(100 + Math.sign(dx) * 20, 100); + moveTouch(100 + dx, 100); + endTouch(100 + dx, 100); + } + + it("runs the archive path when swiping the archive-configured direction", () => { + // Default: swipe-left → archive. Swipe left past the commit threshold. + mocks.isMobile = true; + renderSidebar(); + + swipeRow(-90); + + // Archiving is a single PATCH — the server stops the runner once the flag + // commits, so a client-side stop would race it (see runArchive). + expect(mocks.archive.mutate).toHaveBeenCalledWith( + { id: "conv_1", archived: true }, + expect.anything(), + ); + expect(mocks.stopSession.mutate).not.toHaveBeenCalled(); + // Archive never routes through delete. + expect(mocks.del.mutate).not.toHaveBeenCalled(); + }); + + it("commits on a wide viewport with a coarse pointer", () => { + mocks.isMobile = false; + renderSidebar(); + + swipeRow(-90); + + expect(mocks.archive.mutate).toHaveBeenCalledWith( + { id: "conv_1", archived: true }, + expect.anything(), + ); + }); + + it("opens the delete confirm dialog (no immediate delete) when swiping the delete direction", () => { + // Map swipe-right → delete, then swipe right. + writeSwipeActions({ left: "archive", right: "delete" }); + mocks.isMobile = true; + renderSidebar(); + + swipeRow(90); + + // The confirm dialog opens — delete stays behind it, so no mutation yet. + expect(screen.getByText("Delete conversation?")).toBeInTheDocument(); + expect(mocks.del.mutate).not.toHaveBeenCalled(); + + // Confirming in the dialog fires the same delete the kebab flow uses. + fireEvent.click(screen.getByRole("button", { name: "Delete" })); + expect(mocks.del.mutate).toHaveBeenCalledWith( + { id: "conv_1", deleteBranch: false }, + expect.anything(), + ); + }); + + it("does nothing when swiping a direction mapped to none", () => { + // Default: swipe-right → none. Swipe right; nothing should fire. + mocks.isMobile = true; + renderSidebar(); + + swipeRow(90); + + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + expect(mocks.del.mutate).not.toHaveBeenCalled(); + expect(screen.queryByText("Delete conversation?")).toBeNull(); + }); + + it("supports both directions mapped to the same action", () => { + // Both directions archive — a swipe either way runs the archive path. + writeSwipeActions({ left: "archive", right: "archive" }); + mocks.isMobile = true; + renderSidebar(); + + swipeRow(90); + expect(mocks.archive.mutate).toHaveBeenCalledWith( + { id: "conv_1", archived: true }, + expect.anything(), + ); + + mocks.archive.mutate.mockClear(); + swipeRow(-90); + expect(mocks.archive.mutate).toHaveBeenCalledWith( + { id: "conv_1", archived: true }, + expect.anything(), + ); + }); + + it("commits a fast flick from the release position before React renders", () => { + mocks.isMobile = true; + renderSidebar(); + const { link } = touchTarget(); + startTouch(200, 100); + + act(() => { + for (const x of [180, 100]) { + const touch = touchPoint(link, x, 100); + fireEvent.pointerMove(link, { ...TOUCH_POINTER, clientX: x, clientY: 100 }); + fireEvent.touchMove(link, { touches: [touch], changedTouches: [touch] }); + } + const touch = touchPoint(link, 100, 100); + fireEvent.pointerUp(link, { ...TOUCH_POINTER, clientX: 100, clientY: 100 }); + fireEvent.touchEnd(link, { touches: [], changedTouches: [touch] }); + }); + + expect(mocks.archive.mutate).toHaveBeenCalledWith( + { id: "conv_1", archived: true }, + expect.anything(), + ); + }); + + it("keeps the committed swipe action when a concurrent render is abandoned", () => { + mocks.isMobile = true; + const view = renderSidebar(); + const abandonedArchive = { mutate: vi.fn() }; + const { link } = touchTarget(); + startTouch(200, 100); + + mocks.archiveOverride = abandonedArchive; + mocks.suspendDraggable = true; + act(() => { + startTransition(() => view.rerenderSidebar()); + }); + expect(screen.queryByTestId("suspended-sidebar")).toBeNull(); + + for (const x of [180, 100]) { + const touch = touchPoint(link, x, 100); + fireEvent.pointerMove(link, { ...TOUCH_POINTER, clientX: x, clientY: 100 }); + fireEvent.touchMove(link, { touches: [touch], changedTouches: [touch] }); + } + const touch = touchPoint(link, 100, 100); + fireEvent.pointerUp(link, { ...TOUCH_POINTER, clientX: 100, clientY: 100 }); + fireEvent.touchEnd(link, { touches: [], changedTouches: [touch] }); + mocks.suspendDraggable = false; + + expect(mocks.archive.mutate).toHaveBeenCalledWith( + { id: "conv_1", archived: true }, + expect.anything(), + ); + expect(abandonedArchive.mutate).not.toHaveBeenCalled(); + }); + + it("does not commit after a flick returns below the threshold before release", () => { + mocks.isMobile = true; + renderSidebar(); + const { link } = touchTarget(); + startTouch(200, 100); + + act(() => { + for (const x of [100, 190]) { + const touch = touchPoint(link, x, 100); + fireEvent.pointerMove(link, { ...TOUCH_POINTER, clientX: x, clientY: 100 }); + fireEvent.touchMove(link, { touches: [touch], changedTouches: [touch] }); + } + const touch = touchPoint(link, 190, 100); + fireEvent.pointerUp(link, { ...TOUCH_POINTER, clientX: 190, clientY: 100 }); + fireEvent.touchEnd(link, { touches: [], changedTouches: [touch] }); + }); + + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + expect(mocks.del.mutate).not.toHaveBeenCalled(); + }); + + it("resists travel past commit and caps the row offset", () => { + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + const surface = row.querySelector("div.relative")!; + + startTouch(400, 100); + moveTouch(340, 100); + expect(surface.style.marginRight).toBe("60px"); + moveTouch(100, 100); + expect(surface.style.marginRight).toBe("96px"); + endTouch(100, 100); + + expect(mocks.archive.mutate).toHaveBeenCalledWith( + { id: "conv_1", archived: true }, + expect.anything(), + ); + }); + + it("applies one-third resistance immediately past the commit distance", () => { + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + const surface = row.querySelector("div.relative")!; + + startTouch(100, 100); + moveTouch(10, 100); + + expect(surface.style.marginRight).toBe("78px"); + endTouch(10, 100); + }); + + it("ignores touch gestures that bubble from a portalled dialog", () => { + mocks.isMobile = true; + renderSidebar(); + const { row } = touchTarget(); + const surface = row.querySelector("div.relative")!; + + fireEvent.pointerDown(screen.getByTestId("conversation-actions"), { button: 0 }); + fireEvent.click(screen.getByTestId("delete-conversation")); + const confirm = screen.getByRole("button", { name: "Delete" }); + fireEvent.pointerDown(confirm, { ...TOUCH_POINTER, clientX: 100, clientY: 100 }); + fireEvent.pointerMove(confirm, { ...TOUCH_POINTER, clientX: 10, clientY: 100 }); + fireEvent.pointerUp(confirm, { ...TOUCH_POINTER, clientX: 10, clientY: 100 }); + + expect(surface.style.marginLeft).toBe(""); + expect(surface.style.marginRight).toBe(""); + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + expect(mocks.del.mutate).not.toHaveBeenCalled(); + }); + + it("does not fire the action for a short swipe below the commit threshold", () => { + mocks.isMobile = true; + renderSidebar(); + + // Past the activation lock (20px) but short of the commit distance (72px). + swipeRow(-40); + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + }); + + it("commits at exactly 72px but not at 71px", () => { + mocks.isMobile = true; + renderSidebar(); + + swipeRow(-71); + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + + swipeRow(-72); + expect(mocks.archive.mutate).toHaveBeenCalledWith( + { id: "conv_1", archived: true }, + expect.anything(), + ); + }); + + it("ignores touch gestures without a coarse pointer", () => { + vi.useFakeTimers(); + mocks.hasCoarsePointer = false; + renderSidebar(); + + swipeRow(-90); + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + + const { row } = touchTarget(); + startTouch(); + act(() => vi.advanceTimersByTime(ROW_GESTURE_HOLD_MS)); + moveTouch(101, 100); + expect(row).not.toHaveClass("scale-[1.01]"); + expect(row).not.toHaveClass("opacity-40"); + endTouch(101, 100); + }); + + it("ignores non-touch pointers (pen/stylus/mouse) on mobile", () => { + // The gesture is touch-only. Swipe LEFT, which is configured to archive, so + // the direction itself can't be what makes this inert — and assert the row + // never moves, not just that no mutation fired. + vi.useFakeTimers(); + writeSwipeActions({ left: "archive", right: "archive" }); + mocks.isMobile = true; + renderSidebar(); + + const link = screen.getByRole("link", { name: /My Session/ }); + const li = link.closest("li")!; + const surface = li.querySelector("div.relative"); + const pen = { pointerId: 1, isPrimary: true, pointerType: "pen" as const }; + fireEvent.pointerDown(li, { ...pen, clientX: 100, clientY: 100 }); + fireEvent.pointerMove(li, { ...pen, clientX: 80, clientY: 100 }); + fireEvent.pointerMove(li, { ...pen, clientX: 10, clientY: 100 }); + + // No translate, and holding a pen still never arms the long-press. + expect(surface?.style.marginRight).toBe(""); + act(() => vi.advanceTimersByTime(ROW_GESTURE_HOLD_MS + 1)); + expect(li).not.toHaveClass("scale-[1.01]"); + + fireEvent.pointerUp(li, { ...pen, clientX: 10, clientY: 100 }); + + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + expect(mocks.del.mutate).not.toHaveBeenCalled(); + expect(screen.queryByTestId("rename-conversation")).toBeNull(); + }); + + it("yields a primarily-vertical drag to scroll (no action)", () => { + // A mostly-vertical move is scroll intent — the gesture bails and never + // fires, even though it travels well past the commit distance horizontally. + mocks.isMobile = true; + renderSidebar(); + + const li = screen.getByRole("link", { name: /My Session/ }).closest("li")!; + fireEvent.pointerDown(li, { ...TOUCH_POINTER, clientX: 100, clientY: 100 }); + // First move is dominated by the vertical axis → decided="other". + fireEvent.pointerMove(li, { ...TOUCH_POINTER, clientX: 105, clientY: 140 }); + fireEvent.pointerMove(li, { ...TOUCH_POINTER, clientX: 10, clientY: 180 }); + fireEvent.pointerUp(li, { ...TOUCH_POINTER, clientX: 10, clientY: 180 }); + + expect(mocks.archive.mutate).not.toHaveBeenCalled(); + expect(mocks.del.mutate).not.toHaveBeenCalled(); + }); +}); + describe("sharing kill switch", () => { it("disables the row's Share item for a manager when sharing_mode is off", () => { // CONV is owner-level (permission_level null → canManage), yet a server diff --git a/web/src/shell/Sidebar.tsx b/web/src/shell/Sidebar.tsx index 2c9890aedf..c10439eba9 100644 --- a/web/src/shell/Sidebar.tsx +++ b/web/src/shell/Sidebar.tsx @@ -60,7 +60,6 @@ import { MeasuringStrategy, MouseSensor, pointerWithin, - TouchSensor, useDraggable, useDroppable, useSensor, @@ -149,10 +148,19 @@ import { useUnseenTick, } from "@/hooks/useUnseenConversations"; import { cn } from "@/lib/utils"; +import { type SwipeAction, useSwipeActions } from "@/lib/swipeActionPreferences"; +import { useCoarsePointer } from "@/hooks/useCoarsePointer"; import { useIsMobileViewport } from "@/hooks/useIsMobileViewport"; import { useResizableSidebar } from "@/hooks/useResizableSidebar"; import { useSessionSwitchHotkey } from "@/hooks/useSessionSwitchHotkey"; import { usePinnedSessionHotkeys } from "@/hooks/usePinnedSessionHotkeys"; +import { + finishActiveRowGesture, + ROW_MENU_SYNTHETIC, + ROW_SWIPE_COMMIT_PX, + RowGestureTouchSensor, + useRowGesture, +} from "@/hooks/useRowGesture"; import { isCurrentServerLocal } from "@/lib/serverOrigin"; import { NewProjectButton } from "./NewProjectButton"; import { SettingsSidebarBody, useSettingsRoute, useTrackSettingsReturn } from "./settingsNav"; @@ -187,6 +195,8 @@ const SIDEBAR_HOVER_HIGHLIGHT = "hover:bg-muted hover:text-foreground dark:hover const SIDEBAR_ACTIVE_HIGHLIGHT = "bg-[var(--sidebar-active)] text-[var(--sidebar-active-foreground)] hover:bg-[var(--sidebar-active)] hover:text-[var(--sidebar-active-foreground)] dark:hover:bg-[var(--sidebar-active)] dark:hover:text-[var(--sidebar-active-foreground)]"; const DROP_TARGET_HIGHLIGHT = SIDEBAR_ACTIVE_HIGHLIGHT; +// Shared sizing for the sidebar's dropdown / context menus so they can't drift. +const SIDEBAR_MENU_CONTENT_CLASS = "min-w-40"; // Maps a first-class project id → its name, provided once at the list level so // each row resolves its ``project_id`` to a folder name without its own @@ -1066,6 +1076,10 @@ function ProjectFolder({ data: { type: "project", name }, }); + // One set of rename / settings / delete dialogs, driven by both the header + // kebab and the header's right-click / long-press context menu. + const { actions: menuActions, dialogs: menuDialogs } = useProjectFolderMenu(name, projectId); + return (
+ + } + headerContextMenu={ + + + } footer={ loadingFirstPage ? ( @@ -1115,6 +1139,7 @@ function ProjectFolder({ ) } /> + {menuDialogs}
); } @@ -1470,12 +1495,11 @@ function ConversationList({ project: string | null; isPinned: boolean; } | null>(null); - // Mouse: a small drag threshold so a plain click still navigates / opens the - // kebab. Touch: a press-and-hold delay so scrolling the list isn't hijacked - // into a drag. Keyboard users use the kebab menu instead (no KeyboardSensor). + // Mouse keeps its click-safe distance. Touch is activated only after the row + // recognizer resolves a held-and-moved finger to drag. const sensors = useSensors( useSensor(MouseSensor, { activationConstraint: { distance: 5 } }), - useSensor(TouchSensor, { activationConstraint: { delay: 250, tolerance: 8 } }), + useSensor(RowGestureTouchSensor), ); const handleDragStart = useCallback((event: DragStartEvent) => { const data = event.active.data.current as @@ -1490,6 +1514,7 @@ function ConversationList({ const handleDragEnd = useCallback( (event: DragEndEvent) => { const dragged = activeDrag; + finishActiveRowGesture(); setActiveDrag(null); if (!dragged) return; const target = (event.over?.data.current as SidebarDropTarget | undefined) ?? null; @@ -1717,7 +1742,10 @@ function ConversationList({ measuring={{ droppable: { strategy: MeasuringStrategy.Always } }} onDragStart={handleDragStart} onDragEnd={handleDragEnd} - onDragCancel={() => setActiveDrag(null)} + onDragCancel={() => { + finishActiveRowGesture(); + setActiveDrag(null); + }} >
void; + /** Optional {@link ContextMenuContent} opened by right-clicking (desktop) or + long-pressing (touch) the header button — the folder-menu parity path. + Radix's own trigger supplies both gestures, so no gesture code lives here. */ + contextMenu?: ReactNode; + /** Suppresses the context menu (bulk-selection mode owns the rows). */ + contextMenuDisabled?: boolean; }) { - return ( -

- + ); + + // Right-click / long-press parity with the kebab. The trigger wraps the header + // BUTTON only — not the section — so a nested session row keeps its own menu. + // Radix preventDefaults the native contextmenu and arms a 700ms touch + // long-press itself, so both gestures come free; no `style` prop is passed, + // which would clobber its WebkitTouchCallout. + return ( +

+ {contextMenu && !contextMenuDisabled ? ( + { + if (open) { + swallowClickRef.current = longPressPointerRef.current; + longPressPointerRef.current = false; + } else { + // A long-press's trailing click lands while the menu is open; a + // gesture with no trailing click (pen right-click, touch release + // over the menu) must not strand the swallow past the close. + swallowClickRef.current = false; + } + }} + > + {button} + {contextMenu} + + ) : ( + button + )}

); } @@ -2241,7 +2334,7 @@ function ProjectHeaderActions({ - + {/* Gated independently: each hides only when it would be a no-op, so a mixed set offers both. */} {showExpandControls && !allExpanded && ( @@ -2341,6 +2434,7 @@ function ConversationSection({ emptyMessage, indentRows, headerAction, + headerContextMenu, afterHeader, footer, onProjectAssigned, @@ -2367,6 +2461,10 @@ function ConversationSection({ /** Optional control overlaid at the header's right edge (e.g. a project's kebab). Hover/focus-revealed on desktop, always shown on mobile. */ headerAction?: ReactNode; + /** Optional {@link ContextMenuContent} for the header itself — the same + actions as `headerAction`'s kebab, reached by right-click or long-press. + Suppressed in selection mode, matching the session rows. */ + headerContextMenu?: ReactNode; /** Optional content rendered directly under the header, above the rows (and shown even when collapsed) — e.g. the bulk-selection action bar. */ afterHeader?: ReactNode; @@ -2393,6 +2491,9 @@ function ConversationSection({ hasAction={headerAction != null} collapsed={isCollapsed} onToggleCollapsed={onToggleCollapsed} + contextMenu={headerContextMenu} + // Selection mode owns the rows, so the header menu is suppressed. + contextMenuDisabled={selectionMode} /> {headerAction && (
@@ -2454,6 +2555,8 @@ interface MenuItemProps { className?: string; disabled?: boolean; variant?: "default" | "destructive"; + // Renders the item as its child element (e.g. a router ). + asChild?: boolean; // Radix's menu `onSelect` receives a native Event in both families. onSelect?: (event: Event) => void; "data-testid"?: string; @@ -2556,6 +2659,7 @@ function ConversationMenuItems({ // to the side. `view` swaps between the main actions and that sub-view; // desktop always renders the native side-flyout submenu regardless. const isMobile = useIsMobileViewport(); + const hasCoarsePointer = useCoarsePointer(); const [view, setView] = useState<"main" | "projects">("main"); // The project pick / create / remove flow — shared verbatim by the desktop @@ -2608,13 +2712,13 @@ function ConversationMenuItems({ return ( <> - {/* Pin/Unpin — mobile-only (md:hidden); desktop uses the - hover-revealed quick-pin button. Archived rows omit it (archive - outranks pin). */} + {/* Pin/Unpin — desktop uses the hover-revealed quick-pin button, but a + coarse-pointer device has no hover at any width, so the menu keeps + the item there. Archived rows omit it (archive outranks pin). */} {!isArchived && ( onTogglePinned(conversation.id)} > {isPinned ? : } @@ -2909,6 +3013,7 @@ function ConversationRow({ // project flyout's HoverCard and leave it lingering over the chat. Gate the // flyout off below the `md` breakpoint (see `projectFlyoutName`). const isMobile = useIsMobileViewport(); + const hasCoarsePointer = useCoarsePointer(); // Track the *live* active conversation id. Delete is fire-and-forget, // so the user can navigate to another conversation before the mutation // resolves — the onSuccess redirect must key off where they are now, @@ -2921,6 +3026,7 @@ function ConversationRow({ // session navigated to via `/c/:id`), scroll it toward the center of the // sidebar so it's comfortably in view rather than pinned to an edge. const rowRef = useRef(null); + const rowLinkRef = useRef(null); useEffect(() => { if (!isActive) return; rowRef.current?.scrollIntoView({ behavior: "smooth", block: "center" }); @@ -2953,6 +3059,9 @@ function ConversationRow({ // The kebab menu is controlled so the project submenu can close the whole // menu after a pick (a plain click inside the submenu wouldn't otherwise). const [menuOpen, setMenuOpen] = useState(false); + // Close the row menu directly so an armed touch never sends Escape through + // dnd-kit's document-level sensor listeners. + const [contextMenuOpen, setContextMenuOpen] = useState(false); // Opt-in "delete local branch" checkbox (worktree sessions only). const [deleteBranch, setDeleteBranch] = useState(false); const [shareOpen, setShareOpen] = useState(false); @@ -3044,21 +3153,82 @@ function ConversationRow({ ? { kind: "unseen" as const } : (derivedState ?? (isStartingUp ? { kind: "starting" as const } : null)); - // Drag-and-drop: a row is grabbable when the viewer owns it (re-filing is - // owner-only, like the Move-to-project kebab item), outside selection / - // archive / rename modes. Dragging it onto a project folder files it there; - // onto "Chats" unfiles it; onto "Pinned" pins it. The list-level - // routes the drop; the row only advertises itself and its source project + - // pinned state via the draggable `data`. + // Touch swipe → archive/delete. `useSwipeActions` is a live subscription, so + // changing Settings updates open rows without a remount. + const swipeActions = useSwipeActions(); + const swipeActionRef = useRef<(action: Exclude) => void>(() => {}); + useEffect(() => { + swipeActionRef.current = (action: Exclude) => { + if (action === "archive") runArchive(); + else setDeleteOpen(true); + }; + }); + const onSwipeAction = useCallback((action: Exclude) => { + swipeActionRef.current(action); + }, []); + const gestureEnabled = hasCoarsePointer && !selectionMode && !isEditing; + const swipeEnabled = gestureEnabled && isOwner; + const dragEnabled = isOwner && !selectionMode && !isArchived && !isEditing; + const openContextMenuAt = useCallback((point: { clientX: number; clientY: number }) => { + const event = new globalThis.MouseEvent("contextmenu", { + bubbles: true, + cancelable: true, + button: 2, + clientX: point.clientX, + clientY: point.clientY, + }); + // Tagged so the row root can tell this dispatch apart from the OS's own + // long-press contextmenu, which it must suppress mid-gesture. + Object.assign(event, { [ROW_MENU_SYNTHETIC]: true }); + rowLinkRef.current?.dispatchEvent(event); + }, []); + const dismissContextMenu = useCallback(() => { + setContextMenuOpen(false); + }, []); + const gesture = useRowGesture({ + enabled: gestureEnabled, + swipeEnabled, + dragEnabled: hasCoarsePointer && dragEnabled, + actions: swipeActions, + onAction: onSwipeAction, + onLongPress: openContextMenuAt, + onDragStart: dismissContextMenu, + }); + + // The recognizer state travels with this draggable, so the static touch + // activator can make the decision for the row that received the event. const { listeners: dragListeners, setNodeRef: setDragNodeRef, isDragging, } = useDraggable({ id: conversation.id, - data: { type: "session", label, project: currentProject, isPinned }, - disabled: !isOwner || selectionMode || isArchived || isEditing, + data: { + type: "session", + label, + project: currentProject, + isPinned, + rowGesture: gesture.dndData, + }, + disabled: !dragEnabled, }); + const rowGestureListeners = gesture.listeners(dragListeners); + // The menu render branches below are mutually exclusive; switching branches + // remounts the ContextMenu, and a stale open=true would reopen the fresh + // menu anchored at the viewport corner. Reset during render (not in an + // effect) so the remounted menu never paints open. + const menuBranch = selectionMode + ? "none" + : projectFlyoutName + ? "flyout" + : isMobile + ? "mobile" + : "desktop"; + const [prevMenuBranch, setPrevMenuBranch] = useState(menuBranch); + if (prevMenuBranch !== menuBranch) { + setPrevMenuBranch(menuBranch); + if (contextMenuOpen) setContextMenuOpen(false); + } // A drag ends with a synthetic click on the row's (mousedown + mouseup // on the same anchor still fires a click); swallow that one click so a drag // doesn't also navigate into the session. Flagged when a drag finishes, @@ -3220,8 +3390,23 @@ function ConversationRow({ // mode) or wrapped in the right-click ContextMenuTrigger below. const rowLink = ( { + if (e.pointerType === "touch") e.preventDefault(); + }} + onContextMenu={(e) => { + if (isDragging) e.preventDefault(); + }} className={cn( SIDEBAR_ROW, "relative flex flex-col justify-center text-left text-foreground transition-colors", @@ -3243,8 +3428,8 @@ function ConversationRow({ )} onClick={(e) => { recentClickTimesRef.current = [...recentClickTimesRef.current.slice(-1), performance.now()]; - // Swallow the click that trails a drag so it doesn't navigate. - if (justDraggedRef.current) { + // Swallow the click that trails a resolved touch gesture or drag. + if (gesture.consumeClick() || justDraggedRef.current) { e.preventDefault(); return; } @@ -3287,15 +3472,114 @@ function ConversationRow({ ); + // The action revealed behind the row for the direction currently being + // swiped, and whether the drag has passed the commit point (drives the hint's + // icon and tint). `isSwiping` gates every bit of swipe-only markup/styling, so + // a row at rest renders exactly as it did before the gesture existed. + const swipingAction: SwipeAction = + gesture.dx < 0 ? swipeActions.left : gesture.dx > 0 ? swipeActions.right : "none"; + const isSwiping = gesture.dx !== 0 && swipingAction !== "none"; + const swipeCommitted = Math.abs(gesture.dx) >= ROW_SWIPE_COMMIT_PX; + // A held or dragging row owns the pointer outright, so no axis stays native. + const ownsPointer = gesture.phase === "armed" || gesture.phase === "drag"; + return ( // Drag props on the
  • so the whole row is grabbable; `isDragging` dims // it. `setRowRef` merges the drag node ref with the scroll-into-view ref.
  • { + if (ROW_MENU_SYNTHETIC in e.nativeEvent) return; + if (ownsPointer || isDragging) e.preventDefault(); + }} + className={cn( + "group relative", + isDragging && "opacity-40", + gesture.phase === "armed" && "z-10 scale-[1.01] shadow-sm", + // Keep vertical scrolling native while claiming the horizontal axis for + // the swipe: without this the browser can take the horizontal pan (or + // back-navigation gesture) and cancel the gesture mid-drag. Only where + // a swipe can actually fire, so rows without one keep default behavior. + swipeEnabled && !ownsPointer && "touch-pan-y", + ownsPointer && "touch-none", + )} > - {/* Right-click anywhere on the row opens the same actions as the kebab. + {/* Swipe reveal hint: sits behind the moving surface, showing the + configured action's icon on the side being revealed. Inert (no pointer + events) and only rendered mid-swipe, so at rest the row markup is + exactly what it was before the gesture existed. + Archive uses the accent pair (blue in both modes) rather than + `--primary`, which is near-black in light mode and reads as a flat grey + button instead of a revealed surface. Passing the commit threshold + deepens the tint and scales the glyph, so "will fire on release" isn't + carried by color alone. */} + {isSwiping && ( +
    0 ? "justify-start" : "justify-end", + "transition-colors", + swipingAction === "delete" + ? swipeCommitted + ? "bg-destructive/20 text-destructive" + : "bg-destructive/10 text-destructive/70" + : swipeCommitted + ? "bg-accent text-accent-foreground" + : "bg-accent/50 text-accent-foreground/70", + )} + > + + {swipingAction === "delete" ? ( + + ) : isArchived ? ( + // Archiving toggles, so on an archived row the gesture restores — + // mirror the kebab's Unarchive glyph rather than promising a re-archive. + + ) : ( + + )} + +
    + )} + {/* Moving surface: the WHOLE row — link, session-state badge, and the + pin/kebab controls — moves together, so the trailing icons travel with + the text instead of the text sliding out from under them. + It INSETS from the swiped edge rather than translating: a translate + would push the title past the panel boundary and cut it mid-word (the + hint needs ~48px of gap, but the title only has ~18px of slack). An + inset re-truncates the title with its existing ellipsis instead, and + keeps every row control inside the panel. + `bg-sidebar` only while mid-swipe: an unconditional background would + plate every row and cover the sidebar canvas. */} +
    + {/* Right-click anywhere on the row opens the same actions as the kebab. Suppressed in selection mode (bulk-select owns the row), where the bare link is rendered instead. ContextMenuTrigger preventDefaults the native contextmenu event, so right-click never navigates; asChild @@ -3304,10 +3588,38 @@ function ConversationRow({ hovering surfaces the project flyout — the trigger sits innermost so both the context menu and the hover card keep their handlers/refs on the Link. */} - {selectionMode ? ( - projectFlyoutName ? ( + {selectionMode ? ( + projectFlyoutName ? ( + + {rowLink} + + + ) : isMobile ? ( + rowLink + ) : ( + + {rowLink} + + + ) + ) : projectFlyoutName ? ( - {rowLink} + + + {rowLink} + + + {}} + {...menuItemProps} + /> + + ) : isMobile ? ( - rowLink - ) : ( - - {rowLink} - - - ) - ) : projectFlyoutName ? ( - - - - {rowLink} - - - {}} - {...menuItemProps} - /> - - - - - ) : isMobile ? ( - - {rowLink} - - {}} - {...menuItemProps} - /> - - - ) : ( - - - -
    - {rowLink} -
    -     + + {rowLink} - -     - )} - {selectionMode ? ( - - {isSelected ? ( - - ) : ( - - )} - - ) : sessionState !== null ? ( - - - - ) : null} - {/* Trailing controls (pin + kebab) share one absolutely-positioned flex - row, so their spacing is defined once (gap-0.5) and stays aligned - with the project-folder header actions, which use the same pattern. - The kebab is the rightmost child (pinned to right-1); the pin sits a - gap to its left. Hidden entirely while selecting (bulk mode owns the - row controls). */} - {!selectionMode && ( -
    - {/* Archived rows omit the pin entirely: pinning is meaningless there - (archive outranks pin), so there's no pin action even on hover. */} - {!isArchived && ( - - )} - - + ) : ( + + + +
    + {rowLink} +
    +     + + {}} + {...menuItemProps} + /> + +     + +     + )} + {selectionMode ? ( + + {isSelected ? ( + + ) : ( + + )} + + ) : sessionState !== null ? ( + + + + ) : null} + {/* Trailing controls (pin + kebab) share one absolutely-positioned flex + row, so their spacing is defined once (gap-0.5) and stays aligned + with the project-folder header actions, which use the same pattern. + The kebab is the rightmost child (pinned to right-1); the pin sits a + gap to its left. Hidden entirely while selecting (bulk mode owns the + row controls). */} + {!selectionMode && ( +
    + {/* Archived rows omit the pin entirely: pinning is meaningless there + (archive outranks pin), so there's no pin action even on hover. */} + {!isArchived && ( - - - - - -
    - )} + )} + + + + + + + + +
    + )} +
    • ); } @@ -3789,23 +4073,86 @@ function ProjectFolderActions({ // ── ProjectFolderMenu ───────────────────────────────────────────────────────── /** - * The kebab on a project-folder header: "Rename project" (O(1) via - * `PATCH /v1/projects/{id}` for a first-class project; promotes a label-only - * folder on demand) and "Delete project" (archives + unfiles all members, then - * removes the container). Delete is confirmed since it archives sessions. + * The project-folder action menu body — authored once and rendered under both + * the header kebab {@link DropdownMenu} and the header's right-click / + * long-press {@link ContextMenu}, via the {@link MenuComponents} bundle, so the + * two menus stay identical (mirrors {@link ConversationMenuItems} for rows). */ -function ProjectFolderMenu({ +function ProjectFolderMenuItems({ + components: C, projectName, - projectId, onNavigate, + actions, }: { + components: MenuComponents; projectName: string; - projectId: string | null; /** Nav handler for the mobile-only "New session" item (desktop uses the hover-revealed pencil). Closes the sidebar overlay on mobile. */ onNavigate: (e: MouseEvent) => void; + actions: ProjectFolderMenuActions; }) { - const [menuOpen, setMenuOpen] = useState(false); + const hasCoarsePointer = useCoarsePointer(); + return ( + <> + {/* New session — desktop uses the hover-revealed pencil on the folder + header, but a coarse-pointer device has no hover at any width, so + the menu keeps the item there. */} + + { + e.stopPropagation(); + onNavigate(e); + }} + > + + New session + + + + + Rename project + + + + Project settings + + + + Delete project + + + ); +} + +/** The dialog-opening handlers the folder menu body drives, owned by + * {@link useProjectFolderMenu} so the kebab and the header context menu share + * one set of dialogs rather than each mounting its own. */ +interface ProjectFolderMenuActions { + openRename: () => void; + openSettings: () => void; + openDelete: () => void; +} + +/** + * Owns the project-folder menu's dialogs — "Rename project" (O(1) via + * `PATCH /v1/projects/{id}` for a first-class project; promotes a label-only + * folder on demand), "Project settings", and "Delete project" (archives + + * unfiles all members, then removes the container; confirmed since it archives + * sessions). + * + * Returns the open-handlers plus the rendered dialog elements, so the header can + * mount the dialogs once and drive them from either the kebab or the header's + * context menu. + */ +function useProjectFolderMenu( + projectName: string, + projectId: string | null, +): { actions: ProjectFolderMenuActions; dialogs: ReactNode } { const [deleteOpen, setDeleteOpen] = useState(false); const [renameOpen, setRenameOpen] = useState(false); const [settingsOpen, setSettingsOpen] = useState(false); @@ -3813,62 +4160,17 @@ function ProjectFolderMenu({ const deleteProject = useDeleteProject(); const renameProject = useRenameProject(); - return ( + const actions: ProjectFolderMenuActions = { + openRename: () => { + setRenameValue(projectName); + setRenameOpen(true); + }, + openSettings: () => setSettingsOpen(true), + openDelete: () => setDeleteOpen(true), + }; + + const dialogs = ( <> - - - - - - {/* New session — mobile-only (md:hidden); desktop uses the - hover-revealed pencil on the folder header. */} - - { - e.stopPropagation(); - onNavigate(e); - }} - > - - New session - - - { - setRenameValue(projectName); - setRenameOpen(true); - }} - > - - Rename project - - setSettingsOpen(true)}> - - Project settings - - setDeleteOpen(true)} - > - - Delete project - - - e.stopPropagation()}> @@ -3883,17 +4185,11 @@ function ProjectFolderMenu({ const newName = renameValue.trim(); if (newName === "" || newName === projectName) { setRenameOpen(false); - setMenuOpen(false); return; } renameProject.mutate( { id: projectId, oldName: projectName, newName }, - { - onSuccess: () => { - setRenameOpen(false); - setMenuOpen(false); - }, - }, + { onSuccess: () => setRenameOpen(false) }, ); }} > @@ -3930,10 +4226,7 @@ function ProjectFolderMenu({ { - setSettingsOpen(o); - if (!o) setMenuOpen(false); - }} + onOpenChange={setSettingsOpen} projectId={projectId} projectName={projectName} /> @@ -3971,12 +4264,7 @@ function ProjectFolderMenu({ onClick={() => { deleteProject.mutate( { id: projectId, name: projectName }, - { - onSuccess: () => { - setDeleteOpen(false); - setMenuOpen(false); - }, - }, + { onSuccess: () => setDeleteOpen(false) }, ); }} > @@ -3987,6 +4275,50 @@ function ProjectFolderMenu({ ); + + return { actions, dialogs }; +} + +/** + * The kebab on a project-folder header. Renders {@link ProjectFolderMenuItems} + * under the dropdown family; the header's right-click / long-press context menu + * renders the same body under the context family (see {@link ConversationSection}). + */ +function ProjectFolderMenu({ + projectName, + onNavigate, + actions, +}: { + projectName: string; + onNavigate: (e: MouseEvent) => void; + actions: ProjectFolderMenuActions; +}) { + return ( + + + + + + + + + ); } // ── ProjectPickerMenu ─────────────────────────────────────────────────────────