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,