Phase 2: Language Context & Selector - Add language dropdown to Header and auth pages

- Create LanguageSelector component with dropdown (shows flag + name)
- Add LanguageSelector to Header (right side, near user email/logout)
- Add LanguageSelector to login, signup, and signup/[code] pages
- Create test-utils.tsx with renderWithProviders helper
- Add vitest.setup.ts to mock localStorage
- Update all test files to use renderWithProviders
- Language selector persists choice in localStorage
- HTML lang attribute updates dynamically based on selected language

All frontend and e2e tests passing.

frontend/app/signup/[code]/page.tsx

@@ -3,6 +3,7 @@
 import { useEffect } from "react";
 import { useRouter, useParams } from "next/navigation";
 import { useAuth } from "../../auth-context";
+import { LanguageSelector } from "../../components/LanguageSelector";
 
 export default function SignupWithCodePage() {
   const params = useParams();
@@ -36,6 +37,9 @@ export default function SignupWithCodePage() {
         fontFamily: "'DM Sans', system-ui, sans-serif",
       }}
     >
+      <div style={{ position: "absolute", top: "1rem", right: "1rem" }}>
+        <LanguageSelector />
+      </div>
       Redirecting...
     </main>
   );

frontend/app/signup/page.test.tsx

@@ -1,6 +1,7 @@
-import { render, screen, cleanup } from "@testing-library/react";
+import { screen, cleanup } from "@testing-library/react";
 import { expect, test, vi, beforeEach, afterEach } from "vitest";
 import SignupPage from "./page";
+import { renderWithProviders } from "../test-utils";
 
 const mockPush = vi.fn();
 vi.mock("next/navigation", () => ({
@@ -8,30 +9,32 @@ vi.mock("next/navigation", () => ({
   useSearchParams: () => ({ get: () => null }),
 }));
 
+const mockRegister = vi.fn();
 vi.mock("../auth-context", () => ({
-  useAuth: () => ({ user: null, register: vi.fn() }),
+  useAuth: () => ({ user: null, register: mockRegister }),
+  AuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
 }));
 
 beforeEach(() => vi.clearAllMocks());
 afterEach(() => cleanup());
 
 test("renders signup form with title", () => {
-  render(<SignupPage />);
+  renderWithProviders(<SignupPage />);
   // Step 1 shows "Join with Invite" title (invite code entry)
   expect(screen.getByRole("heading", { name: "Join with Invite" })).toBeDefined();
 });
 
 test("renders invite code input", () => {
-  render(<SignupPage />);
+  renderWithProviders(<SignupPage />);
   expect(screen.getByLabelText("Invite Code")).toBeDefined();
 });
 
 test("renders continue button", () => {
-  render(<SignupPage />);
+  renderWithProviders(<SignupPage />);
   expect(screen.getByRole("button", { name: "Continue" })).toBeDefined();
 });
 
 test("renders link to login", () => {
-  render(<SignupPage />);
+  renderWithProviders(<SignupPage />);
   expect(screen.getByText("Sign in")).toBeDefined();
 });

frontend/app/signup/page.tsx

@@ -5,6 +5,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { useAuth } from "../auth-context";
 import { invitesApi } from "../api";
 import { authFormStyles as styles } from "../styles/auth-form";
+import { LanguageSelector } from "../components/LanguageSelector";
 
 function SignupContent() {
   const searchParams = useSearchParams();
@@ -107,6 +108,9 @@ function SignupContent() {
   if (isCheckingInitialCode) {
     return (
       <main style={styles.main}>
+        <div style={{ position: "absolute", top: "1rem", right: "1rem" }}>
+          <LanguageSelector />
+        </div>
         <div style={styles.container}>
           <div style={styles.card}>
             <div style={{ textAlign: "center", color: "rgba(255,255,255,0.6)" }}>
@@ -122,6 +126,9 @@ function SignupContent() {
   if (!inviteValid) {
     return (
       <main style={styles.main}>
+        <div style={{ position: "absolute", top: "1rem", right: "1rem" }}>
+          <LanguageSelector />
+        </div>
         <div style={styles.container}>
           <div style={styles.card}>
             <div style={styles.header}>
@@ -189,6 +196,9 @@ function SignupContent() {
   // Step 2: Enter email and password
   return (
     <main style={styles.main}>
+      <div style={{ position: "absolute", top: "1rem", right: "1rem" }}>
+        <LanguageSelector />
+      </div>
       <div style={styles.container}>
         <div style={styles.card}>
           <div style={styles.header}>