@doitian/dsh-music 0.1.2 → 0.1.5

package/lib/panel.html

@@ -78,6 +78,16 @@
       .row .dur { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; font-size: 12px; }
       .row .acts { display: none; gap: 4px; flex: none; }
       .row:hover .acts { display: flex; }
+      /* The list's own like control. A liked track keeps its filled heart
+         visible; the hollow one only appears on hover, so an unrated list is
+         not a wall of outlines. */
+      .row .heart {
+        background: none; border: 0; padding: 0; width: 16px; flex: none;
+        font-size: 14px; line-height: 1; color: var(--muted); opacity: 0;
+        transition: opacity 0.12s;
+      }
+      .row:hover .heart { opacity: 1; }
+      .row .heart.on { opacity: 1; color: var(--accent); }
 
       .now { padding: 14px; border-bottom: 1px solid var(--line); }
       .now-top { display: flex; gap: 14px; }
@@ -92,8 +102,17 @@
       .controls { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
       .controls .grow { flex: 1; }
       .icon { font-size: 15px; line-height: 1; }
+      /* A filled heart means the track is liked on the account. */
+      #like.on, #dislike.on {
+        color: #fff;
+        background: var(--accent);
+        border-color: var(--accent);
+      }
       #volume { flex: 0 0 88px; }
       .mode { font-size: 12px; }
+      /* The trip to NetEase is not instant on a cold cache; a click has to look
+         like it landed before the rows come back. */
+      button:disabled { cursor: default; }
 
       .section-title { padding: 12px 14px 4px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; }
       .section-title.head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@@ -117,7 +136,21 @@
       .queue .scroll { padding-top: 0; }
       .dj-status { margin: 0 14px 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 12px; }
       .dj-status b { color: var(--accent); }
-      .model-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+      /* The DJ model picker is a set-once setting, so the card keeps only its
+         header row and the queue and the lyrics pane keep the space. The header
+         is the click target; the chevron inside it is the keyboard one. */
+      .model-head { display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
+      .model-head .model-now {
+        flex: 1; min-width: 0; text-align: right; color: var(--muted);
+        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      }
+      .model-head .toggle {
+        background: none; border: 0; margin: 0; padding: 0 2px; font: inherit;
+        color: var(--muted); cursor: pointer;
+      }
+      .model-head .toggle:hover { color: var(--fg); }
+      .model-head .warn { color: var(--accent); }
+      .dj-model-body.collapsed { display: none; }
       .row-inline { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
       .row-inline select, .row-inline input { flex: 1 1 0; min-width: 0; font-size: 12px; padding: 4px 6px; }
       .row-inline button { font-size: 12px; padding: 4px 8px; }
@@ -173,8 +206,10 @@
               <select id="quality" class="mode" data-i18n-title="qualityTitle" title="Streaming quality"></select>
               <span id="quality-info" class="mode" style="color: var(--muted)"></span>
               <span class="grow"></span>
-              <button id="like" data-i18n-title="like" title="Like">♡</button>
-              <button id="dislike" data-i18n-title="dislike" title="Dislike">✕</button>
+              <!-- Labels are state-dependent (a filled heart un-likes), so the
+                   script owns text and title rather than data-i18n. -->
+              <button id="like" title="Like">♡</button>
+              <button id="dislike" title="Dislike">✕</button>
               <button id="mute" data-i18n-title="mute" title="Mute">🔊</button>
               <input type="range" id="volume" min="0" max="1" step="0.01" value="0.8" />
             </div>
@@ -193,23 +228,29 @@
           <div id="dj-status"></div>
 
           <div class="dj-status" id="dj-model">
-            <div class="model-head">
+            <!-- One always-visible line: the setting that matters at a glance is
+                 the effective route, and the form below it is folded away until
+                 asked for. -->
+            <div class="model-head" id="dj-model-head">
               <span data-i18n="djModel">DJ model</span>
-              <span id="dj-model-source" style="color: var(--muted)"></span>
-            </div>
-            <div class="row-inline">
-              <select id="dj-provider" title="provider route"></select>
-              <select id="dj-model-select" title="model"></select>
+              <span class="model-now"><span id="dj-model-route"></span><span id="dj-model-source"></span><span class="warn" id="dj-model-warn"></span></span>
+              <button id="dj-model-toggle" class="toggle" type="button" aria-controls="dj-model-body" aria-expanded="false"></button>
             </div>
-            <div class="row-inline">
-              <input id="dj-model-custom" data-i18n-ph="customModelPh" placeholder="Custom model id" style="display: none" />
-            </div>
-            <div class="row-inline">
-              <button id="dj-model-save" class="primary" data-i18n="save">Save</button>
-              <button id="dj-model-test" data-i18n="test">Test</button>
-              <button id="dj-model-clear" data-i18n="revert" data-i18n-title="revertTitle" title="Revert to the profile patch">Revert</button>
+            <div class="dj-model-body collapsed" id="dj-model-body">
+              <div class="row-inline">
+                <select id="dj-provider" title="provider route"></select>
+                <select id="dj-model-select" title="model"></select>
+              </div>
+              <div class="row-inline">
+                <input id="dj-model-custom" data-i18n-ph="customModelPh" placeholder="Custom model id" style="display: none" />
+              </div>
+              <div class="row-inline">
+                <button id="dj-model-save" class="primary" data-i18n="save">Save</button>
+                <button id="dj-model-test" data-i18n="test">Test</button>
+                <button id="dj-model-clear" data-i18n="revert" data-i18n-title="revertTitle" title="Revert to the profile patch">Revert</button>
+              </div>
+              <div id="dj-model-status" style="color: var(--muted)"></div>
             </div>
-            <div id="dj-model-status" style="color: var(--muted)"></div>
           </div>
         </section>
       </main>
@@ -261,7 +302,10 @@
           modeShuffle: '随机',
           qualityTitle: '流媒体音质',
           like: '喜欢',
+          unlike: '取消喜欢',
           dislike: '不喜欢',
+          undislike: '取消不喜欢',
+          likeNeedsSignIn: '登录后才能在网易云标记喜欢',
           mute: '静音',
           lyrics: '歌词',
           lyricsHide: '收起',
@@ -270,6 +314,8 @@
           lyricsToggleShow: '展开歌词面板',
           queue: '播放队列',
           djModel: 'AI DJ 模型',
+          djModelToggleShow: '展开模型设置',
+          djModelToggleHide: '收起模型设置',
           customModelPh: '自定义 model id',
           save: '保存',
           test: '测试',
@@ -296,6 +342,7 @@
           gestureNote: '在窗口任意处点击也可以',
           queueEmpty: '队列为空，用 AI DJ 或让助手补歌',
           remove: '移除',
+          removed: '已移除',
           loading: '加载中…',
           instrumental: '纯音乐，无歌词',
           other: '其他…',
@@ -315,6 +362,7 @@
           downgraded: '已降级',
           qualitySet: '音质已设为 {level}',
           liked: '已喜欢',
+          unliked: '已取消喜欢',
           disliked: '不再推荐',
           djOn: 'AI DJ 已开启',
           djOff: 'AI DJ 已关闭',
@@ -343,7 +391,10 @@
           modeShuffle: 'Shuffle',
           qualityTitle: 'Streaming quality',
           like: 'Like',
+          unlike: 'Unlike',
           dislike: 'Dislike',
+          undislike: 'Undislike',
+          likeNeedsSignIn: 'Sign in to NetEase to like tracks',
           mute: 'Mute',
           lyrics: 'Lyrics',
           lyricsHide: 'Hide',
@@ -352,6 +403,8 @@
           lyricsToggleShow: 'Expand the lyrics pane',
           queue: 'Queue',
           djModel: 'DJ model',
+          djModelToggleShow: 'Show the model settings',
+          djModelToggleHide: 'Hide the model settings',
           customModelPh: 'Custom model id',
           save: 'Save',
           test: 'Test',
@@ -378,6 +431,7 @@
           gestureNote: 'clicking anywhere works too',
           queueEmpty: 'Queue empty — use the AI DJ or ask the assistant to add songs',
           remove: 'Remove',
+          removed: 'Removed',
           loading: 'Loading…',
           instrumental: 'Instrumental',
           other: 'Other…',
@@ -397,6 +451,7 @@
           downgraded: 'downgraded',
           qualitySet: 'Quality set to {level}',
           liked: 'Liked',
+          unliked: 'Like removed',
           disliked: 'Disliked',
           djOn: 'AI DJ on',
           djOff: 'AI DJ off',
@@ -449,14 +504,20 @@
           document.documentElement.lang = LANG === 'zh' ? 'zh-CN' : 'en';
         } catch { /* headless */ }
         applyStaticStrings();
-        // The toggle's label and title depend on the collapse state, not on a
+        // The toggles' labels and titles depend on the collapse state, not on a
         // fixed key, so they are painted rather than carried as data-i18n.
         paintLyricsToggle();
+        paintDjModelToggle();
         // The gesture hint carries markup; drop it so render() rebuilds it in
         // the new language.
         $('gesture')?.remove();
         render();
-        paintModelSource();
+        // The taste titles carry no `data-i18n`, and `render()` needs a state
+        // document, so they are painted here as well — otherwise a zh shell
+        // shows them in English until the first poll lands.
+        paintTaste();
+        paintDjModelHeader();
+        paintDjModelToggle();
         paintQualityOptions();
         if (modelRoutes.length) renderModelOptions();
       }
@@ -481,6 +542,9 @@
       /** Local-storage key for whether the lyrics pane is collapsed. */
       const LYRICS_PREF = 'dsh-music.lyrics.collapsed';
       let lyricsCollapsed = readLyricsPref();
+      /** Local-storage key for whether the DJ model form is unfolded. */
+      const DJ_MODEL_PREF = 'dsh-music.djmodel.expanded';
+      let djModelExpanded = readDjModelPref();
       let volumePostAt = 0;
 
       const fmt = (ms) => {
@@ -507,10 +571,26 @@
         const text = await response.text();
         let data;
         try { data = text ? JSON.parse(text) : {}; } catch { data = { error: text.slice(0, 200) }; }
-        if (!response.ok) throw new Error(data.error || data.message || 'HTTP ' + response.status);
+        if (!response.ok) {
+          const error = new Error(data.error || data.message || 'HTTP ' + response.status);
+          // The host's machine-usable half. This page localizes around it
+          // (login does the same) instead of showing a raw English sentence.
+          if (data.code) error.code = data.code;
+          throw error;
+        }
         return data;
       }
 
+      /**
+       * Tell the host a user-facing failure in the page's own language when the
+       * reason is one the page knows, and let the host's words through when it
+       * is not (a NetEase refusal carries its own explanation).
+       */
+      function failureText(error) {
+        if (error.code === 'ANONYMOUS') return t('likeNeedsSignIn');
+        return error.message;
+      }
+
       // ------------------------------------------------------------- transport
       /**
        * Who plays the audio.
@@ -843,9 +923,18 @@
         paintQualityInfo();
 
         renderQueue();
+        paintTaste();
         paintProgress();
       }
 
+      /**
+       * Rows the queue list shows at most. The host keeps the full queue (and
+       * the play history backing the stats), but the panel only paints a
+       * sliding window around the cursor so old, already-played tracks drop
+       * out of view instead of piling up.
+       */
+      const MAX_VISIBLE_ROWS = 30;
+
       function renderQueue() {
         if (!state) return;
         const queue = state.queue || [];
@@ -853,14 +942,27 @@
           $('queue').innerHTML = `<div class="empty">${esc(t('queueEmpty'))}</div>`;
           return;
         }
+        // A window of at most MAX_VISIBLE_ROWS rows that always includes the
+        // current track: up to four played rows above it for context, the rest
+        // upcoming. Row numbers stay absolute, so trimmed rows read as a gap
+        // in the numbering, and the counts line names the visible range.
+        const cursor = state.index < 0 ? 0 : state.index;
+        const start = Math.max(0, Math.min(cursor - 4, queue.length - MAX_VISIBLE_ROWS));
+        const end = Math.min(queue.length, start + MAX_VISIBLE_ROWS);
+        if (end - start < queue.length) {
+          $('counts').textContent = `(${start + 1}–${end} / ${queue.length})`;
+        }
         $('queue').innerHTML = queue
-          .map((track, index) => {
+          .slice(start, end)
+          .map((track, offset) => {
+            const index = start + offset;
             const playing = index === state.index;
             return `<div class="row ${playing ? 'playing' : ''}" data-jump="${index}">
               <span class="idx">${playing ? '▶' : index + 1}</span>
               <img src="${esc(track.picUrl || '')}" alt="" loading="lazy">
               <span class="meta"><span class="name">${esc(track.name)}</span><span class="sub">${esc((track.artists || []).join(' / '))}</span></span>
               ${track.vip ? '<span class="tag">VIP</span>' : ''}
+              <button class="heart ${track.liked ? 'on' : ''}" data-like="${index}" title="${esc(t(track.liked ? 'unlike' : 'like'))}">${track.liked ? '♥' : '♡'}</button>
               <span class="dur">${fmt(track.duration)}</span>
               <span class="acts"><button data-remove="${index}" title="${esc(t('remove'))}">✕</button></span>
             </div>`;
@@ -868,6 +970,86 @@
           .join('');
       }
 
+      /**
+       * The transport row's taste controls mirror the current track.
+       *
+       * A filled heart is the account's like and a filled ✕ the local dislike,
+       * and a click moves the track to the *other* level — so the label has to
+       * say which direction, which is why the titles are painted here rather
+       * than carried as `data-i18n` on the markup.
+       */
+      function paintTaste() {
+        const track = state?.current;
+        const liked = Boolean(track?.liked);
+        const disliked = Boolean(track?.disliked);
+        $('like').textContent = liked ? '♥' : '♡';
+        $('like').classList.toggle('on', liked);
+        $('like').title = t(liked ? 'unlike' : 'like');
+        $('dislike').classList.toggle('on', disliked);
+        $('dislike').title = t(disliked ? 'undislike' : 'dislike');
+      }
+
+      /**
+       * Take one track out of the queue.
+       *
+       * This is the queue endpoint, not `/taste`: the host drops the row and, in
+       * the same request, reads the removal as a dislike of a track that carries
+       * no level yet — so the row does not come straight back from the DJ's next
+       * batch. `/taste` alone only writes the level, which leaves the row in the
+       * list, and its NetEase half can be refused, which must never keep a row
+       * the click asked to remove.
+       *
+       * @returns {Promise<boolean>} whether the row really left the queue, so the
+       *   caller's confirm describes the removal the click asked for and not the
+       *   judgement the host makes of it.
+       */
+      async function removeFromList(index, button) {
+        const track = state?.queue?.[index];
+        if (!track) return false;
+        // The trip to NetEase is not instant on a cold cache, so a second click
+        // mid-flight is locked out, exactly as the transport switchers do.
+        if (button) button.disabled = true;
+        try {
+          state = await api('/queue', { method: 'POST', body: { action: 'remove', index } });
+          // Read the answer off the new queue: an index that named a row someone
+          // else had already dropped must not claim a removal that did not happen.
+          return !(state.queue || []).some((entry) => entry.id === track.id);
+        } finally {
+          // `render()` replaces the row markup, so this node may be detached —
+          // harmless, and it keeps a button the host refused usable.
+          if (button) button.disabled = false;
+        }
+      }
+
+      /**
+       * Move one track to a taste level on the host and adopt its answer.
+       *
+       * `liked` and `none` change the NetEase account and need a session, which
+       * the host reports as `code: ANONYMOUS`; `disliked` is local, so it always
+       * applies. Returns whether the level really moved, so a caller's toast
+       * cannot claim a like NetEase refused.
+       */
+      async function sendTaste(track, level, button) {
+        // The trip to NetEase is not instant on a cold cache. This guards
+        // against a second click mid-flight; the row still updates at the end,
+        // in the same frame as the toast, so the lag is honest rather than
+        // promised.
+        if (button) button.disabled = true;
+        try {
+          state = await api('/taste', { method: 'POST', body: { trackId: track.id, level } });
+          render();
+          applyTransport();
+          return true;
+        } catch (error) {
+          toast(failureText(error));
+          return false;
+        } finally {
+          // `render()` replaces the row markup, so this node may be detached —
+          // harmless, and it keeps the transport buttons (which are not) usable.
+          if (button) button.disabled = false;
+        }
+      }
+
       function paintProgress() {
         if (!state || !state.current) return;
         const position = positionMs();
@@ -1075,6 +1257,59 @@
         }
       }
 
+      /** Unfolded preference, remembered across reloads when storage is open. */
+      function readDjModelPref() {
+        try { return localStorage.getItem(DJ_MODEL_PREF) === '1'; } catch { return false; }
+      }
+
+      function saveDjModelPref(expanded) {
+        try { localStorage.setItem(DJ_MODEL_PREF, expanded ? '1' : '0'); } catch { /* storage denied */ }
+      }
+
+      /** Reflect `djModelExpanded` in the card and in its chevron. */
+      function paintDjModelToggle() {
+        $('dj-model-body').classList.toggle('collapsed', !djModelExpanded);
+        const button = $('dj-model-toggle');
+        button.textContent = djModelExpanded ? '▾' : '▸';
+        button.title = t(djModelExpanded ? 'djModelToggleHide' : 'djModelToggleShow');
+        button.setAttribute('aria-expanded', djModelExpanded ? 'true' : 'false');
+      }
+
+      /**
+       * The folded card's one line: the effective route and, after it, where
+       * that choice came from. The route leads because it is the answer to the
+       * question the folded card raises — "which model is the DJ using?".
+       */
+      function paintDjModelHeader() {
+        const { provider, model } = modelSelected ?? {};
+        $('dj-model-route').textContent = provider ? (model ? `${provider}/${model}` : provider) : '';
+        paintModelSource();
+      }
+
+      /**
+       * The form's status line, mirrored as a marker on the header.
+       *
+       * A route error or a host that predates this feature would otherwise be
+       * invisible while the form is folded, which is exactly when the picker
+       * looks like it is simply missing.
+       */
+      function paintModelStatus(text) {
+        const message = text ?? '';
+        $('dj-model-status').textContent = message;
+        const warn = $('dj-model-warn');
+        warn.textContent = message ? ' ⚠' : '';
+        warn.title = message;
+      }
+
+      // The header is the click target and the chevron sits inside it, so a
+      // click on the button bubbles here once rather than toggling twice.
+      $('dj-model-head').onclick = () => {
+        djModelExpanded = !djModelExpanded;
+        saveDjModelPref(djModelExpanded);
+        paintDjModelToggle();
+      };
+      paintDjModelToggle();
+
       function renderModelOptions() {
         const provider = $('dj-provider').value;
         const route = modelRoutes.find((entry) => entry.provider === provider);
@@ -1097,10 +1332,15 @@
         } else {
           custom.style.display = 'none';
         }
-        if (route?.error) $('dj-model-status').textContent = route.error;
+        if (route?.error) paintModelStatus(route.error);
       }
 
-      /** Where the effective model choice comes from, localized. */
+      /**
+       * Where the effective model choice comes from, localized.
+       *
+       * It trails the route on the folded card, so the separator belongs to it:
+       * with no route to trail, a leading "·" would dangle.
+       */
       function paintModelSource() {
         const key = {
           panel: 'srcPanel',
@@ -1108,7 +1348,9 @@
           'agent-default': 'srcAgentDefault',
           discovered: 'srcDiscovered',
         }[modelSourceRaw];
-        $('dj-model-source').textContent = key ? t(key) : modelSourceRaw || '';
+        const label = key ? t(key) : modelSourceRaw || '';
+        const route = $('dj-model-route').textContent;
+        $('dj-model-source').textContent = label && route ? ` · ${label}` : label;
       }
 
       async function loadModelPicker() {
@@ -1130,11 +1372,15 @@
             ? providers.map((provider) => `<option value="${esc(provider)}">${esc(provider)}</option>`).join('')
             : `<option value="">${esc(t('noProvider'))}</option>`;
           select.value = modelSelected.provider ?? modelConfigured.provider ?? providers[0] ?? '';
-          renderModelOptions();
 
+          // Painted before the options are rendered: that call is what reports a
+          // provider's own catalogue failure, and it must land last so the
+          // folded card's marker cannot be wiped by the (usually empty)
+          // host-level error.
           modelSourceRaw = data.source ?? '';
-          paintModelSource();
-          $('dj-model-status').textContent = data.error ?? '';
+          paintDjModelHeader();
+          paintModelStatus(data.error ?? '');
+          renderModelOptions();
         } catch (error) {
           // A 404 here means this page is newer than the host module: the page
           // is re-read from disk on every plugin mount, while Node keeps
@@ -1142,9 +1388,9 @@
           // say that instead of showing a bare "unknown endpoint".
           if (/unknown endpoint|\b404\b/.test(error.message)) {
             setModelControls(false);
-            $('dj-model-status').textContent = t('hostPredatesLong');
+            paintModelStatus(t('hostPredatesLong'));
           } else {
-            $('dj-model-status').textContent = error.message;
+            paintModelStatus(error.message);
           }
         }
       }
@@ -1183,18 +1429,17 @@
       $('dj-model-clear').onclick = () =>
         void saveModelRoute('', '', t('reverted'));
       $('dj-model-test').onclick = async () => {
-        $('dj-model-status').textContent = t('testing');
+        paintModelStatus(t('testing'));
         try {
           const result = await api('/dj/test', { method: 'POST', body: {} });
           if (result.source === 'model') {
-            $('dj-model-status').textContent =
-              `✓ ${result.route} — ${(result.picked ?? []).join(' · ')}${result.vibe ? ` (${result.vibe})` : ''}`;
+            paintModelStatus(
+              `✓ ${result.route} — ${(result.picked ?? []).join(' · ')}${result.vibe ? ` (${result.vibe})` : ''}`);
           } else {
-            $('dj-model-status').textContent =
-              `✗ ${result.modelError ?? result.note ?? t('modelTierUnavailable')} — ${t('heuristics')}`;
+            paintModelStatus(`✗ ${result.modelError ?? result.note ?? t('modelTierUnavailable')} — ${t('heuristics')}`);
           }
         } catch (error) {
-          $('dj-model-status').textContent = error.message;
+          paintModelStatus(error.message);
         }
       };
 
@@ -1290,8 +1535,27 @@
       $('seek').onchange = (event) => {
         control({ action: 'seek', value: Math.round((Number(event.target.value) / 1000) * durationMs()) });
       };
-      $('like').onclick = () => state?.current && api('/feedback', { method: 'POST', body: { kind: 'likes', trackId: state.current.id } }).then(() => toast(t('liked')));
-      $('dislike').onclick = () => state?.current && api('/feedback', { method: 'POST', body: { kind: 'dislikes', trackId: state.current.id } }).then(() => { toast(t('disliked')); control({ action: 'next' }); });
+      // Both taste buttons are switchers: the filled state is the one that
+      // removes, so the click asks the host for the level it moves to.
+      $('like').onclick = async (event) => {
+        const track = state?.current;
+        if (!track) return;
+        if (await sendTaste(track, track.liked ? 'none' : 'liked', event?.currentTarget)) {
+          toast(t(track.liked ? 'unliked' : 'liked'));
+        }
+      };
+      $('dislike').onclick = async (event) => {
+        const track = state?.current;
+        if (!track) return;
+        if (track.disliked) {
+          await sendTaste(track, 'none', event?.currentTarget);
+          return;
+        }
+        if (await sendTaste(track, 'disliked', event?.currentTarget)) {
+          toast(t('disliked'));
+          control({ action: 'next' });
+        }
+      };
 
       $('dj-toggle').onclick = async () => {
         try {
@@ -1304,17 +1568,28 @@
       $('dj-prompt').onchange = () => api('/dj', { method: 'POST', body: { prompt: $('dj-prompt').value, enabled: state?.dj?.enabled } }).then((data) => { state = data; render(); }).catch((error) => toast(error.message));
 
       $('queue').onclick = async (event) => {
+        const like = event.target.closest('[data-like]');
         const jump = event.target.closest('[data-jump]')?.dataset.jump;
-        const remove = event.target.closest('[data-remove]')?.dataset.remove;
+        const remove = event.target.closest('[data-remove]');
         try {
-          if (remove !== undefined) {
-            state = await api('/queue', { method: 'POST', body: { action: 'remove', index: Number(remove) } });
+          // A heart inside a row must not also count as "play this row".
+          if (like) {
+            const track = state?.queue?.[Number(like.dataset.like)];
+            if (!track) return;
+            await sendTaste(track, track.liked ? 'none' : 'liked', like);
+            return;
+          }
+          if (remove) {
+            // The host drops the row and, for an unrated track, records the
+            // removal as the same dislike the transport ✕ makes — one request.
+            // The confirm names the click, not that side effect of it.
+            if (await removeFromList(Number(remove.dataset.remove), remove)) toast(t('removed'));
           } else if (jump !== undefined) {
             state = await api('/queue', { method: 'POST', body: { action: 'jump', index: Number(jump) } });
           } else return;
           render();
           pokeEngine();
-        } catch (error) { toast(error.message); }
+        } catch (error) { toast(failureText(error)); }
       };
 
       // ------------------------------------------------------------------ boot