Adds front-end set-up

frontend/src/main.tsx

@@ -0,0 +1,52 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { RouterProvider } from '@tanstack/react-router';
+import './index.css';
+import './i18n/config';
+import { AuthProvider } from '@/contexts/AuthProvider';
+import { useAuth } from '@/contexts/auth-context';
+import { Toaster } from '@/components/ui/sonner';
+import { router } from '@/router';
+
+function BootstrapSplash() {
+    return (
+        <div className="flex min-h-svh items-center justify-center text-muted-foreground">
+            <span className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+        </div>
+    );
+}
+
+/**
+ * Renders the router only once the initial silent refresh has settled, so the
+ * route guards see a definitive auth state rather than the transient loading one.
+ */
+function InnerApp() {
+    const auth = useAuth();
+    if (auth.status === 'loading') {
+        return <BootstrapSplash />;
+    }
+    return <RouterProvider router={router} context={{ auth }} />;
+}
+
+async function enableMocking(): Promise<void> {
+    if (import.meta.env.VITE_ENABLE_MSW !== 'true') {
+        return;
+    }
+    const { worker } = await import('@/mocks/browser');
+    await worker.start({ onUnhandledRequest: 'bypass' });
+}
+
+void enableMocking().then(() => {
+    const rootElement = document.getElementById('root');
+    if (rootElement === null) {
+        throw new Error('Root element #root not found');
+    }
+    createRoot(rootElement).render(
+        <StrictMode>
+            <AuthProvider>
+                <InnerApp />
+                <Toaster />
+            </AuthProvider>
+        </StrictMode>,
+    );
+});