From 1d9a6acc01aff499475e9ea9f3d8e124ec240f9a Mon Sep 17 00:00:00 2001
From: jubnl <jgunther021@gmail.com>
Date: Mon, 13 Apr 2026 14:32:38 +0200
Subject: [PATCH] fix(map): support multi-category filter on map view

The category filter bridge was collapsing Set<string> to a single
string, emitting '' (no filter) whenever more than one category was
selected. Map now uses the same Set-based membership predicate as the
sidebar list filter.

Closes #602
---
 client/src/components/Planner/PlacesSidebar.tsx | 7 +++----
 client/src/pages/TripPlannerPage.tsx            | 4 ++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Planner/PlacesSidebar.tsx b/client/src/components/Planner/PlacesSidebar.tsx
index bc959f0d..d9534bd3 100644
--- a/client/src/components/Planner/PlacesSidebar.tsx
+++ b/client/src/components/Planner/PlacesSidebar.tsx
@@ -28,7 +28,7 @@ interface PlacesSidebarProps {
   onDeletePlace: (placeId: number) => void
   days: Day[]
   isMobile: boolean
-  onCategoryFilterChange?: (categoryId: string) => void
+  onCategoryFilterChange?: (categoryIds: Set<string>) => void
   onPlacesFilterChange?: (filter: string) => void
   pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
 }
@@ -105,8 +105,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
     setCategoryFiltersLocal(prev => {
       const next = new Set(prev)
       if (next.has(catId)) next.delete(catId); else next.add(catId)
-      // Notify parent with first selected or empty
-      onCategoryFilterChange?.(next.size === 1 ? [...next][0] : '')
+      onCategoryFilterChange?.(next)
       return next
     })
   }
@@ -257,7 +256,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
                     )
                   })}
                   {categoryFilters.size > 0 && (
-                    <button onClick={() => { setCategoryFiltersLocal(new Set()); onCategoryFilterChange?.('') }} style={{
+                    <button onClick={() => { setCategoryFiltersLocal(new Set()); onCategoryFilterChange?.(new Set()) }} style={{
                       display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
                       width: '100%', padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
                       background: 'transparent', fontFamily: 'inherit', fontSize: 11, color: 'var(--text-faint)',
diff --git a/client/src/pages/TripPlannerPage.tsx b/client/src/pages/TripPlannerPage.tsx
index e519243e..069fce14 100644
--- a/client/src/pages/TripPlannerPage.tsx
+++ b/client/src/pages/TripPlannerPage.tsx
@@ -206,7 +206,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
 
   useTripWebSocket(tripId)
 
-  const [mapCategoryFilter, setMapCategoryFilter] = useState<string>('')
+  const [mapCategoryFilter, setMapCategoryFilter] = useState<Set<string>>(new Set())
   const [mapPlacesFilter, setMapPlacesFilter] = useState<string>('all')
 
   const [expandedDayIds, setExpandedDayIds] = useState<Set<number> | null>(null)
@@ -239,7 +239,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
 
     return places.filter(p => {
       if (!p.lat || !p.lng) return false
-      if (mapCategoryFilter && String(p.category_id) !== String(mapCategoryFilter)) return false
+      if (mapCategoryFilter.size > 0 && !mapCategoryFilter.has(String(p.category_id))) return false
       if (hiddenPlaceIds.has(p.id)) return false
       if (plannedIds && plannedIds.has(p.id)) return false
       return true