From 925863e471d92ff02200ddcf7a971d78ecd9c7fa Mon Sep 17 00:00:00 2001
From: Ho Ngoc Hai <hongochai10@icloud.com>
Date: Wed, 29 Apr 2026 17:54:28 +0700
Subject: [PATCH] =?UTF-8?q?fix(web):=20/search=20=E2=80=94=20fix=20duplica?=
 =?UTF-8?q?ted=20filter=20bar=20+=20invisible=20map=20markers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hide the desktop horizontal FilterBar in list/split modes — the
  sidebar already renders an identical control set, so showing both
  duplicated every dropdown. Keep horizontal bar only when in map
  mode where there's no sidebar.
- Replace `hsl(var(--…))` paint colors in ListingMap with literal
  hex constants. Mapbox-gl's color parser rejects CSS variable
  references and was throwing
  'circle-color: Could not parse color from value hsl(var(--primary))'
  for cluster + marker layers, leaving the map blank.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../web/app/[locale]/(public)/search/page.tsx | 22 +++++++++++--------
 apps/web/components/map/listing-map.tsx       | 14 +++++++-----
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/apps/web/app/[locale]/(public)/search/page.tsx b/apps/web/app/[locale]/(public)/search/page.tsx
index 76b386c..1b35c37 100644
--- a/apps/web/app/[locale]/(public)/search/page.tsx
+++ b/apps/web/app/[locale]/(public)/search/page.tsx
@@ -351,15 +351,19 @@ function SearchContent() {
         </Button>
       </div>
 
-      {/* Desktop horizontal filter bar */}
-      <div className="mb-4 hidden lg:block">
-        <FilterBar
-          filters={filters}
-          onChange={handleFilterChange}
-          onSearch={handleSearch}
-          layout="horizontal"
-        />
-      </div>
+      {/* Desktop horizontal filter bar — only when there's no sidebar
+          (i.e. full-width map view). Showing it alongside the sidebar in
+          list/split mode would just duplicate every control. */}
+      {viewMode === 'map' && (
+        <div className="mb-4 hidden lg:block">
+          <FilterBar
+            filters={filters}
+            onChange={handleFilterChange}
+            onSearch={handleSearch}
+            layout="horizontal"
+          />
+        </div>
+      )}
 
       {/* Mobile filter panel */}
       {showMobileFilters && (
diff --git a/apps/web/components/map/listing-map.tsx b/apps/web/components/map/listing-map.tsx
index 7bca2bb..8d1e069 100644
--- a/apps/web/components/map/listing-map.tsx
+++ b/apps/web/components/map/listing-map.tsx
@@ -198,7 +198,9 @@ function ListingMapInner({
       clusterRadius: 50,
     });
 
-    // Cluster circles
+    // Cluster circles. Mapbox-gl's color parser rejects `hsl(var(--…))` —
+    // it only accepts literal CSS colors. We use hex constants tuned to
+    // match the design-system primary/accent palette in dark mode.
     map.addLayer({
       id: CLUSTER_LAYER_ID,
       type: 'circle',
@@ -208,7 +210,7 @@ function ListingMapInner({
         'circle-color': [
           'step',
           ['get', 'point_count'],
-          'hsl(var(--primary))',
+          '#22c55e', // primary (emerald-500)
           10,
           '#f1a928',
           30,
@@ -248,8 +250,8 @@ function ListingMapInner({
         'text-allow-overlap': true,
       },
       paint: {
-        'text-color': 'hsl(var(--card-foreground))',
-        'text-halo-color': 'hsl(var(--card))',
+        'text-color': '#f5f5f4', // card-foreground (stone-100)
+        'text-halo-color': '#1c1917', // card (stone-900)
         'text-halo-width': 8,
       },
     });
@@ -269,8 +271,8 @@ function ListingMapInner({
         'text-allow-overlap': true,
       },
       paint: {
-        'text-color': 'hsl(var(--primary-foreground))',
-        'text-halo-color': 'hsl(var(--primary))',
+        'text-color': '#ffffff', // primary-foreground (high-contrast on emerald)
+        'text-halo-color': '#22c55e', // primary (emerald-500)
         'text-halo-width': 10,
       },
     });