ui/_docs/02_document/modules/src__App-and-main.md

Modules: src/App.tsx + src/main.tsx

Compact combined doc — both modules are tiny, top-of-tree wiring only.

src/main.tsx (entry)

Mounts the React tree:

• Calls createRoot(document.getElementById('root')!) — the non-null assertion will throw at boot if <div id="root"> is missing from index.html (it is present).
• Wraps in <StrictMode> (double-renders effects in dev) and <BrowserRouter> (HTML5 history).
• Imports ./i18n/i18n for side effects only — that file calls i18n.init({...}) at import time. See src__i18n__i18n.md for the locked-language finding (lng:'en' hardcoded).
• Imports ./index.css — the Tailwind 4 stylesheet plus the az-* token definitions consumed by every component.

No props, no state, nothing testable.

src/App.tsx (route tree)

Top-level routes:

Path	Element	Notes
/login	<LoginPage />	Public; outside auth + flight providers.
/*	<ProtectedRoute><FlightProvider><Header />...nested Routes...</FlightProvider></ProtectedRoute>	Auth-gated container. Mounts Header once across all child routes.
/flights	<FlightsPage />	(default redirect target)
/annotations	<AnnotationsPage />
/dataset	<DatasetPage />
/admin	<AdminPage />	(no extra role gate — see Findings)
/settings	<SettingsPage />	(no extra role gate — see Findings)
*	<Navigate to="/flights" replace />	catch-all under the protected branch.

Outside everything: <AuthProvider>. So:

• LoginPage can call useAuth().
• FlightProvider only mounts after ProtectedRoute has confirmed an authenticated user — FlightContext queries /api/flights only once we know we're logged in. This avoids the 401-then-401-loop on first paint.

Layout: flex flex-col h-screen — header at top, content fills the rest with overflow-hidden. Each page owns its own scroll/resize.

Findings carried into Step 4 / 6

1. /admin is reachable by users without ADM permission (defence-in-depth gap): App.tsx:30 route has no permission check. Header.tsx:88 filters menu visibility via hasPermission('ADM'), but typing /admin directly bypasses the menu hide. Users without ADM see a partially-working Admin page until the server returns 403 on each write. Per parent ../../../../_docs/00_roles_permissions.md only Admin / ApiAdmin holds ADM. PRIORITY for Step 4. Note: /settings is similarly ungated, but _docs/00_roles_permissions.md does NOT define a SETTINGS permission code — settings calls land on /api/admin/... endpoints which are server-enforced by ADM via 403. Open question for Step 6: should /settings also be ADM-gated client-side, or is the per-user-settings subset (/api/admin/users/me/settings) intended to be reachable by non-admins?
2. No <ErrorBoundary> wrapping the protected branch: a render error inside any page crashes the whole tree. Step 4 / Step 8.
3. No lazy-loading of route chunks (React.lazy / Suspense). The whole app bundles in one chunk. For now the bundle is small enough that this is acceptable — Step 8 candidate when bundle size grows.
4. Default redirect target is /flights even for users whose primary task is annotations or dataset. Could be a per-role default landing page. Step 6.

(Earlier draft of this doc claimed there was no mobile bottom-nav — that was incorrect. Header.tsx:113-129 does render a bottom-nav at < sm. The whole-app flex flex-col h-screen layout is the same at all breakpoints by design.)

Tests

None.

Cross-doc references

• src__main_tsx (this doc) ← entry; depended-upon by all others transitively.
• src/auth/AuthContext.tsx, src/auth/ProtectedRoute.tsx — already documented.
• src/components/FlightContext.tsx, src/components/Header.tsx — already documented.
• Parent roles spec: ../../../../_docs/00_roles_permissions.md.