Compact Artists
diff --git a/js/app.js b/js/app.js
index 891771e..d605a59 100644
--- a/js/app.js
+++ b/js/app.js
@@ -4,7 +4,6 @@ import {
apiSettings,
themeManager,
nowPlayingSettings,
- trackListSettings,
downloadQualitySettings,
} from './storage.js';
import { UIRenderer } from './ui.js';
@@ -318,7 +317,6 @@ document.addEventListener('DOMContentLoaded', async () => {
const currentTheme = themeManager.getTheme();
themeManager.setTheme(currentTheme);
- trackListSettings.getMode();
initializeSettings(scrobbler, player, api, ui);
initializePlayerEvents(player, audioPlayer, scrobbler, ui);
diff --git a/js/events.js b/js/events.js
index a82166a..9bec0f4 100644
--- a/js/events.js
+++ b/js/events.js
@@ -1052,6 +1052,8 @@ export function initializeTrackInteractions(player, api, mainContent, contextMen
contextTrack = clickedTrack;
if (contextTrack) {
+ contextMenu._contextTrack = contextTrack;
+ contextMenu._contextType = 'track';
await updateContextMenuLikeState(contextMenu, contextTrack);
const rect = menuBtn.getBoundingClientRect();
positionMenu(contextMenu, rect.left, rect.bottom + 5, rect);
diff --git a/js/settings.js b/js/settings.js
index 1ce4ec4..9fd27e6 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -5,7 +5,6 @@ import {
nowPlayingSettings,
lyricsSettings,
backgroundSettings,
- trackListSettings,
cardSettings,
waveformSettings,
replayGainSettings,
@@ -335,14 +334,7 @@ export function initializeSettings(scrobbler, player, api, ui) {
});
}
- // Track List Actions Mode
- const trackListActionsMode = document.getElementById('track-list-actions-mode');
- if (trackListActionsMode) {
- trackListActionsMode.value = trackListSettings.getMode();
- trackListActionsMode.addEventListener('change', (e) => {
- trackListSettings.setMode(e.target.value);
- });
- }
+
// Compact Artist Toggle
const compactArtistToggle = document.getElementById('compact-artist-toggle');
diff --git a/js/storage.js b/js/storage.js
index beb95c3..c31ab7f 100644
--- a/js/storage.js
+++ b/js/storage.js
@@ -461,25 +461,7 @@ export const backgroundSettings = {
},
};
-export const trackListSettings = {
- STORAGE_KEY: 'track-list-actions-mode',
- getMode() {
- try {
- let mode = localStorage.getItem(this.STORAGE_KEY) || 'dropdown';
- if (mode === 'inline') mode = 'dropdown';
- document.documentElement.setAttribute('data-track-actions-mode', mode);
- return mode;
- } catch {
- return 'dropdown';
- }
- },
-
- setMode(mode) {
- localStorage.setItem(this.STORAGE_KEY, mode);
- document.documentElement.setAttribute('data-track-actions-mode', mode);
- },
-};
export const cardSettings = {
COMPACT_ARTIST_KEY: 'card-compact-artist',
diff --git a/js/ui.js b/js/ui.js
index 48c9932..04793b4 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -224,37 +224,6 @@ export class UIRenderer {
const actionsHTML = isUnavailable
? ''
: `
-
-
-
-
-
-
-
@@ -558,21 +527,22 @@ export class UIRenderer {
.map((track, i) => this.createTrackItemHTML(track, i, showCover, hasMultipleDiscs, useTrackNumber))
.join('');
+ // Bind data to elements immediately using index, avoiding selector ambiguity
+ Array.from(tempDiv.children).forEach((element, index) => {
+ const track = tracks[index];
+ if (element && track) {
+ trackDataStore.set(element, track);
+ // Async update for like button
+ this.updateLikeState(element, 'track', track.id);
+ }
+ });
+
while (tempDiv.firstChild) {
fragment.appendChild(tempDiv.firstChild);
}
if (!append) container.innerHTML = '';
container.appendChild(fragment);
-
- tracks.forEach((track) => {
- const element = container.querySelector(`[data-track-id="${track.id}"]`);
- if (element) {
- trackDataStore.set(element, track);
- // Async update for like button
- this.updateLikeState(element, 'track', track.id);
- }
- });
}
setPageBackground(imageUrl) {
diff --git a/styles.css b/styles.css
index 374679d..ae0d08a 100644
--- a/styles.css
+++ b/styles.css
@@ -1234,19 +1234,13 @@ input[type='search']::-webkit-search-cancel-button {
padding: 0.5rem;
border-radius: var(--radius);
transition: all var(--transition);
- display: none;
-
- /* Controlled by data-track-actions-mode */
+ display: flex;
align-items: center;
justify-content: center;
opacity: 0;
z-index: 10;
}
-[data-track-actions-mode='dropdown'] .track-menu-btn {
- display: flex;
-}
-
.track-item:hover .track-menu-btn {
opacity: 1;
padding: 0.5rem;
@@ -1258,34 +1252,10 @@ input[type='search']::-webkit-search-cancel-button {
color: var(--foreground);
}
-.track-actions-inline {
- display: none;
-
- /* Controlled by data-track-actions-mode */
- gap: 0.25rem;
- opacity: 0.2;
- transition: opacity var(--transition);
-}
-
.track-action-btn.active {
opacity: 1;
}
-[data-track-actions-mode='inline'] .track-actions-inline {
- display: flex;
-}
-
-:root[data-track-actions-mode='inline'] .track-list-header,
-:root[data-track-actions-mode='inline'] .track-item,
-:root[data-track-actions-mode='inline'] .skeleton-track,
-:root[data-track-actions-mode='inline'] #playlist-detail-tracklist .track-list-header {
- grid-template-columns: 40px 1fr 80px 220px;
-}
-
-.track-item:hover .track-actions-inline {
- opacity: 1;
-}
-
.track-action-btn {
background: transparent;
border: none;
@@ -1313,10 +1283,7 @@ input[type='search']::-webkit-search-cancel-button {
grid-template-columns: 40px 1fr 80px 90px;
}
-:root[data-track-actions-mode='inline'] .is-editable .track-list-header,
-:root[data-track-actions-mode='inline'] .is-editable .track-item {
- grid-template-columns: 40px 1fr 80px 260px;
-}
+
.detail-header {
display: flex;