batchCooking/apps/web/src/main.tsx

import { Capacitor } from "@capacitor/core";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, HashRouter } from "react-router-dom";
import { App } from "./App";
import { setTokenStore } from "./api/client";
import { AuthProvider } from "./features/auth/AuthContext";
import { ThemeProvider } from "./features/theme/ThemeContext";
import { TourProvider } from "./features/tour/TourContext";
// Side-effect import: initializes the i18next instance before anything
// renders (react-i18next reads it via context under the hood). See i18n/i18n.ts.
import "./i18n/i18n";
// Global stylesheet (theme tokens + minimal reset) — the only .scss import
// that isn't colocated with a specific component/page. See styles/global.scss.
import "./styles/global.scss";

// `BrowserRouter` needs a server that rewrites deep links back to
// `index.html`; a packaged Capacitor app serves `dist/` straight off the
// WebView's local origin with no such rewrite, so a direct hit on a deep
// route (or a reload) would 404. `HashRouter` keeps the whole route in the
// fragment — zero server cooperation needed — and the URL bar is invisible
// in the native shell anyway. Web is untouched: `isNativePlatform()` is
// `false` in every browser (and in Cypress).
const isNative = Capacitor.isNativePlatform();
const Router = isNative ? HashRouter : BrowserRouter;

/**
 * On native, swap the no-op token store for the `@capacitor/preferences`
 * one *before* the first render — `AuthProvider` fires `GET /auth/me` on
 * mount and it must carry the `Authorization` header. Lazily imported so
 * `@capacitor/preferences` never enters the web bundle; web takes no
 * `await` on this path, so rendering isn't deferred.
 */
async function bootstrap() {
  if (isNative) {
    const { capacitorTokenStore } = await import("./api/capacitor-token-store");
    setTokenStore(capacitorTokenStore);
  }

  const rootElement = document.getElementById("root");
  if (!rootElement) {
    throw new Error("Root element not found");
  }

  createRoot(rootElement).render(
    <StrictMode>
      <Router>
        <AuthProvider>
          <ThemeProvider>
            <TourProvider>
              <App />
            </TourProvider>
          </ThemeProvider>
        </AuthProvider>
      </Router>
    </StrictMode>,
  );
}

void bootstrap();