Merged
Conversation
…ce in ItemDescriptions and ShowItemsLocation components
There was a problem hiding this comment.
Pull request overview
This PR enhances the boat listing details experience by improving readability/accessibility, adding a global “scroll to top” control, and introducing a dedicated renderer for extraDetails instead of mixing them into specifications.
Changes:
- Add a client-side
ScrollToTopbutton and mount it in the app root layout. - Improve boat detail UI: separate
extraDetailsinto a new component and preserve line breaks in descriptions. - Enhance UX/accessibility (gallery button labels) and refine blog share description extraction.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/boat-details-types.ts | Removes extraDetails mapping from specifications transformation. |
| src/components/shared/ScrollToTop/ScrollToTop.tsx | Introduces a scroll listener + floating button to scroll back to top. |
| src/app/layout.tsx | Mounts ScrollToTop globally in the root layout. |
| src/app/(main-layout)/(home)/search-listing/[id]/_components/ShowItemsLocation.tsx | Adds client-side geocoding via Nominatim to derive map coordinates. |
| src/app/(main-layout)/(home)/search-listing/[id]/_components/ItemsDetailsGallery.tsx | Adds aria-label/title to navigation and thumbnail buttons. |
| src/app/(main-layout)/(home)/search-listing/[id]/_components/ItemExtraDetails.tsx | New component to parse and render structured “Additional Details” from extraDetails. |
| src/app/(main-layout)/(home)/search-listing/[id]/_components/ItemDetailsComponents.tsx | Wires ItemExtraDetails into the details page. |
| src/app/(main-layout)/(home)/search-listing/[id]/_components/ItemDescriptions.tsx | Preserves line breaks but now injects formatted strings via dangerouslySetInnerHTML. |
| src/app/(main-layout)/(home)/blogs/[id]/page.tsx | Improves meta/share description extraction from HTML content. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
+50
to
+60
| // Format description with line breaks preserved | ||
| const formatDescription = (text: string) => { | ||
| if (!text) return ''; | ||
|
|
||
| // Replace newlines with <br> tags | ||
| return text | ||
| .split('\n') | ||
| .map((line) => line.trim()) | ||
| .filter((line) => line.length > 0) | ||
| .join('<br /><br />'); | ||
| }; |
Comment on lines
+10
to
+17
| if (window.scrollY > 300) { | ||
| setIsVisible(true); | ||
| } else { | ||
| setIsVisible(false); | ||
| } | ||
| }; | ||
|
|
||
| window.addEventListener('scroll', toggleVisibility); |
| return ( | ||
| <> | ||
| {isVisible && ( | ||
| <button |
| @@ -192,17 +192,6 @@ export function transformBoatDetailsToSpecifications( | |||
| }, | |||
| ] | |||
| : []), | |||
Comment on lines
+6
to
+20
| extraDetails?: ExtraDetail[]; | ||
| } | ||
|
|
||
| const ItemExtraDetails = ({ extraDetails }: ItemExtraDetailsProps) => { | ||
| const parsedSections = useMemo(() => { | ||
| if (!extraDetails || extraDetails.length === 0) return []; | ||
|
|
||
| const sections: { | ||
| title: string; | ||
| items: { key: string; value: string }[]; | ||
| paragraphs: string[]; | ||
| }[] = []; | ||
|
|
||
| extraDetails.forEach((detail) => { | ||
| const title = detail.key |
Comment on lines
+32
to
+51
| const geocodeLocation = async () => { | ||
| if (!locationString) return; | ||
|
|
||
| try { | ||
| const response = await fetch( | ||
| `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(locationString)}`, | ||
| ); | ||
| const data = await response.json(); | ||
| if (data && data[0]) { | ||
| setCoordinates({ | ||
| lat: parseFloat(data[0].lat), | ||
| lng: parseFloat(data[0].lon), | ||
| }); | ||
| } | ||
| } catch (error) { | ||
| console.error('Geocoding error:', error); | ||
| } | ||
| }; | ||
|
|
||
| geocodeLocation(); |
Comment on lines
+24
to
+33
| const locationString = [city, state, 'USA'].filter(Boolean).join(', '); | ||
|
|
||
| const shareUrl = typeof window !== 'undefined' ? window.location.href : ''; | ||
| const shareTitle = `${name} - Florida Yacht Trader`; | ||
| const shareText = `Check out this boat: ${name}`; | ||
|
|
||
| // Geocode location using Nominatim (OpenStreetMap) | ||
| useEffect(() => { | ||
| const geocodeLocation = async () => { | ||
| if (!locationString) return; |
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
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.
No description provided.