Merge Queue and Playlist into one Add button and put Service mode in the common actions

frontend/app.js

@@ -2602,6 +2602,29 @@ function openMoreControls() {
   showModal('More controls', list, [{ label: 'Done', onClick: closeModal }]);
 }
 
+
+// "＋ Add": one button, then a small choice between the queue and a playlist.
+function openAddChoice() {
+  if (!current || !current.meta) return;
+  const video = current.meta;
+  const list = document.createElement('div');
+  list.className = 'more-list';
+  const row = (icon, title, sub, fn) => {
+    const r = document.createElement('button');
+    r.type = 'button';
+    r.className = 'more-row';
+    r.innerHTML = '<span class="more-ico"></span><span class="more-txt"><b></b><small></small></span><span class="more-go">›</span>';
+    r.querySelector('.more-ico').textContent = icon;
+    r.querySelector('b').textContent = title;
+    r.querySelector('small').textContent = sub;
+    r.onclick = () => { closeModal(); setTimeout(fn, 0); };
+    list.appendChild(r);
+  };
+  row('▶', 'Add to queue', 'Play it next in this session', () => addToQueue(video));
+  row('☰', 'Add to playlist', 'Save it to one of your playlists', () => openCardMenu(video));
+  showModal('Add “' + (video.title || 'video').slice(0, 40) + '”', list, [{ label: 'Cancel', onClick: closeModal }]);
+}
+
 // "More actions" sheet: the everyday four stay on the page, the rest live here.
 // Each row drives the original (hidden) button, so handlers and the hidden /
 // disabled state those buttons already manage keep working.
@@ -9484,6 +9507,8 @@ document.querySelectorAll('.chip').forEach((c) => {
     }
   });
   if ($('moreBtn')) $('moreBtn').addEventListener('click', openMoreActions);
+  if ($('addBtn')) $('addBtn').addEventListener('click', openAddChoice);
+  if ($('serviceBtn')) $('serviceBtn').addEventListener('click', () => enterServiceMode());
   if ($('ctlMoreBtn')) $('ctlMoreBtn').addEventListener('click', openMoreControls);
   if ($('exportBtn')) $('exportBtn').addEventListener('click', () => { if (current && current.meta) exportToDevice(current.meta); });
   els.addPlaylistBtn.addEventListener('click', () => {

frontend/index.html

@@ -225,11 +225,13 @@
                 <div class="np-avail hidden" id="npAvail" aria-live="polite"></div>
               </div>
               <div class="np-actions">
-                <button id="queueBtn" class="np-btn" title="Add to the temporary queue">＋ Queue</button>
+                <button id="addBtn" class="np-btn" title="Add to the queue or to a playlist">＋ Add</button>
                 <button id="saveBtn" class="np-btn" title="Save this video for offline playback">⬇ Save</button>
                 <button id="exportBtn" class="np-btn" title="Save this video to your gallery, Files app or Downloads folder — works while streaming too">🖼 Gallery</button>
-                <button id="addPlaylistBtn" class="np-btn" title="Add to a playlist">＋ Playlist</button>
+                <button id="serviceBtn" class="np-btn" title="Service mode — set-list view with the screen kept awake">🎤 Service</button>
                 <div id="npMoreHost" class="np-more-host" hidden>
+                  <button id="queueBtn" class="np-btn" title="Add to the temporary queue">＋ Queue</button>
+                  <button id="addPlaylistBtn" class="np-btn" title="Add to a playlist">＋ Playlist</button>
                   <button id="editBtn" class="np-btn" title="Cut parts out and save a custom edited copy">✂ Edit &amp; download</button>
                   <button id="shareMomentBtn" class="np-btn" title="Share a link or GIF of this exact moment">🔗 Share moment</button>
                   <button id="externalBtn" class="np-btn" title="Play this in VLC, MX Player or another app">📺 Open in…</button>

frontend/refresh.css

@@ -312,7 +312,7 @@
 @media (min-width: 900px) {
   #listActions button:not(.la-primary):not(.la-main):not(.la-icon) { flex: 0 0 auto; min-width: 124px; }
 }
-#nowPlayingMeta .np-actions .np-btn:not(#queueBtn):not(#saveBtn):not(#exportBtn):not(#addPlaylistBtn) {
+#nowPlayingMeta .np-actions .np-btn:not(#addBtn):not(#serviceBtn):not(#queueBtn):not(#saveBtn):not(#exportBtn):not(#addPlaylistBtn) {
   flex: 0 0 calc(50% - 4px);
   height: 42px;
   padding: 0 10px;
@@ -321,7 +321,7 @@
   overflow: hidden; text-overflow: ellipsis;
 }
 @media (min-width: 900px) {
-  #nowPlayingMeta .np-actions .np-btn:not(#queueBtn):not(#saveBtn):not(#exportBtn):not(#addPlaylistBtn) { flex: 0 0 auto; min-width: 140px; }
+  #nowPlayingMeta .np-actions .np-btn:not(#addBtn):not(#serviceBtn):not(#queueBtn):not(#saveBtn):not(#exportBtn):not(#addPlaylistBtn) { flex: 0 0 auto; min-width: 140px; }
 }
 
 /* Deck tabs */
@@ -527,3 +527,10 @@
 #controls .deck-vol #muteBtn svg { fill: currentColor; stroke: currentColor; stroke-width: 1.8; }
 #controls .deck-vol #muteBtn svg path:not(.spk) { fill: none; }
 #controls .deck-vol #muteBtn.muted { color: var(--accent-bright); }
+
+#nowPlayingMeta .np-actions #addBtn,
+#nowPlayingMeta .np-actions #serviceBtn {
+  order: -1; flex: 1 1 calc(25% - 8px); min-width: 0; height: 52px; padding: 0 4px; justify-content: center;
+  border-radius: 16px; color: var(--text); background: var(--bg-3); font-weight: 700; font-size: 12.5px; white-space: nowrap;
+}
+@media (max-width: 380px) { #nowPlayingMeta .np-actions #addBtn, #nowPlayingMeta .np-actions #serviceBtn { flex-basis: calc(50% - 8px); } }