controller-v2/client/src/App.tsx

import { Toaster } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { Route, Switch, Router } from "wouter";
import ErrorBoundary from "./components/ErrorBoundary";
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 EQPage from "./pages/EQPage";
import EffectsPage from "./pages/EffectsPage";
import BluetoothPage from "./pages/BluetoothPage";
import DspPage from "./pages/DspPage";
import DisplayPage from "./pages/DisplayPage";
import SystemPage from "./pages/SystemPage";
import IOPage from "./pages/IOPage";
import VUPage from "./pages/VUPage";
import SelectPage from "./pages/SelectPage";
import AIPage from "./pages/AIPage";
import CommunityPage from "./pages/CommunityPage";

function AppRouter() {
  return (
    <Switch>
      <Route path="/" component={Home} />
      <Route path="/dashboard" component={Dashboard} />
      <Route path="/audio" component={AudioPage} />
      <Route path="/eq" component={EQPage} />
      <Route path="/effects" component={EffectsPage} />
      <Route path="/bluetooth" component={BluetoothPage} />
      <Route path="/dsp" component={DspPage} />
      <Route path="/display" component={DisplayPage} />
      <Route path="/system" component={SystemPage} />
      <Route path="/io" component={IOPage} />
      <Route path="/vu" component={VUPage} />
      <Route path="/select" component={SelectPage} />
      <Route path="/ai" component={AIPage} />
      <Route path="/community" component={CommunityPage} />
      <Route path="/404" component={NotFound} />
      <Route component={NotFound} />
    </Switch>
  );
}

function App() {
  return (
    <ErrorBoundary>
      <ThemeProvider defaultTheme="dark">
        <DeviceProvider>
          <TooltipProvider>
            <Toaster />
            <Router base="/x8/v2/public">
              {/* Desktop: narrow shell centered in the browser with side gutters */}
              <div className="min-h-dvh bg-[#0d1117]">
                <div className="mx-auto min-h-dvh w-full max-w-full lg:max-w-[min(1180px,calc(100vw-3rem))]">
                  <AppRouter />
                </div>
              </div>
            </Router>
          </TooltipProvider>
        </DeviceProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
}

export default App;