Feat: M6 - Filter & Search Improvements

- [x] Remove filter Effect Quality functionality and remove the filter option.
- [x] Ingredients filter should have an option to filter for potions with all of the ingredients or any of the ingredients as a clickable toggle next to the Ingredients label.
- [x] When an ingredient filter is selected, the applicable ingredient in the potion card should be highlighted.
- [x] The Text Search box should include a small X inside the input that clears the search text when clicked.
- [x] Update PRD.md as nessisary to relfect these changes and improvements.

Author: Streamweaver

src/features/tools/kcd2_alchemy/__tests__/a11y.test.tsx

@@ -18,11 +18,10 @@ describe('KCD2 Alchemy — Accessibility', () => {
           { id: 'mint', name: 'Mint' },
           { id: 'belladonna', name: 'Belladonna' },
         ]}
-        effectOptions={['Weak', 'Strong']}
         selectedIngredientIds={['mint']}
-        selectedEffects={['weak']}
+        ingredientMode="any"
         onChangeIngredients={() => {}}
-        onChangeEffects={() => {}}
+        onChangeIngredientMode={() => {}}
       />,
     )
     const results = await axe(container)

src/features/tools/kcd2_alchemy/__tests__/filter.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { applyFilters, textMatch, ingredientMatch, effectQualityMatch } from '../lib/filter'
+import { applyFilters, textMatch, ingredientMatch } from '../lib/filter'
 import type { NormalizedPotionRecipe } from '../types'
 
 const sample: NormalizedPotionRecipe[] = [
@@ -45,33 +45,29 @@ describe('filter predicates', () => {
     expect(textMatch(sample[0], 'xyz')).toBe(false)
   })
 
-  it('ingredientMatch matches any selected ingredient id', () => {
-    expect(ingredientMatch(sample[0], [])).toBe(true)
-    expect(ingredientMatch(sample[0], ['marigold'])).toBe(true)
-    expect(ingredientMatch(sample[0], ['wormwood'])).toBe(false)
-  })
+  it('ingredientMatch matches any or all selected ids', () => {
+    expect(ingredientMatch(sample[0], [], 'any')).toBe(true)
+    expect(ingredientMatch(sample[0], ['marigold'], 'any')).toBe(true)
+    expect(ingredientMatch(sample[0], ['wormwood'], 'any')).toBe(false)
 
-  it('effectQualityMatch matches any selected quality', () => {
-    expect(effectQualityMatch(sample[0], [])).toBe(true)
-    expect(effectQualityMatch(sample[0], ['weak'])).toBe(true)
-    expect(effectQualityMatch(sample[0], ['strong'])).toBe(true)
-    expect(effectQualityMatch(sample[0], ['standard'])).toBe(false)
+    // all mode
+    expect(ingredientMatch(sample[0], ['marigold', 'dandelion'], 'all')).toBe(true)
+    expect(ingredientMatch(sample[0], ['marigold', 'wormwood'], 'all')).toBe(false)
   })
 })
 
 describe('applyFilters', () => {
-  it('applies text + ingredient + effect filters and sorts by name', () => {
+  it('applies text + ingredient filters and sorts by name', () => {
     const results = applyFilters(sample, {
       query: 'increases',
       ingredientIds: ['wormwood'],
-      effectQualities: ['standard'],
+      ingredientMode: 'any',
     })
     expect(results.map((r) => r.id)).toEqual(['p2'])
   })
 
   it('returns all when filters are empty', () => {
-    const results = applyFilters(sample, { query: '', ingredientIds: [], effectQualities: [] })
+    const results = applyFilters(sample, { query: '', ingredientIds: [], ingredientMode: 'any' })
     expect(results.length).toBe(2)
   })
 })
-

src/features/tools/kcd2_alchemy/__tests__/query-state.test.tsx

@@ -9,8 +9,8 @@ function Harness() {
     <div>
       <div data-testid="q">{state.q}</div>
       <div data-testid="ingredients">{state.ingredients.join(',')}</div>
-      <div data-testid="effects">{state.effects.join(',')}</div>
-      <button onClick={() => setState({ q: 'mint', ingredients: ['mint'], effects: ['weak'] })}>set</button>
+      <div data-testid="ingMode">{state.ingMode}</div>
+      <button onClick={() => setState({ q: 'mint', ingredients: ['mint'], ingMode: 'all' })}>set</button>
     </div>
   )
 }
@@ -29,7 +29,6 @@ describe('useQueryState', () => {
     expect(screen.getByTestId('q').textContent).toBe('mint')
     expect(window.location.search).toContain('q=mint')
     expect(window.location.search).toContain('ingredients=mint')
-    expect(window.location.search).toContain('effects=weak')
+    expect(window.location.search).toContain('ingMode=all')
   })
 })
-

src/features/tools/kcd2_alchemy/components/FiltersPanel.tsx

@@ -1,14 +1,14 @@
 'use client'
 
 import type { IngredientId } from '../types'
+import type { IngredientMatchMode } from '../lib/filter'
 
 export interface FiltersPanelProps {
   ingredientOptions: { id: IngredientId; name: string }[]
-  effectOptions: string[]
   selectedIngredientIds: IngredientId[]
-  selectedEffects: string[]
+  ingredientMode: IngredientMatchMode
   onChangeIngredients: (ids: IngredientId[]) => void
-  onChangeEffects: (effects: string[]) => void
+  onChangeIngredientMode: (mode: IngredientMatchMode) => void
   onClearAll?: () => void
 }
 
@@ -28,11 +28,10 @@ function ToggleChip({ active, label }: { active: boolean; label: string }) {
 
 export function FiltersPanel({
   ingredientOptions,
-  effectOptions,
   selectedIngredientIds,
-  selectedEffects,
+  ingredientMode,
   onChangeIngredients,
-  onChangeEffects,
+  onChangeIngredientMode,
   onClearAll,
 }: FiltersPanelProps) {
   const toggleIngredient = (id: IngredientId) => {
@@ -43,14 +42,6 @@ export function FiltersPanel({
     onChangeIngredients(Array.from(set))
   }
 
-  const toggleEffect = (label: string) => {
-    const set = new Set(selectedEffects.map((s) => s.toLowerCase()))
-    const key = label.toLowerCase()
-    if (set.has(key)) set.delete(key)
-    else set.add(key)
-    onChangeEffects(Array.from(set))
-  }
-
   return (
     <section className="bg-[var(--card)] border border-[var(--border)] rounded-md p-4">
       <div className="flex items-center justify-between mb-3">
@@ -68,7 +59,35 @@ export function FiltersPanel({
 
       <div className="space-y-4">
         <div>
-          <h3 className="text-sm font-medium mb-2">Ingredients</h3>
+          <div className="flex items-center justify-between mb-2">
+            <h3 className="text-sm font-medium m-0">Ingredients</h3>
+            <div className="flex items-center gap-1 text-xs" role="group" aria-label="Ingredient match mode">
+              <button
+                type="button"
+                className={`px-2 py-0.5 rounded border transition-colors ${
+                  ingredientMode === 'any'
+                    ? 'border-[var(--link)] text-[var(--link)] bg-[color-mix(in_oklab,var(--link)_12%,transparent)]'
+                    : 'border-[var(--border)] text-[var(--muted)]'
+                }`}
+                onClick={() => onChangeIngredientMode('any')}
+                aria-pressed={ingredientMode === 'any'}
+              >
+                Any
+              </button>
+              <button
+                type="button"
+                className={`px-2 py-0.5 rounded border transition-colors ${
+                  ingredientMode === 'all'
+                    ? 'border-[var(--link)] text-[var(--link)] bg-[color-mix(in_oklab,var(--link)_12%,transparent)]'
+                    : 'border-[var(--border)] text-[var(--muted)]'
+                }`}
+                onClick={() => onChangeIngredientMode('all')}
+                aria-pressed={ingredientMode === 'all'}
+              >
+                All
+              </button>
+            </div>
+          </div>
           <div className="flex flex-wrap gap-2">
             {ingredientOptions.map((opt) => {
               const active = selectedIngredientIds.map(String).includes(String(opt.id))
@@ -87,27 +106,6 @@ export function FiltersPanel({
             })}
           </div>
         </div>
-
-        <div>
-          <h3 className="text-sm font-medium mb-2">Effect Quality</h3>
-          <div className="flex flex-wrap gap-2">
-            {effectOptions.map((label) => {
-              const active = selectedEffects.map((s) => s.toLowerCase()).includes(label.toLowerCase())
-              return (
-                <button
-                  key={label}
-                  type="button"
-                  onClick={() => toggleEffect(label)}
-                  className="focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--link)] rounded"
-                  aria-pressed={active}
-                  data-active={active}
-                >
-                  <ToggleChip active={active} label={label} />
-                </button>
-              )
-            })}
-          </div>
-        </div>
       </div>
     </section>
   )

src/features/tools/kcd2_alchemy/components/PotionCard.tsx

@@ -1,8 +1,8 @@
-import type { NormalizedPotionRecipe } from '../types'
+import type { IngredientId, NormalizedPotionRecipe } from '../types'
 import { useState } from 'react'
 import { QuantityTable } from './QuantityTable'
 
-export function PotionCard({ potion }: { potion: NormalizedPotionRecipe }) {
+export function PotionCard({ potion, highlightIngredientIds = [] }: { potion: NormalizedPotionRecipe; highlightIngredientIds?: IngredientId[] }) {
   const [tab, setTab] = useState<'default' | 'optimized'>('default')
   const hasOptimized = Boolean(potion.instructions.optimized)
 
@@ -26,9 +26,25 @@ export function PotionCard({ potion }: { potion: NormalizedPotionRecipe }) {
         <div className="flex items-baseline gap-2 flex-wrap">
           <h4 className="font-medium shrink-0">Ingredients:</h4>
           <ul className="list-none p-0 m-0 text-sm">
-            {potion.ingredients.items.map((it) => (
-              <li className="inline after:content-[',_'] last:after:content-['']" key={`${potion.id}-${String(it.id)}`}>{it.name} ({it.quantity})</li>
-            ))}
+            {potion.ingredients.items.map((it) => {
+              const isHighlighted = highlightIngredientIds.map(String).includes(String(it.id))
+              return (
+                <li
+                  className="inline after:content-[',_'] last:after:content-['']"
+                  key={`${potion.id}-${String(it.id)}`}
+                >
+                  <span
+                    className={
+                      isHighlighted
+                        ? 'px-1 rounded border border-[var(--link)] text-[var(--link)] bg-[color-mix(in_oklab,var(--link)_12%,transparent)]'
+                        : ''
+                    }
+                  >
+                    {it.name} ({it.quantity})
+                  </span>
+                </li>
+              )
+            })}
           </ul>
         </div>
       </section>

src/features/tools/kcd2_alchemy/components/PotionList.tsx

@@ -1,7 +1,7 @@
-import type { NormalizedPotionRecipe } from '../types'
+import type { IngredientId, NormalizedPotionRecipe } from '../types'
 import { PotionCard } from './PotionCard'
 
-export function PotionList({ potions }: { potions: NormalizedPotionRecipe[] }) {
+export function PotionList({ potions, selectedIngredientIds = [] }: { potions: NormalizedPotionRecipe[]; selectedIngredientIds?: IngredientId[] }) {
   if (!potions.length) {
     return (
       <div className="text-sm text-[var(--muted-2)] border border-[var(--border)] rounded-md p-6 bg-[var(--card)]">
@@ -12,9 +12,8 @@ export function PotionList({ potions }: { potions: NormalizedPotionRecipe[] }) {
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
       {potions.map((p) => (
-        <PotionCard key={p.id} potion={p} />
+        <PotionCard key={p.id} potion={p} highlightIngredientIds={selectedIngredientIds} />
       ))}
     </div>
   )
 }
-

src/features/tools/kcd2_alchemy/components/SearchBar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState, useId } from 'react'
 
 export interface SearchBarProps {
   value: string
@@ -10,6 +10,7 @@ export interface SearchBarProps {
 
 export function SearchBar({ value, onChange, placeholder = 'Search potions…' }: SearchBarProps) {
   const [text, setText] = useState(value)
+  const inputId = useId()
 
   useEffect(() => {
     setText(value)
@@ -27,15 +28,33 @@ export function SearchBar({ value, onChange, placeholder = 'Search potions…' }
       onChange: (e: React.ChangeEvent<HTMLInputElement>) => setText(e.target.value),
       placeholder,
       className:
-        'block w-full border border-[var(--border)] rounded-md bg-[var(--card)] text-[var(--foreground)] px-3 py-2',
+        'block w-full border border-[var(--border)] rounded-md bg-[var(--card)] text-[var(--foreground)] pr-9 pl-3 py-2',
     }),
     [text, placeholder],
   )
 
   return (
-    <div className="w-full">
-      <input type="text" aria-label="Search potions" {...inputProps} />
+    <div className="w-full relative">
+      <label htmlFor={inputId} className="sr-only">Search potions</label>
+      <input id={inputId} name="q" type="text" {...inputProps} />
+      {text && (
+        <button
+          type="button"
+          aria-label="Clear search"
+          className="absolute right-2 top-1/2 -translate-y-1/2 z-10 w-5 h-5 inline-flex items-center justify-center rounded border border-[var(--border)] text-[color-mix(in_oklab,var(--foreground)_80%,transparent)] hover:text-[var(--foreground)] bg-[var(--surfaceHover)] hover:bg-[var(--surface)] shadow-sm transition-colors"
+          onClick={() => {
+            setText('')
+            onChange('')
+          }}
+        >
+          <svg aria-hidden="true" viewBox="0 0 20 20" className="w-3.5 h-3.5">
+            <path
+              fill="currentColor"
+              d="M14.348 5.652a.8.8 0 0 0-1.132 0L10 8.868 6.784 5.652a.8.8 0 1 0-1.132 1.132L8.868 10l-3.216 3.216a.8.8 0 1 0 1.132 1.132L10 11.132l3.216 3.216a.8.8 0 0 0 1.132-1.132L11.132 10l3.216-3.216a.8.8 0 0 0 0-1.132z"
+            />
+          </svg>
+        </button>
+      )}
     </div>
   )
 }
-

src/features/tools/kcd2_alchemy/docs/PLAN.md

@@ -168,11 +168,11 @@ M5 — Integration & Polish
 - [x] Validate `npm run test:all` and `npm run build` locally per STANDARDS.md.
 
 M6 - Filter & Search Improvements
-- [ ] Remove filter Effect Quality functionality and remove the filter option.
-- [ ] Ingredients filter should have an option to filter for potions with all of the ingredients or any of the ingredients as a clickable toggle next to the Ingredients label.
-- [ ] When an ingredient filter is selected, the applicable ingredient in the potion card should be highlighted.
-- [ ] The Text Search box should include a small X inside the input that clears the search text when clicked.
-- [ ] Update PRD.md as nessisary to relfect these changes and improvements.
+- [x] Remove filter Effect Quality functionality and remove the filter option.
+- [x] Ingredients filter should have an option to filter for potions with all of the ingredients or any of the ingredients as a clickable toggle next to the Ingredients label.
+- [x] When an ingredient filter is selected, the applicable ingredient in the potion card should be highlighted.
+- [x] The Text Search box should include a small X inside the input that clears the search text when clicked.
+- [x] Update PRD.md as nessisary to relfect these changes and improvements.
 
 ## 10) Acceptance Criteria (DoD)
 

src/features/tools/kcd2_alchemy/docs/PRD.md

@@ -62,10 +62,12 @@ Note: Recipes.ingredents.items.id is a foreign key to Ingredients.id
 
 ## 5. UX & Flows
 
-- Search and filters: query (text), level, ingredients, effects.
+- Search and filters: query (text), ingredients (multi‑select) with match mode toggle (Any/All).
+- Text search clear: input includes an inline clear (X) control.
 - Results list: shows matching potions, count, empty state with guidance.
 - Details: each recipe card shows ingredients, effects, quantities with perk toggles, and instructions with Default/Optimized tabs.
-- URL state: `?q=&level=&ingredients=&effects=`; reload/links preserve filters.
+- Ingredient highlight: when ingredient filters are active, matching ingredients in each card are highlighted.
+- URL state: `?q=&ingredients=&ingMode=`; reload/links preserve filters. `ingMode` defaults to `any` and may be omitted when at default.
 
 ## 6. Accessibility
 
@@ -81,7 +83,7 @@ Note: Recipes.ingredents.items.id is a foreign key to Ingredients.id
 
 - Tool loads client-side at `/tools/kcd2_alchemy/` without SSR.
 - Loads data from JSON and renders a list with basic fields.
-- Filters operate per spec, with URL query param sync.
+- Filters operate per spec, with URL query param sync. Effect quality filtering is removed. Ingredient filtering supports Any/All mode.
 - A11y smoke tests pass; no console errors; build succeeds via `npm run build`.
 
 ## 9. Risks & Open Questions

src/features/tools/kcd2_alchemy/hooks/useAlchemyData.ts

@@ -3,20 +3,14 @@
 import { useEffect, useMemo, useState } from 'react'
 import type { Ingredient, NormalizedPotionRecipe } from '../types'
 import { parseIngredients, parsePotions, validateReferentialIntegrity } from '../lib/schema'
-import {
-  buildIngredientIndex,
-  deriveEffectQualities,
-  deriveIngredientOptions,
-  resolvePotions,
-} from '../lib/normalize'
+import { buildIngredientIndex, deriveIngredientOptions, resolvePotions } from '../lib/normalize'
 
 export interface AlchemyDataState {
   loading: boolean
   error: string | null
   potions: NormalizedPotionRecipe[]
   ingredients: Ingredient[]
   ingredientOptions: { id: string | number; name: string }[]
-  effectQualities: string[]
 }
 
 export function useAlchemyData(): AlchemyDataState {
@@ -75,7 +69,5 @@ export function useAlchemyData(): AlchemyDataState {
   }, [])
 
   const ingredientOptions = useMemo(() => deriveIngredientOptions(ingredients), [ingredients])
-  const effectQualities = useMemo(() => deriveEffectQualities(potions), [potions])
-
-  return { loading, error, potions, ingredients, ingredientOptions, effectQualities }
+  return { loading, error, potions, ingredients, ingredientOptions }
 }