feat(ui): add bible reader settings

[bmanquen]

• Added bible reader settings which save to localStorage
• Refactored the Popover component to reduce code duplication throughout codebase and consistency.

Light Mode:

Dark Mode:

[changeset-bot]

🦋 Changeset detected

Latest commit: d5a9e02

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

[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 bible reader settings functionality with localStorage persistence and refactors the Popover component to reduce code duplication.

Key Changes:

• Added reader settings UI in a popover modal accessible from toolbar
• Font size adjustable between 12-20px with +/- buttons
• Font family toggle between Inter and Source Serif
• Settings persisted to localStorage with namespaced keys (youversion-platform:reader:*)
• Refactored Popover component to include standardized header with title, optional headerChild, close button, and theme support
• Updated BibleVersionPicker and BibleChapterPicker to use refactored Popover
• Added comprehensive Storybook integration tests covering settings UI and localStorage
• Added localStorage mock polyfill for testing environments

Issues Found:

• Parameter reassignment in font size validation (line 94) - reassigning the fontSize parameter can cause unexpected behavior

Confidence Score: 4/5

• Safe to merge with one syntax fix needed for parameter reassignment
• The implementation is well-tested with comprehensive Storybook tests, properly namespaces localStorage keys, and successfully refactors the Popover component to reduce duplication. The only issue is a parameter reassignment that should use a local variable instead.
• Fix parameter reassignment in packages/ui/src/components/bible-reader.tsx:94

Important Files Changed

Filename	Overview
packages/ui/src/components/bible-reader.tsx	Added reader settings with localStorage persistence for font size (12-20px) and font family (Inter/Source Serif). Settings UI implemented via popover modal.
packages/ui/src/components/ui/popover.tsx	Refactored to reduce duplication - added standardized header with close button, theme support, and optional heading/headerChild props.
packages/ui/src/components/bible-version-picker.tsx	Updated to use refactored Popover component, removing duplicate header code and using new heading/headerChild props.
packages/ui/src/components/bible-chapter-picker.tsx	Updated to use refactored Popover component, removing duplicate header code in favor of heading prop.
packages/ui/src/components/bible-reader.stories.tsx	Added comprehensive integration tests for settings UI, localStorage persistence, font size validation, and out-of-range handling.

Sequence Diagram

sequenceDiagram
    participant User
    participant Toolbar
    participant SettingsPopover
    participant Context
    participant LocalStorage
    participant Content

    User->>Toolbar: Click Settings button
    Toolbar->>SettingsPopover: Open popover
    
    User->>SettingsPopover: Click font size button (+/-)
    SettingsPopover->>Context: setCurrentFontSize(prev => newValue)
    Context->>Context: Update state (12-20 range)
    Context->>LocalStorage: setItem('youversion-platform:reader:font-size', value)
    Context->>Content: Re-render with new fontSize
    
    User->>SettingsPopover: Click font family button
    SettingsPopover->>Context: setCurrentFontFamily('Inter'|'Source Serif')
    Context->>Context: Update state
    Context->>LocalStorage: setItem('youversion-platform:reader:font-family', value)
    Context->>Content: Re-render with new fontFamily
    
    Note over Context,LocalStorage: On initial mount
    LocalStorage->>Context: getItem('youversion-platform:reader:font-size')
    LocalStorage->>Context: getItem('youversion-platform:reader:font-family')
    Context->>Content: Initialize with stored or default values

Loading

[greptile-apps]

_{9 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

[mic-mart]

I made a few comments that we should resolve before reviewing again.

[cameronapak]

@greptileai Can you review this PR again? There's been a couple changes since, and I just want to make sure that if there's anything that should be caught, we catch it, and for me to just get a better understanding of this PR. Thanks!

[greptile-apps]

_{12 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[cameronapak]

It looks like this works, and I've had a couple small suggestions. Thank you for your work on this, Brenden

[cameronapak]

LGTM! 🚀