diff --git a/frontend/src/components/RecipesView.vue b/frontend/src/components/RecipesView.vue
index 55c8cb4..7c6d0ad 100644
--- a/frontend/src/components/RecipesView.vue
+++ b/frontend/src/components/RecipesView.vue
@@ -95,6 +95,14 @@
Find Recipes
+
+
+ {{ activeFilterCount }} filter{{ activeFilterCount !== 1 ? 's' : '' }} active
+
+
+
@@ -968,6 +976,42 @@ const advancedActive = computed(() =>
!!recipesStore.styleId
)
+const activeFilterCount = computed(() => {
+ let n = 0
+ if (recipesStore.constraints.length > 0) n++
+ if (recipesStore.allergies.length > 0) n++
+ if (recipesStore.excludeIngredients.length > 0) n++
+ if (recipesStore.shoppingMode) n++
+ if (recipesStore.pantryMatchOnly) n++
+ if (recipesStore.hardDayMode) n++
+ if (recipesStore.maxActiveMin !== null) n++
+ if (recipesStore.maxTotalMin !== null) n++
+ if (recipesStore.maxMissing !== null) n++
+ if (recipesStore.styleId !== null) n++
+ if (recipesStore.category !== null) n++
+ n += Object.values(recipesStore.nutritionFilters).filter((v) => v !== null).length
+ return n
+})
+
+function clearAllFindFilters() {
+ recipesStore.clearConstraints()
+ recipesStore.clearAllergies()
+ recipesStore.clearExcludeIngredients()
+ recipesStore.shoppingMode = false
+ recipesStore.pantryMatchOnly = false
+ recipesStore.hardDayMode = false
+ recipesStore.maxActiveMin = null
+ recipesStore.maxTotalMin = null
+ recipesStore.maxMissing = null
+ recipesStore.styleId = null
+ recipesStore.category = null
+ recipesStore.nutritionFilters = { max_calories: null, max_sugar_g: null, max_carbs_g: null, max_sodium_mg: null }
+ constraintInput.value = ''
+ allergyInput.value = ''
+ excludeIngredientInput.value = ''
+ categoryInput.value = ''
+}
+
// #46 — count of active nutrition filters so the summary is informative when collapsed
const activeNutritionFilterCount = computed(() =>
Object.values(recipesStore.nutritionFilters ?? {}).filter((v) => v !== null).length
@@ -1387,6 +1431,18 @@ watch(
}
/* Filter bar */
+.active-filter-bar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--spacing-xs) var(--spacing-sm);
+ margin-bottom: var(--spacing-sm);
+ background: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-sm);
+ color: var(--color-text-secondary);
+}
+
.filter-bar {
display: flex;
flex-direction: column;