controller-v2/client/src/App.tsx

import { lazy, Suspense, useEffect, useRef } from "react";
import { Toaster } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { Route, Switch, Router, useLocation } from "wouter";
import { useHashLocation } from "wouter/use-hash-location";
import ErrorBoundary from "./components/ErrorBoundary";
import PageLoader from "./components/PageLoader";
import { ThemeProvider } from "./contexts/ThemeContext";
import { DeviceProvider } from "./contexts/DeviceContext";
import Home from "./pages/Home";
import NotFound from "./pages/NotFound";
import Dashboard from "./pages/Dashboard";
import AudioPage from "./pages/AudioPage";
import BluetoothPage from "./pages/BluetoothPage";
import SystemPage from "./pages/SystemPage";
import IOPage from "./pages/IOPage";
import VUPage from "./pages/VUPage";
import SelectPage, { consumeSelectReturnScroll } from "./pages/SelectPage";
import CommunityPage from "./pages/CommunityPage";
import ChangelogPage from "./pages/ChangelogPage";
import { AIDrawerProvider } from "./contexts/AIDrawerContext";
import DesktopAIShell from "./components/DesktopAIShell";
import { appShellColumnClass, appShellOuterClass } from "./lib/appShell";

const EQPage = lazy(() => import("./pages/EQPage"));
const EffectsPage = lazy(() => import("./pages/EffectsPage"));
const AIPage = lazy(() => import("./pages/AIPage"));

function LazyRoute({ children }: { children: React.ReactNode }) {
  return <Suspense fallback={<PageLoader />}>{children}</Suspense>;
}

function AIPageRoute() {
  return (
    <LazyRoute>
      <AIPage />
    </LazyRoute>
  );
}

function EQPageRoute() {
  return (
    <LazyRoute>
      <EQPage />
    </LazyRoute>
  );
}

function EffectsPageRoute() {
  return (
    <LazyRoute>
      <EffectsPage />
    </LazyRoute>
  );
}

/**
 * Restores the calling page's scroll position when returning from /select.
 * The select page is short, so the browser clamps window scroll to 0 while on
 * it; navigateToSelect() captures the offset before navigating and we re-apply
 * it once the calling page (e.g. Effects) has remounted.
 */
function SelectScrollRestore() {
  const [location] = useLocation();
  const prevRef = useRef(location);
  useEffect(() => {
    const prev = prevRef.current;
    prevRef.current = location;
    if (prev !== "/select" || location === "/select") return;
    const y = consumeSelectReturnScroll();
    if (y == null || y <= 0) return;
    // Wait a frame so the returning page has rendered and the document has height.
    requestAnimationFrame(() => window.scrollTo(0, y));
  }, [location]);
  return null;
}

function AppRouter() {
  return (
    <Switch>
      <Route path="/" component={Home} />
      <Route path="/dashboard" component={Dashboard} />
      <Route path="/audio" component={AudioPage} />
      <Route path="/eq" component={EQPageRoute} />
      <Route path="/effects" component={EffectsPageRoute} />
      <Route path="/bluetooth" component={BluetoothPage} />
      <Route path="/system" component={SystemPage} />
      <Route path="/io" component={IOPage} />
      <Route path="/vu" component={VUPage} />
      <Route path="/select" component={SelectPage} />
      <Route path="/ai" component={AIPageRoute} />
      <Route path="/community" component={CommunityPage} />
      <Route path="/changelog" component={ChangelogPage} />
      <Route path="/404" component={NotFound} />
      <Route component={NotFound} />
    </Switch>
  );
}

function App() {
  return (
    <ErrorBoundary>
      <ThemeProvider defaultTheme="dark">
        <DeviceProvider>
          <TooltipProvider>
            <Toaster />
            <Router hook={useHashLocation}>
              <AIDrawerProvider>
                <SelectScrollRestore />
                <div className={appShellOuterClass}>
                  <div className={appShellColumnClass}>
                    <DesktopAIShell>
                      <AppRouter />
                    </DesktopAIShell>
                  </div>
                </div>
              </AIDrawerProvider>
            </Router>
          </TooltipProvider>
        </DeviceProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
}

export default App;