From 87035ed3b68b0f6f30e13d4e3bc606030f9a1068 Mon Sep 17 00:00:00 2001
From: perco <perco@percoNAS.home>
Date: Mon, 11 May 2026 17:38:26 +0200
Subject: [PATCH] =?UTF-8?q?Garage=20:=20liste=20radio=20scrollable=20pour?=
 =?UTF-8?q?=20pi=C3=A8ces=20connues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                       |  2 +-
 modules/garage/assets/garage.css | 20 ++++++++++++++++
 modules/garage/assets/garage.js  | 39 ++++++++++++++++++++------------
 3 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/garage.php b/garage.php
index ac339ba..c2e3ca3 100644
--- a/garage.php
+++ b/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>
diff --git a/modules/garage/assets/garage.css b/modules/garage/assets/garage.css
index 73ab797..2e3e163 100644
--- a/modules/garage/assets/garage.css
+++ b/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; }
diff --git a/modules/garage/assets/garage.js b/modules/garage/assets/garage.js
index b9d077f..6eba0c9 100644
--- a/modules/garage/assets/garage.js
+++ b/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);
-    el.innerHTML=unique.map(p=>
-      '<button class="badge badge-gray" style="cursor:pointer;border:none;padding:.3rem .6rem;font-size:.78rem" '+
-      'data-name="'+escHtml(p.name)+'" data-brand="'+escHtml(p.brand||'')+'" data-ref="'+escHtml(p.reference||'')+'" data-price="'+p.price+'">'+escHtml(p.name)+'</button>'
-    ).join('');
-    $$('button[data-name]',el).forEach(btn=>btn.addEventListener('click',()=>{
-      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=btn.dataset.name;
-      if(b)b.value=btn.dataset.brand;
-      if(r)r.value=btn.dataset.ref;
-      if(pr){pr.value=btn.dataset.price;updateIPriceTTC();}
-    }));
+    const unique=parts.filter(p=>{if(seen.has(p.name))return false;seen.add(p.name);return true;});
+    const wrap=document.createElement('div');
+    wrap.className='scroll-list';
+    unique.forEach((p,i)=>{
+      const lbl=document.createElement('label');
+      lbl.className='scroll-list-item';
+      lbl.innerHTML=
+        '<input type="radio" name="_prefill" value="'+i+'" style="width:auto;background:none;border:none;padding:0;accent-color:var(--primary)">'+
+        '<span class="item-name">'+escHtml(p.name)+'</span>'+
+        (p.reference?'<span class="item-ref">'+escHtml(p.reference)+'</span>':'')+
+        (p.brand?'<span class="item-brand">'+escHtml(p.brand)+'</span>':'')+
+        '<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){}
 }