Screenshot tap-to-enlarge and annotation tools

Status: Delivered
CAS: CAS-2517
Delivered: 2026-05-13
PRs: #706

What’s new

The screenshot thumbnail in the Astrid bug-report sheet can now be tapped to open a full-screen annotation editor. Three drawing tools — circle, arrow, and rectangle — let you mark up the screenshot directly in the app before submitting the report. Annotated bytes replace the original capture in the report store so the GH issue receives the marked-up image.

How to use it

Open the bug-report sheet (FAB → Astrid).
After a screenshot is captured, tap the thumbnail or the Annotate button below it.
The full-screen editor opens with a dark backdrop and the screenshot centred.
Choose a drawing tool (Circle / Arrow / Rectangle) from the toolbar; the selected tool shows a filled highlight.
Choose a stroke colour: red (default), yellow, or white.
Draw by tapping/dragging on the image (touch and mouse both work).
Undo removes the last shape; Clear all removes every shape.
Save annotations flattens the shapes onto the image and returns to the report sheet. The report will attach the annotated version.
Close (X icon) discards all drawing and returns the original screenshot unchanged.

Pinch-to-zoom is re-enabled inside the editor (the app-wide pinch block is lifted while the modal is open).

What changed under the hood

src/components/report/ScreenshotViewerModal.tsx — new full-screen Mantine <Modal> with a vanilla Canvas 2D overlay. Shapes are accumulated in local state; toDataURL('image/jpeg', 0.9) + toBlob flatten them on save.
src/components/ReportSheet.tsx — thumbnail converted from <img> to a tappable button; “Annotate” button added; ScreenshotViewerModal mounted conditionally when viewerOpen.
src/store/useReportIssueStore.ts — added applyAnnotations(dataUrl, bytes) action (replaces screenshotDataUrl / screenshotBytes) and retryChat() (resets chat state and re-bootstraps without closing the sheet).
test/components/ScreenshotViewerModal.test.tsx — 16 new unit tests covering tool activation, shape commit, undo/clear, colour picker, and canvas presence.
test/components/ReportSheet.test.tsx — 4 new unit tests for thumbnail visibility and accessibility label.

No new npm dependencies; annotation logic uses the browser’s native Canvas 2D API (bundle cost: zero).

Why we built it

Annotating a screenshot to circle or arrow the exact broken element is the single highest-value step a reporter can take before filing a bug. Returning to a separate app to draw on a screenshot and then re-attach it adds enough friction that most reporters skip it. The in-app editor makes markup a two-tap decision instead of a five-app workflow.

Known limitations / follow-on work

Round-trip verification (annotated JPEG → CloudBridge → GH issue body renders correctly) requires a TestFlight device build. Flagged in PR DoD.
The annotation canvas sits on top of the screenshot at native resolution; very large screenshots may feel sluggish on low-end devices.