travelplanning/implementation_plan.md

Plan to Implement Like-Based Photo Selection, Displays, and Mobile UI Enhancements

Highlight photos with more likes across different displays and optimize the public photo modal's mobile UI layout.

---

Proposed Changes

1. Public Photo Modal Mobile UI Layout & Fixes

[MODIFY] PublicPhotoModal.tsx

• Fixed Photo and Scrollable Comments:
  • Remove parent modal container vertical scrolling on mobile (overflow-y-auto -> overflow-hidden).
  • Set the parent container layout to flex flex-col h-[90vh] md:h-[85vh] overflow-hidden.
  • The photo container (h-[45vh]) and mobile uploader details container will remain static/fixed at the top.
  • Set the comments panel container to flex-1 min-h-0 flex flex-col and the comments list to flex-1 overflow-y-auto so only the comments scroll on mobile.
• Remove Comments Header on Mobile:
  • Add responsive classes to the comment header (hidden md:block) to hide the "Bình luận cộng đồng" / "bình luận từ cộng đồng" title banner on mobile, maximizing space.
• Style Uploader Details:
  • Reduce font size and remove bold style for the "Người đăng" (Uploader name) elements.
  • Desktop uploader text: change from font-semibold to text-xs.
  • Mobile uploader text: change from text-sm font-semibold text-white to text-xs text-slate-200.
• Safe Area Like Button:
  • Shift the absolute top position of the Like button to account for safe area insets: top-[calc(1rem+env(safe-area-inset-top,0px))]. This prevents browser address bars or notches from clipping it.

---

2. Landing Page Like-Based Sorting

[MODIFY] LandingPage.tsx

• In fetchPublicPhotos, sort the fetched publicPhotos array based on the number of likes (likedUserIds.length) in descending order.
• This ensures:
  1. The cycling background images naturally present the most-liked public photos first.
  2. The gallery previews at the bottom display the top 8 most-liked photos from the community.

---

3. Tour Banner Image Selection

[MODIFY] TourDetailPage.tsx

• Replace the simple first-photo check for coverImage with a function that retrieves the photo with the most likes in the tour.
• If there are no photos in the tour, fall back to the default Unsplash placeholder cover image.

---

4. Auto-Select Most Liked Photo for Display

[MODIFY] ExploreMap.tsx

• In groupedPhotos memo, sort each location's photo array so that photos with the most likes appear first.
• This ensures the map pin thumbnail bubble displays the most-liked photo at that coordinate, and clicking it displays that photo as the default.

[MODIFY] MyPhotosPage.tsx

• Define a helper function getMostLikedPhoto(photos) that returns the photo with the most likes.
• In the useEffect that updates selectedPhotoForDisplay, use this helper to default-select the most liked photo from the filtered list.

[MODIFY] TourDetailPage.tsx

• Define the same helper function getMostLikedPhoto(photos).
• Update the default photo selection inside both useEffect hooks (the one listening to filteredPhotos and the one listening to currentTour/legs changes) to select the photo with the most likes using this helper.

---

Verification Plan

Automated Tests

• Run npm run build -w frontend to verify that there are no compilation or syntax errors.

Manual Verification

• Mobile Public Photo Modal:
  1. View a photo on mobile browser/emulator.
  2. Verify only the comments scroll, and the header label is hidden.
  3. Verify the Like button position is adjusted.
  4. Verify the Uploader text size is reduced and normal.
• Landing Page background & gallery:
  1. Open the landing page. Verify that the previews show the most liked photos first.
• Tour Banner:
  1. Verify the tour banner updates to show the photo with the most likes.
• Map Marker / Photo Timeline default:
  1. Click map marker and verify most liked photo is active by default.