peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(shell): sticky tabs+toolbar on the channel page

Browse Source 
Generalise the fixed-chrome pattern to the channel detail page: the
banner + identity now scroll away, while the tab row and the channel
feed's toolbar stick to the top as a sticky sub-header — only the video
grid scrolls.

Mechanism: PageToolbarSlot (the toolbar portal target) is now an exported,
overridable context. ChannelPage provides its own sticky sub-header node
as the target, so the channelScoped Feed portals its toolbar up next to
the tabs instead of into the shell's top band. Feed always portals its
toolbar now (the slot decides where it lands).

Also: the page scroller now fades only its BOTTOM edge — the top is
bounded by the fixed/sticky chrome, so a top fade only bit into it.

E2E: adds a lock that the channel tabs/toolbar stay pinned while the
banner scrolls away; suite 15/15 on :5173, tsc + knip clean.
This commit is contained in:
peter
2026-07-18 04:45:11 +02:00
parent 10f4baab3b
commit 0e03e561eb
6 changed files with 75 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/e2e/channel.spec.ts
+24
View File
@@ -55,4 +55,28 @@ test.describe("channel view", () => {
.poll(() => page.getByRole("main").evaluate((el) => el.scrollTop), { timeout: 5000 })
.toBeGreaterThan(saved - 500);
});
// Platform S4b: the channel page's banner/identity scroll away, but the tabs + feed toolbar stick
// to the top (a sticky sub-header) so only the video grid scrolls.
test("tabs + toolbar stay pinned while the channel videos scroll", async ({ page }) => {
await openApp(page);
await page.getByTestId("video-card-channel").first().click();
const count = page.getByTestId("feed-result-count");
await expect(count).toBeVisible();
await expect(page.getByTestId("video-card").first()).toBeVisible();
await expect(page.getByTestId("channel-title")).toBeInViewport();
// Keep nudging until the grid is tall enough to actually scroll (it may still be filling in).
await expect
.poll(async () => {
await page.getByRole("main").evaluate((el) => el.scrollBy(0, 1500));
return page.getByRole("main").evaluate((el) => el.scrollTop);
})
.toBeGreaterThan(400);
// Banner/identity scrolled away, but the tabs+toolbar stuck near the top.
await expect(page.getByTestId("channel-title")).not.toBeInViewport();
await expect(count).toBeInViewport();
expect(await count.evaluate((el) => el.getBoundingClientRect().top)).toBeLessThan(130);
});
});