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

@@ -1,6 +1,7 @@
 import {
   cloneElement,
   isValidElement,
+  useCallback,
   useContext,
   useLayoutEffect,
   useState,
@@ -11,6 +12,7 @@ import {
 import { createPortal } from "react-dom";
 import PageScroller from "./PageScroller";
 import { PageToolbarSlot } from "./pageToolbarSlot";
+import { PageHeadingProvider } from "./pageHeading";
 
 // A module renders its per-module fixed band (filter chips / sort / counts) through this. The
 // content lands in the shell's toolbar band — ABOVE the scroller, so it stays put while the content
@@ -32,6 +34,9 @@ export function PageToolbar({ children }: { children: ReactNode }) {
 //  - `header`  — floats (absolute, height `var(--hdr-h)`) over the content column; the wrapper pads
 //                its top by that height so nothing hides under it. Omit it (channel page) → no pad
 //                and no fixed top band, so the module's own banner can scroll from the very top.
+//  - `title`   — the page's name as a visually hidden `h1` (B4): the nav rail and the tab title are
+//                the visible identity, and a screen reader still lands on a named page. A view that
+//                shows its own title renders it through `PageHeading`, and this one steps aside.
 //  - `banners` — in-flow, fixed notices (demo/version) above the scroll region.
 //  - toolbar band — in-flow, FIXED per-module band (filter chips / sort / counts); filled by a
 //                module via <PageToolbar>. Empty ⇒ zero height, so pages without one lose nothing.
@@ -41,12 +46,14 @@ export function PageToolbar({ children }: { children: ReactNode }) {
 // The shell renders a fragment so it drops straight into App's `relative` content column — the
 // floating header keeps resolving its `absolute` position against that same ancestor.
 export default function PageShell({
+  title,
   header,
   banners,
   children,
   scrollKey,
   maxWidth,
 }: {
+  title?: string;
   header?: ReactNode;
   banners?: ReactNode;
   children: ReactNode;
@@ -126,6 +133,12 @@ export default function PageShell({
     ro.observe(headerEl);
     return () => ro.disconnect();
   }, [headerEl, contentEl]);
+  // How many views below render their own page `h1` right now (see ./pageHeading).
+  const [ownHeadings, setOwnHeadings] = useState(0);
+  const registerOwnHeading = useCallback(() => {
+    setOwnHeadings((n) => n + 1);
+    return () => setOwnHeadings((n) => n - 1);
+  }, []);
   const measuredHeader = isValidElement(header)
     ? cloneElement(header as ReactElement<{ ref?: Ref<HTMLDivElement> }>, {
         ref: setHeaderEl,
@@ -133,17 +146,20 @@ export default function PageShell({
     : header;
   return (
     <PageToolbarSlot.Provider value={toolbarSlot}>
-      {measuredHeader}
-      <div
-        ref={setContentEl}
-        className={`flex-1 min-w-0 min-h-0 flex flex-col ${header ? "pt-(--hdr-h)" : ""}`}
-      >
-        {banners}
-        {/* pr-[--sbw]: the toolbar band isn't the scroller, so without this it would run the
-            scrollbar-gutter's width past the scrolled cards on the right. Pad it back to card width. */}
-        <div ref={setToolbarSlot} className="shrink-0 pr-[var(--sbw)]" />
-        <PageScroller scrollKey={scrollKey}>{children}</PageScroller>
-      </div>
+      <PageHeadingProvider value={registerOwnHeading}>
+        {measuredHeader}
+        <div
+          ref={setContentEl}
+          className={`flex-1 min-w-0 min-h-0 flex flex-col ${header ? "pt-(--hdr-h)" : ""}`}
+        >
+          {title && ownHeadings === 0 && <h1 className="sr-only">{title}</h1>}
+          {banners}
+          {/* pr-[--sbw]: the toolbar band isn't the scroller, so without this it would run the
+              scrollbar-gutter's width past the scrolled cards on the right. Pad it back to card width. */}
+          <div ref={setToolbarSlot} className="shrink-0 pr-[var(--sbw)]" />
+          <PageScroller scrollKey={scrollKey}>{children}</PageScroller>
+        </div>
+      </PageHeadingProvider>
     </PageToolbarSlot.Provider>
   );
 }