From 8e878e2e5a914572ca3a87d66efca73c1c7983cf Mon Sep 17 00:00:00 2001
From: Gilles Soulier <gil.soulier@gmail.com>
Date: Mon, 25 May 2026 12:16:10 +0200
Subject: [PATCH] =?UTF-8?q?fix(catalogue):=20recherche=20insensible=20aux?=
 =?UTF-8?q?=20accents=20=E2=80=94=20filtrage=20c=C3=B4t=C3=A9=20client=20v?=
 =?UTF-8?q?0.4.11?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le backend utilisait ILIKE (insensible à la casse uniquement) — "iles" ne
trouvait pas "Îles flottantes". Passage au filtrage client avec matchesSearch
(normalize NFD) identique au bottom sheet. Charge tous les produits une fois
puis filtre sur name, brand et category sans aller-retour serveur.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/package.json                               |  2 +-
 frontend/src/components/shopping/CatalogueModal.tsx | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 1bde0c6..c2be4d3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "homehub-frontend",
   "private": true,
-  "version": "0.4.10",
+  "version": "0.4.11",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/components/shopping/CatalogueModal.tsx b/frontend/src/components/shopping/CatalogueModal.tsx
index 8131383..1a8cbd4 100644
--- a/frontend/src/components/shopping/CatalogueModal.tsx
+++ b/frontend/src/components/shopping/CatalogueModal.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react'
 import type { Product, ProductCreate, Store } from '../../api/shopping'
 import { searchProducts, createProduct, updateProduct, deleteProduct } from '../../api/shopping'
 import Modal from '../Modal'
+import { matchesSearch } from '../../utils/search'
 
 interface CatalogueModalProps {
   stores: Store[]
@@ -43,16 +44,20 @@ export default function CatalogueModal({ stores, onClose }: CatalogueModalProps)
 
   useEffect(() => {
     void loadProducts()
-  }, [search])
+  }, [])
 
   async function loadProducts() {
     try {
-      setProducts(await searchProducts(search || undefined))
+      setProducts(await searchProducts())
     } catch {
       setError('Erreur de chargement')
     }
   }
 
+  const filteredProducts = products.filter(p =>
+    !search.trim() || matchesSearch(p.name, search) || matchesSearch(p.brand ?? '', search) || matchesSearch(p.category ?? '', search)
+  )
+
   function startCreate() {
     setForm(emptyForm)
     setEditing(null)
@@ -289,12 +294,12 @@ export default function CatalogueModal({ stores, onClose }: CatalogueModalProps)
           </div>
 
           <div style={{ maxHeight: 400, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 2 }}>
-            {products.length === 0 && (
+            {filteredProducts.length === 0 && (
               <p style={{ color: 'var(--ink-3)', textAlign: 'center', padding: 20, fontFamily: 'var(--font-ui)', fontSize: 13 }}>
                 Aucun article{search ? ` pour "${search}"` : ''}
               </p>
             )}
-            {products.map(p => (
+            {filteredProducts.map(p => (
               <div
                 key={p.id}
                 style={{