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='
Aucune pièce connue';return;}
+ if(!parts.length){el.innerHTML='
Aucune pièce connue pour ce véhicule
';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=>
- '
'
- ).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=
+ '
'+
+ '
'+escHtml(p.name)+''+
+ (p.reference?'
'+escHtml(p.reference)+'':'')+
+ (p.brand?'
'+escHtml(p.brand)+'':'')+
+ '
'+fmtPrice(p.price)+'';
+ 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){}
}