From b63d93114a65b93f4273ea09c2c1e11455682dac Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Sun, 24 May 2026 12:46:30 +0200
Subject: [PATCH] feat: show track number in iTunes album track list

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components.js | 1 +
 styles.css        | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components.js b/src/components.js
index 826939f..c5cb520 100644
--- a/src/components.js
+++ b/src/components.js
@@ -73,6 +73,7 @@ export function makeGlobalTrackItem(t, idx, list) {
   const art = t.artworkUrl60 || t.artworkUrl100 || '';
   el.innerHTML = `
     <div class="gtrack-art">${art ? `<img src="${art}" loading="lazy" onerror="this.parentNode.innerHTML='<div style=\\'width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:22px\\'>🎵</div>'">` : '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:22px">🎵</div>'}</div>
+    <div class="gtrack-num">${t.trackNumber || ''}</div>
     <div class="gtrack-info">
       <div class="gtrack-title">${esc(t.trackName||t.collectionName||'—')}${t.trackExplicitness==='explicit'?'<span class="explicit-badge">E</span>':''}</div>
       <div class="gtrack-sub">${esc(t.artistName||'—')} · ${esc(t.collectionName||'')} ${t.releaseDate?'· '+new Date(t.releaseDate).getFullYear():''}</div>
diff --git a/styles.css b/styles.css
index 38c20fd..506cd58 100644
--- a/styles.css
+++ b/styles.css
@@ -185,7 +185,8 @@ nav{flex:1;overflow-y:auto;padding:4px 10px}
 .badge-local{background:var(--green-dim);color:var(--green)}
 
 /* ── GLOBAL SEARCH RESULTS ── */
-.gtrack-item{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:8px 12px;border-radius:9px;cursor:pointer;transition:background .15s}
+.gtrack-item{display:grid;grid-template-columns:28px 52px 1fr auto;gap:12px;align-items:center;padding:8px 12px;border-radius:9px;cursor:pointer;transition:background .15s}
+.gtrack-num{font-size:12px;color:var(--text3);text-align:right;font-variant-numeric:tabular-nums}
 .gtrack-item:hover{background:var(--surface)}
 .gtrack-art{width:52px;height:52px;border-radius:6px;overflow:hidden;background:var(--surface2);flex-shrink:0}
 .gtrack-art img{width:100%;height:100%;object-fit:cover}