From e38c5fed44135a41e00c425faee6cf2842f1637f Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Wed, 15 Apr 2026 22:54:23 +0200
Subject: [PATCH] feat: add uncategorized filter option to category dropdown

Add a "No Category" option to the category filter dropdown in the
places sidebar, allowing users to filter for places without an
assigned category. The filter is synced with the map view.

Closes #607
---
 .../src/components/Planner/PlacesSidebar.tsx  | 31 +++++++++++++++++--
 client/src/pages/TripPlannerPage.tsx          |  6 +++-
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Planner/PlacesSidebar.tsx b/client/src/components/Planner/PlacesSidebar.tsx
index 79f27b10..8fa69663 100644
--- a/client/src/components/Planner/PlacesSidebar.tsx
+++ b/client/src/components/Planner/PlacesSidebar.tsx
@@ -147,7 +147,11 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
 
   const filtered = useMemo(() => places.filter(p => {
     if (filter === 'unplanned' && plannedIds.has(p.id)) return false
-    if (categoryFilters.size > 0 && !categoryFilters.has(String(p.category_id))) return false
+    if (categoryFilters.size > 0) {
+      if (p.category_id == null) {
+        if (!categoryFilters.has('uncategorized')) return false
+      } else if (!categoryFilters.has(String(p.category_id))) return false
+    }
     if (search && !p.name.toLowerCase().includes(search.toLowerCase()) &&
         !(p.address || '').toLowerCase().includes(search.toLowerCase())) return false
     return true
@@ -257,7 +261,7 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
           const label = categoryFilters.size === 0
             ? t('places.allCategories')
             : categoryFilters.size === 1
-              ? categories.find(c => categoryFilters.has(String(c.id)))?.name || t('places.allCategories')
+              ? (categoryFilters.has('uncategorized') ? t('places.noCategory') : categories.find(c => categoryFilters.has(String(c.id)))?.name || t('places.allCategories'))
               : `${categoryFilters.size} ${t('places.categoriesSelected')}`
           return (
             <div style={{ marginTop: 6, position: 'relative' }}>
@@ -300,6 +304,29 @@ const PlacesSidebar = React.memo(function PlacesSidebar({
                       </button>
                     )
                   })}
+                  {places.some(p => p.category_id == null) && (() => {
+                    const active = categoryFilters.has('uncategorized')
+                    return (
+                      <button onClick={() => toggleCategoryFilter('uncategorized')} style={{
+                        display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+                        padding: '6px 10px', borderRadius: 6, border: 'none', cursor: 'pointer',
+                        background: active ? 'var(--bg-hover)' : 'transparent',
+                        fontFamily: 'inherit', fontSize: 12, color: 'var(--text-muted)',
+                        textAlign: 'left', borderTop: '1px solid var(--border-faint)', marginTop: 2,
+                      }}>
+                        <div style={{
+                          width: 16, height: 16, borderRadius: 4, flexShrink: 0,
+                          border: active ? 'none' : '1.5px solid var(--border-primary)',
+                          background: active ? 'var(--text-faint)' : 'transparent',
+                          display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        }}>
+                          {active && <Check size={10} strokeWidth={3} color="white" />}
+                        </div>
+                        <MapPin size={12} strokeWidth={2} color="var(--text-faint)" />
+                        <span style={{ flex: 1 }}>{t('places.noCategory')}</span>
+                      </button>
+                    )
+                  })()}
                   {categoryFilters.size > 0 && (
                     <button onClick={() => { setCategoryFiltersLocal(new Set()); onCategoryFilterChange?.(new Set()) }} style={{
                       display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
diff --git a/client/src/pages/TripPlannerPage.tsx b/client/src/pages/TripPlannerPage.tsx
index 703c9f93..b12c818f 100644
--- a/client/src/pages/TripPlannerPage.tsx
+++ b/client/src/pages/TripPlannerPage.tsx
@@ -246,7 +246,11 @@ export default function TripPlannerPage(): React.ReactElement | null {
 
     return places.filter(p => {
       if (!p.lat || !p.lng) return false
-      if (mapCategoryFilter.size > 0 && !mapCategoryFilter.has(String(p.category_id))) return false
+      if (mapCategoryFilter.size > 0) {
+        if (p.category_id == null) {
+          if (!mapCategoryFilter.has('uncategorized')) return false
+        } else if (!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