fix(boot): a new tab knows its account before anything renders

With Settings -> Appearance -> Startup turned off, every NEW tab or window still
opened on Home; only a same-tab reload honoured it. The provider tree mounted
before /api/me answered, so NavigationProvider's initializer could not read the
per-account opt-out, landed on Home and mirrored ?page=home into the address bar.
When App pinned the account a moment later, the re-hydrate re-read that mirror
and stayed on Home. The same mount-then-patch shape made a new tab start on
default filters, the default theme and the browser language, and correct each
after the first paint.

BootGate (main.tsx, above the providers) now owns the setup-status and /api/me
queries and mounts the tree only once the identity is settled: it pins the tab's
account and adopts the account's language in a layout effect, so the first frame
of the app is already right. The tree is keyed on the account id, which makes
"per-account state is read once, for this account" a structural guarantee.

With that, the whole re-hydrate machinery is gone: useAccountRehydrate, the
reactive active-account store, the markDirty guards, the pin-deferred saved-view
seed and the present-dimension bookkeeping of the shared Channels/Plex links.
PrefsProvider, FeedFiltersProvider, usePref and App's panel layouts seed from the
me cache instead of adopting it in an effect; the theme is applied in layout
effects. The app chunk is fetched in parallel with the probe, and the boot screen
only fades its label in after 400 ms, on one clock across the gate and the
Suspense fallback.

Module switches no longer flash a placeholder either. Measured frame by frame
in Chromium and WebKit, every first visit to a module showed "Loading..." for
17-70 ms: the lazy chunk's Suspense fallback, then often the first fetch's
LoadingState. Pages are now lazyWithPreload components, and App fetches the
chunks of every module the account can reach (plus the channel page) once the
first page is idle; a preloaded page renders synchronously and never suspends.
LoadingState, the one shared loading visual, fades in only after 300 ms, so a
fast load shows nothing in between and a slow one still gets its spinner.

frontend/src/components/moduleRegistry.tsx

@@ -1,4 +1,5 @@
-import { lazy, type ComponentType } from "react";
+import type { ComponentType } from "react";
+import { lazyWithPreload, type PreloadableComponent } from "../lib/lazyWithPreload";
 import type { Page } from "../lib/urlState";
 import type { PanelId, PanelLayout } from "../lib/panelLayout";
 import { useMe } from "../lib/useMe";
@@ -21,22 +22,24 @@ import { useSavedViews } from "./SavedViewsProvider";
 // its own isolated scope to <Feed> directly — see the scope note in FeedFiltersProvider).
 
 // Route-level code splitting: each page is its own lazy chunk (admin-only pages never reach
-// non-admins; the logged-out landing pulls only the shell). Rendered inside App's <Suspense>.
-const Home = lazy(() => import("./Home"));
-const Feed = lazy(() => import("./Feed"));
-const Channels = lazy(() => import("./Channels"));
-const Playlists = lazy(() => import("./Playlists"));
-const PlexBrowse = lazy(() => import("./PlexBrowse"));
-const PlexSidebar = lazy(() => import("./PlexSidebar"));
-const NotificationsPanel = lazy(() => import("./NotificationsPanel"));
-const Messages = lazy(() => import("./Messages"));
-const DownloadCenter = lazy(() => import("./DownloadCenter"));
-const Stats = lazy(() => import("./Stats"));
-const Scheduler = lazy(() => import("./Scheduler"));
-const ConfigPanel = lazy(() => import("./ConfigPanel"));
-const AdminUsers = lazy(() => import("./AdminUsers"));
-const AuditLog = lazy(() => import("./AuditLog"));
-const SettingsPanel = lazy(() => import("./SettingsPanel"));
+// non-admins; the logged-out landing pulls only the shell). Rendered inside App's <Suspense>. Each
+// one is preloadable: App fetches the chunks of every page the account can reach once the first page
+// is on screen (preloadPages below), so switching modules never shows the chunk fallback.
+const Home = lazyWithPreload(() => import("./Home"));
+const Feed = lazyWithPreload(() => import("./Feed"));
+const Channels = lazyWithPreload(() => import("./Channels"));
+const Playlists = lazyWithPreload(() => import("./Playlists"));
+const PlexBrowse = lazyWithPreload(() => import("./PlexBrowse"));
+const PlexSidebar = lazyWithPreload(() => import("./PlexSidebar"));
+const NotificationsPanel = lazyWithPreload(() => import("./NotificationsPanel"));
+const Messages = lazyWithPreload(() => import("./Messages"));
+const DownloadCenter = lazyWithPreload(() => import("./DownloadCenter"));
+const Stats = lazyWithPreload(() => import("./Stats"));
+const Scheduler = lazyWithPreload(() => import("./Scheduler"));
+const ConfigPanel = lazyWithPreload(() => import("./ConfigPanel"));
+const AdminUsers = lazyWithPreload(() => import("./AdminUsers"));
+const AuditLog = lazyWithPreload(() => import("./AuditLog"));
+const SettingsPanel = lazyWithPreload(() => import("./SettingsPanel"));
 
 // The GLOBAL feed page: wires <Feed> to the app-wide feed filters / view / live-search. (The channel
 // page renders <Feed> itself with its own channel-scoped filters, so those two never share state.)
@@ -80,8 +83,9 @@ function MessagesPage() {
 }
 
 export type PageDef = {
-  // Prop-free by construction: reads `me` + module state from hooks/providers.
-  Component: ComponentType;
+  // Prop-free by construction: reads `me` + module state from hooks/providers. Preloadable by type, so
+  // a new page cannot silently opt out of preloadPages.
+  Component: PreloadableComponent<object>;
   // Channels + Audit render a table with a sticky header at the scroller top; the shell's top fade
   // would sit on it and flip on with the first scroll, so they turn it off. Defaults to on.
   fadeTop?: boolean;
@@ -94,12 +98,13 @@ export type PageDef = {
 // page id → the component App renders in the content column (+ its shell chrome config).
 export const PAGE_CONTENT: Record<Page, PageDef> = {
   home: { Component: Home, maxWidth: "80rem" },
-  feed: { Component: FeedPage },
+  // The two wrappers preload the lazy chunk they render.
+  feed: { Component: Object.assign(FeedPage, { preload: Feed.preload }) },
   channels: { Component: Channels, fadeTop: false, maxWidth: "96rem" },
   playlists: { Component: Playlists, fadeTop: false, maxWidth: "64rem" },
   plex: { Component: PlexBrowse, maxWidth: "1600px" },
   notifications: { Component: NotificationsPanel, maxWidth: "48rem" },
-  messages: { Component: MessagesPage },
+  messages: { Component: Object.assign(MessagesPage, { preload: Messages.preload }) },
   downloads: { Component: DownloadCenter, maxWidth: "56rem" },
   stats: { Component: Stats },
   scheduler: { Component: Scheduler },
@@ -134,3 +139,13 @@ export const PAGE_RAIL: Partial<Record<Page, RailDef>> = {
   plex: { Rail: PlexSidebar, panelId: "plex", collapse: "filter" },
   playlists: { Rail: PlaylistsRail, panelId: "playlists", collapse: "playlists" },
 };
+
+/** Fetch the code of these pages and of their side rails now, ahead of their first visit. Errors are
+ *  swallowed: a chunk that fails to preload is simply fetched (and its failure surfaced) on visit. */
+export function preloadPages(pages: Page[]): void {
+  for (const p of pages) {
+    PAGE_CONTENT[p].Component.preload().catch(() => {});
+    const rail = PAGE_RAIL[p]?.Rail as Partial<PreloadableComponent<RailProps>> | undefined;
+    rail?.preload?.().catch(() => {});
+  }
+}