public/controls.js

@@ -110,9 +110,9 @@
   
   // Playback mode button
   const modeLabels = {
-    "once": "once",
-    "repeat-all": "repeat",
-    "repeat-one": "single",
+    "once": "loop(off)",
+    "repeat-all": "loop(all)",
+    "repeat-one": "loop(one)",
     "shuffle": "shuffle"
   };
   const modeOrder = ["once", "repeat-all", "repeat-one", "shuffle"];

public/styles.css

@@ -87,6 +87,8 @@ h3 { font-size: 0.8rem; color: #666; margin-bottom: 0.3rem; text-transform: uppe
 .slow-queue-cancel { background: none; border: none; color: #666; cursor: pointer; padding: 0 0.2rem; font-size: 0.7rem; opacity: 0; transition: opacity 0.15s; }
 .slow-queue-item:hover .slow-queue-cancel { opacity: 1; }
 .slow-queue-cancel:hover { color: #e44; }
+.slow-queue-show-toggle { background: none; border: none; color: #68a; font-size: 0.7rem; padding: 0.3rem; cursor: pointer; width: 100%; text-align: center; }
+.slow-queue-show-toggle:hover { color: #8af; text-decoration: underline; }
 .scan-progress { font-size: 0.7rem; color: #ea4; padding: 0.2rem 0.4rem; background: #2a2a1a; border-radius: 3px; margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
 .scan-progress.hidden { display: none; }
 .scan-progress.complete { color: #4e8; background: #1a2a1a; }

public/upload.js

@@ -256,12 +256,16 @@
       return `${secs}s`;
     }
     
+    const QUEUE_PREVIEW_COUNT = 5;
+    let showAllQueue = false;
+    
     function updateSlowQueueDisplay(slowQueue, slowQueueNextIn) {
       const section = createSlowQueueSection();
       const queuedItems = slowQueue.filter(i => i.status === "queued");
       
       if (queuedItems.length === 0) {
         section.classList.add("hidden");
+        showAllQueue = false;
         updateTasksEmpty();
         return;
       }
@@ -272,9 +276,13 @@
       const timerEl = section.querySelector(".slow-queue-timer");
       timerEl.textContent = `${queuedItems.length} queued · next in ${formatTime(slowQueueNextIn)}`;
       
+      // Determine how many items to show
+      const itemsToShow = showAllQueue ? queuedItems : queuedItems.slice(0, QUEUE_PREVIEW_COUNT);
+      const hiddenCount = queuedItems.length - itemsToShow.length;
+      
       // Group items by playlist
       const byPlaylist = new Map();
-      for (const item of queuedItems) {
+      for (const item of itemsToShow) {
         const key = item.playlistId || "__none__";
         if (!byPlaylist.has(key)) {
           byPlaylist.set(key, { name: item.playlistName, items: [] });
@@ -302,6 +310,15 @@
         }).join("");
       }
       
+      // Add show more/less button if needed
+      if (queuedItems.length > QUEUE_PREVIEW_COUNT) {
+        if (showAllQueue) {
+          html += `<button class="slow-queue-show-toggle">Show less</button>`;
+        } else {
+          html += `<button class="slow-queue-show-toggle">Show ${hiddenCount} more...</button>`;
+        }
+      }
+      
       listEl.innerHTML = html;
       
       // Add cancel handlers
@@ -324,6 +341,15 @@
         };
       });
       
+      // Add show more/less handler
+      const toggleBtn = listEl.querySelector(".slow-queue-show-toggle");
+      if (toggleBtn) {
+        toggleBtn.onclick = () => {
+          showAllQueue = !showAllQueue;
+          updateSlowQueueDisplay(slowQueue, slowQueueNextIn);
+        };
+      }
+      
       updateTasksEmpty();
     }