Improve track dialog layout with responsive grid and cleaner status alignment

This commit is contained in:
J0Z1L 2026-02-28 12:04:21 +01:00
parent b021df31b4
commit 7815051e5d
2 changed files with 97 additions and 14 deletions

View file

@ -198,10 +198,12 @@ async function openAlbumDialog(albumId, preselectedTrackNames = [], context = nu
row.className = 'track-row';
const isChecked = preselected.size > 0 ? preselected.has(track.name) : true;
row.innerHTML = `
<input type="checkbox" ${isChecked ? 'checked' : ''} data-track-name="${track.name.replace(/"/g, '&quot;')}" data-exists="${Boolean(track.exists)}" />
<span>${track.trackNumber}. ${track.name}</span>
<small>(${formatDuration(track.durationMs)})</small>
${pill(Boolean(track.exists))}
<input class="track-check" type="checkbox" ${isChecked ? 'checked' : ''} data-track-name="${track.name.replace(/"/g, '&quot;')}" data-exists="${Boolean(track.exists)}" />
<span class="track-main">
<span class="track-title">${track.trackNumber}. ${track.name}</span>
<span class="track-meta">${formatDuration(track.durationMs)}</span>
</span>
<span class="track-status">${pill(Boolean(track.exists))}</span>
`;
const input = row.querySelector('input');
input.addEventListener('change', updateDialogActionButton);