perf: route- and modal-level code splitting (React.lazy)

The whole app shipped in one bundle, so the logged-out landing and every page
pulled all module code. Split into lazy chunks:
- main.tsx: lazy App + the public leaves (WatchPage, Privacy, Terms), so a
  public /watch share link never downloads the authenticated app.
- App.tsx: each module page (Feed, Channels, Playlists, Stats, Scheduler,
  Config, Users, Settings, Notifications, Messages, Downloads, ChannelPage) and
  the About/ReleaseNotes/Onboarding modals load on demand behind <Suspense>.
- Heavy modals lazy in their parents: PlayerModal (Feed, Playlists),
  DownloadDialog (DownloadButton — kept out of the feed chunk), and the
  VideoEditor/ShareDialog/ProfileEditor (DownloadCenter).
- Extracted focusAccessRequestsTab + the tab constants to lib/adminUsersTab so
  callers can pre-select the admin tab without statically importing the now
  lazy-loaded AdminUsers page (which would defeat the split).

Build now emits ~25 chunks. Landing no longer downloads any module code
(~350 KB deferred); dev landing Perf 93->95. Verified in a real browser: every
page + the video editor load with no console errors.

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
@@ -40,36 +40,43 @@ import {
 } from "./lib/storage";
 import { useConfirm } from "./components/ConfirmProvider";
 import type { PrefsController } from "./components/SettingsPanel";
+import type { ChannelStatusFilter, ChannelsView } from "./components/Channels";
+// Persistent shell — always mounted, so eagerly imported.
 import Welcome from "./components/Welcome";
 import SetupWizard from "./components/SetupWizard";
 import Header from "./components/Header";
 import NavSidebar from "./components/NavSidebar";
 import Sidebar from "./components/Sidebar";
-import Feed from "./components/Feed";
-import ChannelPage from "./components/ChannelPage";
 import BackToTop from "./components/BackToTop";
-import Channels, { type ChannelStatusFilter, type ChannelsView } from "./components/Channels";
-import Playlists from "./components/Playlists";
-import Stats from "./components/Stats";
-import Scheduler from "./components/Scheduler";
-import ConfigPanel from "./components/ConfigPanel";
-import AdminUsers, { focusAccessRequestsTab } from "./components/AdminUsers";
-import SettingsPanel from "./components/SettingsPanel";
-import NotificationsPanel from "./components/NotificationsPanel";
-import Messages from "./components/Messages";
-import DownloadCenter from "./components/DownloadCenter";
-import { setNavigator } from "./lib/nav";
 import ChatDock from "./components/ChatDock";
-import OnboardingWizard from "./components/OnboardingWizard";
-import { shouldAutoOpenOnboarding } from "./lib/onboarding";
 import Toaster from "./components/Toaster";
 import ErrorDialog from "./components/ErrorDialog";
-import About from "./components/About";
-import ReleaseNotes from "./components/ReleaseNotes";
 import VersionBanner from "./components/VersionBanner";
 import DemoBanner from "./components/DemoBanner";
+import { setNavigator } from "./lib/nav";
+import { focusAccessRequestsTab } from "./lib/adminUsersTab";
+import { shouldAutoOpenOnboarding } from "./lib/onboarding";
 import { CURRENT_VERSION } from "./lib/releaseNotes";
 
+// Route-level code splitting: each module page (and the heavier modals) is its own lazy chunk,
+// so the initial load — and the logged-out landing — pulls only the shell, and admin-only pages
+// never reach non-admins. All are rendered inside a <Suspense> boundary below.
+const Feed = lazy(() => import("./components/Feed"));
+const ChannelPage = lazy(() => import("./components/ChannelPage"));
+const Channels = lazy(() => import("./components/Channels"));
+const Playlists = lazy(() => import("./components/Playlists"));
+const Stats = lazy(() => import("./components/Stats"));
+const Scheduler = lazy(() => import("./components/Scheduler"));
+const ConfigPanel = lazy(() => import("./components/ConfigPanel"));
+const AdminUsers = lazy(() => import("./components/AdminUsers"));
+const SettingsPanel = lazy(() => import("./components/SettingsPanel"));
+const NotificationsPanel = lazy(() => import("./components/NotificationsPanel"));
+const Messages = lazy(() => import("./components/Messages"));
+const DownloadCenter = lazy(() => import("./components/DownloadCenter"));
+const OnboardingWizard = lazy(() => import("./components/OnboardingWizard"));
+const About = lazy(() => import("./components/About"));
+const ReleaseNotes = lazy(() => import("./components/ReleaseNotes"));
+
 const DEFAULT_FILTERS: FeedFilters = {
   tags: [],
   tagMode: "or",
@@ -656,6 +663,11 @@ export default function App() {
     );
   if (!meQuery.data) return <Welcome />;
 
+  // Shown briefly while a lazy page/module chunk loads (first visit to that page only).
+  const pageFallback = (
+    <div className="flex-1 grid place-items-center text-muted">{t("common.loading")}</div>
+  );
+
   return (
     <div className="h-screen flex bg-bg text-fg">
       <NavSidebar
@@ -690,15 +702,17 @@ export default function App() {
       )}
       <div className="relative flex-1 min-w-0 flex flex-col">
         {channelView ? (
-          <ChannelPage
-            key={channelView.id}
-            channelId={channelView.id}
-            initialName={channelView.name}
-            me={meQuery.data!}
-            view={view}
-            onBack={closeChannel}
-            onOpenChannel={openChannel}
-          />
+          <Suspense fallback={pageFallback}>
+            <ChannelPage
+              key={channelView.id}
+              channelId={channelView.id}
+              initialName={channelView.name}
+              me={meQuery.data!}
+              view={view}
+              onBack={closeChannel}
+              onOpenChannel={openChannel}
+            />
+          </Suspense>
         ) : (
           <>
         <Header
@@ -711,6 +725,7 @@ export default function App() {
         {meQuery.data!.is_demo && <DemoBanner />}
         <VersionBanner onOpen={() => openReleaseNotes(CURRENT_VERSION)} />
           <main className="flex-1 min-w-0 overflow-y-auto">
+          <Suspense fallback={pageFallback}>
           {page === "channels" ? (
             <Channels
               canWrite={meQuery.data!.can_write}
@@ -768,6 +783,7 @@ export default function App() {
               onOpenChannel={openChannel}
             />
           )}
+          </Suspense>
           </main>
           </>
         )}
@@ -777,21 +793,23 @@ export default function App() {
         <Toaster />
       </div>
       {meQuery.data && !meQuery.data.is_demo && <ChatDock meId={meQuery.data.id} />}
-      {wizardOpen && meQuery.data && !meQuery.data.is_demo && (
-        <OnboardingWizard me={meQuery.data} onClose={() => setWizardOpen(false)} />
-      )}
-      {aboutOpen && (
-        <About
-          onClose={() => setAboutOpen(false)}
-          onOpenReleaseNotes={() => {
-            setAboutOpen(false);
-            openReleaseNotes();
-          }}
-        />
-      )}
-      {notesOpen && (
-        <ReleaseNotes onClose={() => setNotesOpen(false)} highlight={notesHighlight} />
-      )}
+      <Suspense fallback={null}>
+        {wizardOpen && meQuery.data && !meQuery.data.is_demo && (
+          <OnboardingWizard me={meQuery.data} onClose={() => setWizardOpen(false)} />
+        )}
+        {aboutOpen && (
+          <About
+            onClose={() => setAboutOpen(false)}
+            onOpenReleaseNotes={() => {
+              setAboutOpen(false);
+              openReleaseNotes();
+            }}
+          />
+        )}
+        {notesOpen && (
+          <ReleaseNotes onClose={() => setNotesOpen(false)} highlight={notesHighlight} />
+        )}
+      </Suspense>
       <ErrorDialog />
       {/* Re-binds to the active page's scroll container on navigation (page or channel change). */}
       <BackToTop dep={channelView ? `chan:${channelView.id}` : page} />