feat: redesign listing detail with tabbed sections and larger drawer

frontend/src/components/ListingDetail.tsx

@@ -1,5 +1,6 @@
 import { ExternalLink, Heart, X, Bed, Maximize2, PoundSterling, Building, Clock, MapPin, Footprints, Bike, Train } from 'lucide-react';
 import { Button } from './ui/button';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/tabs';
 import { PhotoCarousel } from './PhotoCarousel';
 import type { ListingDetailData, DecisionType, POIDistanceInfo } from '@/types';
 import { formatDate, formatDuration } from '@/utils/format';
@@ -19,28 +20,75 @@ function TravelModeIcon({ mode }: { mode: string }) {
   }
 }
 
+function TravelModeLabel({ mode }: { mode: string }) {
+  switch (mode) {
+    case 'WALK': return 'Walk';
+    case 'BICYCLE': return 'Cycle';
+    case 'TRANSIT': return 'Transit';
+    default: return mode;
+  }
+}
+
 export function ListingDetail({ detail, onDecide, onClearDecision }: ListingDetailProps) {
   const allPhotos = [
     ...detail.photos,
     ...detail.floorplans.map(fp => ({ url: fp.url, caption: fp.caption || 'Floorplan', type: 'FLOORPLAN' as string | null })),
   ];
 
+  const pricePerSqm = detail.square_meters ? Math.round(detail.price / detail.square_meters) : null;
+
+  // Group POI distances by POI name for the travel table
+  const poiGroups = new Map<string, Map<string, POIDistanceInfo>>();
+  for (const d of detail.poi_distances) {
+    if (!poiGroups.has(d.poi_name)) {
+      poiGroups.set(d.poi_name, new Map());
+    }
+    poiGroups.get(d.poi_name)!.set(d.travel_mode, d);
+  }
+
+  // Check which tabs have content
+  const hasOverview = detail.key_features.length > 0 || !!detail.description;
+  const hasTravel = detail.poi_distances.length > 0;
+  const hasPriceHistory = detail.price_history.length > 1;
+  const hasDetails = !!(detail.property_sub_type || detail.furnish_type || detail.council_tax_band || detail.available_from || detail.service_charge != null || detail.lease_left != null);
+
   return (
     <div className="pb-8">
-      {/* Photo carousel */}
+      {/* Photo carousel - always visible above tabs */}
       <PhotoCarousel photos={allPhotos} />
 
       <div className="px-4 pt-4 space-y-4">
-        {/* Price + address */}
+        {/* Price header */}
         <div>
           <div className="flex items-start justify-between">
             <div>
-              <div className="text-2xl font-bold">
+              <div className="text-2xl font-bold tracking-tight">
                 £{detail.price.toLocaleString()}
                 {detail.listing_type !== 'BUY' && (
                   <span className="text-muted-foreground font-normal text-base">/mo</span>
                 )}
               </div>
+              {/* Key metrics */}
+              <div className="flex items-center gap-1.5 text-sm text-muted-foreground mt-1">
+                <span className="flex items-center gap-1">
+                  <Bed className="h-3.5 w-3.5" />
+                  {detail.number_of_bedrooms} bed
+                </span>
+                <span>·</span>
+                <span className="flex items-center gap-1">
+                  <Maximize2 className="h-3.5 w-3.5" />
+                  {detail.square_meters ?? '\u2014'} m²
+                </span>
+                {pricePerSqm && (
+                  <>
+                    <span>·</span>
+                    <span className="flex items-center gap-1">
+                      <PoundSterling className="h-3.5 w-3.5" />
+                      £{pricePerSqm}/m²
+                    </span>
+                  </>
+                )}
+              </div>
               {detail.display_address && (
                 <div className="flex items-center gap-1 text-sm text-muted-foreground mt-1">
                   <MapPin className="h-3.5 w-3.5" />
@@ -51,8 +99,8 @@ export function ListingDetail({ detail, onDecide, onClearDecision }: ListingDeta
           </div>
         </div>
 
-        {/* Like/Dislike buttons */}
-        <div className="flex gap-3">
+        {/* Action buttons */}
+        <div className="flex gap-2">
           <Button
             variant={detail.decision === 'disliked' ? 'destructive' : 'outline'}
             className="flex-1"
@@ -69,145 +117,170 @@ export function ListingDetail({ detail, onDecide, onClearDecision }: ListingDeta
             <Heart className={`h-4 w-4 mr-2 ${detail.decision === 'liked' ? 'fill-current' : ''}`} />
             {detail.decision === 'liked' ? 'Liked' : 'Like'}
           </Button>
+          <Button asChild variant="outline" size="icon" className="shrink-0">
+            <a href={detail.url} target="_blank" rel="noopener noreferrer" title="View on Rightmove">
+              <ExternalLink className="h-4 w-4" />
+            </a>
+          </Button>
         </div>
 
-        {/* Key stats */}
-        <div className="grid grid-cols-3 gap-3">
-          <div className="flex items-center gap-2 text-sm">
-            <Bed className="h-4 w-4 text-muted-foreground" />
-            <span><strong>{detail.number_of_bedrooms}</strong> beds</span>
-          </div>
-          <div className="flex items-center gap-2 text-sm">
-            <Maximize2 className="h-4 w-4 text-muted-foreground" />
-            <span><strong>{detail.square_meters ?? '\u2014'}</strong> m²</span>
-          </div>
-          <div className="flex items-center gap-2 text-sm">
-            <PoundSterling className="h-4 w-4 text-muted-foreground" />
-            <span><strong>{detail.square_meters ? `£${Math.round(detail.price / detail.square_meters)}` : '\u2014'}</strong>/m²</span>
-          </div>
-        </div>
+        {/* Tabbed sections */}
+        <Tabs defaultValue="overview">
+          <TabsList>
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            {hasTravel && <TabsTrigger value="travel">Travel</TabsTrigger>}
+            {hasPriceHistory && <TabsTrigger value="price-history">Price</TabsTrigger>}
+            {hasDetails && <TabsTrigger value="details">Details</TabsTrigger>}
+          </TabsList>
 
-        {/* Key features */}
-        {detail.key_features.length > 0 && (
-          <div>
-            <h3 className="text-sm font-semibold mb-2">Key Features</h3>
-            <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1">
-              {detail.key_features.map((f, i) => (
-                <li key={i}>{f}</li>
-              ))}
-            </ul>
-          </div>
-        )}
+          {/* Overview tab */}
+          <TabsContent value="overview" className="space-y-4">
+            {detail.key_features.length > 0 && (
+              <div>
+                <h3 className="text-sm font-semibold mb-2">Key Features</h3>
+                <ul className="list-disc list-inside text-sm text-muted-foreground space-y-1">
+                  {detail.key_features.map((f, i) => (
+                    <li key={i}>{f}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
 
-        {/* Description */}
-        {detail.description && (
-          <div>
-            <h3 className="text-sm font-semibold mb-2">Description</h3>
-            <p className="text-sm text-muted-foreground whitespace-pre-line">{detail.description}</p>
-          </div>
-        )}
+            {detail.description && (
+              <div>
+                <h3 className="text-sm font-semibold mb-2">Description</h3>
+                <p className="text-sm text-muted-foreground whitespace-pre-line">{detail.description}</p>
+              </div>
+            )}
 
-        {/* Property details grid */}
-        <div>
-          <h3 className="text-sm font-semibold mb-2">Details</h3>
-          <div className="grid grid-cols-2 gap-2 text-sm">
-            {detail.property_sub_type && (
-              <div className="flex items-center gap-2">
-                <Building className="h-4 w-4 text-muted-foreground" />
-                <span>{detail.property_sub_type}</span>
-              </div>
-            )}
-            {detail.furnish_type && (
-              <div className="flex items-center gap-2">
-                <span className="text-muted-foreground">Furnishing:</span>
-                <span>{detail.furnish_type}</span>
-              </div>
-            )}
-            {detail.council_tax_band && (
-              <div className="flex items-center gap-2">
-                <span className="text-muted-foreground">Council Tax:</span>
-                <span>Band {detail.council_tax_band}</span>
-              </div>
-            )}
-            {detail.available_from && (
-              <div className="flex items-center gap-2">
-                <Clock className="h-4 w-4 text-muted-foreground" />
-                <span>Available {formatDate(detail.available_from)}</span>
-              </div>
-            )}
-            {detail.service_charge != null && (
-              <div className="flex items-center gap-2">
-                <span className="text-muted-foreground">Service charge:</span>
-                <span>£{detail.service_charge.toLocaleString()}</span>
-              </div>
-            )}
-            {detail.lease_left != null && (
-              <div className="flex items-center gap-2">
-                <span className="text-muted-foreground">Lease:</span>
-                <span>{detail.lease_left} years</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Floorplans */}
-        {detail.floorplans.length > 0 && (
-          <div>
-            <h3 className="text-sm font-semibold mb-2">Floorplans</h3>
-            <div className="space-y-2">
-              {detail.floorplans.map((fp, i) => (
-                <img key={i} src={fp.url} alt={fp.caption || 'Floorplan'} className="w-full rounded-md border" />
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Price history */}
-        {detail.price_history.length > 1 && (
-          <div>
-            <h3 className="text-sm font-semibold mb-2">Price History</h3>
-            <div className="space-y-1">
-              {detail.price_history.map((entry) => (
-                <div key={entry.id} className="text-sm flex justify-between">
-                  <span className="text-muted-foreground">{entry.last_seen.split('T')[0]}</span>
-                  <span>£{entry.price.toLocaleString()}</span>
+            {/* Floorplans */}
+            {detail.floorplans.length > 0 && (
+              <div>
+                <h3 className="text-sm font-semibold mb-2">Floorplans</h3>
+                <div className="space-y-2">
+                  {detail.floorplans.map((fp, i) => (
+                    <img key={i} src={fp.url} alt={fp.caption || 'Floorplan'} className="w-full rounded-md border" />
+                  ))}
                 </div>
-              ))}
-            </div>
-          </div>
-        )}
+              </div>
+            )}
 
-        {/* POI distances */}
-        {detail.poi_distances.length > 0 && (
-          <div>
-            <h3 className="text-sm font-semibold mb-2">Travel Times</h3>
-            <div className="flex flex-wrap gap-1.5">
-              {detail.poi_distances.map((d: POIDistanceInfo) => (
-                <div key={`${d.poi_id}_${d.travel_mode}`} className="flex items-center gap-1 text-xs text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded">
-                  <span className="font-medium">{d.poi_name}:</span>
-                  <TravelModeIcon mode={d.travel_mode} />
-                  {formatDuration(d.duration_seconds)}
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
+            {/* Agency */}
+            {detail.agency && (
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Building className="h-4 w-4" />
+                <span>{detail.agency}</span>
+              </div>
+            )}
 
-        {/* Agency */}
-        {detail.agency && (
-          <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Building className="h-4 w-4" />
-            <span>{detail.agency}</span>
-          </div>
-        )}
+            {!hasOverview && !detail.floorplans.length && !detail.agency && (
+              <p className="text-sm text-muted-foreground">No overview information available.</p>
+            )}
+          </TabsContent>
 
-        {/* External link */}
-        <Button asChild variant="outline" className="w-full">
-          <a href={detail.url} target="_blank" rel="noopener noreferrer">
-            View on Rightmove
-            <ExternalLink className="ml-2 h-4 w-4" />
-          </a>
-        </Button>
+          {/* Travel tab */}
+          {hasTravel && (
+            <TabsContent value="travel">
+              <div className="overflow-x-auto">
+                <table className="w-full text-sm">
+                  <thead>
+                    <tr className="border-b">
+                      <th className="text-left py-2 pr-4 font-medium text-muted-foreground">Destination</th>
+                      <th className="text-center py-2 px-2 font-medium text-muted-foreground">
+                        <span className="inline-flex items-center gap-1"><Footprints className="h-3 w-3" /> <TravelModeLabel mode="WALK" /></span>
+                      </th>
+                      <th className="text-center py-2 px-2 font-medium text-muted-foreground">
+                        <span className="inline-flex items-center gap-1"><Bike className="h-3 w-3" /> <TravelModeLabel mode="BICYCLE" /></span>
+                      </th>
+                      <th className="text-center py-2 px-2 font-medium text-muted-foreground">
+                        <span className="inline-flex items-center gap-1"><Train className="h-3 w-3" /> <TravelModeLabel mode="TRANSIT" /></span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {Array.from(poiGroups.entries()).map(([poiName, modes]) => (
+                      <tr key={poiName} className="border-b last:border-0">
+                        <td className="py-2 pr-4 font-medium">{poiName}</td>
+                        {(['WALK', 'BICYCLE', 'TRANSIT'] as const).map(mode => {
+                          const d = modes.get(mode);
+                          return (
+                            <td key={mode} className="py-2 px-2 text-center text-muted-foreground">
+                              {d ? formatDuration(d.duration_seconds) : '\u2014'}
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </TabsContent>
+          )}
+
+          {/* Price History tab */}
+          {hasPriceHistory && (
+            <TabsContent value="price-history">
+              <div className="space-y-2">
+                {detail.price_history.map((entry) => (
+                  <div key={entry.id} className="flex justify-between items-center text-sm py-1.5 border-b last:border-0">
+                    <span className="text-muted-foreground">{entry.last_seen.split('T')[0]}</span>
+                    <span className="font-medium">£{entry.price.toLocaleString()}</span>
+                  </div>
+                ))}
+              </div>
+            </TabsContent>
+          )}
+
+          {/* Details tab */}
+          {hasDetails && (
+            <TabsContent value="details">
+              <div className="grid grid-cols-2 gap-3 text-sm">
+                {detail.property_sub_type && (
+                  <div className="space-y-0.5">
+                    <div className="text-xs text-muted-foreground">Property Type</div>
+                    <div className="font-medium flex items-center gap-1.5">
+                      <Building className="h-3.5 w-3.5 text-muted-foreground" />
+                      {detail.property_sub_type}
+                    </div>
+                  </div>
+                )}
+                {detail.furnish_type && (
+                  <div className="space-y-0.5">
+                    <div className="text-xs text-muted-foreground">Furnishing</div>
+                    <div className="font-medium">{detail.furnish_type}</div>
+                  </div>
+                )}
+                {detail.council_tax_band && (
+                  <div className="space-y-0.5">
+                    <div className="text-xs text-muted-foreground">Council Tax</div>
+                    <div className="font-medium">Band {detail.council_tax_band}</div>
+                  </div>
+                )}
+                {detail.lease_left != null && (
+                  <div className="space-y-0.5">
+                    <div className="text-xs text-muted-foreground">Lease Remaining</div>
+                    <div className="font-medium">{detail.lease_left} years</div>
+                  </div>
+                )}
+                {detail.service_charge != null && (
+                  <div className="space-y-0.5">
+                    <div className="text-xs text-muted-foreground">Service Charge</div>
+                    <div className="font-medium">£{detail.service_charge.toLocaleString()}</div>
+                  </div>
+                )}
+                {detail.available_from && (
+                  <div className="space-y-0.5">
+                    <div className="text-xs text-muted-foreground">Available From</div>
+                    <div className="font-medium flex items-center gap-1.5">
+                      <Clock className="h-3.5 w-3.5 text-muted-foreground" />
+                      {formatDate(detail.available_from)}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          )}
+        </Tabs>
       </div>
     </div>
   );

frontend/src/components/ListingDetailSheet.tsx

@@ -45,7 +45,7 @@ export function ListingDetailSheet({
     >
       <Drawer.Portal>
         <Drawer.Overlay className="fixed inset-0 bg-black/40 z-50" />
-        <Drawer.Content className="fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-background rounded-t-xl max-h-[90vh]">
+        <Drawer.Content className="fixed bottom-0 left-0 right-0 z-50 flex flex-col bg-background rounded-t-xl max-h-[90vh] sm:!max-w-2xl sm:mx-auto">
           <Drawer.Title className="sr-only">Listing Details</Drawer.Title>
           <div className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-muted-foreground/20 my-3" />
           <div className="overflow-y-auto flex-1">