From 089ee88728f62a63b9c0583316bc0b5475ed6e20 Mon Sep 17 00:00:00 2001
From: Viktor Barzin <viktorbarzin@meta.com>
Date: Sat, 21 Feb 2026 19:08:12 +0000
Subject: [PATCH] docs: add card carousel and tap-to-detail design [ci skip]

---
 ...6-02-21-card-carousel-tap-detail-design.md | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 docs/plans/2026-02-21-card-carousel-tap-detail-design.md

diff --git a/docs/plans/2026-02-21-card-carousel-tap-detail-design.md b/docs/plans/2026-02-21-card-carousel-tap-detail-design.md
new file mode 100644
index 0000000..d662dc3
--- /dev/null
+++ b/docs/plans/2026-02-21-card-carousel-tap-detail-design.md
@@ -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