[camrun91]

Why

Readers need to browse Bible languages and search them in the tablet picker flow. The previous picker mixed those controls and did not match the tablet card dimensions.

What changed

• Split version browsing, language tabs, and language search into separate views. Add native language names, counts, search pills, and version-row chevrons.
• Size this picker at 400 by 600 pixels with viewport and available-space caps. Keep standalone content navigation under host control.
• Preserve the host CSS appearance rule through style rebuilds. Include the existing design plan and reference screenshots.

Scope

• Tablet popover layout and language navigation.
• Mobile full-height sheets, downloads, audio controls, and recent-list editing remain follow-ups.
• The Bible Languages title uses its own key and English fallback, preserving “Select a Language” for selection controls. Other English copy follows localization PR #94 and the normal SDK sync. Bundled locale files are unchanged.

Tradeoffs

Sizing stays local to the picker so other popovers keep their defaults. The version-section count describes its displayed rows and excludes rows already shown under Recent Versions.

Blast Radius

The picker’s public API and shared popover defaults are unchanged. A regression assertion protects standalone content selection and host close callbacks. The language row exposes its visible name and count to screen readers.

Visual comparison

Old (main) · New (this PR) · Figma tablet refs. Captured from Storybook light cards and the saved design frames for node 4966:6915.

Versions

Languages

Language search

Verification

• Forced workspace build, full tests, lint, typecheck, and i18n parity passed. The UI suite passed all 526 tests.
• Browser checks passed at 834×1194, 1180×820, 375×812, and 820×400. Both tablet cards measured 400×600.
• All 15 picker Storybook journeys passed, including four viewport cases. They check accessible counts, global search with English-only region suggestions, back navigation, selection dismissal, viewport caps, and long headings. The standalone verification script is removed.
• Browser journeys used the existing Vitest Storybook project with a temporary installed-Chrome launch override because the bundled Chromium installation stalled. CI keeps its normal Chromium configuration.

Confidence Score: 5/5

The PR appears safe to merge; no new actionable issues were found.

Summary

The PR splits version browsing, language tabs, and language search into separate views.

• The picker separates version, language, and language-search views in a viewport-capped card.
• The UI package keeps the host appearance rule when CSS is rebuilt or watched.

No new actionable issues were found. Previous threads were checked against the current code; none require a duplicate comment. Tests were not run during this review.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  V[Versions] -->|Language row| L[Language tabs]
  L -->|Search button| S[Language search]
  S -->|Back| L
  L -->|Back or select language| V
  V -->|Select version| C[Close picker]

Loading

_{Reviews (19) · Last reviewed commit: "test(ui): move edited picker workflows o..." · Reviewed by Greptile}

[changeset-bot]

🦋 Changeset detected

Latest commit: 2a104c0

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	Minor
vite-react	Patch
@youversion/platform-core	Minor
@youversion/platform-react-hooks	Minor

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

[camrun91]

Addressed the four Greptile review threads:

1. P1 Story Korean assertion — expect /한국어/ (native primary on LanguageEntry)
2. P2 Focus jumps — instance refs (+ popover-scoped fallback) instead of document.querySelector
3. P2 verify-styles — re-run write-public-styles after preserve; assert -webkit-appearance:revert-layer in styles.css and bundled JS
4. P2 Nested describes — flattened describe('language search') under the single top-level describe('BibleVersionPicker')

Picker unit tests: 29 passed. Style verification passes after build:css.

[camrun91]

@visualinventor, tagging you here as a reviewer so you can know when we pull this in. if it gets merged by Monday it should make it in the next release.

[abharms]

The functional fixes look good. One test-structure issue remains before approval.