[QF-4753] feat: add 3-dots word hover actions in Arabic reading mode#3156
Open
yousefdergham wants to merge 3 commits intotestingfrom
Open
[QF-4753] feat: add 3-dots word hover actions in Arabic reading mode#3156yousefdergham wants to merge 3 commits intotestingfrom
yousefdergham wants to merge 3 commits intotestingfrom
Conversation
- Introduced a new feature to play audio from a specific word in the Quran. - Added a suffix content option to tooltips and popovers for improved user interaction. - Updated the QuranWord component to handle play actions and integrate new hover actions for reading mode. - Enhanced styling for tooltips and popovers to support new features and improve layout consistency. - Refactored related components to accommodate the new functionality and maintain code clarity.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a 3-dots overflow menu feature for word interactions in Arabic reading mode, providing quick access to study mode, play from word, and repeat verse functionality. The implementation extends the existing tooltip/popover infrastructure to support suffix content and handles both LTR and RTL layouts.
Changes:
- Added a new 3-dots overflow menu in Arabic reading mode that appears on word hover/tap with three actions: More (study mode), Play from Word, and Repeat Verse
- Extended Tooltip and Popover components with
suffixContentprop to support rendering additional UI elements alongside tooltips - Created new
playFromWordutility function to handle audio playback starting from a selected word
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/dls/Tooltip/index.tsx | Refactored to support suffixContent prop, extracted event handlers, wrapped content in Portal |
| src/components/dls/Tooltip/Tooltip.module.scss | Added contentWithPrefix class and forced LTR direction for consistent layout |
| src/components/dls/QuranWord/playFromWord.ts | New utility function managing audio playback from specific word positions with state tracking |
| src/components/dls/QuranWord/ReadingModeWordHoverActions/index.tsx | New component orchestrating the word hover actions UI and modal interactions |
| src/components/dls/QuranWord/ReadingModeWordHoverActions/WordOptionsDropdown.tsx | New component rendering the 3-dots dropdown menu with action items |
| src/components/dls/QuranWord/ReadingModeWordHoverActions/ReadingModeWordHoverActions.module.scss | Styles for the 3-dots button, dropdown menu, and menu items |
| src/components/dls/QuranWord/QuranWord.tsx | Integrated ReadingModeWordHoverActions for Arabic reading mode, updated import path for ArrowIcon |
| src/components/dls/PopoverMenu/PopoverMenu.tsx | Added optional dir prop for controlling text direction, refactored handleOpenChange logic |
| src/components/dls/Popover/index.tsx | Extended to support suffixContent prop for additional UI elements |
| src/components/dls/Popover/Popover.module.scss | Added contentWithPrefix class, changed responsive margin behavior |
| src/components/dls/Popover/HoverablePopover/index.tsx | Added state management for popover open state and tooltip suppression logic |
| locales/en/quran-reader.json | Added "play-from-word" translation key |
...components/dls/QuranWord/ReadingModeWordHoverActions/ReadingModeWordHoverActions.module.scss
Show resolved
Hide resolved
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 05892509f6
ℹ️ 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".
- Added a cleanup function to ensure proper unsubscription from audio service. - Refactored the subscription handling to utilize the cleanup function for better code clarity and maintainability. - Enhanced the playFromWord function to check for verse timings before seeking, preventing potential errors.
- Simplified the rendering logic for tooltip content by consolidating the conditional structure. - Ensured consistent class naming for tooltip content based on the presence of suffix content. - Improved code clarity and maintainability in the Tooltip component.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a 3-dots overflow menu when hovering or tapping words in Arabic reading mode
The menu provides three actions:
When translation/transliteration tooltips are enabled, the 3-dots button appears alongside the tooltip
When tooltips are disabled, only the 3-dots button appears
Layout renders consistently in both LTR and RTL locales
Closes: QF-4753
Type of Change
Scope Confirmation
Rollback Safety
Test Plan
Testing steps:
Edge Cases Verified
Pre-Review Checklist
Code Quality
anytypes used (or justified if unavoidable)Testing & Validation
yarn test)yarn lint)yarn build)Documentation
Localization (if UI changes)
next-translateAccessibility (if UI changes)
Screenshots/Videos
Reviewer Notes
PopoverMenugained an optionaldirprop to override page direction for Radix positioning, used only by the newWordOptionsDropdown.AI Assistance Disclosure