cleanup recipe UI and filter on item names excluding category name when filtering

Author: Brenden Walker

kitchenhub/frontend/src/pages/IngredientsCatalogPage.jsx

@@ -115,10 +115,7 @@ function IngredientsCatalogPage() {
   const filteredIngredients = searchText
     ? ingredients.filter((ing) => {
         const name = (ing.name || '').toLowerCase();
-        const details = (ing.details || '').toLowerCase();
-        const dept = (ing.department_name || '').toLowerCase();
-        const shopping = (ing.shopping_measure || '').toLowerCase();
-        return name.includes(searchText) || details.includes(searchText) || dept.includes(searchText) || shopping.includes(searchText);
+        return name.includes(searchText);
       })
     : ingredients;
 
@@ -255,7 +252,7 @@ function IngredientsCatalogPage() {
           <div className="filter-section">
             <input
               type="text"
-              placeholder="Filter by name, details, department, or shopping measure..."
+              placeholder="Filter by ingredient name..."
               value={ingredientFilter}
               onChange={(e) => setIngredientFilter(e.target.value)}
               className="filter-input"

kitchenhub/frontend/src/pages/RecipeDetailPage.jsx

@@ -12,6 +12,7 @@ import {
   updateRecipeIngredient,
   removeRecipeIngredient,
 } from '../api/api';
+import { formatRecipeQuantity } from '../utils/recipeQuantity';
 import './RecipeDetailPage.css';
 
 function RecipeDetailPage() {
@@ -199,7 +200,7 @@ function RecipeDetailPage() {
 
   const formatIngredientLine = (row) => {
     const name = row.ingredient_details ? `${row.ingredient_name} (${row.ingredient_details})` : row.ingredient_name;
-    const qty = row.qty != null ? String(row.qty) : '';
+    const qty = row.qty != null ? formatRecipeQuantity(row.qty) : '';
     const measure = row.measurement_name || '';
     const part = [qty, measure].filter(Boolean).join(' ');
     return part ? `${part} ${name}` : name;
@@ -475,13 +476,6 @@ function RecipeDetailPage() {
               </form>
             ) : (
               <>
-                {recipe.instructions && (
-                  <div className="recipe-instructions">
-                    <h2>Instructions</h2>
-                    <pre className="recipe-instructions-text">{recipe.instructions}</pre>
-                  </div>
-                )}
-
                 <div className="recipe-ingredients-section">
                   <h2>Ingredients</h2>
                   {recipe.ingredients && recipe.ingredients.length > 0 ? (
@@ -505,6 +499,13 @@ function RecipeDetailPage() {
                     <p className="recipe-no-ingredients">No ingredients yet.</p>
                   )}
                 </div>
+
+                {recipe.instructions && (
+                  <div className="recipe-instructions">
+                    <h2>Instructions</h2>
+                    <pre className="recipe-instructions-text">{recipe.instructions}</pre>
+                  </div>
+                )}
               </>
             )}
           </>

kitchenhub/frontend/src/pages/RecipesPage.jsx

@@ -48,8 +48,7 @@ function RecipesPage() {
   const filteredRecipes = searchText
     ? recipes.filter((r) => {
         const name = (r.name || '').toLowerCase();
-        const cats = (r.category_names || '').toLowerCase();
-        return name.includes(searchText) || cats.includes(searchText);
+        return name.includes(searchText);
       })
     : recipes;
 
@@ -81,7 +80,7 @@ function RecipesPage() {
           </select>
           <input
             type="text"
-            placeholder="Filter by name or category..."
+            placeholder="Filter by recipe name..."
             value={recipeFilter}
             onChange={(e) => setRecipeFilter(e.target.value)}
             className="recipes-filter-input"

kitchenhub/frontend/src/pages/ShoppingListPage.jsx

@@ -290,13 +290,10 @@ function ShoppingListPage() {
     }
   };
 
-  // Filter items based on search text
-  const filteredItems = items.filter(item => {
+  // Filter items by name only (department/category is for grouping, not search)
+  const filteredItems = items.filter((item) => {
     const searchText = itemFilter.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(searchText) ||
-      (item.department_name && item.department_name.toLowerCase().includes(searchText))
-    );
+    return item.name.toLowerCase().includes(searchText);
   });
 
   // Group items by department for better organization
@@ -488,7 +485,7 @@ function ShoppingListPage() {
           <div className="filter-section">
             <input
               type="text"
-              placeholder="Filter items by name or department..."
+              placeholder="Filter items by name..."
               value={itemFilter}
               onChange={(e) => setItemFilter(e.target.value)}
               className="filter-input"

kitchenhub/frontend/src/utils/recipeQuantity.js

@@ -0,0 +1,73 @@
+/**
+ * Format a numeric quantity for recipe display: mixed fractions using
+ * common denominators (halves, thirds, quarters, eighths, sixteenths).
+ */
+function gcd(a, b) {
+  a = Math.abs(a);
+  b = Math.abs(b);
+  while (b) {
+    const t = b;
+    b = a % b;
+    a = t;
+  }
+  return a || 1;
+}
+
+export function formatRecipeQuantity(qty) {
+  if (qty == null || qty === '') return '';
+  const n = Number(qty);
+  if (Number.isNaN(n)) return String(qty);
+
+  const eps = 1e-7;
+  const matchTol = 0.021;
+
+  if (Math.abs(n) < eps) return '0';
+
+  const negative = n < 0;
+  const prefix = negative ? '-' : '';
+  const abs = Math.abs(n);
+
+  if (Math.abs(abs - Math.round(abs)) < matchTol) {
+    return prefix + String(Math.round(abs));
+  }
+
+  let whole = Math.floor(abs + eps);
+  let frac = abs - whole;
+
+  if (frac > 1 - matchTol) {
+    whole += 1;
+    frac = 0;
+  }
+
+  if (frac < matchTol) {
+    return prefix + String(whole);
+  }
+
+  const denoms = [2, 3, 4, 8, 16];
+  let bestNum = 1;
+  let bestDen = 8;
+  let bestErr = Infinity;
+  for (const den of denoms) {
+    for (let num = 1; num < den; num++) {
+      const err = Math.abs(num / den - frac);
+      if (err < bestErr) {
+        bestErr = err;
+        bestNum = num;
+        bestDen = den;
+      }
+    }
+  }
+
+  if (bestErr > 0.045) {
+    const s = abs.toFixed(4).replace(/\.?0+$/, '');
+    return prefix + s;
+  }
+
+  const g = gcd(bestNum, bestDen);
+  bestNum /= g;
+  bestDen /= g;
+
+  const fracPart = `${bestNum}/${bestDen}`;
+  if (whole === 0) return prefix + fracPart;
+  return `${prefix}${whole} ${fracPart}`;
+}