TT-6812b Add Plan View with Passage Cards for mobile experience (#179) #179
Conversation
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
…erience - Added new translation entry for `Unknown Book` in localization files. - Introduced new JSON localization file for updated strings. - Refactored PlanTabs and PlanSheet components to support mobile view and improve responsiveness. - Implemented new GraphicAvatar and PassageCard components for better visual representation of data. - Updated PlanBar and PlanView components to enhance user interaction and layout. These changes collectively improve the localization support and enhance the UI components, ensuring a more intuitive experience for users across different devices.
gtryus
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
This PR enhances the application's localization support and introduces mobile-responsive components for an improved user experience. The changes enable the plan view to adapt to mobile devices with a dedicated mobile UI layout.
Key Changes:
- Added "Unknown Book" translation entry across all localization files for handling missing book names
- Implemented mobile view support with new PlanView, PlanBar, PassageCard, and GraphicAvatar components
- Refactored PlanSheet to extract handlePublishToggle logic to parent component (ScriptureTable) for reuse in mobile view
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/renderer/src/store/localization/reducers.tsx | Added unknownBook translation entry to initial state |
| src/renderer/src/store/localization/model.tsx | Added unknownBook property to IPlanSheetStrings interface |
| src/renderer/src/store/localization/exported-strings-name.json | Updated strings file reference to include new translations |
| src/renderer/src/control/TabAppBar.tsx | Added mobileBar prop for mobile-specific styling |
| src/renderer/src/components/Sheet/ScriptureTable.tsx | Added mobile view detection and conditional rendering; extracted handlePublishToggle; added filtered state calculation |
| src/renderer/src/components/Sheet/PlanView.tsx | New component providing mobile-optimized card-based view of sections and passages |
| src/renderer/src/components/Sheet/PlanTabSelect.tsx | New component providing dropdown selector for plan tabs in mobile view |
| src/renderer/src/components/Sheet/PlanSheet.tsx | Refactored to accept handlePublishToggle and onWarning as props; removed internal publishing logic |
| src/renderer/src/components/Sheet/PlanBar.tsx | New component providing mobile-friendly action bar with filter and publishing controls |
| src/renderer/src/components/Sheet/PassageCard.tsx | New component displaying passage information in card format for mobile view |
| src/renderer/src/components/Sheet/GraphicAvatar.tsx | New component for displaying section graphics or generated avatars |
| src/renderer/src/components/PlanTabs.tsx | Modified to bypass tab bar rendering when in mobile view on section/passage tab |
| src/renderer/src/components/App/AppHead.tsx | Fixed regex capture group reference for plan URL and added padding to logo button |
| src/renderer/public/localization/strings54bc1bc2.json | Updated with new translations and removed obsolete entries |
| localization/TranscriberAdmin-en.xlf | Added unknownBook translation unit |
| localization/TranscriberAdmin-en-1.2.xliff | Added unknownBook translation unit |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
112
to
126
| {row.passageType === PassageTypeEnum.BOOK ? ( | ||
| <Typography key={row.sectionId?.id} variant="h5"> | ||
| {row.title} | ||
| </Typography> | ||
| ) : row.passageType === PassageTypeEnum.ALTBOOK ? ( | ||
| <Typography key={row.sectionId?.id} variant="h5" sx={{ pl: 2 }}> | ||
| {row.title} | ||
| </Typography> | ||
| ) : ( | ||
| <Typography key={row.sectionId?.id} variant="h5"> | ||
| {sectionDescription( | ||
| getSectionRec(row.sectionId?.id || '') as SectionD, | ||
| sectionMap | ||
| )} | ||
| </Typography> |
There was a problem hiding this comment.
The Typography component uses the same key (row.sectionId?.id) in three different conditional branches. In React, keys must be unique within a mapping but should be consistent for the same element across re-renders. Since these are alternatives in a conditional, this is acceptable, but the key is redundant since it's already specified on the parent Box element. The Typography key can be removed.
Co-authored-by: Copilot <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Unknown Bookin localization files.These changes collectively improve the localization support and enhance the UI components, ensuring a more intuitive experience for users across different devices.