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/components/Header.tsx

@@ -4,6 +4,7 @@ import { useRouter } from "next/navigation";
 import { useAuth } from "../auth-context";
 import { sharedStyles } from "../styles/shared";
 import constants from "../../../shared/constants.json";
+import { LanguageSelector } from "./LanguageSelector";
 
 const { ADMIN, REGULAR } = constants.roles;
 
@@ -80,6 +81,7 @@ export function Header({ currentPage }: HeaderProps) {
         ))}
       </div>
       <div style={sharedStyles.userInfo}>
+        <LanguageSelector />
         <span style={sharedStyles.userEmail}>{user.email}</span>
         <button onClick={handleLogout} style={sharedStyles.logoutBtn}>
           Sign out

frontend/app/components/LanguageSelector.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { useLanguage, type Locale } from "../hooks/useLanguage";
+import { sharedStyles } from "../styles/shared";
+
+const LANGUAGES: Array<{ code: Locale; name: string; flag: string }> = [
+  { code: "es", name: "Español", flag: "🇪🇸" },
+  { code: "en", name: "English", flag: "🇬🇧" },
+  { code: "ca", name: "Català", flag: "🇪🇸" },
+];
+
+export function LanguageSelector() {
+  const { locale, setLocale } = useLanguage();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const currentLanguage = LANGUAGES.find((lang) => lang.code === locale);
+
+  return (
+    <div ref={dropdownRef} style={{ position: "relative" }}>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        style={{
+          ...sharedStyles.logoutBtn,
+          marginRight: "0.75rem",
+          display: "flex",
+          alignItems: "center",
+          gap: "0.5rem",
+        }}
+      >
+        <span>{currentLanguage?.flag}</span>
+        <span>{currentLanguage?.name}</span>
+      </button>
+
+      {isOpen && (
+        <div
+          style={{
+            position: "absolute",
+            top: "100%",
+            right: 0,
+            marginTop: "0.5rem",
+            backgroundColor: "white",
+            border: "1px solid #e5e7eb",
+            borderRadius: "0.5rem",
+            boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+            zIndex: 1000,
+            minWidth: "150px",
+          }}
+        >
+          {LANGUAGES.map((lang) => (
+            <button
+              key={lang.code}
+              onClick={() => {
+                setLocale(lang.code);
+                setIsOpen(false);
+              }}
+              style={{
+                width: "100%",
+                padding: "0.75rem 1rem",
+                textAlign: "left",
+                border: "none",
+                backgroundColor: locale === lang.code ? "#f3f4f6" : "transparent",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                fontSize: "0.875rem",
+              }}
+              onMouseEnter={(e) => {
+                if (locale !== lang.code) {
+                  e.currentTarget.style.backgroundColor = "#f9fafb";
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (locale !== lang.code) {
+                  e.currentTarget.style.backgroundColor = "transparent";
+                }
+              }}
+            >
+              <span>{lang.flag}</span>
+              <span>{lang.name}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}