fix(feed): pin the feed toolbar in the shell's fixed band (bug 4)

The feed's show/content chips, source, count, sort and view switcher —
plus the active-filter chips — lived inside the scroller, so they
scrolled away with the cards; only the SearchBar strip stayed fixed.

Give PageShell a fixed toolbar band (filled by a module via the new
PageToolbar portal) above the scroller. On the feed page the toolbar +
chips portal into it and stay put — and removable — while cards scroll.
The channel-embedded Feed (channelScoped) keeps its inline toolbar,
which rides with the banner/tabs as before.

Verified both entry points at desktop + 1000px (toolbar wraps in-flow,
band grows, still pinned); E2E 11/11; tsc + knip clean.
This commit is contained in:
2026-07-18 03:25:48 +02:00
parent d81f10b1cf
commit a6cbc45334
2 changed files with 43 additions and 18 deletions
+20 -10
View File
@@ -31,6 +31,7 @@ import {
import { FEED_VIEWS, type FeedView } from "../lib/feedView";
import { clearedFilters, useActiveFilters } from "../lib/useActiveFilters";
import ActiveFilterChips from "./ActiveFilterChips";
import { PageToolbar } from "./PageShell";
import ViewSwitcher from "./ViewSwitcher";
import VirtualFeed from "./VirtualFeed";
// Lazy: the in-app YouTube player (IFrame API) loads only when a video is first opened.
@@ -654,17 +655,26 @@ export default function Feed({
);
return (
<div className="p-4">
{toolbar}
{/* Channel pages get no chips: they have no filter panel to reveal (App hides the sidebar for
them), and their Feed starts from its OWN baseline — channel-scoped, whole-catalog,
show-all — so every one of those would render as a "filter you applied" when it's just the
<div className={channelScoped ? "p-4" : "px-4 pb-4 pt-2"}>
{/* On the feed page the toolbar + active-filter chips are FIXED chrome: they pin in the
shell's toolbar band (above the scroller) so they stay put — and reachable — while the
cards scroll (bug 4). On a channel page the Feed is embedded below the channel's own
banner/tabs, which scroll, so there the toolbar rides inline with the content as before.
Channel pages get no chips: their Feed starts from its OWN baseline (channel-scoped,
whole-catalog, show-all), so each would read as a "filter you applied" when it's just the
page being itself. */}
{!channelScoped && (
<ActiveFilterChips
filters={activeFilters}
onClearAll={() => setFilters(clearedFilters(filters))}
/>
{channelScoped ? (
toolbar
) : (
<PageToolbar>
<div className="px-4 pt-4 pb-1">
{toolbar}
<ActiveFilterChips
filters={activeFilters}
onClearAll={() => setFilters(clearedFilters(filters))}
/>
</div>
</PageToolbar>
)}
{items.length === 0 ? (
<div className="py-16 text-center text-muted">