refactor(shell): channel page is a PageShell config, not a 2nd scroller
The channel page rendered its own PageScroller as a separate App branch — the source of the app's two <main>s. Make it a headerless/rail-less PageShell config (its banner scrolls from the top) so there is exactly ONE page scroller. Verified: single <main>, banner scrolls, in-page and browser Back both return to the feed; E2E 11/11.
This commit is contained in:
@@ -689,6 +689,7 @@ export default function App() {
|
|||||||
)}
|
)}
|
||||||
<div className="relative flex-1 min-w-0 flex flex-col">
|
<div className="relative flex-1 min-w-0 flex flex-col">
|
||||||
{channelView ? (
|
{channelView ? (
|
||||||
|
<PageShell>
|
||||||
<Suspense fallback={pageFallback}>
|
<Suspense fallback={pageFallback}>
|
||||||
<ChannelPage
|
<ChannelPage
|
||||||
key={channelView.id}
|
key={channelView.id}
|
||||||
@@ -714,6 +715,7 @@ export default function App() {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
</PageShell>
|
||||||
) : (
|
) : (
|
||||||
<PageShell
|
<PageShell
|
||||||
header={
|
header={
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import { useNavigationActions } from "./NavigationProvider";
|
|||||||
import { ArrowLeft, Ban, Check, ExternalLink, Loader2, Plus, RefreshCw, SlidersHorizontal } from "lucide-react";
|
import { ArrowLeft, Ban, Check, ExternalLink, Loader2, Plus, RefreshCw, SlidersHorizontal } from "lucide-react";
|
||||||
import Avatar from "./Avatar";
|
import Avatar from "./Avatar";
|
||||||
import Feed from "./Feed";
|
import Feed from "./Feed";
|
||||||
import PageScroller from "./PageScroller";
|
|
||||||
import { useConfirm } from "./ConfirmProvider";
|
import { useConfirm } from "./ConfirmProvider";
|
||||||
import { notify } from "../lib/notifications";
|
import { notify } from "../lib/notifications";
|
||||||
import { notifyYouTubeActionError } from "../lib/youtubeErrors";
|
import { notifyYouTubeActionError } from "../lib/youtubeErrors";
|
||||||
@@ -206,8 +205,10 @@ export default function ChannelPage({
|
|||||||
? "pb-2 text-sm font-medium border-b-2 border-fg text-fg"
|
? "pb-2 text-sm font-medium border-b-2 border-fg text-fg"
|
||||||
: "pb-2 text-sm text-muted hover:text-fg border-b-2 border-transparent";
|
: "pb-2 text-sm text-muted hover:text-fg border-b-2 border-transparent";
|
||||||
|
|
||||||
|
// The channel page owns no scroller of its own: it's a PageShell config (no shared header, no
|
||||||
|
// rail, its banner scrolls from the top) so there's ONE page scroller in the app, not two.
|
||||||
return (
|
return (
|
||||||
<PageScroller>
|
<>
|
||||||
{/* Banner + back — OPTION C: inset, rounded card (not full-bleed) */}
|
{/* Banner + back — OPTION C: inset, rounded card (not full-bleed) */}
|
||||||
<div className="relative px-4 sm:px-6 pt-3">
|
<div className="relative px-4 sm:px-6 pt-3">
|
||||||
{ch?.banner_url && bannerAttempt <= MAX_BANNER_RETRIES ? (
|
{ch?.banner_url && bannerAttempt <= MAX_BANNER_RETRIES ? (
|
||||||
@@ -466,6 +467,6 @@ export default function ChannelPage({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</PageScroller>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user