Phase 4: Translate Shared Components - common, navigation, status labels

- Translate LoadingState and EmptyState components (common namespace)
- Translate Header navigation labels (navigation namespace)
- Translate StatusBadge trade status labels (exchange namespace)
- Create navigation.json translation files for es, en, ca
- Create exchange.json translation files for status/direction/transfer labels
- Update IntlProvider to load navigation and exchange namespaces
- Update frontend tests to expect Spanish translations (default language)
- Configure Playwright to use English language for e2e tests via storageState
- Fix test expectations to match translated strings

All frontend and e2e tests passing.

frontend/app/components/Header.tsx

@@ -5,6 +5,7 @@ import { useAuth } from "../auth-context";
 import { sharedStyles } from "../styles/shared";
 import constants from "../../../shared/constants.json";
 import { LanguageSelector } from "./LanguageSelector";
+import { useTranslation } from "../hooks/useTranslation";
 
 const { ADMIN, REGULAR } = constants.roles;
 
@@ -24,29 +25,35 @@ interface HeaderProps {
 
 interface NavItem {
   id: PageId;
-  label: string;
+  labelKey: string;
   href: string;
   regularOnly?: boolean;
   adminOnly?: boolean;
 }
 
 const REGULAR_NAV_ITEMS: NavItem[] = [
-  { id: "exchange", label: "Exchange", href: "/exchange", regularOnly: true },
-  { id: "trades", label: "My Trades", href: "/trades", regularOnly: true },
-  { id: "invites", label: "My Invites", href: "/invites", regularOnly: true },
-  { id: "profile", label: "My Profile", href: "/profile", regularOnly: true },
+  { id: "exchange", labelKey: "exchange", href: "/exchange", regularOnly: true },
+  { id: "trades", labelKey: "myTrades", href: "/trades", regularOnly: true },
+  { id: "invites", labelKey: "myInvites", href: "/invites", regularOnly: true },
+  { id: "profile", labelKey: "myProfile", href: "/profile", regularOnly: true },
 ];
 
 const ADMIN_NAV_ITEMS: NavItem[] = [
-  { id: "admin-trades", label: "Trades", href: "/admin/trades", adminOnly: true },
-  { id: "admin-availability", label: "Availability", href: "/admin/availability", adminOnly: true },
-  { id: "admin-invites", label: "Invites", href: "/admin/invites", adminOnly: true },
-  { id: "admin-price-history", label: "Prices", href: "/admin/price-history", adminOnly: true },
+  { id: "admin-trades", labelKey: "trades", href: "/admin/trades", adminOnly: true },
+  {
+    id: "admin-availability",
+    labelKey: "availability",
+    href: "/admin/availability",
+    adminOnly: true,
+  },
+  { id: "admin-invites", labelKey: "invites", href: "/admin/invites", adminOnly: true },
+  { id: "admin-price-history", labelKey: "prices", href: "/admin/price-history", adminOnly: true },
 ];
 
 export function Header({ currentPage }: HeaderProps) {
   const { user, logout, hasRole } = useAuth();
   const router = useRouter();
+  const t = useTranslation("navigation");
   const isRegularUser = hasRole(REGULAR);
   const isAdminUser = hasRole(ADMIN);
 
@@ -71,10 +78,10 @@ export function Header({ currentPage }: HeaderProps) {
           <span key={item.id}>
             {index > 0 && <span style={sharedStyles.navDivider}>•</span>}
             {item.id === currentPage ? (
-              <span style={sharedStyles.navCurrent}>{item.label}</span>
+              <span style={sharedStyles.navCurrent}>{t(item.labelKey)}</span>
             ) : (
               <a href={item.href} style={sharedStyles.navLink}>
-                {item.label}
+                {t(item.labelKey)}
               </a>
             )}
           </span>
@@ -84,7 +91,7 @@ export function Header({ currentPage }: HeaderProps) {
         <LanguageSelector />
         <span style={sharedStyles.userEmail}>{user.email}</span>
         <button onClick={handleLogout} style={sharedStyles.logoutBtn}>
-          Sign out
+          {t("signOut")}
         </button>
       </div>
     </div>