diff --git a/public/app.mjs b/public/app.mjs index a1d24a8..ce12f98 100644 --- a/public/app.mjs +++ b/public/app.mjs @@ -550,7 +550,15 @@ function render_inventory_list() { function build_inventory_row(entry) { const row = clone('t-inventory-row'); const comp = component_by_id(entry.component_id); - set_text(row, '.inv-component-name', comp ? component_display_name(comp) : '(deleted component)'); + const name_el = qs(row, '.inv-component-name'); + name_el.textContent = comp ? component_display_name(comp) : '(deleted component)'; + if (comp) { + name_el.classList.add('inv-component-link'); + name_el.addEventListener('click', () => { + selected_component_id = comp.id; + navigate('/components'); + }); + } const pill = document.createElement('span'); pill.className = `type-pill type-${entry.location_type}`; diff --git a/public/style.css b/public/style.css index 91ee631..a958eea 100644 --- a/public/style.css +++ b/public/style.css @@ -643,6 +643,15 @@ nav { .type-pill.type-bom { background: var(--badge-bom-bg); color: var(--badge-bom-text); } .type-pill.type-digital { background: var(--badge-digital-bg); color: var(--badge-digital-text); } +.inv-component-link { + cursor: pointer; + color: var(--accent); +} + +.inv-component-link:hover { + text-decoration: underline; +} + .inv-quantity { font-family: var(--font-mono); font-size: 0.9rem;