User feedback: typing lat/lng by hand is painful — wire a real map
picker.
New component apps/web/components/map/location-picker.tsx:
- Mapbox map with theme-synced style (uses useMapboxStyle).
- Draggable primary marker (custom pin, inner-wrapped so Mapbox's
translate isn't clobbered — follows the hover-fix pattern we shipped
last commit).
- Click anywhere on the map → marker jumps + onChange fires.
- Dragend → onChange fires.
- Search box using Mapbox Geocoding API
(/geocoding/v5/mapbox.places) scoped to country=vn, language=vi,
limit=5, debounced 350ms with AbortController. Clicking a suggestion
centers the map + fills the resolved { address, ward, district,
city } from feature.context.
- Graceful fallback when NEXT_PUBLIC_MAPBOX_TOKEN is missing.
- Inline help "Nhấp vào bản đồ hoặc kéo pin để chọn vị trí".
StepLocation (listing-form-steps.tsx):
- New optional `setValue` + `watch` props. When both are passed the
picker renders and wires lat/lng (+ address/ward/district/city from
geocoder) into the form. Without them, the Step falls back to the
manual-only layout (kept for callers that don't want the picker).
- Dynamic-import the picker with ssr:false so mapbox-gl stays out of
the server bundle.
Wired into:
- /listings/new page — picker enabled on Step 2 (Vị trí).
- /listings/[id]/edit page — picker enabled on the Location tab, with
latitude/longitude now hydrated from property.latitude/longitude.
Test fixture update: listing-form-steps.spec.tsx no longer asserts the
placeholder string — instead verifies the lat/lng inputs still render
when the picker is absent (setValue not supplied), matching the new
opt-in contract.
Verification
- Typecheck clean across touched files.
- 624 / 624 web tests pass.
- Preview smoke: /listings/<id>/edit → Vị trí tab renders map +
draggable pin + search, lat/lng prefilled from listing data.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Mapbox theming
--------------
- New hook `lib/mapbox-style.ts` returning streets-v12 (light) or
dark-v11 (dark) from the app's useTheme().
- Six map components now initialise with the themed style and
`map.setStyle(...)` on theme change: project-map, park-map,
listing-map, district-heatmap (plus re-adding its heatmap source
after style.load), neighborhood-poi-map, valuation/comparables-map.
- Marker / popup DOM styles swapped from hard-coded white/#666/#green
to shadcn CSS tokens (--card, --card-foreground, --muted-foreground,
--primary, --border). Global Mapbox popup + control + attribution
skins added in app/globals.css.
- POI filter pills on neighborhood-poi-map were hard-coded `bg-white`
which rendered same-colour text on white in dark mode — switched to
`bg-card`/`bg-card/60` for proper contrast.
- Extend the MockMap in comparables-map.spec.tsx with setStyle/on
so the new theme-sync effect doesn't blow up in tests.
Detail client normaliser (du-an-server)
---------------------------------------
- Project media from the backend is a `string[]` (raw URLs) or richer
`{url,...}` objects. Handle both shapes and drop entries without
a URL so we never feed "" to <Image src>.
- Amenities are `string[]` in the DB but the frontend type expects
`{id,name,icon,category}`; normalise strings into objects so the
AmenitiesTab has stable keys and a displayable name.
Resolves three classes of runtime warnings on /du-an/<slug>:
"Image is missing required 'src' property", "ReactDOM.preload ...
empty href", and "Each child in a list should have a unique 'key'
prop" (AmenitiesTab).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Rewrite prisma/seed.ts to populate all 27 models with realistic
Vietnamese real estate data (8 users with login, 10 properties,
10 listings, orders, payments, reviews, notifications, etc.)
- Replace all emoji icons with Lucide React SVG icons across frontend
for consistent rendering, sizing, and accessibility
- Redesign dashboard nav: grouped sidebar with section headers,
primary/secondary split on desktop, icon-only secondary items
- Replace language switcher flag emoji with Globe icon
- Replace SVG theme toggle with Lucide Moon/Sun icons
- Fix API startup: graceful fallback for Sentry profiling, Google OAuth,
and Zalo OAuth when credentials are not configured
- Relax rate limiting in development mode (10k req/min)
- Fix listings API to include media[] array in search response
- Add optional chaining for property.media across frontend components
- Update OAuth strategy tests to match graceful fallback behavior
Co-Authored-By: Claude Opus 4 (1M context) <noreply@anthropic.com>
Add global QueryErrorResetBoundary wrapping the app so TanStack Query
errors are caught with a retry UI instead of crashing. Enable
throwOnError in QueryClient defaults. Update ListingMap to use real
latitude/longitude from API when available, falling back to city-based
jitter for listings without coordinates.
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Replace innerHTML/setHTML with DOM API (createElement/textContent/setDOMContent)
to prevent XSS via user-controlled listing titles, URLs, and prices
- Add Content-Security-Policy header to next.config.js with proper directives
for Mapbox, API, images, workers, and frame-ancestors
- Add X-CSRF-Token header to media upload fetch call, matching apiClient behavior
Co-Authored-By: Paperclip <noreply@paperclip.ing>
- Create (public) route group with landing page (hero, featured listings, district links, stats, CTA)
- Create search page with filter sidebar, list/map/split view modes, URL-synced filters, pagination
- Build ListingMap component with CSS-based marker visualization and popup details
- Build FilterBar with transaction type, property type, city, price range, area, bedrooms filters
- Build PropertyCard and SearchResults components with responsive grid layout
- Update middleware to allow public access to / and /search routes
- Move dashboard home to /dashboard to avoid route conflict
- All content in Vietnamese, mobile responsive
Co-Authored-By: Paperclip <noreply@paperclip.ing>
