fix(filter): ensure empty filter chips disappear on close and persist only with active selections

src/components/WorkspaceFilterBar.tsx

@@ -161,40 +161,33 @@ export default function WorkspaceFilterBar({
     categories.push({ id: "tags", label: "Tags", icon: ICONS.tag, options: tagOptions, emptyMessage: "No additional filter options available." });
   }
 
-  // Active filter categories in state
-  const [activeCategoryIds, setActiveCategoryIds] = useState<string[]>(() => {
-    const ids: string[] = [];
-    if (isRecipe && (emptyRecipeActive || missingYieldActive || placeholderStepsActive)) {
-      ids.push("needs_attention");
-    }
-    if (isIngredient && (unusedActive || missingCostActive || noPurchaseActive)) {
-      ids.push("needs_attention");
-    }
-    if (isGlobalSearch && selectedItemTypes.length > 0) {
-      ids.push("item_type");
-    }
-    if (selectedTags.length > 0) {
-      ids.push("tags");
-    }
-    return ids;
-  });
+  // Helper to check if a category has active selected options
+  const hasActiveOptions = (cat: FilterCategoryConfig) => {
+    return cat.options.some(opt => opt.checked);
+  };
 
-  const totalActiveCount = activeCategoryIds.length;
+  const categoriesWithActiveSelections = categories.filter(c => hasActiveOptions(c));
+  const totalActiveCount = categoriesWithActiveSelections.length;
+
+  // The chips visible on screen: categories with active selections + the currently open chip (if user just opened one from the menu)
+  const visibleCategoryIds = Array.from(
+    new Set([
+      ...categoriesWithActiveSelections.map(c => c.id),
+      ...(openChipId ? [openChipId] : [])
+    ])
+  );
 
   const navigateWithParams = (newParams: URLSearchParams) => {
     window.location.href = `${window.location.pathname}?${newParams.toString()}`;
   };
 
   const handleAddCategory = (catId: string) => {
-    if (!activeCategoryIds.includes(catId)) {
-      setActiveCategoryIds([...activeCategoryIds, catId]);
-    }
     setOpenChipId(catId);
     setMenuOpen(false);
+    setSearchTerm("");
   };
 
   const handleRemoveCategory = (catId: string) => {
-    setActiveCategoryIds(activeCategoryIds.filter(id => id !== catId));
     if (openChipId === catId) setOpenChipId(null);
 
     const params = new URLSearchParams(window.location.search);
@@ -213,7 +206,6 @@ export default function WorkspaceFilterBar({
   };
 
   const handleClearAll = () => {
-    setActiveCategoryIds([]);
     setOpenChipId(null);
     setMenuOpen(false);
     const params = new URLSearchParams();
@@ -277,7 +269,7 @@ export default function WorkspaceFilterBar({
             </div>
             <ul class="filter-menu-list">
               {categories.map(cat => {
-                const isActive = activeCategoryIds.includes(cat.id);
+                const isActive = hasActiveOptions(cat);
                 return (
                   <li key={cat.id}>
                     <button
@@ -318,9 +310,9 @@ export default function WorkspaceFilterBar({
       </div>
 
       {/* 2. Secondary Active Filter Rule Chips Bar */}
-      {activeCategoryIds.length > 0 && (
+      {visibleCategoryIds.length > 0 && (
         <div class="filter-rules-row" role="region" aria-label="Active filters">
-          {activeCategoryIds.map((catId, index) => {
+          {visibleCategoryIds.map((catId, index) => {
             const cat = categories.find(c => c.id === catId);
             if (!cat) return null;
             const isOpen = openChipId === catId;