webmail-client/frontend/src/App.tsx

import { useQueryClient } from "@tanstack/react-query";
import { useEffect } from "react";
import { Navigate, Route, Routes, useLocation } from "react-router-dom";

import { useMe } from "./lib/auth";
import { connectWs } from "./lib/ws";
import { PluginPage } from "./plugins/PluginPage";
import { ComposeWindow } from "./routes/ComposeWindow";
import { Login } from "./routes/Login";
import { MailLayout } from "./routes/MailLayout";
import { Register } from "./routes/Register";
import { Settings } from "./routes/settings/Settings";
import { AccountWizard } from "./routes/wizard/AccountWizard";

function RequireAuth({ children }: { children: JSX.Element }) {
  const { data, isLoading, isError } = useMe();
  const location = useLocation();
  const queryClient = useQueryClient();

  useEffect(() => {
    if (!data) return;
    return connectWs(queryClient);
  }, [data, queryClient]);

  if (isLoading) {
    return <div className="p-8 text-gray-500">Loading…</div>;
  }
  if (isError || !data) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return children;
}

export function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
      <Route
        path="/mail/*"
        element={
          <RequireAuth>
            <MailLayout />
          </RequireAuth>
        }
      />
      <Route
        path="/compose/:draftId"
        element={
          <RequireAuth>
            <ComposeWindow />
          </RequireAuth>
        }
      />
      <Route
        path="/p/*"
        element={
          <RequireAuth>
            <PluginPage />
          </RequireAuth>
        }
      />
      <Route
        path="/settings/accounts/new"
        element={
          <RequireAuth>
            <AccountWizard />
          </RequireAuth>
        }
      />
      <Route
        path="/settings/:section?"
        element={
          <RequireAuth>
            <Settings />
          </RequireAuth>
        }
      />
      <Route path="*" element={<Navigate to="/mail" replace />} />
    </Routes>
  );
}