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
+25 -17
View File
@@ -10,6 +10,7 @@ import { notifyYouTubeActionError } from "../lib/youtubeErrors";
import Tooltip from "./Tooltip";
import ChannelLink from "./ChannelLink";
import DataTable, { type Column } from "./DataTable";
import { PageToolbar } from "./PageShell";
import { useConfirm } from "./ConfirmProvider";
// The Channel manager's "Discovery" tab: channels that turn up in the user's playlists but
@@ -154,22 +155,29 @@ export default function ChannelDiscovery({
];
return (
<div className="px-4 pb-4 pt-3 max-w-7xl mx-auto">
<p className="text-xs text-muted mb-4 leading-relaxed">
{t("channels.discovery.intro")}
</p>
{query.isLoading ? (
<div className="text-muted py-8">{t("channels.discovery.loading")}</div>
) : (
<DataTable
rows={rows}
columns={columns}
rowKey={(c) => c.id}
persistKey={accountKey(LS.channelDiscoveryTable) ?? undefined}
controlsPosition="top"
emptyText={t("channels.discovery.empty")}
/>
)}
</div>
<>
{/* Intro + the table controls are fixed chrome; only the table rows scroll (sticky header). */}
<PageToolbar>
<div className="px-4 pt-3 max-w-7xl mx-auto">
<p className="text-xs text-muted leading-relaxed">{t("channels.discovery.intro")}</p>
</div>
</PageToolbar>
<div className="px-4 pb-4 max-w-7xl mx-auto">
{query.isLoading ? (
<div className="text-muted py-8">{t("channels.discovery.loading")}</div>
) : (
<DataTable
rows={rows}
columns={columns}
rowKey={(c) => c.id}
persistKey={accountKey(LS.channelDiscoveryTable) ?? undefined}
controlsPosition="top"
controlsInBand
controlsBandClassName="px-4 max-w-7xl mx-auto"
emptyText={t("channels.discovery.empty")}
/>
)}
</div>
</>
);
}