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/Headings.tsx

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { useOwnPageHeading } from "./pageHeading";
+
+// The page's heading outline (B4, UX-15): one `h1` per page, then a heading per section. A screen
+// reader user moves by headings, so a section caption drawn as a styled `div` hides the page's
+// structure from exactly the people who navigate by it.
+
+/** A view's own visible title (a channel, a Plex show, a playlist): the page's `h1`, in place of the
+ *  shell's hidden page name. */
+export function PageHeading(props: ComponentPropsWithoutRef<"h1">) {
+  useOwnPageHeading();
+  return <h1 {...props} />;
+}
+
+/** A section's caption: the small uppercase muted label, as a heading. `level` 3 inside a dialog or
+ *  a panel whose own title is the `h2`. */
+export function SectionLabel({
+  level = 2,
+  className = "",
+  children,
+}: {
+  level?: 2 | 3;
+  className?: string;
+  children: ReactNode;
+}) {
+  const Tag = level === 2 ? "h2" : "h3";
+  return (
+    <Tag className={`text-xs uppercase tracking-wide text-muted ${className}`}>{children}</Tag>
+  );
+}