chore(web): move App.tsx's module-level block into files (#2127)

Phase 0 of #2126. Lines 239-668 of clients/web/src/App.tsx were already at
module scope — helpers, formatters, constants, and the toast subcomponents,
none of which close over component state — so the whole block moves verbatim
into files. App.tsx drops from 5,303 to 4,892 lines with no behavior change.

Placement follows the lib-vs-utils rule in AGENTS.md: pure computation to
utils/, anything touching the environment to lib/.

EMPTY_SETTINGS and the two loose toast ids deliberately do NOT land in a new
top-level src/constants.ts, which the issue suggested: the web coverage
include is a whitelist naming components/hooks/theme/lib/utils/server, so a
module there would have fallen out of the >=90 gate silently. They go under
utils/ instead.

ReAuthBannerBar is in the block but not in the issue's table — it was added
after the issue was written (#2108). It moves to components/groups/ReAuthBanner/,
beside the banner it wraps.

Every new module is at 100% on all four coverage dimensions. Two v8 ignores,
each justified in place: getAuthToken's typeof-window guard (a happy-dom
inherent path) and replayProtocolRequest's provably-dead default case.

Signed-off-by: cliffhall <cliff@futurescale.com>

clients/web/src/components/groups/ReAuthBanner/ReAuthBannerBar.test.tsx

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { screen } from "@testing-library/react";
+import { renderWithMantine } from "../../../test/renderWithMantine";
+import { ReAuthBannerBar } from "./ReAuthBannerBar";
+
+describe("ReAuthBannerBar", () => {
+  it("floats the banner centered above the page", () => {
+    renderWithMantine(
+      <ReAuthBannerBar data-testid="bar">contents</ReAuthBannerBar>,
+    );
+    const bar = screen.getByTestId("bar");
+    expect(bar).toHaveTextContent("contents");
+    expect(bar.style.transform).toBe("translate(-50%, -50%)");
+    expect(bar.style.zIndex).toBe("200");
+  });
+});

clients/web/src/components/groups/ReAuthBanner/ReAuthBannerBar.tsx

@@ -0,0 +1,38 @@
+import { Paper } from "@mantine/core";
+
+// The re-auth popup. A `Paper` so every static style is a prop; the stacking
+// order goes through `styles.root` since Mantine has no `z` prop.
+//
+// Floats top-right rather than spanning the top as a sticky full-bleed bar.
+// The bar cost the whole view a band of vertical space for what is a
+// notification about one server, and it sat directly above the monitoring
+// sidebar that an OAuth failure now opens (#2108) — the two things a user needs
+// at once here are this affordance and those requests, so it must not push them
+// around. `fixed`, not `sticky`, so scrolling the server list leaves it put.
+//
+// Centered, and deliberately WITHOUT an overlay. Every corner is spoken for —
+// the toast stack owns bottom-right (see `main.tsx`), the right edge is the
+// monitoring sidebar whose toolbar this would cover, and top-left is the
+// Servers header — so anchoring it anywhere hides something. Centering is the
+// one placement that reads as addressed to the whole window rather than
+// attached to the wrong panel.
+//
+// The missing overlay is the point, not an omission: this is a notification,
+// not a decision that must be made now. An OAuth failure opens the monitoring
+// sidebar (#2108), and blocking the page would force a choice between reading
+// those requests and keeping the affordance — dismissing is not free, since
+// "Authorize again" also clears the stale OAuth state, which a plain reconnect
+// does not do. So it floats above the page and leaves it usable.
+//
+// `transform` goes through `styles.root` for the same reason `zIndex` does:
+// Mantine exposes neither as a style prop.
+export const ReAuthBannerBar = Paper.withProps({
+  pos: "fixed",
+  top: "50%",
+  left: "50%",
+  w: 420,
+  bg: "var(--mantine-color-body)",
+  shadow: "xl",
+  radius: "md",
+  styles: { root: { transform: "translate(-50%, -50%)", zIndex: 200 } },
+});