Melhorias de arquitetura no frontend e implementaçao do layout de usuário logado (#156)

## Resumo

Este PR reorganiza o frontend para uma arquitetura orientada a domínio
(DDD), separando responsabilidades por contexto de negócio e reduzindo o
acoplamento entre páginas, componentes, hooks e infraestrutura.

Também implementa o novo layout autenticado da aplicação, com estrutura
fixa de sidebar, header e área principal com scroll isolado.

## Principais mudanças

- Reestruturação do frontend seguindo DDD:
  - `app` para composição da aplicação e rotas
  - `domains/auth` para autenticação
  - `domains/jobs` para vagas
  - `domains/marketing` para landing page
  - `shared` para componentes, hooks, libs e assets reutilizáveis

- Implementação do layout autenticado:
  - Sidebar modular seguindo o design do Figma
  - Header modular seguindo o design do Figma
  - Área principal renderizada via `Outlet`
  - Header e sidebar fixos na tela
  - Scroll aplicado apenas no conteúdo principal

- Ajustes de fluxo:
  - Login e OAuth redirecionam para `/home`
  - Página de vagas renomeada para `JobsPage`
  - Rotas autenticadas organizadas como `/home`, `/vagas` e `/mentoria`

- Melhorias de tema:
- Sidebar e header agora respeitam light/dark mode usando os tokens do
projeto
  - Título do header muda dinamicamente conforme a rota atual

## Validação

- Lint executado com sucesso
- Testes unitários executados com sucesso
- Build de produção executado com sucesso

Author: Benevanio

frontend/ARCHITECTURE.md

@@ -0,0 +1,22 @@
+# Frontend Architecture
+
+The frontend is organized around domain boundaries instead of technical file types.
+
+## Layers
+
+- `src/app`: application composition, providers, routing, and app-level pages.
+- `src/domains/<domain>/domain`: business types and pure rules without React or HTTP.
+- `src/domains/<domain>/application`: React hooks and use-cases that orchestrate domain rules.
+- `src/domains/<domain>/infrastructure`: API gateways and transport-specific code.
+- `src/domains/<domain>/presentation`: pages and components owned by that domain.
+- `src/shared`: reusable UI primitives, assets, hooks, and technical utilities.
+
+## Domains
+
+- `auth`: session state, credentials/OAuth API access, login/register/callback screens.
+- `jobs`: job entities, filtering/deduplication/pagination rules, scraper/job API access, dashboard UI.
+- `marketing`: public landing page sections.
+
+## Import policy
+
+Code should import from `@/app`, `@/domains`, or `@/shared`. Legacy technical folders such as `src/components`, `src/pages`, `src/hooks`, `src/services`, `src/context`, `src/lib`, and `src/types` were removed to keep a single domain-oriented structure.

frontend/components.json

@@ -13,11 +13,11 @@
   "iconLibrary": "lucide",
   "rtl": false,
   "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
+    "components": "@/shared/ui",
+    "utils": "@/shared/lib/utils",
+    "ui": "@/shared/ui",
+    "lib": "@/shared/lib",
+    "hooks": "@/shared/hooks"
   },
   "menuColor": "default",
   "menuAccent": "subtle",

frontend/src/App.tsx

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+import { AppRoutes } from "@/app/AppRoutes";
+import Loading from "@/shared/ui/Loading";
+
+function App() {
+  const [appCarregando, setAppCarregando] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAppCarregando(false);
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (appCarregando) {
+    return <Loading />;
+  }
+
+  return (
+    <AppRoutes />
+  );
+}
+
+export default App;

frontend/src/app/App.tsx

@@ -0,0 +1,11 @@
+import { AuthProvider } from "@/domains/auth/application/AuthContext";
+import type { ReactNode } from "react";
+import { BrowserRouter } from "react-router-dom";
+
+export function AppProviders({ children }: { children: ReactNode }) {
+  return (
+    <BrowserRouter>
+      <AuthProvider>{children}</AuthProvider>
+    </BrowserRouter>
+  );
+}

frontend/src/app/AppProviders.tsx

@@ -0,0 +1,62 @@
+import { useAuth } from "@/domains/auth/application/AuthContext";
+import { AuthenticatedLayout } from "@/app/AuthenticatedLayout";
+import AuthCallbackPage from "@/domains/auth/presentation/pages/AuthCallbackPage";
+import LoginPage from "@/domains/auth/presentation/pages/LoginPage";
+import RegisterPage from "@/domains/auth/presentation/pages/RegisterPage";
+import JobsPage from "@/domains/jobs/presentation/pages/JobsPage";
+import LandingPage from "@/domains/marketing/presentation/pages/LandingPage";
+import NotFound from "@/app/NotFound";
+import Loading from "@/shared/ui/Loading";
+import { Navigate, Route, Routes } from "react-router-dom";
+
+function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { user, isLoading } = useAuth();
+  if (isLoading) return <Loading />;
+  if (!user) return <Navigate to="/login" replace />;
+  return <>{children}</>;
+}
+
+function PublicRoute({ children }: { children: React.ReactNode }) {
+  const { user, isLoading } = useAuth();
+  if (isLoading) return <Loading />;
+  if (user) return <Navigate to="/home" replace />;
+  return <>{children}</>;
+}
+
+export function AppRoutes() {
+  return (
+    <Routes>
+      <Route path="/" element={<LandingPage />} />
+      <Route
+        element={
+          <ProtectedRoute>
+            <AuthenticatedLayout />
+          </ProtectedRoute>
+        }
+      >
+        <Route path="/home" element={<JobsPage />} />
+        <Route path="/dashboard" element={<NotFound />} />
+        <Route path="/vagas" element={<JobsPage />} />
+        <Route path="/mentoria" element={<NotFound />} />
+      </Route>
+      <Route
+        path="/login"
+        element={
+          <PublicRoute>
+            <LoginPage />
+          </PublicRoute>
+        }
+      />
+      <Route
+        path="/register"
+        element={
+          <PublicRoute>
+            <RegisterPage />
+          </PublicRoute>
+        }
+      />
+      <Route path="/auth/callback" element={<AuthCallbackPage />} />
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+}

frontend/src/app/AppRoutes.tsx

@@ -0,0 +1,77 @@
+import { useAuth } from "@/domains/auth/application/AuthContext";
+import { useTheme } from "@/shared/hooks/useTheme";
+import { ThemeToggle } from "@/shared/ui/theme-toggle";
+import { Bell, Mail } from "lucide-react";
+import { useLocation } from "react-router-dom";
+
+const routeTitles: Array<{ path: string; title: string; exact?: boolean }> = [
+  { path: "/home", title: "Início", exact: true },
+  { path: "/vagas", title: "Vagas" },
+  { path: "/mentoria", title: "Mentoria" },
+];
+
+function getHeaderTitle(pathname: string) {
+  const matchedRoute = routeTitles.find((route) => {
+    if (pathname === route.path) return true;
+    if (route.exact) return false;
+    return pathname.startsWith(`${route.path}/`);
+  });
+
+  return matchedRoute?.title ?? "Início";
+}
+
+function getInitials(value: string) {
+  const normalized = value.trim();
+  if (!normalized) return "U";
+
+  const [first = "", second = ""] = normalized
+    .replace(/@.*/, "")
+    .split(/\s|[._-]/)
+    .filter(Boolean);
+
+  return `${first[0] ?? ""}${second[0] ?? first[1] ?? ""}`.toUpperCase();
+}
+
+export function AuthenticatedHeader() {
+  const { user } = useAuth();
+  const { resolvedTheme, toggleTheme } = useTheme();
+  const location = useLocation();
+
+  const displayName =
+    user?.name || user?.displayName || user?.email || "Usuário";
+  const title = getHeaderTitle(location.pathname);
+  const initials = getInitials(displayName);
+
+  return (
+    <header className="flex h-[103px] shrink-0 items-center justify-between border-b border-border bg-card px-6 text-card-foreground shadow-[0_8px_18px_rgba(0,0,0,0.04)] dark:shadow-[0_8px_24px_rgba(0,0,0,0.22)] md:px-[43px]">
+      <h1 className="truncate text-[32px] font-bold leading-[1.5] text-foreground">
+        {title}
+      </h1>
+
+      <div className="flex shrink-0 items-center gap-[17px]">
+        <ThemeToggle theme={resolvedTheme} onToggle={toggleTheme} />
+        <button
+          type="button"
+          className="flex size-6 items-center justify-center text-foreground transition-colors hover:text-primary"
+          aria-label="Mensagens"
+        >
+          <Mail className="size-4" strokeWidth={2.4} />
+        </button>
+        <button
+          type="button"
+          className="flex size-6 items-center justify-center text-foreground transition-colors hover:text-primary"
+          aria-label="Notificações"
+        >
+          <Bell className="size-4" strokeWidth={2.4} />
+        </button>
+        <div
+          className="flex size-8 items-center justify-center rounded-full bg-[#8fb3a0] text-base font-semibold leading-6 text-primary dark:bg-primary/30 dark:text-primary-foreground"
+          aria-label={displayName}
+          title={displayName}
+        >
+          {initials}
+        </div>
+      </div>
+    </header>
+  );
+}

frontend/src/app/AuthenticatedHeader.tsx

@@ -0,0 +1,19 @@
+import { AuthenticatedHeader } from "@/app/AuthenticatedHeader";
+import { AuthenticatedSidebar } from "@/app/AuthenticatedSidebar";
+import { Outlet } from "react-router-dom";
+
+export function AuthenticatedLayout() {
+  return (
+    <div className="flex h-screen overflow-hidden bg-background text-foreground">
+      <AuthenticatedSidebar />
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <AuthenticatedHeader />
+
+        <main className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden bg-background">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}