Garage : liste radio scrollable pour pièces connues

Remplace les chips par une liste scrollable (max 160px) avec
nom, référence, marque et prix — identique au GarageManager original.

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

garage.php

@@ -96,7 +96,7 @@ require __DIR__ . '/header.php';
       <!-- Formulaire inline ajout pièce -->
       <div id="inline-part-form" style="display:none;background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:1.25rem 1.5rem">
         <p style="font-size:.8rem;font-weight:600;color:#64748b;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.05em">🔄 Réutiliser une pièce connue</p>
-        <div id="known-parts-list" style="display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem"></div>
+        <div id="known-parts-list"></div>
         <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
           <div class="form-group"><label class="form-label">Nom *</label><input class="form-control" id="ipart-name" placeholder="Filtre à huile"></div>
           <div class="form-group"><label class="form-label">Référence</label><input class="form-control" id="ipart-reference" placeholder="Ex: 06A115561B" style="font-family:monospace"></div>

modules/garage/assets/garage.css

@@ -283,6 +283,26 @@ textarea.form-control { resize: vertical; min-height: 80px; }
 .toast.warning { border-left-color: var(--warning); }
 @keyframes toastIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
 
+/* ─── SCROLL LIST (pièces connues) ──────────────────────────────────────────── */
+.scroll-list {
+  max-height: 160px; overflow-y: auto;
+  border: 1px solid var(--border-light); border-radius: 8px;
+  background: #fff; margin-bottom: 1rem;
+}
+.scroll-list-item {
+  display: flex; align-items: center; gap: .75rem;
+  padding: .45rem .75rem; cursor: pointer;
+  border-bottom: 1px solid #f1f5f9; transition: background .12s;
+  user-select: none;
+}
+.scroll-list-item:last-child { border-bottom: none; }
+.scroll-list-item:hover { background: #f8fafc; }
+.scroll-list-item input[type="radio"] { flex-shrink: 0; }
+.item-name  { flex: 1; font-size: .875rem; font-weight: 500; color: var(--text-main); }
+.item-ref   { font-size: .72rem; font-family: monospace; color: var(--text-muted); }
+.item-brand { font-size: .75rem; color: var(--text-muted); }
+.item-price { font-size: .875rem; font-weight: 600; color: var(--primary); white-space: nowrap; }
+
 /* ─── RESPONSIVE ─────────────────────────────────────────────────────────────── */
 @media (max-width: 768px) {
   .container { padding: 1rem; }

modules/garage/assets/garage.js

@@ -300,21 +300,32 @@ async function loadKnownParts(vehicleId){
     const parts=await api('parts','GET',null,'&vehicle_id='+vehicleId);
     const el=document.getElementById('known-parts-list');
     if(!el)return;
-    if(!parts.length){el.innerHTML='<span style="color:var(--muted);font-size:.8rem">Aucune pièce connue</span>';return;}
+    if(!parts.length){el.innerHTML='<p style="color:var(--muted);font-size:.8rem;margin-bottom:.75rem">Aucune pièce connue pour ce véhicule</p>';return;}
     const seen=new Set();
-    const unique=parts.filter(p=>{if(seen.has(p.name))return false;seen.add(p.name);return true;}).slice(0,15);
+    const unique=parts.filter(p=>{if(seen.has(p.name))return false;seen.add(p.name);return true;});
-    el.innerHTML=unique.map(p=>
+    const wrap=document.createElement('div');
-      '<button class="badge badge-gray" style="cursor:pointer;border:none;padding:.3rem .6rem;font-size:.78rem" '+
+    wrap.className='scroll-list';
-      'data-name="'+escHtml(p.name)+'" data-brand="'+escHtml(p.brand||'')+'" data-ref="'+escHtml(p.reference||'')+'" data-price="'+p.price+'">'+escHtml(p.name)+'</button>'
+    unique.forEach((p,i)=>{
-    ).join('');
+      const lbl=document.createElement('label');
-    $$('button[data-name]',el).forEach(btn=>btn.addEventListener('click',()=>{
+      lbl.className='scroll-list-item';
-      const n=document.getElementById('ipart-name');const b=document.getElementById('ipart-brand');
+      lbl.innerHTML=
-      const r=document.getElementById('ipart-reference');const pr=document.getElementById('ipart-price');
+        '<input type="radio" name="_prefill" value="'+i+'" style="width:auto;background:none;border:none;padding:0;accent-color:var(--primary)">'+
-      if(n)n.value=btn.dataset.name;
+        '<span class="item-name">'+escHtml(p.name)+'</span>'+
-      if(b)b.value=btn.dataset.brand;
+        (p.reference?'<span class="item-ref">'+escHtml(p.reference)+'</span>':'')+
-      if(r)r.value=btn.dataset.ref;
+        (p.brand?'<span class="item-brand">'+escHtml(p.brand)+'</span>':'')+
-      if(pr){pr.value=btn.dataset.price;updateIPriceTTC();}
+        '<span class="item-price">'+fmtPrice(p.price)+'</span>';
-    }));
+      lbl.querySelector('input').addEventListener('change',()=>{
+        const n=document.getElementById('ipart-name');const b=document.getElementById('ipart-brand');
+        const r=document.getElementById('ipart-reference');const pr=document.getElementById('ipart-price');
+        if(n)n.value=p.name;
+        if(b)b.value=p.brand||'';
+        if(r)r.value=p.reference||'';
+        if(pr){pr.value=p.price;updateIPriceTTC();}
+      });
+      wrap.appendChild(lbl);
+    });
+    el.innerHTML='';
+    el.appendChild(wrap);
   }catch(e){}
 }