feat(design): the page band (B4) — one h1 per page, section headings, skip to content, filters fold on a short window (E28 S3d4)

- PageShell names the page with a visually hidden h1; a view with its own title renders it as
  PageHeading and the hidden one steps aside (contract: no hand <h1> inside the shell).
- Section captions are SectionLabel headings (h2, h3 in a dialog), ui/form Section included.
- "Skip to content" is the first Tab stop and focuses the scroller's <main>.
- Below 600px of height the band's filter row folds into "Filters · n" (Feed, Plex, server log),
  the same row shown in place.
- The band holds controls only: Downloads and Notifications lose their title cards, the Config and
  channel-discovery intros scroll with the content, the Stats tabs and the audit pager join the band,
  and the server log's toolbar sticks with the fade under it.

frontend/src/components/ui/PageShell.dom.test.tsx

@@ -7,6 +7,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { render, cleanup } from "@testing-library/react";
 import PageShell from "./PageShell";
+import { PageHeading } from "./Headings";
 
 vi.mock("./PageScroller", () => ({
   default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
@@ -137,3 +138,28 @@ describe("PageShell --rail-pinned-w / --content-mw", () => {
     expect(root.style.getPropertyValue("--rail-pinned-w")).toBe("16.75rem");
   });
 });
+
+// E28 S3d4 (B4): every page has one h1 — the page's name, visually hidden, unless a view shows its
+// own title (a channel, a Plex show), which is then the page's h1 instead.
+describe("PageShell page heading", () => {
+  it("names the page with a visually hidden h1", () => {
+    render(<PageShell title="Downloads">content</PageShell>);
+    const h1s = document.querySelectorAll("h1");
+    expect(h1s).toHaveLength(1);
+    expect(h1s[0]!.textContent).toBe("Downloads");
+    expect(h1s[0]!.className).toContain("sr-only");
+  });
+
+  it("steps aside while a view renders its own PageHeading, and returns when it goes", () => {
+    const { rerender } = render(
+      <PageShell title="Plex">
+        <PageHeading>Knight Rider</PageHeading>
+      </PageShell>,
+    );
+    expect([...document.querySelectorAll("h1")].map((h) => h.textContent)).toEqual([
+      "Knight Rider",
+    ]);
+    rerender(<PageShell title="Plex">grid</PageShell>);
+    expect([...document.querySelectorAll("h1")].map((h) => h.textContent)).toEqual(["Plex"]);
+  });
+});