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