YPE-1332: Render introduction chapter

[cameronapak]

Jira Issue: https://lifechurch.atlassian.net/browse/YPE-1332
Context: https://www.notion.so/yvproduct/Bible-Versions-with-an-INTRO-chapter-309f1f2d1b92809aa3b9f08412a23b0c?source=copy_link

Warning

Before proceeding watch the overview video ~10min

👉 WATCH OVERVIEW VIDEO (~10min) 👈

[changeset-bot]

⚠️ No Changeset found

Latest commit: aa95330

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[chatgpt-codex-connector]

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Credits must be used to enable repository wide code reviews.

[greptile-apps]

Greptile Summary

This PR adds support for rendering Bible introduction chapters (e.g., JHN.INTRO) in the reader component. It introduces an intro button (InfoIcon) in the chapter picker grid, hides the book/chapter h1 header for non-numerical chapters, shows an "unavailable" message when a chapter doesn't exist in the selected version, and displays a user-friendly label (e.g., "Intro") in the toolbar trigger. The CSS changes are substantial: ~60 new USFM class styles for introduction content, a switch from fixed CSS variable values to inherit-based cascading for proper em-relative sizing, and conversion of physical properties to logical properties for RTL support.

• Intro chapters are detected via bookData.intro?.id matching the current chapter, and an availability check (chapterUnavailable) prevents rendering BibleTextView for missing chapters
• The BibleChapterPicker.Trigger render prop now passes a display label for chapter instead of the raw chapter ID — this is a behavioral change for external consumers (see inline comment)
• Toolbar grid layout is now conditionally sized based on whether auth is enabled (grid-cols-[auto_1fr_auto] vs grid-cols-[1fr_auto])
• CSS .imte moved from the hidden metadata group to a visible styled block, which is correct for intro rendering
• The .pc/.qc classes had font-variant: small-caps and font-weight: bold removed to align with the USFM specification
• No changeset entry was added — expected for a WIP PR but will be needed before merge

Confidence Score: 4/5

• This PR is well-structured with proper test coverage via Storybook; the main concern is the chapter render prop semantic change for external consumers.
• Score reflects solid implementation with good test coverage, comprehensive CSS additions for USFM intro content, and proper RTL logical property conversion. Deducted one point for the behavioral change in the Trigger render prop's chapter parameter which could break external consumers, and the WIP status indicating further changes are expected.
• Pay close attention to packages/ui/src/components/bible-chapter-picker.tsx for the render prop behavioral change, and packages/ui/src/styles/bible-reader.css due to its large scope of CSS changes.

Important Files Changed

Filename	Overview
packages/ui/src/components/bible-reader.tsx	Adds intro chapter rendering logic: hides h1 header for non-numerical chapters, adds chapter availability check with useMemo, and shows unavailable message. Also conditionally adjusts toolbar grid layout based on auth. Well-structured changes with proper memoization.
packages/ui/src/components/bible-chapter-picker.tsx	Adds intro button (InfoIcon) to chapter grid, refactors intro chapters out of the chapter list rendering, and changes Trigger's chapter render prop to pass display label instead of raw ID. Includes JSDoc update documenting the behavioral change.
packages/ui/src/styles/bible-reader.css	Major CSS refactoring: switches from fixed var() values on & * to inherit-based cascade, converts physical properties (padding-left, text-align: right) to logical properties (padding-inline-start, text-align: end) for RTL, adds ~60 new USFM class styles for introduction content, and unhides .imte for proper intro rendering.
packages/ui/src/components/bible-reader.stories.tsx	Adds IntroChapter story with integration tests for intro chapter rendering, h1 visibility, unavailable message absence, and toolbar label display. Test coverage is good but uses a slightly fragile querySelector('p') check.
packages/ui/src/test/mock-data/books.ts	Adds intro field to JHN mock book data matching the BibleBookIntroSchema shape (id, passage_id, title). Straightforward and correct.
packages/ui/src/test/mocks/handlers.ts	Adds MSW handler for JHN.INTRO passage endpoint returning mock intro HTML content with USFM classes (imt, im, ip, qt). Clean addition.

Flowchart

flowchart TD
    A["User selects chapter\n(chapter picker)"] --> B{Is chapter intro?}
    B -->|Yes| C["Set chapter = intro.passage_id\n(e.g. 'INTRO')"]
    B -->|No| D["Set chapter = chapterId\n(e.g. '1')"]
    C --> E["BibleReader.Content renders"]
    D --> E
    E --> F{chapterIsNumerical?}
    F -->|Yes| G["Show h1 header\n(book title + chapter number)"]
    F -->|No| H["Hide h1 header"]
    G --> I{chapterUnavailable?}
    H --> I
    I -->|Yes| J["Show unavailable message"]
    I -->|No| K["Render BibleTextView\n(USFM content)"]
    E --> L["Toolbar.Trigger"]
    L --> M["Resolve display label\n(chapter title or 'Intro')"]
    M --> N["Show: 'John Intro'"]

Loading

_{Last reviewed commit: 9dc55a9}

[greptile-apps]

_{6 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}