refactor(web): replace emoji icons with lucide-react across the app
Some checks failed
Deploy / Build API Image (push) Failing after 19s
Deploy / Build Web Image (push) Failing after 11s
Security Scanning / Trivy Filesystem Scan (push) Failing after 27s
Deploy / Deploy to Staging (push) Has been skipped
Deploy / Smoke Test Production (push) Has been skipped
Deploy / Deploy to Production (push) Has been skipped
CI / Lint → Typecheck → Test → Build (22) (push) Failing after 11s
CI / E2E Tests (push) Has been skipped
CodeQL Analysis / CodeQL (javascript-typescript) (push) Failing after 37s
Deploy / Build AI Services Image (push) Failing after 10s
E2E Tests / Playwright E2E (push) Failing after 10s
Security Scanning / Dependency Audit (pnpm) (push) Failing after 3s
Security Scanning / Trivy Scan — API Image (push) Failing after 47s
Security Scanning / Trivy Scan — Web Image (push) Failing after 31s
Security Scanning / Trivy Scan — AI Services Image (push) Failing after 32s
Deploy / Smoke Test Staging (push) Has been skipped
Security Scanning / Security Gate (push) Failing after 1s
Deploy / Rollback Staging (push) Has been skipped
Deploy / Rollback Production (push) Has been skipped

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>
This commit is contained in:
Ho Ngoc Hai
2026-04-19 16:01:13 +07:00
parent 88429a1e51
commit 593d1594bd
13 changed files with 149 additions and 63 deletions

View File

@@ -1,14 +1,27 @@
import {
ChefHat,
Home,
Monitor,
Refrigerator,
Sofa,
Store,
type LucideIcon,
} from 'lucide-react';
import { z } from 'zod';
// ─── Step 1: Category Selection ─────────────────────────
export const TRANSFER_CATEGORIES = [
{ value: 'FURNITURE', label: 'Nội thất', icon: '🛋️' },
{ value: 'APPLIANCE', label: 'Thiết bị gia dụng', icon: '🧊' },
{ value: 'OFFICE_EQUIPMENT', label: 'Thiết bị văn phòng', icon: '🖥️' },
{ value: 'KITCHEN', label: 'Bếp & thiết bị', icon: '🍳' },
{ value: 'PREMISES', label: 'Mặt bằng', icon: '🏪' },
{ value: 'FULL_UNIT', label: 'Trọn bộ', icon: '🏠' },
export const TRANSFER_CATEGORIES: ReadonlyArray<{
value: 'FURNITURE' | 'APPLIANCE' | 'OFFICE_EQUIPMENT' | 'KITCHEN' | 'PREMISES' | 'FULL_UNIT';
label: string;
icon: LucideIcon;
}> = [
{ value: 'FURNITURE', label: 'Nội thất', icon: Sofa },
{ value: 'APPLIANCE', label: 'Thiết bị gia dụng', icon: Refrigerator },
{ value: 'OFFICE_EQUIPMENT', label: 'Thiết bị văn phòng', icon: Monitor },
{ value: 'KITCHEN', label: 'Bếp & thiết bị', icon: ChefHat },
{ value: 'PREMISES', label: 'Mặt bằng', icon: Store },
{ value: 'FULL_UNIT', label: 'Trọn bộ', icon: Home },
] as const;
export const TRANSFER_CONDITIONS = [