From 984e10682b9e551aed293ea3577f63be5bd0b54a Mon Sep 17 00:00:00 2001
From: dvirlabs <dvirlabs@gmail.com>
Date: Fri, 5 Dec 2025 10:38:04 +0200
Subject: [PATCH] Fix the slider

---
 frontend/src/App.jsx                         |  8 ++++--
 frontend/src/components/RecipeSearchList.jsx | 26 ++++++++++++--------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 18bfbad..10e6a3b 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -77,8 +77,11 @@ function App() {
       }
 
       // Filter by prep time
-      if (filterMaxTime && recipe.time_minutes > parseInt(filterMaxTime)) {
-        return false;
+      if (filterMaxTime) {
+        const maxTime = parseInt(filterMaxTime, 10);
+        if (recipe.time_minutes > maxTime) {
+          return false;
+        }
       }
 
       // Filter by tags
@@ -207,6 +210,7 @@ function App() {
       <main className="layout">
         <section className="sidebar">
           <RecipeSearchList
+            allRecipes={recipes}
             recipes={getFilteredRecipes()}
             selectedId={selectedRecipe?.id}
             onSelect={setSelectedRecipe}
diff --git a/frontend/src/components/RecipeSearchList.jsx b/frontend/src/components/RecipeSearchList.jsx
index 7a92b34..231d4f8 100644
--- a/frontend/src/components/RecipeSearchList.jsx
+++ b/frontend/src/components/RecipeSearchList.jsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 
 function RecipeSearchList({
+  allRecipes,
   recipes,
   selectedId,
   onSelect,
@@ -15,16 +16,17 @@ function RecipeSearchList({
 }) {
   const [expandFilters, setExpandFilters] = useState(false);
 
-  // Extract unique tags from all recipes
+  // Extract unique tags from ALL recipes (not filtered)
   const allTags = Array.from(
-    new Set(recipes.flatMap((recipe) => recipe.tags || []))
+    new Set(allRecipes.flatMap((recipe) => recipe.tags || []))
   ).sort();
 
-  // Extract unique meal types from recipes
-  const mealTypes = Array.from(new Set(recipes.map((r) => r.meal_type))).sort();
+  // Extract unique meal types from ALL recipes (not filtered)
+  const mealTypes = Array.from(new Set(allRecipes.map((r) => r.meal_type))).sort();
 
-  // Extract max time for slider
-  const maxTimeInRecipes = Math.max(...recipes.map((r) => r.time_minutes), 0);
+  // Extract max time for slider from ALL recipes (not filtered) - add 10 to make it comfortable to select max time recipes
+  const maxTimeInRecipes = Math.max(...allRecipes.map((r) => r.time_minutes), 0);
+  const sliderMax = maxTimeInRecipes > 0 ? maxTimeInRecipes + 10 : 70;
 
   const handleTagToggle = (tag) => {
     if (filterTags.includes(tag)) {
@@ -109,20 +111,24 @@ function RecipeSearchList({
             {maxTimeInRecipes > 0 && (
               <div className="filter-group">
                 <label className="filter-label">
-                  זמן הכנה {filterMaxTime ? `עד ${filterMaxTime} דקות` : ""}
+                  זמן הכנה {filterMaxTime ? `עד ${filterMaxTime} דקות` : "הכל"}
                 </label>
                 <div className="time-filter-wrapper">
                   <input
                     type="range"
                     min="0"
-                    max={maxTimeInRecipes}
+                    max={sliderMax}
+                    step="1"
                     value={filterMaxTime || 0}
-                    onChange={(e) => onMaxTimeChange(e.target.value === "0" ? "" : e.target.value)}
+                    onChange={(e) => {
+                      const val = parseInt(e.target.value, 10);
+                      onMaxTimeChange(val === 0 ? "" : String(val));
+                    }}
                     className="time-slider"
                   />
                   <div className="time-labels">
                     <span>0</span>
-                    <span>{maxTimeInRecipes}</span>
+                    <span>{sliderMax}</span>
                   </div>
                 </div>
               </div>