fix(web): update search, listing, and map components

Improve agent profile client, comparison table, image gallery/upload,
listing map, filter bar, property card, and search results components
with better error handling, type safety, and UX refinements.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/components/agents/agent-profile-client.tsx

@@ -18,6 +18,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Link } from '@/i18n/navigation';
 import type { AgentPublicProfile, AgentReviewItem } from '@/lib/agents-api';
 import { formatPrice } from '@/lib/currency';
+import { shimmerBlurDataURL } from '@/lib/image-blur';
 
 // ---------------------------------------------------------------------------
 // Props
@@ -340,6 +341,8 @@ function ListingCard({ listing }: { listing: AgentPublicProfile['activeListings'
               fill
               className="object-cover transition-transform group-hover:scale-105"
               sizes="(max-width: 640px) 100vw, 50vw"
+              placeholder="blur"
+              blurDataURL={shimmerBlurDataURL()}
             />
           ) : (
             <div className="flex h-full items-center justify-center">

apps/web/components/comparison/comparison-table.tsx

@@ -7,6 +7,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Link } from '@/i18n/navigation';
 import { formatPrice, formatPricePerM2 } from '@/lib/currency';
+import { shimmerBlurDataURL } from '@/lib/image-blur';
 import type { ListingDetail } from '@/lib/listings-api';
 
 const PROPERTY_TYPE_LABELS: Record<string, string> = {
@@ -80,6 +81,8 @@ export function ComparisonTable({ listings, onRemove }: ComparisonTableProps) {
                         fill
                         sizes="200px"
                         className="object-cover"
+                        placeholder="blur"
+                        blurDataURL={shimmerBlurDataURL()}
                       />
                     ) : (
                       <div className="flex h-full items-center justify-center text-xs text-muted-foreground">

apps/web/components/listings/image-gallery.tsx

@@ -2,6 +2,8 @@
 
 import Image from 'next/image';
 import * as React from 'react';
+import { ImageLightbox } from '@/components/listings/image-lightbox';
+import { shimmerBlurDataURL } from '@/lib/image-blur';
 import type { PropertyMedia } from '@/lib/listings-api';
 import { cn } from '@/lib/utils';
 
@@ -13,6 +15,12 @@ interface ImageGalleryProps {
 export function ImageGallery({ media, className }: ImageGalleryProps) {
   const images = media.filter((m) => m.type === 'image').sort((a, b) => a.order - b.order);
   const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [lightboxOpen, setLightboxOpen] = React.useState(false);
+
+  const openLightbox = React.useCallback((index: number) => {
+    setSelectedIndex(index);
+    setLightboxOpen(true);
+  }, []);
 
   if (images.length === 0) {
     return (
@@ -31,35 +39,58 @@ export function ImageGallery({ media, className }: ImageGalleryProps) {
     <div className={cn('space-y-3', className)}>
       {/* Main image */}
       <div className="relative aspect-video overflow-hidden rounded-lg bg-muted">
+        <button
+          onClick={() => openLightbox(selectedIndex)}
+          className="absolute inset-0 z-10 cursor-zoom-in"
+          aria-label="Xem ảnh toàn màn hình"
+        />
         <Image
           src={images[selectedIndex]?.url ?? ''}
           alt={images[selectedIndex]?.caption || `Ảnh ${selectedIndex + 1}`}
           fill
-          sizes="(max-width: 768px) 100vw, 60vw"
+          sizes="(max-width: 640px) 100vw, 50vw"
           className="object-cover"
           priority={selectedIndex === 0}
+          placeholder="blur"
+          blurDataURL={shimmerBlurDataURL()}
         />
         {images.length > 1 && (
           <>
             <button
-              onClick={() => setSelectedIndex((i) => (i > 0 ? i - 1 : images.length - 1))}
-              className="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
+              onClick={(e) => {
+                e.stopPropagation();
+                setSelectedIndex((i) => (i > 0 ? i - 1 : images.length - 1));
+              }}
+              className="absolute left-2 top-1/2 z-20 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
               aria-label="Ảnh trước"
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>
             </button>
             <button
-              onClick={() => setSelectedIndex((i) => (i < images.length - 1 ? i + 1 : 0))}
-              className="absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
+              onClick={(e) => {
+                e.stopPropagation();
+                setSelectedIndex((i) => (i < images.length - 1 ? i + 1 : 0));
+              }}
+              className="absolute right-2 top-1/2 z-20 -translate-y-1/2 rounded-full bg-black/50 p-2 text-white transition-colors hover:bg-black/70"
               aria-label="Ảnh tiếp"
             >
               <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
             </button>
           </>
         )}
-        <div className="absolute bottom-2 right-2 rounded bg-black/60 px-2 py-1 text-xs text-white">
+        <div className="absolute bottom-2 right-2 z-20 rounded bg-black/60 px-2 py-1 text-xs text-white">
           {selectedIndex + 1} / {images.length}
         </div>
+        {/* Expand hint icon */}
+        <div className="absolute bottom-2 left-2 z-20 flex items-center gap-1 rounded bg-black/60 px-2 py-1 text-xs text-white">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M15 3h6v6" />
+            <path d="M9 21H3v-6" />
+            <path d="m21 3-7 7" />
+            <path d="m3 21 7-7" />
+          </svg>
+          Xem toàn màn hình
+        </div>
       </div>
 
       {/* Thumbnails */}
@@ -69,6 +100,7 @@ export function ImageGallery({ media, className }: ImageGalleryProps) {
             <button
               key={img.id}
               onClick={() => setSelectedIndex(index)}
+              onDoubleClick={() => openLightbox(index)}
               className={cn(
                 'relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border-2 transition-colors',
                 index === selectedIndex ? 'border-primary' : 'border-transparent opacity-70 hover:opacity-100',
@@ -85,6 +117,14 @@ export function ImageGallery({ media, className }: ImageGalleryProps) {
           ))}
         </div>
       )}
+
+      {/* Lightbox */}
+      <ImageLightbox
+        images={images}
+        initialIndex={selectedIndex}
+        open={lightboxOpen}
+        onClose={() => setLightboxOpen(false)}
+      />
     </div>
   );
 }

apps/web/components/listings/image-upload.tsx

@@ -84,12 +84,21 @@ export function ImageUpload({ images, onChange, maxFiles = 20, className }: Imag
   return (
     <div className={cn('space-y-4', className)}>
       <div
+        role="button"
+        tabIndex={0}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
         onClick={() => inputRef.current?.click()}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            inputRef.current?.click();
+          }
+        }}
+        aria-label="Tải ảnh lên. Kéo thả ảnh vào đây hoặc nhấn để chọn"
         className={cn(
-          'flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 transition-colors',
+          'flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-8 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
           isDragging
             ? 'border-primary bg-primary/5'
             : 'border-muted-foreground/25 hover:border-primary/50',

apps/web/components/map/listing-map.tsx

@@ -198,7 +198,7 @@ export function ListingMap({ listings, onMarkerClick, selectedListingId, classNa
   function showPopup(map: mapboxgl.Map, marker: MapMarker) {
     popupRef.current?.remove();
 
-    const popup = new mapboxgl.Popup({ offset: 25, maxWidth: '260px', closeButton: true })
+    const popup = new mapboxgl.Popup({ offset: 25, maxWidth: 'min(260px, 85vw)', closeButton: true })
       .setLngLat([marker.lng, marker.lat])
       .setDOMContent(buildPopupContent(marker.listing))
       .addTo(map);
@@ -209,7 +209,7 @@ export function ListingMap({ listings, onMarkerClick, selectedListingId, classNa
   const hasToken = typeof process !== 'undefined' && process.env['NEXT_PUBLIC_MAPBOX_TOKEN'];
 
   return (
-    <div className={`relative overflow-hidden rounded-lg border ${className || 'h-[500px]'}`}>
+    <div className={`relative overflow-hidden rounded-lg border ${className || 'h-[300px] md:h-[500px]'}`}>
       <div ref={mapContainerRef} className="h-full w-full" />
 
       {/* Fallback when no Mapbox token */}

apps/web/components/search/filter-bar.tsx

@@ -83,7 +83,7 @@ export function FilterBar({ filters, onChange, onSearch, layout = 'horizontal' }
         <Select
           value={filters.transactionType}
           onChange={(e) => update('transactionType', e.target.value)}
-          className={isSidebar ? 'w-full' : 'w-40'}
+          className={isSidebar ? 'w-full' : 'w-full sm:w-40'}
           aria-label={t('allTransactions')}
         >
           <option value="">{t('allTransactions')}</option>
@@ -97,7 +97,7 @@ export function FilterBar({ filters, onChange, onSearch, layout = 'horizontal' }
         <Select
           value={filters.propertyType}
           onChange={(e) => update('propertyType', e.target.value)}
-          className={isSidebar ? 'w-full' : 'w-44'}
+          className={isSidebar ? 'w-full' : 'w-full sm:w-44'}
           aria-label={t('allPropertyTypes')}
         >
           <option value="">{t('allPropertyTypes')}</option>
@@ -111,7 +111,7 @@ export function FilterBar({ filters, onChange, onSearch, layout = 'horizontal' }
         <Select
           value={filters.city}
           onChange={(e) => update('city', e.target.value)}
-          className={isSidebar ? 'w-full' : 'w-44'}
+          className={isSidebar ? 'w-full' : 'w-full sm:w-44'}
           aria-label={t('allAreas')}
         >
           <option value="">{t('allAreas')}</option>
@@ -125,7 +125,7 @@ export function FilterBar({ filters, onChange, onSearch, layout = 'horizontal' }
         <Select
           value={currentPriceIdx >= 0 ? String(currentPriceIdx) : ''}
           onChange={(e) => handlePriceRange(e.target.value)}
-          className={isSidebar ? 'w-full' : 'w-40'}
+          className={isSidebar ? 'w-full' : 'w-full sm:w-40'}
           aria-label={t('allPrices')}
         >
           <option value="">{t('allPrices')}</option>
@@ -188,7 +188,7 @@ export function FilterBar({ filters, onChange, onSearch, layout = 'horizontal' }
           <Select
             value={filters.bedrooms}
             onChange={(e) => update('bedrooms', e.target.value)}
-            className="w-36"
+            className="w-full sm:w-36"
             aria-label={t('bedrooms')}
           >
             <option value="">{t('bedrooms')}</option>

apps/web/components/search/property-card.tsx

@@ -4,6 +4,7 @@ import { AddToCompareButton } from '@/components/comparison/add-to-compare-butto
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent } from '@/components/ui/card';
 import { formatPrice } from '@/lib/currency';
+import { shimmerBlurDataURL } from '@/lib/image-blur';
 import type { ListingDetail } from '@/lib/listings-api';
 
 const PROPERTY_TYPE_LABELS: Record<string, string> = {
@@ -38,6 +39,8 @@ export function PropertyCard({ listing, compact }: PropertyCardProps) {
                 fill
                 sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
                 className="object-cover transition-transform group-hover:scale-105"
+                placeholder="blur"
+                blurDataURL={shimmerBlurDataURL()}
               />
             ) : (
               <div className="flex h-full items-center justify-center text-muted-foreground" aria-hidden="true">

apps/web/components/search/search-results.tsx

@@ -73,14 +73,14 @@ export function SearchResults({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
         <p className="text-sm text-muted-foreground">
           {result.total} kết quả
         </p>
         <Select
           value={sort}
           onChange={(e) => onSortChange(e.target.value)}
-          className="w-48"
+          className="w-full sm:w-48"
         >
           <option value="">Mới nhất</option>
           <option value="price_asc">Giá: Thấp đến cao</option>