feat(maps): dark/light Mapbox theme + fix empty Image src & missing keys

Mapbox theming
--------------
- New hook `lib/mapbox-style.ts` returning streets-v12 (light) or
  dark-v11 (dark) from the app's useTheme().
- Six map components now initialise with the themed style and
  `map.setStyle(...)` on theme change: project-map, park-map,
  listing-map, district-heatmap (plus re-adding its heatmap source
  after style.load), neighborhood-poi-map, valuation/comparables-map.
- Marker / popup DOM styles swapped from hard-coded white/#666/#green
  to shadcn CSS tokens (--card, --card-foreground, --muted-foreground,
  --primary, --border). Global Mapbox popup + control + attribution
  skins added in app/globals.css.
- POI filter pills on neighborhood-poi-map were hard-coded `bg-white`
  which rendered same-colour text on white in dark mode — switched to
  `bg-card`/`bg-card/60` for proper contrast.
- Extend the MockMap in comparables-map.spec.tsx with setStyle/on
  so the new theme-sync effect doesn't blow up in tests.

Detail client normaliser (du-an-server)
---------------------------------------
- Project media from the backend is a `string[]` (raw URLs) or richer
  `{url,...}` objects. Handle both shapes and drop entries without
  a URL so we never feed "" to <Image src>.
- Amenities are `string[]` in the DB but the frontend type expects
  `{id,name,icon,category}`; normalise strings into objects so the
  AmenitiesTab has stable keys and a displayable name.

Resolves three classes of runtime warnings on /du-an/<slug>:
"Image is missing required 'src' property", "ReactDOM.preload ...
empty href", and "Each child in a list should have a unique 'key'
prop" (AmenitiesTab).

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

apps/web/lib/du-an-server.ts

@@ -42,23 +42,61 @@ function normalizeProjectDetail(raw: unknown): ProjectDetail | null {
   };
 
   // Media: may be absent (stripped by backend), or present as a raw JSON array.
-  const rawMedia = Array.isArray(r['media']) ? (r['media'] as Record<string, unknown>[]) : [];
-  const media: ProjectMedia[] = rawMedia.map((m, idx) => ({
-    id: typeof m['id'] === 'string' ? m['id'] : `media-${idx}`,
-    url: typeof m['url'] === 'string' ? m['url'] : '',
-    type:
-      m['type'] === 'video' ||
-      m['type'] === 'master_plan' ||
-      m['type'] === 'document' ||
-      m['type'] === 'image'
-        ? (m['type'] as ProjectMedia['type'])
-        : 'image',
-    order: typeof m['order'] === 'number' ? m['order'] : idx,
-    caption: typeof m['caption'] === 'string' ? m['caption'] : null,
-  }));
+  // Backend returns media as either `string[]` (raw URLs from the seed JSON
+  // column) or `{ id, url, type, order, caption }[]` once richer data lands.
+  // Handle both shapes and drop entries without a resolvable URL so we never
+  // feed an empty string to `<Image src>`.
+  const rawMediaArr = Array.isArray(r['media']) ? (r['media'] as unknown[]) : [];
+  const media: ProjectMedia[] = rawMediaArr
+    .map((entry, idx): ProjectMedia | null => {
+      if (typeof entry === 'string') {
+        if (!entry) return null;
+        return { id: `media-${idx}`, url: entry, type: 'image', order: idx, caption: null };
+      }
+      if (entry && typeof entry === 'object') {
+        const m = entry as Record<string, unknown>;
+        const url = typeof m['url'] === 'string' ? m['url'] : '';
+        if (!url) return null;
+        return {
+          id: typeof m['id'] === 'string' ? m['id'] : `media-${idx}`,
+          url,
+          type:
+            m['type'] === 'video' ||
+            m['type'] === 'master_plan' ||
+            m['type'] === 'document' ||
+            m['type'] === 'image'
+              ? (m['type'] as ProjectMedia['type'])
+              : 'image',
+          order: typeof m['order'] === 'number' ? m['order'] : idx,
+          caption: typeof m['caption'] === 'string' ? m['caption'] : null,
+        };
+      }
+      return null;
+    })
+    .filter((m): m is ProjectMedia => m !== null);
 
   const asArray = <T>(v: unknown): T[] => (Array.isArray(v) ? (v as T[]) : []);
 
+  // Amenities in the DB are a JSON string[]; the frontend type expects
+  // `{ id, name, icon, category }`. Normalize strings into objects so the
+  // AmenitiesTab render has stable keys + a displayable name.
+  const rawAmenities = Array.isArray(r['amenities']) ? (r['amenities'] as unknown[]) : [];
+  const amenities = rawAmenities.map((a, idx) => {
+    if (typeof a === 'string') {
+      return { id: `amenity-${idx}`, name: a, icon: '', category: 'Tiện ích' };
+    }
+    if (a && typeof a === 'object') {
+      const o = a as Record<string, unknown>;
+      return {
+        id: typeof o['id'] === 'string' ? o['id'] : `amenity-${idx}`,
+        name: typeof o['name'] === 'string' ? o['name'] : '',
+        icon: typeof o['icon'] === 'string' ? o['icon'] : '',
+        category: typeof o['category'] === 'string' ? o['category'] : 'Tiện ích',
+      };
+    }
+    return { id: `amenity-${idx}`, name: '', icon: '', category: 'Tiện ích' };
+  });
+
   return {
     id: String(r['id'] ?? ''),
     slug: String(r['slug'] ?? ''),
@@ -84,7 +122,7 @@ function normalizeProjectDetail(raw: unknown): ProjectDetail | null {
     description: typeof r['description'] === 'string' ? (r['description'] as string) : '',
     media,
     blocks: asArray(r['blocks']),
-    amenities: asArray(r['amenities']),
+    amenities,
     priceRanges: asArray(r['priceRanges']),
     priceHistory: asArray(r['priceHistory']),
     neighborhoodScores: asArray(r['neighborhoodScores']),

apps/web/lib/mapbox-style.ts

@@ -0,0 +1,16 @@
+'use client';
+
+import { useTheme } from '@/components/providers/theme-provider';
+
+export const MAPBOX_STYLE_LIGHT = 'mapbox://styles/mapbox/streets-v12';
+export const MAPBOX_STYLE_DARK = 'mapbox://styles/mapbox/dark-v11';
+
+/**
+ * Resolve the Mapbox style URL for the current app theme. Call this inside
+ * the map component and pass the result to `new mapboxgl.Map({ style })` AND
+ * call `map.setStyle(style)` whenever it changes.
+ */
+export function useMapboxStyle(): string {
+  const { theme } = useTheme();
+  return theme === 'dark' ? MAPBOX_STYLE_DARK : MAPBOX_STYLE_LIGHT;
+}