feat: new related verse

[afifvdin]

Summary

Testing branch: new related verse

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as
  expected)
• 📝 Documentation update
• ♻️ Refactoring (no functional changes)

If Breaking Change

Scope Confirmation

• This PR addresses one feature/fix only
• If multiple changes were needed, they are split into separate PRs

Environment Variables

Variable	Description	Required
EXAMPLE_VAR	Description here	Yes/No

Rollback Safety

• Can be safely reverted without data issues or migrations
• Rollback requires special steps (describe below):

Test Plan

• Unit tests added/updated
• Integration tests added/updated
• Manual testing performed

Testing steps:

Edge Cases Verified

• ⏳ Loading state handled
• ❌ Error state handled
• 📭 Empty state handled
• 👤 Logged-in vs guest behavior (if applicable)

Pre-Review Checklist

Code Quality

• I have performed a self-review of my code (file by file)
• My code follows the project style guidelines
• No any types used (or justified if unavoidable)
• No unused code, imports, or dead code included
• Complex logic has inline comments explaining "why"
• Functions are under 30 lines and follow single responsibility

Testing & Validation

• All tests pass locally (yarn test)
• Linting passes (yarn lint)
• Build succeeds (yarn build)
• Edge cases and error scenarios are handled

Documentation

• Code is self-documenting with clear naming
• README updated (if adding features or setup changes)
• Inline comments added for complex logic

Localization (if UI changes)

• All user-facing text uses next-translate
• Only English locale files modified (Lokalise handles others)
• RTL layout verified

Accessibility (if UI changes)

• Semantic HTML elements used
• ARIA attributes added where needed
• Keyboard navigation works

Screenshots/Videos

Before	After

Related PRs

Reviewer Notes

AI Assistance Disclosure

• AI tools were NOT used for this PR
• AI tools were used, and I have thoroughly reviewed and validated all generated code

[Copilot]

Pull request overview

Adds support for “related verse” relationships spanning a verse range (from/to) and updates the Study Mode UI to present related verses in a collapsible section, with supporting style utilities and minor RTL cleanup.

Changes:

• Update RelatedVerse shape to include *From/*To identifiers/keys/names for ranged relations.
• Render related verse ranges via /verses/by_range and display them inside a Collapsible in Study Mode.
• Add new edge margin SCSS mixins and remove a now-unneeded RTL tabs container style hook.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
types/RelatedVerse.ts	Extends related-verse model to represent verse ranges (from/to).
src/styles/_utility.scss	Adds edge margin mixins analogous to existing edge padding mixins.
src/components/QuranReader/TranslationView/TranslationViewCell.module.scss	Removes .tabsContainerRTL styles.
src/components/QuranReader/TranslationView/BottomActionsTabs.tsx	Stops applying the removed RTL container class.
src/components/QuranReader/ReadingView/StudyModeModal/tabs/StudyModeRelatedVerses/StudyModeRelatedVerses.module.scss	Refactors styles for the new collapsible/range layout.
src/components/QuranReader/ReadingView/StudyModeModal/tabs/StudyModeRelatedVerses/StudyModeRelatedVerseContent.tsx	Switches from single-verse fetch/render to ranged fetch/render with collapsible UI and localized titles.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 48b0bfb247

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".