feat(shopping): sélecteur catalogue lors de l'ajout d'article

Liste scrollable alphabétique filtrée en temps réel, sélection en un tap
(pré-remplit l'unité), ou saisie libre si article hors catalogue.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

amelioration_shopping.md

@@ -12,6 +12,7 @@
 - **Champs enrichis articles** : description, prix, quantité par unité, boutique par défaut, code-barres
 - **Champs enrichis boutiques** : URL, type (alimentaire, bricolage, jardinage…)
 - **Historique** via modal "Historique" pour retrouver les listes terminées
+- **Sélecteur catalogue** lors de l'ajout d'un article : liste scrollable alphabétique, filtrée en temps réel, sélection en un tap (pré-remplit unité), ou saisie libre si hors catalogue
 - **Wake lock** activé dès qu'une liste est ouverte (écran allumé en magasin)
 
 ## En attente / Idées futures

frontend/src/pages/ShoppingPage.tsx

@@ -1,9 +1,10 @@
 // frontend/src/pages/ShoppingPage.tsx
 import { useState, useEffect, useCallback } from 'react'
-import type { ShoppingListDetail, ShoppingList, Store } from '../api/shopping'
+import type { ShoppingListDetail, ShoppingList, Store, Product } from '../api/shopping'
 import {
   fetchLists, createList, fetchListDetail, deleteList,
   addItem, updateItem, deleteItem, finishShopping, fetchStores, generateMagicList,
+  searchProducts,
 } from '../api/shopping'
 import Modal from '../components/Modal'
 import ItemRow from '../components/shopping/ItemRow'
@@ -29,6 +30,7 @@ export default function ShoppingPage() {
   const [currentList, setCurrentList] = useState<ShoppingListDetail | null>(null)
   const [allLists, setAllLists] = useState<ShoppingList[]>([])
   const [stores, setStores] = useState<Store[]>([])
+  const [products, setProducts] = useState<Product[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [generating, setGenerating] = useState(false)
@@ -38,7 +40,8 @@ export default function ShoppingPage() {
   const [showCatalogueModal, setShowCatalogueModal] = useState(false)
   const [showBoutiquesModal, setShowBoutiquesModal] = useState(false)
 
-  const [newItemName, setNewItemName] = useState('')
+  const [itemSearch, setItemSearch] = useState('')
+  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null)
   const [newItemQty, setNewItemQty] = useState('')
   const [newItemUnit, setNewItemUnit] = useState('')
 
@@ -48,9 +51,10 @@ export default function ShoppingPage() {
     setLoading(true)
     setError(null)
     try {
-      const [listsData, storesData] = await Promise.all([fetchLists(), fetchStores()])
+      const [listsData, storesData, productsData] = await Promise.all([fetchLists(), fetchStores(), searchProducts()])
       setAllLists(listsData)
       setStores(storesData)
+      setProducts([...productsData].sort((a, b) => a.name.localeCompare(b.name, 'fr')))
 
       const current = listsData.find(l => l.status === 'draft' || l.status === 'active')
       if (current) {
@@ -100,18 +104,33 @@ export default function ShoppingPage() {
     }
   }
 
+  function closeAddItemModal() {
+    setItemSearch('')
+    setSelectedProduct(null)
+    setNewItemQty('')
+    setNewItemUnit('')
+    setShowAddItemModal(false)
+  }
+
+  function selectProduct(p: Product) {
+    setSelectedProduct(p)
+    setItemSearch(p.name)
+    setNewItemUnit(p.default_unit ?? '')
+  }
+
   async function handleAddItem() {
-    if (!currentList || !newItemName.trim()) return
+    if (!currentList) return
+    const hasProduct = selectedProduct !== null
+    const customName = hasProduct ? undefined : itemSearch.trim()
+    if (!hasProduct && !customName) return
     try {
       await addItem(currentList.id, {
-        custom_name: newItemName.trim(),
+        product_id: selectedProduct?.id,
+        custom_name: customName,
         quantity: newItemQty || undefined,
         unit: newItemUnit || undefined,
       })
-      setNewItemName('')
+      closeAddItemModal()
-      setNewItemQty('')
-      setNewItemUnit('')
-      setShowAddItemModal(false)
       void refreshCurrentList()
     } catch {
       setError("Erreur lors de l'ajout")
@@ -180,6 +199,10 @@ export default function ShoppingPage() {
   const hasCurrentList = currentList !== null
   const pastLists = allLists.filter(l => l.status === 'done')
 
+  const filteredProducts = products.filter(
+    p => !itemSearch.trim() || p.name.toLowerCase().includes(itemSearch.trim().toLowerCase())
+  )
+
   return (
     <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100%' }}>
       {/* ── En-tête ── */}
@@ -376,15 +399,68 @@ export default function ShoppingPage() {
       {/* ── Modals ── */}
 
       {showAddItemModal && (
-        <Modal title="Ajouter un article" onClose={() => setShowAddItemModal(false)}>
+        <Modal title="Ajouter un article" onClose={closeAddItemModal} width={420}>
+          {/* Barre de recherche / nom personnalisé */}
           <input
-            style={inputStyle}
+            style={{
-            placeholder="Nom de l'article *"
+              ...inputStyle,
-            value={newItemName}
+              borderColor: selectedProduct ? 'var(--ok)' : 'var(--bg-5)',
-            onChange={e => setNewItemName(e.target.value)}
+              borderWidth: selectedProduct ? 2 : 1,
+            }}
+            placeholder="Rechercher ou saisir un article…"
+            value={itemSearch}
+            onChange={e => { setItemSearch(e.target.value); setSelectedProduct(null) }}
             autoFocus
             onKeyDown={e => e.key === 'Enter' && void handleAddItem()}
           />
+
+          {/* Liste scrollable alphabétique du catalogue */}
+          <div style={{
+            maxHeight: 240, overflowY: 'auto',
+            border: '1px solid var(--bg-5)', borderRadius: 8,
+            background: 'var(--bg-3)',
+          }}>
+            {filteredProducts.length === 0 && (
+              <p style={{
+                color: 'var(--ink-4)', fontFamily: 'var(--font-ui)', fontSize: 13,
+                textAlign: 'center', padding: '12px 16px', margin: 0, ...noSelect,
+              }}>
+                {itemSearch.trim() ? `"${itemSearch}" — sera ajouté comme article libre` : 'Catalogue vide'}
+              </p>
+            )}
+            {filteredProducts.map((p, idx) => {
+              const isSelected = selectedProduct?.id === p.id
+              return (
+                <div
+                  key={p.id}
+                  onClick={() => isSelected ? (setSelectedProduct(null), setItemSearch('')) : selectProduct(p)}
+                  style={{
+                    padding: '10px 14px',
+                    cursor: 'pointer',
+                    background: isSelected ? 'var(--ok)' : 'transparent',
+                    color: isSelected ? '#1d2021' : 'var(--ink-1)',
+                    borderBottom: idx < filteredProducts.length - 1 ? '1px solid var(--bg-4)' : 'none',
+                    display: 'flex', alignItems: 'center', gap: 10,
+                    userSelect: 'none',
+                  }}
+                >
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <div style={{ fontFamily: 'var(--font-ui)', fontSize: 14, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      {p.name}
+                    </div>
+                    {(p.default_unit || p.brand) && (
+                      <div style={{ fontSize: 11, color: isSelected ? '#1d2021' : 'var(--ink-3)', fontFamily: 'var(--font-mono)', marginTop: 1 }}>
+                        {[p.brand, p.default_unit].filter(Boolean).join(' · ')}
+                      </div>
+                    )}
+                  </div>
+                  {isSelected && <span style={{ fontSize: 16, fontWeight: 700 }}>✓</span>}
+                </div>
+              )
+            })}
+          </div>
+
+          {/* Quantité + Unité */}
           <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
             <input
               style={inputStyle} placeholder="Quantité"
@@ -397,14 +473,20 @@ export default function ShoppingPage() {
               onChange={e => setNewItemUnit(e.target.value)}
             />
           </div>
+
           <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
             <button
-              onClick={() => setShowAddItemModal(false)}
+              onClick={closeAddItemModal}
               style={{ padding: '10px 16px', borderRadius: 8, border: '1px solid var(--bg-5)', background: 'transparent', color: 'var(--ink-2)', cursor: 'pointer', fontFamily: 'var(--font-ui)', minHeight: 48 }}
             >Annuler</button>
             <button
               onClick={() => void handleAddItem()}
-              style={{ padding: '10px 20px', borderRadius: 8, border: 'none', background: 'var(--accent)', color: '#1d2021', cursor: 'pointer', fontFamily: 'var(--font-ui)', fontWeight: 600, minHeight: 48 }}
+              disabled={!selectedProduct && !itemSearch.trim()}
+              style={{
+                padding: '10px 20px', borderRadius: 8, border: 'none',
+                background: (!selectedProduct && !itemSearch.trim()) ? 'var(--bg-5)' : 'var(--accent)',
+                color: '#1d2021', cursor: 'pointer', fontFamily: 'var(--font-ui)', fontWeight: 600, minHeight: 48,
+              }}
             >Ajouter</button>
           </div>
         </Modal>