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:
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user