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/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',