From 41f42f10480fdbab1505cf7fddc0156d2f545841 Mon Sep 17 00:00:00 2001 From: David Keane Date: Tue, 9 Jun 2026 23:42:42 +0100 Subject: [PATCH] feat(v0.4.1-prep): back link from Options page to Tuner main UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit David flagged 2026-06-09 night: 'when i click the settings button i go to settings but we have no back link to radio'. Real UX gap — Options was a one-way trip. The popup auto-closes on launch and the NewTab is in a different tab, so there was no obvious way back. Fix: the existing brand header (helmet + 'RangerHQ Tuner — Options' title) is now a single anchor pointing at newtab.html. Adds a small ← glyph to the left of the helmet that hover-shifts left + colour-shifts to accent green for a clear back-affordance. Same-tab navigation (just an href, no chrome.tabs.create) so the user doesn't accumulate Tuner tabs. They came IN via Options, they go OUT into the player UI in the same tab. Aria: the ← is hidden from screen readers (decorative); the title attribute on the anchor gives the accessible label. 2 files, +24 lines, 4 lines modified in existing .opt-brand block. Branch: v0.4.1-prep — not for immediate ship since v0.4.0 is still in Web Store re-review. Bundle this with light-mode + other polish into v0.5.0 OR ship as quick v0.4.1 patch after v0.4.0 clears. --- src/options/options.css | 24 +++++++++++++++++++++++- src/options/options.html | 5 +++-- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/src/options/options.css b/src/options/options.css index aeba427..395fb7a 100644 --- a/src/options/options.css +++ b/src/options/options.css @@ -40,7 +40,29 @@ html, body { .opt-brand { display: flex; align-items: center; - gap: 12px; + gap: 10px; + text-decoration: none; + color: inherit; + padding: 4px 8px; + margin: -4px -8px; + border-radius: var(--radius); +} + +.opt-brand:hover { + background: var(--bg-row); +} + +.opt-brand:hover .opt-back { + color: var(--accent); + transform: translateX(-2px); +} + +.opt-back { + font-size: 18px; + color: var(--fg-muted); + line-height: 1; + font-weight: 400; + transition: color 120ms ease-out, transform 120ms ease-out; } .opt-helmet { diff --git a/src/options/options.html b/src/options/options.html index 67ffb41..7d4b971 100644 --- a/src/options/options.html +++ b/src/options/options.html @@ -9,10 +9,11 @@
- + v—