fix: build ứng dụng trên android và có thể đăng nhập bằng Google Oauth

implementation_plan.md

@@ -0,0 +1,78 @@
+# 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.