chart/docs/mobile_enhance.md

# Mobile experience enhancements

## Goal

Make mobile useful for full chart annotation without weakening the existing
desktop workflow. Prefer feature detection (`pointer: coarse`, `hover: none`,
and `pointerType`) over user-agent checks.

The current page is responsive, but its interaction model is desktop-first.
At a 390 x 844 viewport the chart and sidebar become one long column, many
controls are below recommended touch size, and drawing feedback depends on
hover or desktop-only actions such as right-click and keyboard Delete.

## Recommended interaction model

Use tap-tap as the primary mobile trendline workflow:

1. Arm Trendline from a compact tool rail adjacent to the chart.
2. Tap the first anchor.
3. Keep a numbered anchor and price/time label visible.
4. Offer Cancel and Undo anchor.
5. Tap the second anchor to complete the line.
6. Selecting the line opens actions for Move, End here, Style, and Delete.

Keep drag placement as a desktop shortcut. It may remain available as an
advanced mobile gesture, but it should not be the primary path because it
conflicts with chart panning and hides the target beneath the finger.

## Priorities

### P0: Persistent first-anchor feedback

Touch has no hover. After the first tap, leave a visible numbered anchor with
its price and time, plus Cancel and Undo anchor actions. While a finger is down,
place the snap label above the finger and connect it to the selected high or low
with a leader.

Complexity: medium. This can reuse the existing pending-anchor state and also
improves desktop click-click placement.

### P0: Mobile tool rail next to the chart

On mobile, keep Trendline, Level, Comment, Symbol, active-tool state, and Cancel in a
compact sticky rail directly below the chart. Open tool configuration in an
expandable panel or sheet. Leave Layers and the complete Drawings manager below.

Complexity: medium. This should be mobile-only and preserve the desktop sidebar.

### P0: Predictable chart and page gestures

On coarse pointers, reserve one-finger vertical movement for page scrolling and
one-finger horizontal movement for chart panning. Retain pinch-to-zoom. If
vertical chart manipulation remains important, provide an explicit chart-lock
or fullscreen mode rather than making one gesture mean two things.

Complexity: medium-high. Touch arbitration needs real iOS Safari and Android
Chrome verification in addition to Chromium emulation.

### P0: Selected-drawing action bar

Tapping a drawing should select it and show a compact action bar with Edit, End
here, Delete, and Cancel selection. End here should enter a clear mode that asks
the user to tap the cutoff bar. Flat levels should be selectable from the line
or its price-axis label.

Complexity: medium-high. This is additive on desktop; keyboard and right-click
can remain shortcuts.

### P0: One plot-relative coordinate path

Status: completed 2026-08-11. Placement, selection, anchor dragging and context
actions now use the measured plot canvas as their shared pointer frame.

Placement, selection, anchor dragging, and context actions use the same
plot-relative pointer conversion. Keep future chart-bound interactions in that
frame and build mobile hit regions around painted geometry.

Complexity: medium. This is a correctness improvement on both mobile and
desktop and should have page-pixel regression coverage.

### P1: Larger invisible hit targets

Retain the compact visual marks while giving anchors, collapsed comments,
checkboxes, timeframe buttons, and destructive actions approximately 44px touch
surfaces. Use nearest-target resolution where drawing hit regions overlap.

Complexity: low-medium. Apply primarily under coarse-pointer media queries.

### P1: Precise and cancellable anchor dragging

Use a large invisible handle, pointer capture, and a price/time readout offset
from the finger. Suspend chart panning during the drag. With snapping enabled,
snap to bar highs/lows; otherwise snap to the tick grid. Commit on release and
provide a way to cancel or revert.

Complexity: high. These lines can drive alerts, so accidental geometry changes
matter.

### P1: Separate comment actions

Desktop now separates these actions: the body selects, the left-side control
collapses, and a dedicated grip moves floating comments and pinned symbols.
Carry that interaction to touch, with suitably enlarged invisible hit regions.
Expose Edit text, Pin/Float, Collapse, and Delete through the selected-drawing
actions.

Complexity: medium. The behavior exists; mobile still needs touch-sized targets
and gesture verification.

### P1: Keyboard-safe mobile layout

Use at least 16px text in mobile inputs to avoid iOS automatic zoom. Size chart
areas with `dvh` or `visualViewport`, dismiss the keyboard before chart
placement, and keep the active tool controls visible above it. Offer a more
chart-focused landscape layout instead of enforcing the current 360px minimum
inside a short viewport.

Complexity: medium and requires real-device checks.

### P2: Progressive drawing-row disclosure

Show each drawing as a concise 44-52px summary with type, number/name, and
state. Put rename, style, alert state, and metadata in an expanded row or sheet.
Require confirmation or an undo path for bulk deletion, stating the filter and
count affected.

Complexity: medium. This can be mobile-only initially.

### P2: Simplified mobile status hierarchy

Keep price and timeframe controls prominent. Collapse feed, age, and bars-held
into one compact status line or disclosure. Put active tool instructions in the
sticky tool rail and constrain comment width so notes do not cover active
anchors.

Complexity: low-medium.

### P2: Touch-specific browser coverage

Add Playwright contexts around 390 x 844 and 844 x 390 with explicit device
scale factor and touch support. Cover tap-tap placement, page scrolling over the
chart, selection actions, anchor movement, comments, and orientation. Chromium
emulation is useful but does not replace an iOS Safari and Android Chrome smoke
pass.

Complexity: medium. Tests should guard observed failures and interaction
invariants rather than arbitrary CSS dimensions.

## Incremental rollout

1. Add mobile diagnostics/tests and enlarge invisible hit regions. Pointer
   coordinates are already unified for chart drawing interactions.
2. Add persistent first-anchor feedback, Cancel, and Undo anchor.
3. Add the mobile tool rail, keyboard-safe sizing, and chart/page gesture policy.
4. Add the selected-drawing action bar and touch-accessible End here flow.
5. Improve anchor dragging and comment interactions.
6. Compact drawing rows and refine portrait/landscape information density.
7. Verify on real iOS and Android devices before calling mobile authoring done.

## Product decisions

Recommended defaults:

- Support full mobile drawing and editing, not monitoring only.
- Use tap-tap as the primary touch trendline flow.
- Reserve one-finger vertical movement for page scrolling.
- Keep horizontal chart panning and pinch zoom.
- Keep snapping enabled while moving anchors, with an explicit way to disable it.
- Confirm bulk deletion or provide an undo action; avoid a confirmation for every
  single deletion.
- Offer a chart-focused fullscreen mode in mobile landscape.

Questions to revisit during implementation:

- Should comments be placed before typing, with text entered afterward in a
  sheet?
- Should the mobile action bar initially expose only Move, End, and Delete, or
  include alert and style controls?
- Should desktop eventually adopt the same explicit comment and selection model?