refactor(shell): introduce PageShell for the normal-page chrome

Collapse App's hand-assembled normal-page chrome (floating Header +
top-padded wrapper + PageScroller + banners) into a single PageShell
contract with declared fixed vs scrollable regions. No behaviour change;
the channel page still renders its own scroller (dissolved next).

Groundwork for the S4 fixed-chrome/scroll-ownership seam.

frontend/src/App.tsx

@@ -53,7 +53,7 @@ import NavSidebar from "./components/NavSidebar";
 import Sidebar from "./components/Sidebar";
 import PlaylistsRail from "./components/PlaylistsRail";
 import BackToTop from "./components/BackToTop";
-import PageScroller from "./components/PageScroller";
+import PageShell from "./components/PageShell";
 import GlassTuner from "./components/GlassTuner";
 import ChatDock from "./components/ChatDock";
 import Toaster from "./components/Toaster";
@@ -715,34 +715,34 @@ export default function App() {
             />
           </Suspense>
         ) : (
-          <>
-        <Header
-          me={meQuery.data!}
-          filters={filters}
-          setFilters={setFilters}
-          plexQ={plexQ}
-          setPlexQ={setPlexQ}
-          channelsSearch={channelsSearch}
-          setChannelsSearch={setChannelsSearch}
-          playlistsSearch={playlistsSearch}
-          setPlaylistsSearch={setPlaylistsSearch}
-          onYtSearch={enterYtSearch}
-          onGoToFullHistory={() => {
-            setChannelFilter("needs_full");
-            setChannelsView("subscribed"); // the status filter applies to the subscriptions tab
-            setChannelsFilterReset((n) => n + 1); // drop any stale column filter hiding the rows
-            setPage("channels");
-          }}
-        />
-        {/* The header floats (fixed) over the content, so it no longer occupies flow space; this
-            wrapper clears it with a top pad. (All left rails, incl. Playlists, are App-level
-            floating panels beside the nav — none sit inside this content column anymore.) */}
-        <div
-          className="flex-1 min-w-0 min-h-0 flex flex-col pt-[var(--hdr-h)]"
-        >
-        {meQuery.data!.is_demo && <DemoBanner />}
-        <VersionBanner onOpen={() => openReleaseNotes(CURRENT_VERSION)} />
-          <PageScroller>
+          <PageShell
+            header={
+              <Header
+                me={meQuery.data!}
+                filters={filters}
+                setFilters={setFilters}
+                plexQ={plexQ}
+                setPlexQ={setPlexQ}
+                channelsSearch={channelsSearch}
+                setChannelsSearch={setChannelsSearch}
+                playlistsSearch={playlistsSearch}
+                setPlaylistsSearch={setPlaylistsSearch}
+                onYtSearch={enterYtSearch}
+                onGoToFullHistory={() => {
+                  setChannelFilter("needs_full");
+                  setChannelsView("subscribed"); // the status filter applies to the subscriptions tab
+                  setChannelsFilterReset((n) => n + 1); // drop any stale column filter hiding the rows
+                  setPage("channels");
+                }}
+              />
+            }
+            banners={
+              <>
+                {meQuery.data!.is_demo && <DemoBanner />}
+                <VersionBanner onOpen={() => openReleaseNotes(CURRENT_VERSION)} />
+              </>
+            }
+          >
           <Suspense fallback={pageFallback}>
           {page === "channels" ? (
             <Channels
@@ -823,9 +823,7 @@ export default function App() {
             />
           )}
           </Suspense>
-          </PageScroller>
-          </div>
-          </>
+          </PageShell>
         )}
         {/* Toasts rise from the bottom-left, by the notification bell in the nav rail.
             Anchored inside the content column so they clear the sidebar automatically