From cd387888aafc3e094e999971d80d70b0c58429d5 Mon Sep 17 00:00:00 2001
From: Tobias Gesellchen <tobias@gesellix.de>
Date: Sun, 17 May 2026 23:54:16 +0200
Subject: [PATCH] fix(soundtouch-web): surface play button on TuneIn program
 rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Preact TuneInBrowser hid the play affordance whenever an item
also had a navigate link. TuneIn programs have BOTH (drill into
episodes + play latest episode, after backend PR #317), so the
button never appeared on program rows — only the chevron.

Old vanilla UI showed both. Restored:

- navigate(item) keeps its current behaviour (path wins for row
  clicks, falls through to play if there's no path) — that lets
  pure-leaf items (stations) still play on whole-row click.
- New explicit .tunein-play-btn rendered conditionally when an item
  has BOTH a navigate link and a playback link. Stops event
  propagation so clicking it triggers play (device picker overlay)
  instead of bubbling to the row's navigate handler.
- CSS: pill-shaped 32px button using the same --accent / --text-dim
  tokens the rest of the UI uses; hover state swaps to --accent /
  --accent-fg to avoid same-on-same contrast in either theme.

The chevron stays as the row's "drill in" indicator for any
navigable item, including programs.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 pkg/service/soundtouchweb/static/css/app.css  | 13 +++++++++++++
 .../static/js/components/TuneInBrowser.js     | 19 +++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/pkg/service/soundtouchweb/static/css/app.css b/pkg/service/soundtouchweb/static/css/app.css
index 4650d31..034c2b3 100644
--- a/pkg/service/soundtouchweb/static/css/app.css
+++ b/pkg/service/soundtouchweb/static/css/app.css
@@ -408,6 +408,19 @@ img { display: block; max-width: 100%; }
 .tunein-item-name { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .tunein-item-desc { display: block; font-size: .75rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .tunein-item-arrow { color: var(--text-dim); font-size: .9rem; flex-shrink: 0; }
+.tunein-play-btn {
+    background: transparent;
+    border: 1px solid var(--text-dim);
+    color: var(--text);
+    border-radius: 999px;
+    width: 32px; height: 32px;
+    display: inline-flex; align-items: center; justify-content: center;
+    cursor: pointer; flex-shrink: 0;
+    font-size: .85rem; line-height: 1;
+    padding: 0;
+    transition: background .15s, border-color .15s;
+}
+.tunein-play-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
 
 /* ── Device picker overlay ───────────────────────────────────────────────── */
 .overlay {
diff --git a/pkg/service/soundtouchweb/static/js/components/TuneInBrowser.js b/pkg/service/soundtouchweb/static/js/components/TuneInBrowser.js
index 2f0f13a..b7d2d02 100644
--- a/pkg/service/soundtouchweb/static/js/components/TuneInBrowser.js
+++ b/pkg/service/soundtouchweb/static/js/components/TuneInBrowser.js
@@ -114,6 +114,15 @@ export function TuneInBrowser({ devices }) {
             <ul class="tunein-list">
                 ${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;
                     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="" />`}
@@ -121,6 +130,16 @@ 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`
+                                <button
+                                    class="tunein-play-btn"
+                                    title="Play"
+                                    onClick=${(e) => {
+                                        e.stopPropagation();
+                                        setPendingPlay({ ...play, name: item.name, image: item.imageUrl });
+                                    }}
+                                >▶</button>
+                            `}
                             <span class="tunein-item-arrow">${isNav ? '›' : '▶'}</span>
                         </li>
                     `;