feat: Further improve recipe filter search and shopping list and recipe ingredient editor (#7063)

2026-02-16 12:53:12 -05:00 · 2026-02-14 00:34:17 -06:00
parent 8e225ee796
commit 73d86f6f6b
16 changed files with 267 additions and 160 deletions
--- a/frontend/composables/recipe-page/use-extract-ingredient-references.test.ts
+++ b/frontend/composables/recipe-page/use-extract-ingredient-references.test.ts
@@ -16,56 +16,67 @@ describe("test use extract ingredient references", () => {
  });

  test("when text empty return empty", () => {
-    const result = useExtractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "");
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "");
    expect(result).toStrictEqual(new Set());
  });

  test("when and ingredient matches exactly and has a reference id, return the referenceId", () => {
-    const result = useExtractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onion");
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onion");

    expect(result).toEqual(new Set(["123"]));
  });

  test.each(punctuationMarks)("when ingredient is suffixed by punctuation, return the referenceId", (suffix) => {
-    const result = useExtractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onion" + suffix);
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onion" + suffix);

    expect(result).toEqual(new Set(["123"]));
  });

  test.each(punctuationMarks)("when ingredient is prefixed by punctuation, return the referenceId", (prefix) => {
-    const result = useExtractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing " + prefix + "Onion");
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing " + prefix + "Onion");
    expect(result).toEqual(new Set(["123"]));
  });

  test("when ingredient is first on a multiline, return the referenceId", () => {
    const multilineSting = "lksjdlk\nOnion";
-    const result = useExtractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], multilineSting);
+
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], multilineSting);
    expect(result).toEqual(new Set(["123"]));
  });

  test("when the ingredient matches partially exactly and has a reference id, return the referenceId", () => {
-    const result = useExtractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onions");
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing Onions");
    expect(result).toEqual(new Set(["123"]));
  });

  test("when the ingredient matches with different casing and has a reference id, return the referenceId", () => {
-    const result = useExtractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing oNions");
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onions", referenceId: "123" }], [], "A sentence containing oNions");
    expect(result).toEqual(new Set(["123"]));
  });

  test("when no ingredients, return empty", () => {
-    const result = useExtractIngredientReferences([], [], "A sentence containing oNions");
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([], [], "A sentence containing oNions");
    expect(result).toEqual(new Set());
  });

  test("when and ingredient matches but in the existing referenceIds, do not return the referenceId", () => {
-    const result = useExtractIngredientReferences([{ note: "Onion", referenceId: "123" }], ["123"], "A sentence containing Onion");
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onion", referenceId: "123" }], ["123"], "A sentence containing Onion");

    expect(result).toEqual(new Set());
  });

  test("when an word is 2 letter of shorter, it is ignored", () => {
-    const result = useExtractIngredientReferences([{ note: "Onion", referenceId: "123" }], [], "A sentence containing On");
+    const { extractIngredientReferences } = useExtractIngredientReferences();
+    const result = extractIngredientReferences([{ note: "Onion", referenceId: "123" }], [], "A sentence containing On");

    expect(result).toEqual(new Set());
  });
--- a/frontend/composables/recipe-page/use-extract-ingredient-references.ts
+++ b/frontend/composables/recipe-page/use-extract-ingredient-references.ts
@@ -1,5 +1,5 @@
 import type { RecipeIngredient } from "~/lib/api/types/recipe";
-import { parseIngredientText } from "~/composables/recipes";
+import { useIngredientTextParser } from "~/composables/recipes";

 function normalize(word: string): string {
  let normalizing = word;
@@ -18,11 +18,6 @@ function removeStartingPunctuation(word: string): string {
  return word.replace(punctuationAtBeginning, "");
 }

-function ingredientMatchesWord(ingredient: RecipeIngredient, word: string) {
-  const searchText = parseIngredientText(ingredient);
-  return searchText.toLowerCase().includes(word.toLowerCase());
-}
-
 function isBlackListedWord(word: string) {
  // Ignore matching blacklisted words when auto-linking - This is kind of a cludgey implementation. We're blacklisting common words but
  // other common phrases trigger false positives and I'm not sure how else to approach this. In the future I maybe look at looking directly
@@ -39,20 +34,33 @@ function isBlackListedWord(word: string) {
  return blackListedText.includes(word) || word.match(blackListedRegexMatch);
 }

-export function useExtractIngredientReferences(recipeIngredients: RecipeIngredient[], activeRefs: string[], text: string): Set<string> {
-  const availableIngredients = recipeIngredients
-    .filter(ingredient => ingredient.referenceId !== undefined)
-    .filter(ingredient => !activeRefs.includes(ingredient.referenceId as string));
+export function useExtractIngredientReferences() {
+  const { parseIngredientText } = useIngredientTextParser();

-  const allMatchedIngredientIds: string[] = text
-    .toLowerCase()
-    .split(/\s/)
-    .map(normalize)
-    .filter(word => word.length > 2)
-    .filter(word => !isBlackListedWord(word))
-    .flatMap(word => availableIngredients.filter(ingredient => ingredientMatchesWord(ingredient, word)))
-    .map(ingredient => ingredient.referenceId as string);
-  //  deduplicate
+  function extractIngredientReferences(recipeIngredients: RecipeIngredient[], activeRefs: string[], text: string): Set<string> {
+    function ingredientMatchesWord(ingredient: RecipeIngredient, word: string) {
+      const searchText = parseIngredientText(ingredient);
+      return searchText.toLowerCase().includes(word.toLowerCase());
+    }

-  return new Set<string>(allMatchedIngredientIds);
+    const availableIngredients = recipeIngredients
+      .filter(ingredient => ingredient.referenceId !== undefined)
+      .filter(ingredient => !activeRefs.includes(ingredient.referenceId as string));
+
+    const allMatchedIngredientIds: string[] = text
+      .toLowerCase()
+      .split(/\s/)
+      .map(normalize)
+      .filter(word => word.length > 2)
+      .filter(word => !isBlackListedWord(word))
+      .flatMap(word => availableIngredients.filter(ingredient => ingredientMatchesWord(ingredient, word)))
+      .map(ingredient => ingredient.referenceId as string);
+    //  deduplicate
+
+    return new Set<string>(allMatchedIngredientIds);
+  }
+
+  return {
+    extractIngredientReferences,
+  };
 }
--- a/frontend/composables/recipes/index.ts
+++ b/frontend/composables/recipes/index.ts
@@ -1,7 +1,7 @@
 export { useFraction } from "./use-fraction";
 export { useRecipe } from "./use-recipe";
 export { useRecipes, recentRecipes, allRecipes, useLazyRecipes } from "./use-recipes";
-export { parseIngredientText, useParsedIngredientText } from "./use-recipe-ingredients";
+export { useIngredientTextParser } from "./use-recipe-ingredients";
 export { useNutritionLabels } from "./use-recipe-nutrition";
 export { useTools } from "./use-recipe-tools";
 export { useRecipePermissions } from "./use-recipe-permissions";
--- a/frontend/composables/recipes/use-recipe-ingredients.test.ts
+++ b/frontend/composables/recipes/use-recipe-ingredients.test.ts
@@ -1,17 +1,19 @@
 import { describe, test, expect, vi, beforeEach } from "vitest";
-import { parseIngredientText } from "./use-recipe-ingredients";
+import { useIngredientTextParser } from "./use-recipe-ingredients";
 import type { RecipeIngredient } from "~/lib/api/types/recipe";
 import { useLocales } from "../use-locales";

 vi.mock("../use-locales");

-describe(parseIngredientText.name, () => {
+let parseIngredientText: (ingredient: RecipeIngredient, scale?: number, includeFormating?: boolean) => string;
+
+describe("parseIngredientText", () => {
  beforeEach(() => {
-    vi.clearAllMocks();
    vi.mocked(useLocales).mockReturnValue({
      locales: [{ value: "en-US", pluralFoodHandling: "always" }],
      locale: { value: "en-US", pluralFoodHandling: "always" },
    } as any);
+    ({ parseIngredientText } = useIngredientTextParser());
  });

  const createRecipeIngredient = (overrides: Partial<RecipeIngredient>): RecipeIngredient => ({
@@ -145,6 +147,7 @@ describe(parseIngredientText.name, () => {
      locales: [{ value: "en-US", pluralFoodHandling: "always" }],
      locale: { value: "en-US", pluralFoodHandling: "always" },
    } as any);
+    const { parseIngredientText } = useIngredientTextParser();

    const ingredient = createRecipeIngredient({
      quantity: 2,
@@ -160,6 +163,7 @@ describe(parseIngredientText.name, () => {
      locales: [{ value: "en-US", pluralFoodHandling: "never" }],
      locale: { value: "en-US", pluralFoodHandling: "never" },
    } as any);
+    const { parseIngredientText } = useIngredientTextParser();

    const ingredient = createRecipeIngredient({
      quantity: 2,
@@ -175,6 +179,7 @@ describe(parseIngredientText.name, () => {
      locales: [{ value: "en-US", pluralFoodHandling: "without-unit" }],
      locale: { value: "en-US", pluralFoodHandling: "without-unit" },
    } as any);
+    const { parseIngredientText } = useIngredientTextParser();

    const ingredient = createRecipeIngredient({
      quantity: 2,
@@ -190,6 +195,7 @@ describe(parseIngredientText.name, () => {
      locales: [{ value: "en-US", pluralFoodHandling: "without-unit" }],
      locale: { value: "en-US", pluralFoodHandling: "without-unit" },
    } as any);
+    const { parseIngredientText } = useIngredientTextParser();

    const ingredient = createRecipeIngredient({
      quantity: 2,
--- a/frontend/composables/recipes/use-recipe-ingredients.ts
+++ b/frontend/composables/recipes/use-recipe-ingredients.ts
@@ -76,51 +76,59 @@ function shouldUsePluralFood(quantity: number, hasUnit: boolean, pluralFoodHandl
  }
 }

-export function useParsedIngredientText(ingredient: RecipeIngredient, scale = 1, includeFormating = true, groupSlug?: string): ParsedIngredientText {
+export function useIngredientTextParser() {
  const { locales, locale } = useLocales();
-  const filteredLocales = locales.filter(lc => lc.value === locale.value);
-  const pluralFoodHandling = filteredLocales.length ? filteredLocales[0].pluralFoodHandling : "without-unit";

-  const { quantity, food, unit, note, referencedRecipe } = ingredient;
-  const usePluralUnit = quantity !== undefined && ((quantity || 0) * scale > 1 || (quantity || 0) * scale === 0);
-  const usePluralFood = shouldUsePluralFood((quantity || 0) * scale, !!unit, pluralFoodHandling);
+  function useParsedIngredientText(ingredient: RecipeIngredient, scale = 1, includeFormating = true, groupSlug?: string): ParsedIngredientText {
+    const filteredLocales = locales.filter(lc => lc.value === locale.value);
+    const pluralFoodHandling = filteredLocales.length ? filteredLocales[0].pluralFoodHandling : "without-unit";

-  let returnQty = "";
+    const { quantity, food, unit, note, referencedRecipe } = ingredient;
+    const usePluralUnit = quantity !== undefined && ((quantity || 0) * scale > 1 || (quantity || 0) * scale === 0);
+    const usePluralFood = shouldUsePluralFood((quantity || 0) * scale, !!unit, pluralFoodHandling);

-  // casting to number is required as sometimes quantity is a string
-  if (quantity && Number(quantity) !== 0) {
-    if (unit && !unit.fraction) {
-      returnQty = Number((quantity * scale).toPrecision(3)).toString();
-    }
-    else {
-      const fraction = frac(quantity * scale, 10, true);
-      if (fraction[0] !== undefined && fraction[0] > 0) {
-        returnQty += fraction[0];
+    let returnQty = "";
+
+    // casting to number is required as sometimes quantity is a string
+    if (quantity && Number(quantity) !== 0) {
+      if (unit && !unit.fraction) {
+        returnQty = Number((quantity * scale).toPrecision(3)).toString();
      }
+      else {
+        const fraction = frac(quantity * scale, 10, true);
+        if (fraction[0] !== undefined && fraction[0] > 0) {
+          returnQty += fraction[0];
+        }

-      if (fraction[1] > 0) {
-        returnQty += includeFormating
-          ? `<sup>${fraction[1]}</sup><span>&frasl;</span><sub>${fraction[2]}</sub>`
-          : ` ${fraction[1]}/${fraction[2]}`;
+        if (fraction[1] > 0) {
+          returnQty += includeFormating
+            ? `<sup>${fraction[1]}</sup><span>&frasl;</span><sub>${fraction[2]}</sub>`
+            : ` ${fraction[1]}/${fraction[2]}`;
+        }
      }
    }
-  }

-  const unitName = useUnitName(unit || undefined, usePluralUnit);
-  const ingName = referencedRecipe ? referencedRecipe.name || "" : useFoodName(food || undefined, usePluralFood);
+    const unitName = useUnitName(unit || undefined, usePluralUnit);
+    const ingName = referencedRecipe ? referencedRecipe.name || "" : useFoodName(food || undefined, usePluralFood);
+
+    return {
+      quantity: returnQty ? sanitizeIngredientHTML(returnQty) : undefined,
+      unit: unitName && quantity ? sanitizeIngredientHTML(unitName) : undefined,
+      name: ingName ? sanitizeIngredientHTML(ingName) : undefined,
+      note: note ? sanitizeIngredientHTML(note) : undefined,
+      recipeLink: useRecipeLink(referencedRecipe || undefined, groupSlug),
+    };
+  };
+
+  function parseIngredientText(ingredient: RecipeIngredient, scale = 1, includeFormating = true): string {
+    const { quantity, unit, name, note } = useParsedIngredientText(ingredient, scale, includeFormating);
+
+    const text = `${quantity || ""} ${unit || ""} ${name || ""} ${note || ""}`.replace(/ {2,}/g, " ").trim();
+    return sanitizeIngredientHTML(text);
+  };

  return {
-    quantity: returnQty ? sanitizeIngredientHTML(returnQty) : undefined,
-    unit: unitName && quantity ? sanitizeIngredientHTML(unitName) : undefined,
-    name: ingName ? sanitizeIngredientHTML(ingName) : undefined,
-    note: note ? sanitizeIngredientHTML(note) : undefined,
-    recipeLink: useRecipeLink(referencedRecipe || undefined, groupSlug),
+    useParsedIngredientText,
+    parseIngredientText,
  };
 }
-
-export function parseIngredientText(ingredient: RecipeIngredient, scale = 1, includeFormating = true): string {
-  const { quantity, unit, name, note } = useParsedIngredientText(ingredient, scale, includeFormating);
-
-  const text = `${quantity || ""} ${unit || ""} ${name || ""} ${note || ""}`.replace(/ {2,}/g, " ").trim();
-  return sanitizeIngredientHTML(text);
-}
--- a/frontend/composables/use-search.ts
+++ b/frontend/composables/use-search.ts
@@ -0,0 +1,117 @@
+import { watchDebounced } from "@vueuse/core";
+import type { IFuseOptions } from "fuse.js";
+import Fuse from "fuse.js";
+
+export interface IAlias {
+  name: string;
+}
+
+export interface ISearchableItem {
+  id: string;
+  name: string;
+  aliases?: IAlias[] | undefined;
+}
+
+interface ISearchItemInternal extends ISearchableItem {
+  aliasesText?: string | undefined;
+}
+
+export interface ISearchOptions {
+  debounceMs?: number;
+  maxWaitMs?: number;
+  minSearchLength?: number;
+  fuseOptions?: Partial<IFuseOptions<ISearchItemInternal>>;
+}
+
+export function useSearch<T extends ISearchableItem>(
+  items: ComputedRef<T[]> | Ref<T[]> | T[],
+  options: ISearchOptions = {},
+) {
+  const {
+    debounceMs = 0,
+    maxWaitMs = 1500,
+    minSearchLength = 1,
+    fuseOptions: customFuseOptions = {},
+  } = options;
+
+  // State
+  const search = ref("");
+  const debouncedSearch = shallowRef("");
+
+  // Flatten item aliases to include as searchable text
+  const searchItems = computed(() => {
+    const itemsArray = Array.isArray(items) ? items : items.value;
+    return itemsArray.map((item) => {
+      return {
+        ...item,
+        aliasesText: item.aliases ? item.aliases.map(a => a.name).join(" ") : "",
+      } as ISearchItemInternal;
+    });
+  });
+
+  // Default Fuse options
+  const defaultFuseOptions: IFuseOptions<ISearchItemInternal> = {
+    keys: [
+      { name: "name", weight: 3 },
+      { name: "pluralName", weight: 3 },
+      { name: "abbreviation", weight: 2 },
+      { name: "pluralAbbreviation", weight: 2 },
+      { name: "aliasesText", weight: 1 },
+    ],
+    ignoreLocation: true,
+    shouldSort: true,
+    threshold: 0.3,
+    minMatchCharLength: 1,
+    findAllMatches: false,
+  };
+
+  // Merge custom options with defaults
+  const fuseOptions = computed(() => ({
+    ...defaultFuseOptions,
+    ...customFuseOptions,
+  }));
+
+  // Debounce search input
+  watchDebounced(
+    () => search.value,
+    (newSearch) => {
+      debouncedSearch.value = newSearch;
+    },
+    { debounce: debounceMs, maxWait: maxWaitMs, immediate: false },
+  );
+
+  // Initialize Fuse instance
+  const fuse = computed(() => {
+    return new Fuse(searchItems.value || [], fuseOptions.value);
+  });
+
+  // Compute filtered results
+  const filtered = computed(() => {
+    const itemsArray = Array.isArray(items) ? items : items.value;
+    const searchTerm = debouncedSearch.value.trim();
+
+    // If no search query or less than minSearchLength characters, return all items
+    if (!searchTerm || searchTerm.length < minSearchLength) {
+      return itemsArray;
+    }
+
+    if (!itemsArray || itemsArray.length === 0) {
+      return [];
+    }
+
+    const results = fuse.value.search(searchTerm);
+    return results.map(result => result.item as T);
+  });
+
+  const reset = () => {
+    search.value = "";
+    debouncedSearch.value = "";
+  };
+
+  return {
+    search,
+    debouncedSearch,
+    filtered,
+    reset,
+  };
+}
--- a/frontend/composables/use-utils.ts
+++ b/frontend/composables/use-utils.ts
@@ -34,6 +34,9 @@ const normalizeLigatures = replaceAllBuilder(new Map([
  ["ﬆ", "st"],
 ]));

+/**
+ * @deprecated prefer fuse.js/use-search.ts
+ */
 export const normalize = (str: string) => {
  if (!str) {
    return "";
@@ -45,6 +48,9 @@ export const normalize = (str: string) => {
  return normalized;
 };

+/**
+ * @deprecated prefer fuse.js/use-search.ts
+ */
 export const normalizeFilter: FilterFunction = (value: string, query: string) => {
  const normalizedValue = normalize(value);
  const normalizeQuery = normalize(query);