refactor(web): replace emoji icons with lucide-react across the app

User directive: avoid emojis for UI chrome; keep the icon language
consistent with the rest of the design system (shadcn + lucide-react).

Swaps
-----
- lib/listing-personas.ts — Persona emojis (👨‍👩‍👧🏡🚇🧑‍💻🌳📈🛡️🏥)
  → Lucide icons (Baby, Home, TrainFront, Laptop, Trees, TrendingUp,
  Shield, HeartPulse). Persona type now carries `icon: LucideIcon`.
- components/neighborhood/types.ts — POI_CATEGORY_CONFIG emojis
  (🏫🏥🚇🛒🍽️🌳) → Lucide (GraduationCap, Stethoscope, TrainFront,
  ShoppingBag, UtensilsCrossed, Trees). Config type tightened to
  `icon: LucideIcon`.
- components/neighborhood/neighborhood-poi-map.tsx — filter pills
  now render <config.icon h-3.5 w-3.5>. Map markers were text-emoji
  (el.textContent = config.icon); replaced with hard-coded inline
  SVG strings per category (POI_MARKER_SVG) since lucide-static
  isn't installed. Marker bumped 28px → 32px for larger hit target.
  Popup now shows only the property name + category label (no
  emoji prefix). closeButton: true + closeOnClick: true for
  better dismissibility.
- listing-detail-client.tsx — PersonaFitCard now renders
  <p.icon h-4 w-4 aria-hidden>.
- transfer / chuyen-nhuong files — category icons (🛋️🧊🖥️🍳🛍️🏠)
  migrated to Lucide (Sofa, Refrigerator, Monitor, ChefHat, Store,
  Home) with type `icon: LucideIcon`.
- Small replacements: inquiries page 📭 → Inbox; kyc page ✓ → Check.

POI popup click fix
-------------------
The inner SVG inside each POI marker was capturing pointer events
before Mapbox's marker-click handler saw them, so clicking a marker
did nothing. Explicit `innerSvg.style.pointerEvents = 'none'` lets
clicks reach the wrapping .poi-marker div that setPopup() is bound
to. Verified via DOM dispatch: click → popup opens with property
name + category + distance + × close.

Verification
------------
- Grep across the 4 scoped files for emoji code points → 0 hits.
- pnpm -w test: 624/624 green.
- Typecheck: no new errors in touched files.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/components/chuyen-nhuong/chuyen-nhuong-detail-client.tsx

@@ -43,8 +43,12 @@ export function ChuyenNhuongDetailClient({ listing }: ChuyenNhuongDetailClientPr
           <Badge className={cn('text-xs', statusColor)} variant="secondary">
             {STATUS_LABELS[listing.status]}
           </Badge>
-          <Badge variant="outline" className="text-xs">
-            {CATEGORY_ICONS[listing.category]} {CATEGORY_LABELS[listing.category]}
+          <Badge variant="outline" className="inline-flex items-center gap-1 text-xs">
+            {(() => {
+              const Icon = CATEGORY_ICONS[listing.category];
+              return <Icon className="h-3.5 w-3.5" aria-hidden="true" />;
+            })()}
+            {CATEGORY_LABELS[listing.category]}
           </Badge>
           {listing.isNegotiable && (
             <Badge className="bg-blue-100 text-blue-800 text-xs" variant="secondary">

apps/web/components/chuyen-nhuong/transfer-listing-card.tsx

@@ -44,8 +44,12 @@ export function TransferListingCard({ listing }: TransferListingCardProps) {
 
           {/* Category */}
           <div className="mb-3">
-            <Badge variant="outline" className="text-xs">
-              {CATEGORY_ICONS[listing.category]} {CATEGORY_LABELS[listing.category]}
+            <Badge variant="outline" className="inline-flex items-center gap-1 text-xs">
+              {(() => {
+                const Icon = CATEGORY_ICONS[listing.category];
+                return <Icon className="h-3.5 w-3.5" aria-hidden="true" />;
+              })()}
+              {CATEGORY_LABELS[listing.category]}
             </Badge>
           </div>
 

apps/web/components/chuyen-nhuong/transfer-wizard-client.tsx

@@ -52,7 +52,10 @@ function StepCategory() {
               category === value && 'border-primary bg-primary/5 ring-1 ring-primary',
             )}
           >
-            <span className="text-2xl">{CATEGORY_ICONS[value]}</span>
+            {(() => {
+              const Icon = CATEGORY_ICONS[value];
+              return <Icon className="h-6 w-6" aria-hidden="true" />;
+            })()}
             <span>{label}</span>
           </button>
         ))}

apps/web/components/listings/listing-detail-client.tsx

@@ -527,7 +527,9 @@ function PersonaFitCard({
                 className="group relative inline-flex items-center gap-1.5 rounded-full border bg-card px-3 py-1.5 text-sm shadow-sm"
                 title={p.reason}
               >
-                <span aria-hidden="true">{p.emoji}</span>
+                <span className="inline-flex items-center text-primary">
+                  <p.icon className="h-4 w-4 shrink-0" aria-hidden="true" />
+                </span>
                 <span className="font-medium">{p.label}</span>
               </div>
             ))}

apps/web/components/neighborhood/neighborhood-poi-map.tsx

@@ -8,6 +8,26 @@ import { useMapboxStyle } from '@/lib/mapbox-style';
 import { cn } from '@/lib/utils';
 import { type POIItem, type POICategory, POI_CATEGORY_CONFIG  } from './types';
 
+/**
+ * Hard-coded inline SVG markup for the 6 POI categories. Sourced from
+ * lucide-react (same icons referenced in POI_CATEGORY_CONFIG). Used to render
+ * the Lucide glyph inside Mapbox marker DOM where we can't mount a React tree.
+ */
+const POI_MARKER_SVG: Record<POICategory, string> = {
+  school:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"/><path d="M22 10v6"/><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"/></svg>',
+  hospital:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 2v2"/><path d="M5 2v2"/><path d="M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1"/><path d="M8 15a6 6 0 0 0 12 0v-3"/><circle cx="20" cy="10" r="2"/></svg>',
+  transit:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3.1V7a4 4 0 0 0 8 0V3.1"/><path d="m9 15-1-1"/><path d="m15 15 1-1"/><path d="M9 19c-2.8 0-5-2.2-5-5v-4a8 8 0 0 1 16 0v4c0 2.8-2.2 5-5 5Z"/><path d="m8 19-2 3"/><path d="m16 19 2 3"/></svg>',
+  shopping:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"/><path d="M3.103 6.034h17.794"/><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"/></svg>',
+  restaurant:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16 2-2.3 2.3a3 3 0 0 0 0 4.2l1.8 1.8a3 3 0 0 0 4.2 0L22 8"/><path d="M15 15 3.3 3.3a4.2 4.2 0 0 0 0 6l7.3 7.3c.7.7 2 .7 2.8 0L15 15Zm0 0 7 7"/><path d="m2.1 21.8 6.4-6.3"/><path d="m19 5-7 7"/></svg>',
+  park:
+    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z"/><path d="M7 16v6"/><path d="M13 19v3"/><path d="M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5"/></svg>',
+};
+
 interface NeighborhoodPOIMapProps {
   center: { lat: number; lng: number };
   pois: POIItem[];
@@ -105,8 +125,8 @@ export function NeighborhoodPOIMap({
       const el = document.createElement('div');
       el.className = 'poi-marker';
       el.style.cssText = `
-        width: 28px;
-        height: 28px;
+        width: 32px;
+        height: 32px;
         border-radius: 50%;
         background: ${config.color};
         border: 2px solid white;
@@ -114,12 +134,16 @@ export function NeighborhoodPOIMap({
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 14px;
         cursor: pointer;
         transition: transform 0.15s;
       `;
-      el.textContent = config.icon;
+      el.innerHTML = POI_MARKER_SVG[poi.category];
       el.title = `${poi.name} (${config.label})`;
+      // Inner SVG would otherwise swallow the click before Mapbox's marker
+      // handler sees it — mark it as passthrough so pointer events hit the
+      // wrapping .poi-marker div that Mapbox bound setPopup to.
+      const innerSvg = el.querySelector('svg');
+      if (innerSvg) innerSvg.style.pointerEvents = 'none';
 
       el.addEventListener('mouseenter', () => {
         el.style.transform = 'scale(1.3)';
@@ -128,10 +152,10 @@ export function NeighborhoodPOIMap({
         el.style.transform = 'scale(1)';
       });
 
-      const popup = new mapboxgl.Popup({ offset: 20, closeButton: false })
+      const popup = new mapboxgl.Popup({ offset: 20, closeButton: true, closeOnClick: true })
         .setHTML(
           `<div style="font-family:system-ui,sans-serif;background:hsl(var(--card));color:hsl(var(--card-foreground));padding:8px;border-radius:6px;">
-            <p style="font-weight:600;font-size:13px;margin:0 0 2px;">${config.icon} ${poi.name}</p>
+            <p style="font-weight:600;font-size:13px;margin:0 0 2px;">${poi.name}</p>
             <p style="font-size:12px;color:hsl(var(--muted-foreground));margin:0;">${config.label}${poi.distance ? ` · ${poi.distance}m` : ''}</p>
           </div>`,
         );
@@ -198,7 +222,7 @@ export function NeighborhoodPOIMap({
               )}
               title={`${isActive ? 'Ẩn' : 'Hiện'} ${config.label}`}
             >
-              <span>{config.icon}</span>
+              <config.icon className="h-3.5 w-3.5" aria-hidden="true" />
               <span>{config.label}</span>
               {poiCount > 0 && (
                 <span

apps/web/components/neighborhood/types.ts

@@ -1,5 +1,15 @@
 /** Neighborhood scoring types shared across components */
 
+import {
+  GraduationCap,
+  ShoppingBag,
+  Stethoscope,
+  TrainFront,
+  Trees,
+  UtensilsCrossed,
+  type LucideIcon,
+} from 'lucide-react';
+
 export interface NeighborhoodCategory {
   category: string;
   label: string;
@@ -33,14 +43,14 @@ export interface NeighborhoodScoreData {
 
 export const POI_CATEGORY_CONFIG: Record<
   POICategory,
-  { label: string; color: string; icon: string }
+  { label: string; color: string; icon: LucideIcon }
 > = {
-  school: { label: 'Trường học', color: '#3B82F6', icon: '🏫' },
-  hospital: { label: 'Bệnh viện', color: '#EF4444', icon: '🏥' },
-  transit: { label: 'Giao thông', color: '#8B5CF6', icon: '🚇' },
-  shopping: { label: 'Mua sắm', color: '#F59E0B', icon: '🛒' },
-  restaurant: { label: 'Nhà hàng', color: '#F97316', icon: '🍽️' },
-  park: { label: 'Công viên', color: '#22C55E', icon: '🌳' },
+  school: { label: 'Trường học', color: '#3B82F6', icon: GraduationCap },
+  hospital: { label: 'Bệnh viện', color: '#EF4444', icon: Stethoscope },
+  transit: { label: 'Giao thông', color: '#8B5CF6', icon: TrainFront },
+  shopping: { label: 'Mua sắm', color: '#F59E0B', icon: ShoppingBag },
+  restaurant: { label: 'Nhà hàng', color: '#F97316', icon: UtensilsCrossed },
+  park: { label: 'Công viên', color: '#22C55E', icon: Trees },
 };
 
 export const DEFAULT_CATEGORIES: NeighborhoodCategory[] = [