Checkmark marks the active highlight swatch (YPE-1034) (3/4)

[cameronapak]

Summary

The active highlight swatch renders a 24px checkmark (matching iOS) instead of an X. This PR's original recent-colors feature was dropped from the SDK entirely — the /v1/highlights/recent-colors contract is still changing and must not ship (per bbelyeu; main removed the API in #291) — leaving the checkmark as the surviving slice.

Stack: 1/4 #283 → 2/4 #285 → 3/4 (this PR) → 4/4 #294 · restored from #288

Changes

1. Active and remove swatches render a CheckIcon (24px, iOS-matching path) instead of the X.
2. ADR-005 records the active-swatch icon decision.

Test plan

• pnpm build && pnpm typecheck && pnpm lint && pnpm test at this branch: all green (core 315 + checkmark suite; ui 258 / hooks 284).
• verse-action-popover.test.tsx asserts the checkmark SVG path on active/remove swatches.

Greptile Summary

Replaces the X icon on active highlight swatches with a 24 px checkmark, matching iOS parity (platform-sdk-swift #179). Behavior is unchanged — tapping a checkmark swatch still removes the highlight; only the indicator icon changes.

• packages/ui/src/components/icons/check.tsx: new CheckIcon with aria-hidden default and {...props} spread, consistent with other icon files.
• packages/ui/src/components/verse-action-popover.tsx: swaps XIcon → CheckIcon on active swatches; renames the showX prop to showRemove for clarity.
• Tests, changeset, and ADR note are all included and accurate.

Confidence Score: 5/5

Safe to merge — the change is a pure icon swap with no behavioral or API surface changes.

The change is minimal and well-contained: a new icon component, a single prop rename, and two targeted tests that directly verify the checkmark path. Behavior (highlight removal on tap, aria-labels, flag gating) is untouched. The new icon correctly sets aria-hidden before the props spread, changeset and ADR are both present, and no new i18n strings or public API exports were added.

No files require special attention.

Important Files Changed

Filename	Overview
packages/ui/src/components/icons/check.tsx	New CheckIcon SVG component with aria-hidden default and props spread — follows existing icon conventions; improves on XIcon which lacked aria-hidden.
packages/ui/src/components/verse-action-popover.tsx	Swaps XIcon → CheckIcon on active swatches; renames prop showX → showRemove for semantic accuracy; no behavior change.
packages/ui/src/components/verse-action-popover.test.tsx	Adds two focused tests: one asserts the checkmark SVG path prefix on a remove swatch; one asserts apply swatches render no SVG. Both are correct.
.changeset/checkmark-active-swatch.md	Patch changeset for @youversion/platform-react-ui; correctly scoped and descriptive.
docs/adr/YPE-642-verse-action-popover.md	ADR-005 entry added documenting the X-to-checkmark swap with iOS parity rationale; no issues.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    VAP[VerseActionPopover] --> CC[ColorCircle]
    CC -->|showRemove = true\nactive highlight| CHK[CheckIcon\n24px checkmark]
    CC -->|showRemove = false\napply highlight| EMPTY[no icon]
    CHK -->|onClick| CLR[onClearHighlight]
    EMPTY -->|onClick| APP[onHighlight]
    CHK -->|aria-hidden=true| A11Y[Screen reader ignores icon\nbutton's aria-label carries meaning]

Loading

_{Reviews (3): Last reviewed commit: "Merge branch 'main' into claude/ype-1034..." | Re-trigger Greptile}

[changeset-bot]

🦋 Changeset detected

Latest commit: d384cbe

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@youversion/platform-react-ui	Patch
vite-react	Patch
@youversion/platform-core	Patch
@youversion/platform-react-hooks	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[cameronapak]

Superseded by #288, which consolidates the full YPE-1034 stack into a single PR rebased onto main.

[Dustin-Kelley]

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

🤖 Generated with Claude Code

[Dustin-Kelley]

Just address the nitpicks and you good 👊