public/trackComponent.js

@@ -14,7 +14,6 @@
    * @param {boolean} config.isSelected - Whether track is selected
    * @param {boolean} config.isCached - Whether track is cached locally
    * @param {boolean} config.isActive - Whether this is the currently playing track
-   * @param {boolean} config.showPlayButton - Show play button (queue only)
    * @param {boolean} config.draggable - Whether element is draggable
    * @returns {HTMLElement}
    */
@@ -26,7 +25,6 @@
       isSelected,
       isCached,
       isActive,
-      showPlayButton,
       draggable
     } = config;
 
@@ -53,8 +51,6 @@
     // Build HTML
     const checkmark = isSelected ? '<span class="track-checkmark">✓</span>' : '';
     const trackNum = displayIndex != null ? `<span class="track-number">${displayIndex}.</span>` : '';
-    const playBtn = showPlayButton ? '<button class="track-play-btn" title="Play">▶</button>' : '';
-    const previewBtn = '<button class="track-preview-btn" title="Preview">⏵</button>';
     
     div.innerHTML = `
       ${checkmark}
@@ -62,8 +58,6 @@
       ${trackNum}
       <span class="track-title">${escapeHtml(title)}</span>
       <span class="track-actions">
-        ${playBtn}
-        ${previewBtn}
         <span class="duration">${M.fmt(track.duration)}</span>
       </span>
     `;

public/trackContainer.js

@@ -117,7 +117,6 @@
           isSelected,
           isCached,
           isActive,
-          showPlayButton: type === 'queue',
           draggable: isDraggable
         });
 
@@ -269,24 +268,6 @@
         render();
       };
 
-      // Play button (queue only)
-      const playBtn = div.querySelector('.track-play-btn');
-      if (playBtn) {
-        playBtn.onclick = (e) => {
-          e.stopPropagation();
-          playTrack(track, originalIndex);
-        };
-      }
-
-      // Preview button
-      const previewBtn = div.querySelector('.track-preview-btn');
-      if (previewBtn) {
-        previewBtn.onclick = (e) => {
-          e.stopPropagation();
-          previewTrack(track);
-        };
-      }
-
       // Context menu
       div.oncontextmenu = (e) => {
         e.preventDefault();
@@ -834,6 +815,8 @@
         
         const sub = document.createElement("div");
         sub.className = "context-submenu";
+        const subInner = document.createElement("div");
+        subInner.className = "context-submenu-inner";
         item.submenu.forEach(subItem => {
           const subEl = document.createElement("div");
           subEl.className = "context-menu-item";
@@ -843,8 +826,9 @@
             hideContextMenu();
             subItem.action();
           };
-          sub.appendChild(subEl);
+          subInner.appendChild(subEl);
         });
+        sub.appendChild(subInner);
         el.appendChild(sub);
       } else if (!item.disabled) {
         el.onclick = () => {