feat(shell): fix headers on Notifications, Downloads, Discovery

Apply the fixed-chrome pattern to three more list modules:
- Notifications: the inbox header (title + mark-all / clear-all) pins in
  the band; only the notification list scrolls.
- Downloads: the title + subtitle + tabs pin; the tab content scrolls.
- Channel discovery: the intro + table controls pin (controlsInBand), the
  table rows scroll under the sticky header (fills out the manager's
  Discover tab to match Subscriptions).

Verified: headers land in the fixed band, content in the scroller. Suite
15/15, tsc + knip clean.
This commit is contained in:
2026-07-18 06:16:16 +02:00
parent ed3990a9af
commit 685c7b4c0b
3 changed files with 45 additions and 21 deletions
+9 -1
View File
@@ -17,6 +17,7 @@ import {
} from "lucide-react";
import clsx from "clsx";
import Tabs, { usePersistedTab } from "./Tabs";
import { PageToolbar } from "./PageShell";
import Modal from "./Modal";
// Lazy: these dialogs/editors open on demand, so they stay out of the Downloads page chunk until
// used (the video editor in particular is heavy — filmstrip + scrubber).
@@ -600,7 +601,10 @@ export default function DownloadCenter({ me }: { me: Me }) {
);
return (
<div className="p-4 max-w-4xl w-full mx-auto">
<>
{/* Page title + subtitle + tabs are fixed chrome; the tab content scrolls under them. */}
<PageToolbar>
<div className="px-4 pt-3 max-w-4xl w-full mx-auto">
<div className="flex items-center justify-between gap-3 mb-1">
<h1 className="text-xl font-semibold">{t("downloads.page.title")}</h1>
<button
@@ -613,7 +617,10 @@ export default function DownloadCenter({ me }: { me: Me }) {
<p className="text-sm text-muted mb-4">{t("downloads.page.subtitle")}</p>
<Tabs tabs={tabs} active={tab} onChange={setTab} />
</div>
</PageToolbar>
<div className="px-4 pb-4 pt-3 max-w-4xl w-full mx-auto">
{tab === "queue" && (
<>
<div className="flex gap-2 mb-4">
@@ -739,5 +746,6 @@ export default function DownloadCenter({ me }: { me: Me }) {
{editJob && <VideoEditor job={editJob} onClose={() => setEditJob(null)} />}
</Suspense>
</div>
</>
);
}