brickwise 0.1.7 → 0.1.21

package/src/app/favorites/page.tsx

@@ -6,6 +6,7 @@ import "leaflet/dist/leaflet.css";
 import type { LayerGroup, Map as LeafletMap, Marker } from "leaflet";
 import YieldBadge from "@/components/YieldBadge";
 import { fmtAED, fmtDist, fmtSqft } from "@/lib/format";
+import { yieldColor } from "@/lib/yieldColor";
 
 interface FavRow {
   id: string;
@@ -29,36 +30,25 @@ interface FavRow {
   gym_distance_m: number | null;
   gym_name: string | null;
   price_per_sqft: number | null;
+  description: string | null;
   notes: string;
 }
 
+const MORE_SVG = (
+  <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+    <circle cx="11" cy="11" r="7" />
+    <path d="M11 8v6M8 11h6M20 20l-3.5-3.5" />
+  </svg>
+);
+
 const GYM_SVG = `<svg viewBox="0 0 24 24" width="14" height="14" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M2 10h2v4H2zM5 8h2v8H5zM17 8h2v8h-2zM20 10h2v4h-2zM8 11h8v2H8z"/></svg>`;
+const CAFE_SVG = `<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 8h12v5a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8z"/><path d="M16 9h2a2 2 0 0 1 0 4h-2"/><path d="M6 3v2M10 3v2M14 3v2"/></svg>`;
 
 function matchesBedFilter(r: { bedrooms: number | null }, bedFilter: number[]): boolean {
   return bedFilter.length === 0 || (r.bedrooms != null && bedFilter.includes(r.bedrooms));
 }
 
-/**
- * Relative color scale: red (lowest yield in the set) → turquoise (highest).
- * Absolute thresholds made every Dubai listing green because yields are all high;
- * scaling to the actual min/max makes the differences readable on the map.
- */
-function yieldColor(y: number | null, min: number, max: number): string {
-  if (y == null) return "#8a8a8a";
-  const t = max > min ? Math.min(1, Math.max(0, (y - min) / (max - min))) : 0.5;
-  const hue = t * 174; // 0° red → 174° turquoise
-  return `hsl(${Math.round(hue)}, 66%, 44%)`;
-}
-
-/** Min/max of the located favorites' yields, for the relative color scale. */
-function yieldRange(rows: FavRow[] | null): { min: number; max: number } {
-  const ys = (rows ?? [])
-    .filter((r) => r.lat != null && r.lon != null && r.gross_yield != null)
-    .map((r) => r.gross_yield as number);
-  return ys.length ? { min: Math.min(...ys), max: Math.max(...ys) } : { min: 0, max: 1 };
-}
-
-function popupHtml(r: FavRow, min: number, max: number): string {
+function popupHtml(r: FavRow): string {
   const img = r.images?.[0]?.medium || r.images?.[0]?.small;
   const yieldTxt = r.gross_yield != null ? (r.gross_yield * 100).toFixed(1) + " %" : "sin datos";
   return `
@@ -67,7 +57,7 @@ function popupHtml(r: FavRow, min: number, max: number): string {
       <div style="font-weight:600;margin-top:6px;line-height:1.3">${r.title}</div>
       <div style="color:#666;font-size:12px;margin-top:2px">${r.tower_name ?? ""}</div>
       <div style="margin-top:4px;font-size:14px">
-        Rentabilidad: <span style="color:${yieldColor(r.gross_yield, min, max)};font-weight:700">${yieldTxt}</span>
+        Rentabilidad: <span style="color:${yieldColor(r.gross_yield)};font-weight:700">${yieldTxt}</span>
       </div>
       <div style="margin-top:6px;display:flex;gap:10px;font-size:12px">
         <a href="/listing/${r.id}">Ver análisis</a>
@@ -87,6 +77,59 @@ const SAVED_URL = "https://www.propertyfinder.ae/en/user/saved-properties";
 // strips javascript: hrefs.
 const BOOKMARKLET = String.raw`javascript:(function(){var u=new Set();document.querySelectorAll('a[href]').forEach(function(a){var h=(a.href||'').split('?')[0];if(/\/plp\/.*-\d+\.html$/.test(h))u.add(h)});try{var n=document.getElementById('__NEXT_DATA__');if(n){(JSON.stringify(JSON.parse(n.textContent)).match(/https?:\/\/[^"']*\/plp\/[^"']*-\d+\.html/g)||[]).forEach(function(x){u.add(x.split('?')[0])})}}catch(e){}var l=[...u];if(!l.length){alert('No encontre pisos guardados aqui. Abre tu pagina de Guardados de Property Finder con la sesion iniciada.');return}var t=l.join('\n');if(navigator.clipboard){navigator.clipboard.writeText(t).then(function(){alert(l.length+' piso(s) copiados. Abre Brickwise y pulsa "Pegar de Property Finder".')},function(){prompt('Copia estos enlaces y pegalos en Brickwise:',t)})}else{prompt('Copia estos enlaces y pegalos en Brickwise:',t)}})();`;
 
+// leaflet.heat's radius is in screen pixels, so a fixed value shrinks in real-world
+// terms as you zoom in. Anchor the radius to a reference zoom and scale by 2^(Δzoom)
+// (each zoom level doubles pixels-per-meter) so the geographic influence stays constant.
+const HEAT_REF_ZOOM = 12;
+const HEAT_REF_RADIUS = 40;
+const HEAT_REF_BLUR = 22;
+function heatRadiusForZoom(zoom: number): { radius: number; blur: number } {
+  const scale = Math.pow(2, zoom - HEAT_REF_ZOOM);
+  const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
+  return {
+    radius: clamp(HEAT_REF_RADIUS * scale, 6, 900),
+    blur: clamp(HEAT_REF_BLUR * scale, 4, 500),
+  };
+}
+
+function LayerToggle({
+  label,
+  color,
+  loading,
+  visible,
+  count,
+  onToggle,
+}: {
+  label: string;
+  color: string;
+  loading: boolean;
+  visible: boolean;
+  count: number | null;
+  onToggle: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      disabled={loading}
+      className="btn-font flex w-full items-center gap-2 rounded px-2 py-1.5 text-[11px] hover:bg-neutral-100 disabled:opacity-60 dark:hover:bg-neutral-800"
+    >
+      <span
+        className="flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-sm border"
+        style={{ background: visible ? color : "transparent", borderColor: color, opacity: 0.85 }}
+      >
+        {visible && (
+          <svg viewBox="0 0 24 24" width="9" height="9" fill="none" stroke="#fff" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M5 12l5 5L20 6" />
+          </svg>
+        )}
+      </span>
+      <span className="flex-1 text-left">{label}</span>
+      <span className="text-neutral-500">{loading ? "Buscando…" : count != null ? count : ""}</span>
+    </button>
+  );
+}
+
 export default function FavoritesMapPage() {
   const [rows, setRows] = useState<FavRow[] | null>(null);
   const [hoveredId, setHoveredId] = useState<string | null>(null);
@@ -95,6 +138,7 @@ export default function FavoritesMapPage() {
   const [input, setInput] = useState("");
   const [queue, setQueue] = useState<string[]>([]);
   const [errors, setErrors] = useState<string[]>([]);
+  const [skippedMsg, setSkippedMsg] = useState<string | null>(null);
   const [sidebarW, setSidebarW] = useState(() => {
     if (typeof window === "undefined") return 440;
     const saved = Number(localStorage.getItem("bw-sidebar-w"));
@@ -104,13 +148,23 @@ export default function FavoritesMapPage() {
   const [gymsVisible, setGymsVisible] = useState(false);
   const [gymsLoading, setGymsLoading] = useState(false);
   const [gymCount, setGymCount] = useState<number | null>(null);
+  const [cafesVisible, setCafesVisible] = useState(false);
+  const [cafesLoading, setCafesLoading] = useState(false);
+  const [cafeCount, setCafeCount] = useState<number | null>(null);
+  const [heatKind, setHeatKind] = useState<"rent" | "buy" | null>(null);
+  const [heatLoading, setHeatLoading] = useState<"rent" | "buy" | null>(null);
+  const [heatMax, setHeatMax] = useState<number | null>(null);
+  const [showLayers, setShowLayers] = useState(false);
   const [sortBy, setSortBy] = useState<"yield" | "price">("yield");
   const [bedFilter, setBedFilter] = useState<number[]>([]);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
 
   const mapRef = useRef<LeafletMap | null>(null);
   const leafletRef = useRef<typeof import("leaflet") | null>(null);
   const markersRef = useRef<Record<string, Marker>>({});
   const gymLayerRef = useRef<LayerGroup | null>(null);
+  const cafeLayerRef = useRef<LayerGroup | null>(null);
+  const heatLayerRef = useRef<import("leaflet").Layer | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const didFitRef = useRef(false);
   const processing = useRef(false);
@@ -170,6 +224,16 @@ export default function FavoritesMapPage() {
       };
       el.addEventListener("wheel", onWheel, { passive: false });
       map.on("remove", () => el.removeEventListener("wheel", onWheel));
+
+      // Keep the heat influence constant in real-world size across zoom levels:
+      // rescale the pixel radius whenever the zoom settles.
+      map.on("zoomend", () => {
+        const layer = heatLayerRef.current as unknown as {
+          setOptions?: (o: Record<string, unknown>) => void;
+        } | null;
+        if (!layer?.setOptions) return;
+        layer.setOptions(heatRadiusForZoom(map.getZoom()));
+      });
       let tries = 0;
       const timer = setInterval(() => {
         tries++;
@@ -193,6 +257,7 @@ export default function FavoritesMapPage() {
       mapRef.current = null;
       markersRef.current = {};
       gymLayerRef.current = null;
+      cafeLayerRef.current = null;
       didFitRef.current = false;
       setMapReady(false);
     };
@@ -205,20 +270,19 @@ export default function FavoritesMapPage() {
     if (!L || !map || !mapReady || !rows) return;
     Object.values(markersRef.current).forEach((m) => m.remove());
     markersRef.current = {};
-    const { min, max } = yieldRange(rows);
     const bounds: [number, number][] = [];
     for (const r of rows) {
       if (r.lat == null || r.lon == null) continue;
       const y = r.gross_yield != null ? (r.gross_yield * 100).toFixed(1) + "%" : "—";
       const icon = L.divIcon({
         className: "",
-        html: `<div class="bw-pin" style="--pin-color:${yieldColor(r.gross_yield, min, max)}"><div class="bw-pin-label">${y}</div><div class="bw-pin-tail"></div></div>`,
+        html: `<div class="bw-pin" style="--pin-color:${yieldColor(r.gross_yield)}"><div class="bw-pin-label">${y}</div><div class="bw-pin-tail"></div></div>`,
         iconSize: [0, 0],
         iconAnchor: [0, 0],
       });
       const marker = L.marker([r.lat, r.lon], { icon })
         .addTo(map)
-        .bindPopup(popupHtml(r, min, max), { maxWidth: 260, offset: [0, -34] });
+        .bindPopup(popupHtml(r), { maxWidth: 260, offset: [0, -34] });
       marker.on("mouseover", () => {
         setHoveredId(r.id);
         document.getElementById(`fav-${r.id}`)?.scrollIntoView({ block: "nearest", behavior: "smooth" });
@@ -273,32 +337,62 @@ export default function FavoritesMapPage() {
       });
   }, [queue, load]);
 
-  const enqueueUrls = (raw: string): number => {
+  // Same id extraction the server does (parseListingUrl in the API route).
+  const listingIdOf = (u: string): string | null => {
+    try {
+      const p = new URL(u).pathname;
+      const m = p.match(/-(\d+)\.html$/) || p.match(/\/(\d+)(?:\/)?$/);
+      return m ? m[1] : null;
+    } catch {
+      return null;
+    }
+  };
+
+  const enqueueUrls = (raw: string): { added: number; skipped: number } => {
     const urls = raw
       .split(/[\n\s,]+/)
       .map((s) => s.trim())
       .filter((s) => s.startsWith("http") && /propertyfinder\.ae/.test(s));
-    if (urls.length) {
+    // Discard the ones already saved (and de-dupe the paste itself) so only new
+    // listings get analysed — no wasted scrape/round-trip on ones we already have.
+    const have = new Set((rows ?? []).map((r) => r.id));
+    const seen = new Set<string>();
+    const fresh: string[] = [];
+    let skipped = 0;
+    for (const u of urls) {
+      const id = listingIdOf(u);
+      if (id && (have.has(id) || seen.has(id))) {
+        skipped++;
+        continue;
+      }
+      if (id) seen.add(id);
+      fresh.push(u);
+    }
+    if (fresh.length) {
       setErrors([]);
-      setQueue((prev) => [...prev, ...urls]);
+      setQueue((prev) => [...prev, ...fresh]);
     }
-    return urls.length;
+    setSkippedMsg(skipped > 0 ? `${skipped} ya guardado${skipped === 1 ? "" : "s"}, descartado${skipped === 1 ? "" : "s"}.` : null);
+    return { added: fresh.length, skipped };
   };
 
   const submit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (enqueueUrls(input) > 0) setInput("");
+    const { added, skipped } = enqueueUrls(input);
+    if (added > 0 || skipped > 0) setInput("");
   };
 
   const pasteFromPf = async () => {
     setSyncMsg(null);
     try {
       const text = await navigator.clipboard.readText();
-      const n = enqueueUrls(text);
+      const { added, skipped } = enqueueUrls(text);
       setSyncMsg(
-        n > 0
-          ? `${n} piso${n === 1 ? "" : "s"} en cola — analizando y añadiendo…`
-          : "El portapapeles no tenía enlaces de Property Finder. Ejecuta el marcador en tu página de Guardados primero."
+        added > 0
+          ? `${added} piso${added === 1 ? "" : "s"} nuevo${added === 1 ? "" : "s"} en cola — analizando y añadiendo…${skipped > 0 ? ` (${skipped} ya guardado${skipped === 1 ? "" : "s"})` : ""}`
+          : skipped > 0
+            ? `Los ${skipped} piso${skipped === 1 ? "" : "s"} del portapapeles ya estaban guardados. Nada nuevo que analizar.`
+            : "El portapapeles no tenía enlaces de Property Finder. Ejecuta el marcador en tu página de Guardados primero."
       );
     } catch {
       setSyncMsg("No pude leer el portapapeles. Pega los enlaces manualmente en el cuadro de arriba.");
@@ -326,49 +420,131 @@ export default function FavoritesMapPage() {
     }
   };
 
-  const toggleGyms = async () => {
+  // Build a Leaflet layer of POI markers (gyms / cafés) with a Google Maps popup.
+  const buildPoiLayer = (
+    L: typeof import("leaflet"),
+    items: { name: string; lat: number; lon: number }[],
+    cssClass: string,
+    svg: string
+  ) => {
+    const layer = L.layerGroup();
+    for (const p of items) {
+      const icon = L.divIcon({ className: "", html: `<div class="${cssClass}">${svg}</div>`, iconSize: [0, 0], iconAnchor: [0, 0] });
+      const safeName = p.name.replace(/[<>&"]/g, (c) => `&#${c.charCodeAt(0)};`);
+      // Business name in the query, exact spot in the /@lat,lon path (not the query text):
+      // a named POI opens its own Maps place card; the coordinates never clutter the search
+      // box and only bias the map to Dubai so the right branch/spot is what's shown.
+      const mapsUrl = `https://www.google.com/maps/search/${encodeURIComponent(p.name)}/@${p.lat},${p.lon},17z`;
+      L.marker([p.lat, p.lon], { icon })
+        .bindPopup(
+          `<b>${safeName}</b><br><a href="${mapsUrl}" target="_blank" rel="noopener noreferrer" style="font-size:12px">Ver en Google Maps ↗</a>`,
+          { offset: [0, -16] }
+        )
+        .addTo(layer);
+    }
+    return layer;
+  };
+
+  const togglePoi = async (opts: {
+    api: string;
+    dataKey: string;
+    cssClass: string;
+    svg: string;
+    layerRef: React.MutableRefObject<LayerGroup | null>;
+    visible: boolean;
+    setVisible: (v: boolean) => void;
+    setLoading: (v: boolean) => void;
+    setCount: (v: number | null) => void;
+  }) => {
     const map = mapRef.current;
     const L = leafletRef.current;
     if (!map || !L) return;
-    if (gymLayerRef.current) {
-      if (gymsVisible) map.removeLayer(gymLayerRef.current);
-      else gymLayerRef.current.addTo(map);
-      setGymsVisible(!gymsVisible);
+    if (opts.layerRef.current) {
+      if (opts.visible) map.removeLayer(opts.layerRef.current);
+      else opts.layerRef.current.addTo(map);
+      opts.setVisible(!opts.visible);
       return;
     }
-    setGymsLoading(true);
+    opts.setLoading(true);
     try {
-      const res = await fetch("/api/gyms");
+      const res = await fetch(opts.api);
       const j = await res.json();
       if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
-      const layer = L.layerGroup();
-      for (const g of j.gyms as { name: string; lat: number; lon: number }[]) {
-        const icon = L.divIcon({
-          className: "",
-          html: `<div class="bw-gym">${GYM_SVG}</div>`,
-          iconSize: [0, 0],
-          iconAnchor: [0, 0],
-        });
-        const safeName = g.name.replace(/[<>&"]/g, (c) => `&#${c.charCodeAt(0)};`);
-        // Link to the exact coordinates, not a text search: a name search gets biased
-        // to the viewer's own location (e.g. Andorra), while coordinates always drop
-        // the pin on this gym's spot in Dubai.
-        const mapsUrl = `https://www.google.com/maps/search/?api=1&query=${g.lat}%2C${g.lon}`;
-        L.marker([g.lat, g.lon], { icon })
-          .bindPopup(
-            `<b>${safeName}</b><br><a href="${mapsUrl}" target="_blank" rel="noopener noreferrer" style="font-size:12px">Ver en Google Maps ↗</a>`,
-            { offset: [0, -16] }
-          )
-          .addTo(layer);
-      }
+      const items = j[opts.dataKey] as { name: string; lat: number; lon: number }[];
+      const layer = buildPoiLayer(L, items, opts.cssClass, opts.svg);
+      layer.addTo(map);
+      opts.layerRef.current = layer;
+      opts.setCount(items.length);
+      opts.setVisible(true);
+    } catch {
+      opts.setCount(null);
+    } finally {
+      opts.setLoading(false);
+    }
+  };
+
+  const toggleGyms = () =>
+    togglePoi({
+      api: "/api/gyms", dataKey: "gyms", cssClass: "bw-gym", svg: GYM_SVG,
+      layerRef: gymLayerRef, visible: gymsVisible, setVisible: setGymsVisible, setLoading: setGymsLoading, setCount: setGymCount,
+    });
+
+  const toggleCafes = () =>
+    togglePoi({
+      api: "/api/cafes", dataKey: "cafes", cssClass: "bw-cafe", svg: CAFE_SVG,
+      layerRef: cafeLayerRef, visible: cafesVisible, setVisible: setCafesVisible, setLoading: setCafesLoading, setCount: setCafeCount,
+    });
+
+  // Liquidity heatmap: DLD transactions per tower (last 12 months) as a heat surface.
+  // Rent and sale are separate markets, so only one kind shows at a time.
+  const toggleLiquidity = async (kind: "rent" | "buy") => {
+    const map = mapRef.current;
+    if (!map || !leafletRef.current) return;
+    // Clicking the active kind turns it off.
+    if (heatKind === kind) {
+      if (heatLayerRef.current) map.removeLayer(heatLayerRef.current);
+      heatLayerRef.current = null;
+      setHeatKind(null);
+      return;
+    }
+    // Switching kinds: drop the current layer first.
+    if (heatLayerRef.current) {
+      map.removeLayer(heatLayerRef.current);
+      heatLayerRef.current = null;
+    }
+    setHeatLoading(kind);
+    try {
+      const res = await fetch(`/api/liquidity?kind=${kind}`);
+      const j = await res.json();
+      if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
+      await import("leaflet.heat"); // patches L.heatLayer
+      const max = j.max || 1;
+      setHeatMax(j.max ?? null);
+      // Each favorite blooms proportionally to its tower's recent activity; a small
+      // floor keeps even low-liquidity listings visible as a faint mark.
+      const pts = (j.points as { lat: number; lon: number; weight: number }[]).map(
+        (p) => [p.lat, p.lon, Math.max(0.15, p.weight / max)] as [number, number, number]
+      );
+      type HeatFn = (latlngs: [number, number, number][], opts?: Record<string, unknown>) => import("leaflet").Layer;
+      const Lmod = leafletRef.current as unknown as { heatLayer?: HeatFn; default?: { heatLayer?: HeatFn } };
+      const heatLayer = Lmod.heatLayer ?? Lmod.default?.heatLayer;
+      if (!heatLayer) throw new Error("plugin de calor no disponible");
+      const { radius, blur } = heatRadiusForZoom(map.getZoom());
+      const layer = heatLayer(pts, {
+        radius,
+        blur,
+        max: 1,
+        minOpacity: 0.55,
+        // Yellow (low) → purple (high).
+        gradient: { 0.15: "#fef08a", 0.4: "#fde047", 0.65: "#d946ef", 1.0: "#7c3aed" },
+      });
       layer.addTo(map);
-      gymLayerRef.current = layer;
-      setGymCount(j.gyms.length);
-      setGymsVisible(true);
+      heatLayerRef.current = layer;
+      setHeatKind(kind);
     } catch {
-      setGymCount(null);
+      setHeatKind(null);
     } finally {
-      setGymsLoading(false);
+      setHeatLoading(null);
     }
   };
 
@@ -435,11 +611,24 @@ export default function FavoritesMapPage() {
         <div className="min-w-0 flex-1">
           <div className="flex items-start justify-between gap-2">
             <button
-              onClick={() => focus(r)}
-              className="line-clamp-1 text-left font-sans text-sm font-semibold normal-case tracking-normal hover:underline"
-              title="Centrar en el mapa"
+              onClick={() => setExpandedId((id) => (id === r.id ? null : r.id))}
+              className="flex min-w-0 items-center gap-1 text-left font-sans text-sm font-semibold normal-case tracking-normal hover:underline"
+              title="Ver previsualización"
             >
-              {r.title}
+              <span className="truncate">{r.title}</span>
+              <svg
+                viewBox="0 0 24 24"
+                width="12"
+                height="12"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className={`shrink-0 text-neutral-400 transition-transform ${expandedId === r.id ? "rotate-180" : ""}`}
+              >
+                <path d="M6 9l6 6 6-6" />
+              </svg>
             </button>
             <button
               onClick={() => remove(r.id)}
@@ -486,6 +675,29 @@ export default function FavoritesMapPage() {
         </span>
       </div>
 
+      {/* Preview desplegable al pulsar el título */}
+      {expandedId === r.id && (
+        <div className="mt-2 rounded-md border border-neutral-200 p-2 dark:border-neutral-800">
+          {r.images.length > 0 && (
+            <div className="flex gap-1.5 overflow-x-auto pb-1">
+              {r.images.slice(0, 10).map((img, i) => (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img key={i} src={img.medium} alt="" className="h-24 w-36 shrink-0 rounded object-cover" loading="lazy" />
+              ))}
+            </div>
+          )}
+          {r.description && (
+            <p className="mt-1.5 line-clamp-4 whitespace-pre-line text-xs text-neutral-500">{r.description}</p>
+          )}
+          <Link
+            href={`/listing/${r.id}`}
+            className="btn-font mt-2 inline-flex items-center gap-1.5 rounded bg-blue-600 px-3 py-1.5 text-xs font-bold text-white hover:bg-blue-500"
+          >
+            {MORE_SVG} Ver más
+          </Link>
+        </div>
+      )}
+
       <textarea
         className="mt-2 h-9 w-full resize-none rounded-md border border-transparent bg-neutral-50 px-2 py-1 text-xs outline-none focus:border-neutral-300 dark:bg-neutral-950 dark:focus:border-neutral-700"
         defaultValue={r.notes}
@@ -521,32 +733,50 @@ export default function FavoritesMapPage() {
               value={input}
               onChange={(e) => setInput(e.target.value)}
             />
-            <div className="mt-2 flex items-center gap-2">
+            <div className="mt-2 flex flex-col gap-1.5">
               <button
                 type="submit"
                 disabled={!input.trim() || busy}
-                className="rounded-lg bg-blue-600 px-4 py-1.5 text-xs font-bold text-white hover:bg-blue-500 disabled:opacity-50"
+                className="w-full rounded-lg bg-blue-600 py-2 text-xs font-bold text-white hover:bg-blue-500 disabled:opacity-50"
               >
                 {busy ? `Analizando ${queue.length}…` : "Añadir y analizar"}
               </button>
-              <button
-                type="button"
-                onClick={toggleGyms}
-                disabled={gymsLoading || (rows?.length ?? 0) === 0}
-                className="rounded-lg border border-neutral-300 px-3 py-1.5 text-xs font-semibold hover:bg-neutral-100 disabled:opacity-50 dark:border-neutral-700 dark:hover:bg-neutral-800"
-              >
-                {gymsLoading
-                  ? "Buscando…"
-                  : gymCount != null
-                    ? gymsVisible
-                      ? `Ocultar gyms (${gymCount})`
-                      : `Mostrar gyms (${gymCount})`
-                    : "Gimnasios"}
-              </button>
+              {skippedMsg && (
+                <p className="text-[11px] text-neutral-500 dark:text-neutral-400">{skippedMsg}</p>
+              )}
+              <div className="relative">
+                <button
+                  type="button"
+                  onClick={() => setShowLayers((v) => !v)}
+                  disabled={(rows?.length ?? 0) === 0}
+                  className="flex w-full items-center justify-center gap-1 rounded-lg border border-neutral-300 py-2 text-xs font-semibold hover:bg-neutral-100 disabled:opacity-50 dark:border-neutral-700 dark:hover:bg-neutral-800"
+                >
+                  Capas del mapa
+                  <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className={`transition-transform ${showLayers ? "rotate-180" : ""}`}>
+                    <path d="M6 9l6 6 6-6" />
+                  </svg>
+                </button>
+                {showLayers && (
+                  <div className="absolute inset-x-0 top-full z-30 mt-1 rounded-lg border border-neutral-200 bg-white p-1 shadow-lg dark:border-neutral-800 dark:bg-neutral-900">
+                    <p className="px-2 pb-0.5 pt-1 text-[10px] uppercase tracking-wide text-neutral-400">Puntos cercanos</p>
+                    <LayerToggle label="Gimnasios" color="#b84f30" loading={gymsLoading} visible={gymsVisible} count={gymCount} onToggle={toggleGyms} />
+                    <LayerToggle label="Cafeterías" color="#6f4e37" loading={cafesLoading} visible={cafesVisible} count={cafeCount} onToggle={toggleCafes} />
+                    <div className="my-1 border-t border-neutral-200 dark:border-neutral-800" />
+                    <p className="px-2 pb-0.5 pt-0.5 text-[10px] uppercase tracking-wide text-neutral-400">Mapa de calor de liquidez (12m)</p>
+                    <LayerToggle label="Alquiler" color="#d946ef" loading={heatLoading === "rent"} visible={heatKind === "rent"} count={null} onToggle={() => toggleLiquidity("rent")} />
+                    <LayerToggle label="Venta" color="#7c3aed" loading={heatLoading === "buy"} visible={heatKind === "buy"} count={null} onToggle={() => toggleLiquidity("buy")} />
+                    {heatKind && (
+                      <p className="px-2 pb-1 pt-0.5 text-[10px] leading-tight text-neutral-500">
+                        {heatKind === "rent" ? "Contratos de alquiler" : "Ventas"} (DLD) por edificio, últimos 12 meses. Amarillo = poco líquido, morado = mucha actividad.
+                      </p>
+                    )}
+                  </div>
+                )}
+              </div>
               <button
                 type="button"
                 onClick={() => setShowSync((v) => !v)}
-                className={`rounded-lg border px-3 py-1.5 text-xs font-semibold ${
+                className={`w-full rounded-lg border py-2 text-xs font-semibold ${
                   showSync
                     ? "border-blue-500 text-blue-600 dark:text-blue-400"
                     : "border-neutral-300 hover:bg-neutral-100 dark:border-neutral-700 dark:hover:bg-neutral-800"
@@ -682,23 +912,29 @@ export default function FavoritesMapPage() {
       {/* ------------------------------------------------ map */}
       <div className="relative min-h-0 min-w-0 flex-1">
         <div ref={containerRef} className="absolute inset-0" />
-        {(() => {
-          const { min, max } = yieldRange(rows);
-          if (!(max > min)) return null;
-          return (
-            <div className="pointer-events-none absolute bottom-4 left-3 z-[500] rounded border border-black/10 bg-white/90 px-2 py-1.5 text-[10px] text-neutral-700 shadow-lg dark:border-white/10 dark:bg-neutral-900/90 dark:text-neutral-200">
-              <div className="btn-font mb-1 text-[9px] text-neutral-500">Rentabilidad</div>
-              <div className="flex items-center gap-1.5">
-                <span>{(min * 100).toFixed(1)}%</span>
-                <span
-                  className="h-2 w-24 rounded-sm"
-                  style={{ background: `linear-gradient(90deg, hsl(0,66%,44%), hsl(87,66%,44%), hsl(174,66%,44%))` }}
-                />
-                <span>{(max * 100).toFixed(1)}%</span>
-              </div>
+        {heatKind && (
+          <div className="pointer-events-none absolute bottom-4 left-3 z-[500] rounded border border-black/10 bg-white/90 px-2.5 py-2 text-neutral-700 shadow-lg dark:border-white/10 dark:bg-neutral-900/90 dark:text-neutral-200">
+            <div className="btn-font mb-1 text-[9px] text-neutral-500">
+              Liquidez {heatKind === "rent" ? "alquiler" : "venta"} · {heatKind === "rent" ? "contratos" : "ventas"}/mes
+            </div>
+            <div
+              className="h-2 w-52 rounded-sm"
+              style={{ background: "linear-gradient(90deg, #fef08a, #fde047, #d946ef, #7c3aed)" }}
+            />
+            <div className="mt-1 flex w-52 justify-between text-[10px] font-semibold">
+              <span>0</span>
+              {heatMax != null && <span>{(heatMax / 24).toFixed(1)}</span>}
+              {heatMax != null && <span>{(heatMax / 12).toFixed(1)}</span>}
             </div>
-          );
-        })()}
+            <div className="flex w-52 justify-between text-[9px] text-neutral-500">
+              <span>parado</span>
+              <span>activo</span>
+            </div>
+            <div className="mt-0.5 w-52 text-[9px] leading-tight text-neutral-400">
+              {heatKind === "rent" ? "Contratos de alquiler registrados" : "Ventas registradas"} en el DLD por edificio, últimos 12 meses.
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/app/globals.css

@@ -159,17 +159,30 @@ button[class*="bg-blue-5"],
   border-color: rgba(255, 255, 255, 0.4);
 }
 
-/* Gym marker: brick square with a white dumbbell. */
-.bw-gym {
+/* POI markers (gym / café): semi-transparent square with a white icon. */
+.bw-gym,
+.bw-cafe {
   width: 24px;
   height: 24px;
   border-radius: 2px;
-  background: var(--accent);
-  border: 1px solid rgba(255, 255, 255, 0.85);
+  border: 1px solid rgba(255, 255, 255, 0.7);
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   transform: translate(-50%, -50%);
   cursor: pointer;
+  transition: opacity 0.12s ease;
+}
+.bw-gym {
+  background: rgba(184, 79, 48, 0.68); /* brick, transparent */
+  opacity: 0.9;
+}
+.bw-cafe {
+  background: rgba(111, 78, 55, 0.68); /* coffee, transparent */
+  opacity: 0.9;
+}
+.bw-gym:hover,
+.bw-cafe:hover {
+  opacity: 1;
 }