From 9d2ebb2eddbab77eff7067f440982425bd2930c4 Mon Sep 17 00:00:00 2001
From: Tobias Gesellchen <tobias@gesellix.de>
Date: Sun, 17 May 2026 23:58:27 +0200
Subject: [PATCH] fix(soundtouch-web): unify TuneIn play affordance across item
 types
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Stations still showed a dim ▶ inside the .tunein-item-arrow span
while programs (with the new pill button from 34d4692) showed a
circled play button. Two different play affordances side by side
looked accidental.

Now every item with a playback link renders the same pill button,
and the arrow span carries only the drill-in chevron. Per item type:

  Stations  (play only)            pill ▶
  Programs  (navigate + play)      pill ▶ + chevron ›
  Genres    (navigate only)        chevron ›

The pill stops event propagation, so clicking it triggers play
without bubbling to the row's navigate handler — that lets row
clicks keep drilling into programs while the button cuts straight
to "play latest episode."

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../static/js/components/TuneInBrowser.js      | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/pkg/service/soundtouchweb/static/js/components/TuneInBrowser.js b/pkg/service/soundtouchweb/static/js/components/TuneInBrowser.js
index b7d2d02..4e8d181 100644
--- a/pkg/service/soundtouchweb/static/js/components/TuneInBrowser.js
+++ b/pkg/service/soundtouchweb/static/js/components/TuneInBrowser.js
@@ -115,14 +115,12 @@ export function TuneInBrowser({ devices }) {
                 ${items.map((item, i) => {
                     const isNav = !!navPath(item);
                     const play = playbackInfo(item);
-                    // Programs have BOTH a navigate link (drill into
-                    // episodes) and a playback link (play latest
-                    // episode). Surface both: a dedicated play button
-                    // (stopPropagation so it doesn't trigger the row's
-                    // navigate) plus the chevron. Pure-leaf items
-                    // (stations) fall through to the single ▶ arrow,
-                    // because the whole row is already a play target.
-                    const showPlayBtn = isNav && play;
+                    // Uniform play affordance: any item with a playback
+                    // link gets the same pill button (stops propagation
+                    // so it doesn't trigger the row's navigate). The
+                    // arrow span carries only the drill-in chevron;
+                    // stations no longer reuse it for ▶, which kept the
+                    // two affordances visually distinct.
                     return html`
                         <li key=${item._links?.self?.href || i} class="tunein-item" onClick=${() => navigate(item)}>
                             ${item.imageUrl && html`<img class="tunein-thumb" src=${item.imageUrl} alt="" />`}
@@ -130,7 +128,7 @@ export function TuneInBrowser({ devices }) {
                                 <span class="tunein-item-name">${item.name}</span>
                                 ${item.subtitle && html`<span class="tunein-item-desc">${item.subtitle}</span>`}
                             </div>
-                            ${showPlayBtn && html`
+                            ${play && html`
                                 <button
                                     class="tunein-play-btn"
                                     title="Play"
@@ -140,7 +138,7 @@ export function TuneInBrowser({ devices }) {
                                     }}
                                 >▶</button>
                             `}
-                            <span class="tunein-item-arrow">${isNav ? '›' : '▶'}</span>
+                            ${isNav && html`<span class="tunein-item-arrow">›</span>`}
                         </li>
                     `;
                 })}