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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user