# 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](file:///home/locpham/travelplanning/frontend/src/components/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](file:///home/locpham/travelplanning/frontend/src/pages/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](file:///home/locpham/travelplanning/frontend/src/pages/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](file:///home/locpham/travelplanning/frontend/src/pages/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](file:///home/locpham/travelplanning/frontend/src/pages/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](file:///home/locpham/travelplanning/frontend/src/pages/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.