docs: add card carousel and tap-to-detail design [ci skip]

This commit is contained in:
Viktor Barzin 2026-02-21 19:08:12 +00:00
parent a153f64af4
commit 089ee88728
No known key found for this signature in database
GPG key ID: 0EB088298288D958

View file

@ -0,0 +1,57 @@
# Card View: Photo Carousel and Tap-to-Detail
**Date:** 2026-02-21
**Status:** Approved
## Summary
Two changes to the listing card view:
1. Replace single thumbnail with a 5-photo carousel on each card
2. Fix tap behavior so tapping a card opens the detail bottom sheet (not Rightmove)
## Design
### Backend: Embed Photos in GeoJSON
**File:** `api/ui_exporter.py``convert_row_to_geojson()`
Add `photos` property (first 5 photo URLs) from `additional_info.property.images` to each GeoJSON feature. Fall back to `[photo_thumbnail]` if no photos array available.
### Frontend: Types
**File:** `frontend/src/types/index.ts`
Add `photos?: string[]` to `PropertyProperties` interface.
### Frontend: Card Carousel
**File:** `frontend/src/components/PropertyCard.tsx`
- Replace single `<img>` in compact variant with lightweight embla-carousel
- Swipeable horizontally, dot indicators overlaid at bottom
- Same aspect ratio as current thumbnail
- Lazy-load images
- Max 5 photos
### Frontend: Click Behavior
**File:** `frontend/src/components/PropertyCard.tsx`
- Remove `window.open(property.url)` from `handleClick`
- Tapping card only calls `onClick()` callback
- This triggers `onSelectListing(id)` in App.tsx, which opens `ListingDetailSheet`
- Rightmove link remains accessible via external link button in `ListingDetail`
### No Changes Needed
- `ListingDetailSheet.tsx` — already wired correctly
- `App.tsx``onSelectListing` already sets `selectedListingId`
- `ListingDetail.tsx` — already has Rightmove external link
- `PhotoCarousel.tsx` — used in detail view, unchanged
- `SwipeablePropertyCard.tsx` — passes `onClick` through, unchanged
## Approach Decision
Chose **Approach A (Minimal Fix)** over:
- **Approach B (Two-Zone Card):** Two click zones add UI complexity and are hard to discover on mobile
- **Approach C (Long-press):** Most users won't discover long-press behavior