From cdb861fcbd8408df3e85d2103eede39d3f10a96f Mon Sep 17 00:00:00 2001 From: KeelrLeek <156356974+KeelrLeek@users.noreply.github.com> Date: Mon, 14 Sep 2026 11:09:34 -0500 Subject: [PATCH] =?UTF-8?q?android:=20no=20bar=20arrives=20over=20the=20pa?= =?UTF-8?q?ge=20=E2=80=94=20the=20tab=20pages=20lose=20their=20top=20banne?= =?UTF-8?q?r?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The glass bar was anonymous until you scrolled, then faded in carrying the title the page already had in 27px type two centimetres below it. On Home that meant "Good morning" over "Good morning", half-transparent, while the content it covered kept moving underneath. Kyle's word: remove them. So a tab page has no bar at all. `barOn`/`titled` and the scroll trigger they read are gone; `showBar` is `!root`, and the element is not rendered on Home, Search, Library, Community or You. Nothing fades in over what you are reading. The bar was not only decoration, which is why this is more than a deletion: its ⋯ is the page overflow, and on a tab page that overflow is the app's own menu — the queue, the sleep timer, Settings. That moves to where the page's title already is, in `.phead`, beside Home's identicon and at the end of Library's existing row of actions. Search and You grow the row they did not have. Community already carried its own ⋯ and keeps it. A pushed page still has a bar, because it carries the back chevron and a title that is not repeated anywhere else on the screen. It is static now: rendered only when there is somewhere to go back to, on from the first frame and titled from the first frame. The opacity-0 default, the 180ms cross-fade, and the `.gb-t` rise the title used to arrive on all come out of the stylesheet — nothing is left that can catch the eye mid-scroll. The walk reached that overflow through `.gbar .iconbtn` on a tab page, which is now a selector that matches nothing there: `home-more` on both step lists and the two sleep-timer steps go to `.phead .iconbtn.muted` instead. The other `.gbar` steps are untouched on purpose — the playlist export sheet is a PUSHED page and still has its bar, and `library-ambience` is the album page's back chevron, not an overflow. Checked on the device rather than argued: on Home `.gbar` is absent, the ⋯ is present, and tapping it opens the half sheet on "SoulStream · Queue · Sleep timer off · Settings"; on a pushed record the bar is there with its two buttons, its title, and a computed opacity of exactly 1. One thing this leaves: the bar was also what backed the OS status bar once a page scrolled under it. The clock and the battery now sit on the content. That is fine on the ground and on dark artwork, and it will not be over a white sleeve — a short scrim with no title and no buttons would fix it without bringing a banner back, and is deliberately not in this commit. --- src/mobile/Mobile.svelte | 23 +++++++++++++---------- src/mobile/screens/Home.svelte | 9 ++++++--- src/mobile/screens/Library.svelte | 1 + src/mobile/screens/Search.svelte | 2 +- src/mobile/screens/You.svelte | 2 +- src/mobile/shell.css | 9 --------- tests/mobile/smoke.mjs | 8 ++++---- 7 files changed, 26 insertions(+), 28 deletions(-) diff --git a/src/mobile/Mobile.svelte b/src/mobile/Mobile.svelte index cf50b31..dac041d 100644 --- a/src/mobile/Mobile.svelte +++ b/src/mobile/Mobile.svelte @@ -117,9 +117,10 @@ } }); const groundPath = $derived(meta.amb ?? player.album?.art_path ?? null); - const trigger = $derived(meta.hero ? 210 : 52); - const barOn = $derived(!root || scrolled > trigger); - const titled = $derived(scrolled > trigger); + /* A tab page has no bar at all: nothing fades in over what you are + reading. A pushed page has one because it carries the back chevron, + and it is static — there and titled from the first frame. */ + const showBar = $derived(!root); const playing = $derived(player.status === "playing" || player.status === "buffering"); const played = $derived(player.duration ? Math.min(1, player.position / player.duration) : 0); @@ -382,13 +383,15 @@ {/key} - -
- - {meta.title}{#if meta.kicker && meta.kicker !== meta.title}{meta.kicker}{/if} - -
+ + {#if showBar} +
+ + {meta.title}{#if meta.kicker && meta.kicker !== meta.title}{meta.kicker}{/if} + +
+ {/if} {#if player.track} diff --git a/src/mobile/screens/Home.svelte b/src/mobile/screens/Home.svelte index 8662523..734ceb5 100644 --- a/src/mobile/screens/Home.svelte +++ b/src/mobile/screens/Home.svelte @@ -150,9 +150,12 @@
{dateKick()}

{greeting()}

- +
+ + +
diff --git a/src/mobile/screens/Library.svelte b/src/mobile/screens/Library.svelte index f50c689..43949b7 100644 --- a/src/mobile/screens/Library.svelte +++ b/src/mobile/screens/Library.svelte @@ -102,6 +102,7 @@ + diff --git a/src/mobile/screens/Search.svelte b/src/mobile/screens/Search.svelte index b1ff4da..a96707a 100644 --- a/src/mobile/screens/Search.svelte +++ b/src/mobile/screens/Search.svelte @@ -287,7 +287,7 @@ } -

Search

+

Search

diff --git a/src/mobile/screens/You.svelte b/src/mobile/screens/You.svelte index 3995d99..3166d94 100644 --- a/src/mobile/screens/You.svelte +++ b/src/mobile/screens/You.svelte @@ -189,7 +189,7 @@ ]; -

You

+

You

Appearance
diff --git a/src/mobile/shell.css b/src/mobile/shell.css index b7adf7e..9f53b96 100644 --- a/src/mobile/shell.css +++ b/src/mobile/shell.css @@ -117,11 +117,7 @@ the solid floor first. */ background: rgba(18, 18, 22, 0.92); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05); - opacity: 0; - transition: opacity 180ms ease; - pointer-events: none; } -.gbar.on { opacity: 1; pointer-events: auto; } html[data-glass="blur"] .gbar { background: rgba(20, 20, 24, 0.28); backdrop-filter: blur(12px) saturate(1.7); -webkit-backdrop-filter: blur(12px) saturate(1.7); } html[data-material="solid"] .gbar { background: rgba(24, 24, 24, 0.94); backdrop-filter: none; -webkit-backdrop-filter: none; } .gbar .gb-t { @@ -134,12 +130,7 @@ html[data-material="solid"] .gbar { background: rgba(24, 24, 24, 0.94); backdrop min-width: 0; flex: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); - /* the bar arrives before its title does */ - opacity: 0; - transform: translateY(5px); - transition: opacity 200ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1); } -.gbar.titled .gb-t { opacity: 1; transform: none; } .gbar .gb-t small { display: block; font-size: 10.5px; diff --git a/tests/mobile/smoke.mjs b/tests/mobile/smoke.mjs index 329087a..08b3768 100644 --- a/tests/mobile/smoke.mjs +++ b/tests/mobile/smoke.mjs @@ -966,7 +966,7 @@ const MOCK_STEPS = [ { do: `__settle()`, wait: 600 }, { do: `document.querySelectorAll('.nav button')[0].click()`, name: "home-again", wait: 700 }, /* the page overflow → the sleep timer */ - { do: `document.querySelectorAll('.gbar .iconbtn')[1].click()`, name: "home-more", wait: 700 }, + { do: `document.querySelector('.phead .iconbtn.muted').click()`, name: "home-more", wait: 700 }, { do: `__click('.halfsheet .row', 'Sleep timer')`, name: "sleep-sheet", wait: 700 }, { do: `__click('.halfsheet .chip', '30 min')`, name: "sleep-set", wait: 700 }, /* ── the phone turned over. A resize, so the app keeps playing and keeps @@ -2105,12 +2105,12 @@ const PHONE_STEPS = [ died in that gap would leave a pause waiting on his playback — so it is the SHORTEST chip in the sheet, not a comfortable one. */ { do: `document.querySelectorAll('.nav button')[0].click()`, name: "home-feed", wait: 1200 }, - { do: `document.querySelectorAll('.gbar .iconbtn')[1].click()`, name: "home-more", wait: 900 }, + { do: `document.querySelector('.phead .iconbtn.muted').click()`, name: "home-more", wait: 900 }, { do: `__click('.halfsheet .row', 'Sleep timer')`, name: "sleep-sheet", wait: 800 }, { do: `__click('.halfsheet .chip', '15 min')`, name: "sleep-set", wait: 800 }, - { do: `document.querySelectorAll('.gbar .iconbtn')[1].click()`, name: "sleep-armed", wait: 900 }, + { do: `document.querySelector('.phead .iconbtn.muted').click()`, name: "sleep-armed", wait: 900 }, { do: `(function () { function pick(sel, re) { return [].slice.call(document.querySelectorAll(sel)).find(function (x) { return re.test((x.textContent || '').trim()); }); } var r = pick('.halfsheet .row', /Sleep timer/); if (r) r.click(); return new Promise(function (res) { setTimeout(function () { var c = pick('.halfsheet .chip', /^Off$/); if (c) c.click(); res(!!c); }, 400); }); })()`, name: "sleep-off", wait: 900 }, - { do: `document.querySelectorAll('.gbar .iconbtn')[1].click()`, name: "sleep-cleared", wait: 900 }, + { do: `document.querySelector('.phead .iconbtn.muted').click()`, name: "sleep-cleared", wait: 900 }, { do: `(function () { var s = document.querySelector('.scrim'); if (s) s.click(); return true; })()`, wait: 600 }, /* You: the stream cache's retention chip, read first and put back last. The value is stashed IN THE PAGE as well as in the harness,