feat(app): the module registry drives the render (S6b DoD)

Replace App's page-render ternary and the three side-rail page conditionals with
a data-driven lookup: components/moduleRegistry maps each page to a prop-free
content component (+ optional side rail + shell fadeTop), and App renders
PAGE_CONTENT[page]/PAGE_RAIL[page] gated by moduleDef(page).gate (an unreachable
gated page falls back to the feed, as the old ternary did). Content modules and
the two rails are now prop-free: they read `me` via the new useMe() hook and
their module-local state from the scoped providers; FeedPage/MessagesPage are the
only wrappers (they wire the global feed scope / meId). App.tsx 796->431 lines,
zero `page===X` chrome conditionals — closes the Platform epic DoD. (Platform S6b.3)

frontend/src/components/AdminUsers.tsx

@@ -10,6 +10,7 @@ import { Section } from "./ui/form";
 import { useConfirm } from "./ConfirmProvider";
 import Tabs, { usePersistedTab } from "./Tabs";
 import { PageToolbar } from "./PageShell";
+import { useMe } from "../lib/useMe";
 
 // Admin-only user & access management: roles, access requests (the Invite whitelist), and the
 // demo whitelist + reset. Each section is its own tab (persisted across reloads); the Access tab
@@ -17,7 +18,8 @@ import { PageToolbar } from "./PageShell";
 // (The tab key + a "focus the Access tab" helper live in lib/adminUsersTab so callers can
 // pre-select the tab without importing this lazy-loaded page — see that file.)
 
-export default function AdminUsers({ me }: { me: Me }) {
+export default function AdminUsers() {
+  const me = useMe();
   const { t } = useTranslation();
   const [tab, setTab] = usePersistedTab(ADMIN_USERS_TAB_KEY, "roles");
   const tabs = [

frontend/src/components/Channels.tsx

@@ -15,7 +15,7 @@ import {
   UserMinus,
   X,
 } from "lucide-react";
-import { api, type ManagedChannel, type Me, type Tag } from "../lib/api";
+import { api, type ManagedChannel, type Tag } from "../lib/api";
 import { notifyYouTubeActionError } from "../lib/youtubeErrors";
 import { accountKey, LS } from "../lib/storage";
 import { useDismiss } from "../lib/useDismiss";
@@ -34,6 +34,7 @@ import { useChannels, useChannelsActions } from "./ChannelsProvider";
 import { useNavigationActions } from "./NavigationProvider";
 import { useFeedFilters, useFeedFiltersActions } from "./FeedFiltersProvider";
 import { useWizard } from "./WizardProvider";
+import { useMe } from "../lib/useMe";
 
 export type ChannelsView = "subscribed" | "discovery" | "blocked";
 
@@ -46,7 +47,8 @@ const STATUS_FILTERS: { id: ChannelStatusFilter; labelKey: string }[] = [
   { id: "hidden", labelKey: "channels.filters.hidden" },
 ];
 
-export default function Channels({ me }: { me: Me }) {
+export default function Channels() {
+  const me = useMe();
   const canWrite = me.can_write;
   const isAdmin = me.role === "admin";
   // "Connect YouTube" onboarding lives in WizardProvider (a notify action / a mutation-error CTA).

frontend/src/components/DownloadCenter.tsx

@@ -27,7 +27,8 @@ const VideoEditor = lazy(() => import("./VideoEditor"));
 const ShareDialog = lazy(() => import("./ShareDialog"));
 import { useConfirm } from "./ConfirmProvider";
 import { useLiveQuery } from "../lib/useLiveQuery";
-import { api, type DownloadJob, type Me } from "../lib/api";
+import { useMe } from "../lib/useMe";
+import { api, type DownloadJob } from "../lib/api";
 import { invalidateDownloads } from "../lib/downloads";
 import { notify } from "../lib/notifications";
 import { formatBytes, formatDuration, formatEta, formatSpeed } from "../lib/format";
@@ -539,7 +540,8 @@ function AdminSystem() {
 
 // --- Main -----------------------------------------------------------------------------------
 
-export default function DownloadCenter({ me }: { me: Me }) {
+export default function DownloadCenter() {
+  const me = useMe();
   const { t } = useTranslation();
   const qc = useQueryClient();
   const confirm = useConfirm();

frontend/src/components/Playlists.tsx

@@ -31,7 +31,7 @@ import {
   X,
   Youtube,
 } from "lucide-react";
-import { api, type Me, type Video } from "../lib/api";
+import { api, type Video } from "../lib/api";
 import { formatDuration } from "../lib/format";
 import { notify } from "../lib/notifications";
 import { notifyYouTubeActionError } from "../lib/youtubeErrors";
@@ -41,6 +41,7 @@ import UndoToolbar from "./UndoToolbar";
 import { PageToolbar } from "./PageShell";
 import { useConfirm } from "./ConfirmProvider";
 import { usePlaylists, usePlaylistsActions } from "./PlaylistsProvider";
+import { useMe } from "../lib/useMe";
 
 type SortKey = "manual" | "title" | "duration" | "channel";
 type SortDir = "asc" | "desc";
@@ -179,7 +180,8 @@ function Row({
   );
 }
 
-export default function Playlists({ me }: { me: Me }) {
+export default function Playlists() {
+  const me = useMe();
   const canWrite = me.can_write;
   // The selected playlist lives in PlaylistsProvider, shared with the PlaylistsRail (which owns the
   // list + its rail controls). This detail pane reacts to the selection.

frontend/src/components/PlaylistsRail.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { ArrowDown, ArrowUp, ListVideo, Pin, Plus, RefreshCw, Youtube } from "lucide-react";
-import { api, type Me, type Playlist } from "../lib/api";
+import { api, type Playlist } from "../lib/api";
 import { formatDuration } from "../lib/format";
 import { notify } from "../lib/notifications";
 import { notifyYouTubeActionError } from "../lib/youtubeErrors";
@@ -11,6 +11,7 @@ import { defaultLayout, type PanelLayout } from "../lib/panelLayout";
 import SidePanel from "./SidePanel";
 import PanelGroups, { type PanelItem } from "./PanelGroups";
 import { usePlaylists, usePlaylistsActions } from "./PlaylistsProvider";
+import { useMe } from "../lib/useMe";
 
 type PlSort = { key: "custom" | "name" | "count" | "duration"; dir: "asc" | "desc"; dirtyFirst: boolean };
 const PL_SORT_DEFAULT: PlSort = { key: "custom", dir: "asc", dirtyFirst: false };
@@ -20,19 +21,17 @@ const PL_SORT_DEFAULT: PlSort = { key: "custom", dir: "asc", dirtyFirst: false }
 // controls (sort / new / sync); the selected playlist is App state so the module's detail pane
 // (Playlists.tsx) reacts to it. Grouped into two islands: "manage" and the playlist list.
 export default function PlaylistsRail({
-  me,
   layout,
   setLayout,
   collapsed,
   onToggleCollapse,
 }: {
-  me: Me;
   layout: PanelLayout;
   setLayout: (l: PanelLayout) => void;
   collapsed: boolean;
   onToggleCollapse: () => void;
 }) {
-  const canWrite = me.can_write;
+  const canWrite = useMe().can_write;
   // The name filter + the selected playlist live in PlaylistsProvider (shared with the header search
   // box and the Playlists detail pane); this rail owns the list query + its own controls.
   const { search, selectedId } = usePlaylists();

frontend/src/components/SettingsPanel.tsx

@@ -13,6 +13,7 @@ import { type SaveState } from "./ui/DraftSaveBar";
 import { useConfirm } from "./ConfirmProvider";
 import { useWizard } from "./WizardProvider";
 import { usePrefs } from "./PrefsProvider";
+import { useMe } from "../lib/useMe";
 
 // The Settings page edits server-persisted preferences. Each change applies locally for instant
 // preview AND auto-saves (debounced) — no draft, no Save button; a small indicator flashes the
@@ -41,7 +42,8 @@ const TABS: { id: TabId; icon: typeof Monitor }[] = [
 // Settings as a page (Design B): rendered in the main content area, not an overlay. It keeps
 // the frosted `.glass` surface so it still refracts the ambient backdrop. The page title is
 // shown by the Header; the tab rail stays as in-page sub-navigation.
-export default function SettingsPanel({ me }: { me: Me }) {
+export default function SettingsPanel() {
+  const me = useMe();
   const { t } = useTranslation();
   // The editable prefs (theme/perf/hints/notifications + save state) live in PrefsProvider.
   const prefs = usePrefs();

frontend/src/components/Sidebar.tsx

@@ -15,6 +15,7 @@ import PanelGroups, { type PanelItem } from "./PanelGroups";
 import ChannelPicker from "./ChannelPicker";
 import { useFeedFilters, useFeedFiltersActions } from "./FeedFiltersProvider";
 import { useChannelsActions } from "./ChannelsProvider";
+import { useMe } from "../lib/useMe";
 
 // Filter ids; display labels resolved at render time via t("sidebar.sort.<id>") etc.
 const DATE_PRESETS: { days: number; key: string }[] = [
@@ -64,17 +65,16 @@ function TagChip({
 export default function Sidebar({
   layout,
   setLayout,
-  isDemo = false,
   collapsed,
   onToggleCollapse,
 }: {
   layout: PanelLayout;
   setLayout: (l: PanelLayout) => void;
-  isDemo?: boolean;
   collapsed: boolean;
   onToggleCollapse: () => void;
 }) {
   const { t } = useTranslation();
+  const isDemo = useMe().is_demo;
   const filters = useFeedFilters();
   const { setFilters } = useFeedFiltersActions();
   // "Focus this channel in the manager" (from the tag manager here) lives in ChannelsProvider.

frontend/src/components/Stats.tsx

@@ -8,6 +8,7 @@ import { notify } from "../lib/notifications";
 import { LS, useAccountPersistedState } from "../lib/storage";
 import Tooltip from "./Tooltip";
 import { Section, SettingRow } from "./ui/form";
+import { useMe } from "../lib/useMe";
 
 const RANGES = [7, 30, 90] as const;
 type StatsTab = "overview" | "system";
@@ -15,7 +16,8 @@ type StatsTab = "overview" | "system";
 // Usage & stats page. "Overview" is per-user (sync status + your own API usage + actions);
 // "System" is the admin-only instance-wide quota dashboard + background-sync control. The
 // per-user content used to live in Settings → Sync; it moved here so Settings stays config-only.
-export default function Stats({ me }: { me: Me }) {
+export default function Stats() {
+  const me = useMe();
   const { t } = useTranslation();
   const isAdmin = me.role === "admin";
   const [tabRaw, setTab] = useAccountPersistedState(LS.statsTab, "overview");

frontend/src/components/moduleRegistry.tsx

@@ -0,0 +1,121 @@
+import { lazy, type ComponentType } from "react";
+import type { Page } from "../lib/urlState";
+import type { PanelId, PanelLayout } from "../lib/panelLayout";
+import { useMe } from "../lib/useMe";
+import { useFeedFilters, useFeedFiltersActions } from "./FeedFiltersProvider";
+import { useFeedView, useFeedViewActions } from "./FeedViewProvider";
+import { useNavigation, useNavigationActions } from "./NavigationProvider";
+import Sidebar from "./Sidebar";
+import PlaylistsRail from "./PlaylistsRail";
+
+// The RENDER half of the module registry: which component (and side rail) each page renders. The
+// metadata half — nav order, label, icon, gate — lives in lib/modules.ts (imported by NavSidebar /
+// Header / App's gate check). Together they let App drive the whole shell from `page` alone, with no
+// `page === X` chrome conditionals.
+//
+// Every content entry is a PROP-FREE component: it reads `me` from useMe() and its module-local state
+// from the scoped providers, so App renders `<Content />` uniformly. The two that need per-render
+// wiring get a thin wrapper here (FeedPage supplies the GLOBAL feed scope; the channel page threads
+// 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 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"));
+
+// 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.)
+function FeedPage() {
+  const me = useMe();
+  const filters = useFeedFilters();
+  const { setFilters } = useFeedFiltersActions();
+  const view = useFeedView();
+  const { setView } = useFeedViewActions();
+  const { ytSearch } = useNavigation();
+  const { enterYtSearch, exitYtSearch } = useNavigationActions();
+  return (
+    <Feed
+      filters={filters}
+      setFilters={setFilters}
+      view={view}
+      setView={setView}
+      canRead={me.can_read}
+      isDemo={me.is_demo}
+      ytSearch={ytSearch}
+      onYtSearch={enterYtSearch}
+      onExitYtSearch={exitYtSearch}
+    />
+  );
+}
+
+function MessagesPage() {
+  const me = useMe();
+  return (
+    <div className="p-4 max-w-3xl w-full mx-auto">
+      <Messages meId={me.id} />
+    </div>
+  );
+}
+
+export type PageDef = {
+  // Prop-free by construction: reads `me` + module state from hooks/providers.
+  Component: ComponentType;
+  // 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;
+};
+
+// page id → the component App renders in the content column (+ its shell chrome config).
+export const PAGE_CONTENT: Record<Page, PageDef> = {
+  feed: { Component: FeedPage },
+  channels: { Component: Channels, fadeTop: false },
+  playlists: { Component: Playlists },
+  plex: { Component: PlexBrowse },
+  notifications: { Component: NotificationsPanel },
+  messages: { Component: MessagesPage },
+  downloads: { Component: DownloadCenter },
+  stats: { Component: Stats },
+  scheduler: { Component: Scheduler },
+  config: { Component: ConfigPanel },
+  users: { Component: AdminUsers },
+  audit: { Component: AuditLog, fadeTop: false },
+  settings: { Component: SettingsPanel },
+};
+
+// The uniform side-rail contract — shell layout/collapse only; the rail reads its module state from
+// its provider and `me` from useMe().
+type RailProps = {
+  layout: PanelLayout;
+  setLayout: (l: PanelLayout) => void;
+  collapsed: boolean;
+  onToggleCollapse: () => void;
+};
+
+// Which collapse flag a rail uses (feed + plex share the filter rail's flag; playlists has its own).
+type RailCollapseKey = "filter" | "playlists";
+
+export type RailDef = {
+  Rail: ComponentType<RailProps>;
+  // The persisted panel-layout record this rail edits (App owns the panelLayouts map).
+  panelId: PanelId;
+  collapse: RailCollapseKey;
+};
+
+// page id → its side rail (only the three pages that have one). App renders it in the rail slot.
+export const PAGE_RAIL: Partial<Record<Page, RailDef>> = {
+  feed: { Rail: Sidebar, panelId: "feed", collapse: "filter" },
+  plex: { Rail: PlexSidebar, panelId: "plex", collapse: "filter" },
+  playlists: { Rail: PlaylistsRail, panelId: "playlists", collapse: "playlists" },
+};