thread-master/apps/web/src/App.tsx

import { lazy, Suspense } from "react";
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import { AuthProvider } from "./auth/AuthContext";
import { RequireAdmin } from "./auth/RequireAdmin";
import { RequireAuth } from "./auth/RequireAuth";
import { AppShell } from "./components/layout/AppShell";
import { DataProvider } from "./data/DataContext";
import { I18nProvider } from "./i18n/I18nContext";
import { ThemeProvider } from "./theme/ThemeContext";
const AdminUsersPage = lazy(() => import("./pages/AdminUsersPage").then((m) => ({ default: m.AdminUsersPage })));
const BrandsPage = lazy(() => import("./pages/BrandsPage").then((m) => ({ default: m.BrandsPage })));
const CrewPage = lazy(() => import("./pages/CrewPage").then((m) => ({ default: m.CrewPage })));
const JobDetailPage = lazy(() => import("./pages/JobDetailPage").then((m) => ({ default: m.JobDetailPage })));
const InsightsPage = lazy(() => import("./pages/InsightsPage").then((m) => ({ default: m.InsightsPage })));
const InvitePage = lazy(() => import("./pages/InvitePage").then((m) => ({ default: m.InvitePage })));
const JobsPage = lazy(() => import("./pages/JobsPage").then((m) => ({ default: m.JobsPage })));
const ForgotPasswordPage = lazy(() => import("./pages/ForgotPasswordPage").then((m) => ({ default: m.ForgotPasswordPage })));
const LoginPage = lazy(() => import("./pages/LoginPage").then((m) => ({ default: m.LoginPage })));
const OutboxDetailPage = lazy(() => import("./pages/OutboxDetailPage").then((m) => ({ default: m.OutboxDetailPage })));
const OutboxPage = lazy(() => import("./pages/OutboxPage").then((m) => ({ default: m.OutboxPage })));
const ProfilePage = lazy(() => import("./pages/ProfilePage").then((m) => ({ default: m.ProfilePage })));
const ResetPasswordPage = lazy(() => import("./pages/ResetPasswordPage").then((m) => ({ default: m.ResetPasswordPage })));
const ScoutPage = lazy(() => import("./pages/ScoutPage").then((m) => ({ default: m.ScoutPage })));
const SettingsPage = lazy(() => import("./pages/SettingsPage").then((m) => ({ default: m.SettingsPage })));
const PlanCheckoutPage = lazy(() => import("./pages/PlanCheckoutPage").then((m) => ({ default: m.PlanCheckoutPage })));
const PlansPage = lazy(() => import("./pages/PlansPage").then((m) => ({ default: m.PlansPage })));
const UsagePage = lazy(() => import("./pages/UsagePage").then((m) => ({ default: m.UsagePage })));
const StudioPage = lazy(() => import("./pages/StudioPage").then((m) => ({ default: m.StudioPage })));
const VerifyEmailPage = lazy(() => import("./pages/VerifyEmailPage").then((m) => ({ default: m.VerifyEmailPage })));
const WizardPage = lazy(() => import("./pages/studio/WizardPage").then((m) => ({ default: m.WizardPage })));
const TodayPage = lazy(() => import("./pages/TodayPage").then((m) => ({ default: m.TodayPage })));

export default function App() {
  return (
    <ThemeProvider>
      <I18nProvider>
        <DataProvider>
          <AuthProvider>
            <BrowserRouter>
            <Suspense fallback={<div className="hb-route-loading" role="status" aria-label="Loading" />}>
            <Routes>
              <Route path="/login" element={<LoginPage />} />
              <Route path="/forgot-password" element={<ForgotPasswordPage />} />
              <Route path="/reset-password" element={<ResetPasswordPage />} />
              <Route path="/verify-email" element={<VerifyEmailPage />} />
              <Route
                path="/app"
                element={
                  <RequireAuth>
                    <AppShell />
                  </RequireAuth>
                }
              >
                <Route index element={<Navigate to="today" replace />} />
                <Route path="today" element={<TodayPage />} />
                <Route path="crew" element={<CrewPage />} />
                <Route path="studio" element={<StudioPage />} />
                <Route path="studio/new" element={<WizardPage />} />
                <Route path="studio/:playId" element={<WizardPage />} />
                <Route path="outbox" element={<OutboxPage />} />
                <Route path="outbox/:id" element={<OutboxDetailPage />} />
                <Route path="scout" element={<ScoutPage />} />
                <Route path="brands" element={<BrandsPage />} />
                <Route path="settings" element={<SettingsPage />} />
                <Route path="profile" element={<ProfilePage />} />
                <Route path="invite" element={<InvitePage />} />
                <Route
                  path="users"
                  element={
                    <RequireAdmin>
                      <AdminUsersPage />
                    </RequireAdmin>
                  }
                />
                <Route path="usage" element={<UsagePage />} />
                <Route path="usage/plans" element={<PlansPage />} />
                <Route path="usage/checkout" element={<PlanCheckoutPage />} />
                <Route path="jobs" element={<JobsPage />} />
                <Route path="jobs/:id" element={<JobDetailPage />} />
                <Route path="insights" element={<InsightsPage />} />
              </Route>
              <Route path="/" element={<Navigate to="/app/today" replace />} />
              <Route path="*" element={<Navigate to="/app/today" replace />} />
            </Routes>
            </Suspense>
            </BrowserRouter>
          </AuthProvider>
        </DataProvider>
      </I18nProvider>
    </ThemeProvider>
  );
}